/* ==================================================================
 * birthday.be, stijl van de site (boilerplate van Webatvantage)
 * Pas eerst de tokens hieronder aan: kleuren, lettertypes, afronding.
 * Daarmee krijgt de hele site de huisstijl van de klant.
 * ================================================================== */
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(/fonts/dm-sans-latin-wght.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/caveat-latin-600.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/fraunces-latin.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(/fonts/fraunces-latin-italic.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/bricolage-latin.woff2) format("woff2")}
@font-face{font-family:"Righteous";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/righteous-latin.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/montserrat-latin-wght.woff2) format("woff2")}

/* ---------- Huisstijl van de klant: pas deze tokens aan ---------- */
:root{
  --brand:#0B214A;        /* donkere blokken: hoofding, call to action (navy van het logo) */
  --brand-2:#A394FF;      /* tweede kleur: lila */
  --accent:#0B214A;       /* knoppen */
  --accent-d:#1B3A78;     /* knoppen bij hover, accent als tekst */
  --mark:#FFC746;         /* markeerstift: geel van het kaarsje */
  --coral:#FF6B70;--lilac:#A394FF;--yellow:#FFC746;--navy:#0B214A;--cream:#FFFCF5;
  --bg:#FFFCF5;--sunk:#F6F0E2;--surface:#FFFFFF;
  --ink:#0B214A;--ink-2:#3A4766;--ink-3:#6B7590;
  --line:rgba(11,33,74,.14);--line-strong:rgba(11,33,74,.35);
  --radius:14px;          /* kaarten en velden */
  --radius-img:10px;      /* foto's en video */
  --shadow:0 18px 48px rgba(11,33,74,.08),0 6px 16px rgba(11,33,74,.04);
  --font:"DM Sans",-apple-system,"Segoe UI","Helvetica Neue",sans-serif;
  --font-head:"Montserrat","DM Sans",Arial,sans-serif;  /* titels */
  --wrap:1240px;          /* breedte van de inhoud */
  /* namen die de widgets van Mendeleev gebruiken */
  --hero:var(--brand);
  --gold:var(--brand-2);--gold-d:#6E5BD9;--gold-text:#5B47C9;--gold-soft:var(--mark);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
/* geen weduwen: nooit één of twee woordjes alleen op de laatste regel */
p,li,dd,dt,figcaption,blockquote,small,label,summary{text-wrap:pretty}
a{color:inherit}
img{max-width:100%;height:auto}
/* lange Nederlandse woorden in titels afbreken in plaats van de pagina te verbreden */
h1,h2,h3{hyphens:auto}
@media (max-width:600px){h1,h2,h3{overflow-wrap:break-word}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 14px;border-radius:10px;background:#fff;color:var(--ink)}
.skip:focus{left:8px}
/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:0;font:700 16px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform 160ms,background-color 160ms}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--accent);color:#fff}
.btn-gold:hover{background:var(--accent-d)}
.ft-ghost{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-strong);font-weight:700;font-size:16px;text-decoration:none;color:var(--ink);transition:box-shadow 160ms,background-color 160ms}
.ft-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ft-arrow{display:inline-flex;transition:translate 300ms}
.ft-ghost:hover .ft-arrow{translate:3px 0}
.ft-ball{display:none}
/* kop en menu */
.top{position:absolute;inset:0 0 auto;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff;text-decoration:none}
.logo img{display:block;height:44px;width:auto}
.top-r{display:flex;align-items:center;gap:4px;margin-left:auto;padding:5px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.nav a{display:inline-flex;min-height:40px;align-items:center;padding:0 16px;border-radius:999px;color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;transition:background-color 160ms,color 160ms}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a[aria-current]{background:#fff;color:var(--ink)}
.menu-t{display:none}
/* uitklapmenu: een rubriek in de navigatie met haar pagina's */
.nav .has-sub{position:relative}
.nav .chev{margin-left:5px;opacity:.7;transition:transform 160ms}
.nav .has-sub:hover .chev,.nav .has-sub:focus-within .chev{transform:rotate(180deg)}
.nav a.is-active{background:rgba(255,255,255,.1);color:#fff}
.top-r > .nav .sub{position:absolute;left:0;top:100%;z-index:30;min-width:240px;margin:0;padding:8px;list-style:none;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 160ms,transform 160ms,visibility 160ms}
.top-r > .nav .sub::before{content:"";position:absolute;inset:-10px 0 auto;height:10px}
.top-r > .nav .has-sub:hover .sub,.top-r > .nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.top-r > .nav .sub a{display:flex;width:100%;min-height:42px;border-radius:calc(var(--radius) - 4px);color:var(--ink)}
.top-r > .nav .sub a:hover,.top-r > .nav .sub a[aria-current]{background:var(--sunk);color:var(--ink)}
.menu-t .sub{margin:0 0 4px;padding:0 0 0 14px;list-style:none}
.menu-t .sub a{min-height:38px;font-size:14.5px;font-weight:500}
.langs{display:flex;gap:2px;padding:0 4px;border-left:1px solid rgba(255,255,255,.14);margin-left:4px}
.langs a{display:inline-flex;align-items:center;min-height:34px;padding:0 9px;border-radius:999px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.06em}
.langs a:hover{color:#fff}
.langs a[aria-current]{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:1100px){.nav a{padding:0 11px;font-size:14.5px}}
@media (max-width:900px){
  .menu-t{display:block;position:relative}
  .menu-t summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer}
  .menu-t summary::-webkit-details-marker{display:none}
  .menu-t summary span,.menu-t summary span::before,.menu-t summary span::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative}
  .menu-t summary span::before,.menu-t summary span::after{content:"";position:absolute;left:0}
  .menu-t summary span::before{top:-6px}.menu-t summary span::after{top:6px}
  .menu-t .nav{position:absolute;right:-6px;top:54px;flex-direction:column;min-width:220px;padding:10px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
  .menu-t .nav a{color:var(--ink);min-height:44px}
  .menu-t .nav a:hover,.menu-t .nav a[aria-current]{background:var(--sunk);color:var(--ink)}
  .top-r > .nav{display:none}
}
/* hoofding */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:#fff;padding:150px 0 clamp(56px,8vw,100px)}
.hero .wrap{position:relative;z-index:1}
.hero .crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:0 0 18px;font-size:14px;color:rgba(255,255,255,.7)}
.hero .crumbs a{color:#fff;text-decoration:none}
.hero h1{margin:0;max-width:min(100%,760px);font-size:clamp(38px,6vw,72px);line-height:1.02;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.hero p{margin:22px 0 0;max-width:100%;text-wrap:balance;font-size:clamp(18px,1.8vw,21px);line-height:1.6;color:rgba(255,255,255,.82)}
.pg-photo{position:absolute;z-index:0;top:0;bottom:0;right:0;width:min(60vw,980px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
.pg-photo img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85}
@media (max-width:760px){.pg-photo{width:100%;opacity:.35}}
/* startpagina (basis, het design per site volgt later) */
.h-eb{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--hero);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.h-head{max-width:760px;margin:0 auto 36px;text-align:center}
.h-head p{color:var(--ink-2)}
.h-link{font-weight:800;color:var(--accent-d);text-decoration:none}
.h-link::after{content:" →"}
.hh{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,820px);display:flex;align-items:flex-end;background:var(--hero);color:#fff;padding:150px 0 64px}
.hh-photo{position:absolute;inset:0;z-index:-2}
.hh-photo img{width:100%;height:100%;object-fit:cover}
.hh.has-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.6))}
.hh-in{width:100%}
.hh-t{margin:0;max-width:900px;font-size:clamp(40px,6.4vw,84px);line-height:1;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.hh-hl{color:var(--accent)}
.hh-sub{max-width:620px;font-size:19px;color:rgba(255,255,255,.88)}
.hh-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-ghost-light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.hb{padding:clamp(56px,8vw,110px) 0}
.hb-dark{background:var(--hero);color:#fff}
.hb-dark .h-eb{background:var(--accent)}
.hb-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.hb-t{margin:0}
.hb-dark .h-link{color:#fff}
.hi-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:end}
.hi-t{margin:0}
.hi-txt{color:var(--ink-2)}
.hi-img{margin-top:48px}
.hi-img img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-img);display:block}
.hd-top{display:flex;align-items:flex-end;gap:32px;margin-bottom:32px}
.hd-t{margin:0;max-width:640px}
.hd-small{width:min(220px,30%)}
.hd-small img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);display:block}
.hd-row{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hd-big img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);display:block}
.hd-txt{color:var(--ink-2)}
.hu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.hu-item{padding:26px;border-radius:var(--radius-img);background:var(--surface);box-shadow:var(--shadow)}
.hu-item h3{margin:0 0 6px;font-size:19px}
.hu-item p{margin:0;color:var(--ink-2)}
.hf-dark{background:var(--hero);color:#fff;padding:clamp(56px,8vw,110px) 0}
.hf-dark .h-head p{color:rgba(255,255,255,.8)}
.hf-list,.hn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.hf-card,.hn-card{display:flex;flex-direction:column;gap:10px}
.hf-img img,.hn-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img);display:block}
.hn-img img{aspect-ratio:3/2}
.hf-card h3,.hn-card h3{margin:4px 0 0;font-size:20px}
.hf-card a,.hn-card a{color:inherit;text-decoration:none}
.hf-card p,.hn-card p{margin:0;color:var(--ink-2)}
.hf-dark .hf-card p{color:rgba(255,255,255,.8)}
.hn-head{text-align:left;margin-left:0}
.hn-card footer{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3)}
.hn-tag{padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--accent-d);font-weight:800}
.hn-more{text-align:center;margin-top:28px}
@media (max-width:860px){.hb-in,.hi-grid,.hd-row{grid-template-columns:minmax(0,1fr)}.hd-top{flex-direction:column;align-items:flex-start}.hd-small{width:60%}}
/* foto's met verhaal en video (basis, het design per site volgt later) */
.wg-story-head{max-width:820px;margin:0 auto 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.wg-story-eb{display:inline-flex;padding:8px 18px;border-radius:999px;background:var(--hero);color:#fff;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.wg-story-txt{color:var(--ink-2)}
.wg-story-row{display:flex;justify-content:center;gap:12px}
.wg-story-ph{flex:1;min-width:0;aspect-ratio:4/5}
.wg-story-ph .wg-ph,.wg-story-ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
@media (max-width:760px){.wg-story-row{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}.wg-story-ph{flex:0 0 70%;scroll-snap-align:center}}
.wg-video-h{margin:0 0 20px}
.wg-video-play,.wg-video-el{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-img);overflow:hidden;background:#000;padding:0;cursor:pointer}
.wg-video-play img{width:100%;height:100%;object-fit:cover;display:block}
.wg-video-ic{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.wg-video-ic::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink)}
.wg-video-cap{margin-top:10px;color:var(--ink-2);font-size:15px}
/* faq */
.faq-wrap{max-width:860px;margin:0 auto;padding:clamp(48px,7vw,96px) 20px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:box-shadow 200ms}
.faq[open]{box-shadow:var(--shadow)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-weight:700;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq-ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold-soft);position:relative}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;border-radius:2px;background:var(--accent-d);transition:rotate 250ms}
.faq-ic::after{rotate:90deg}
.faq[open] .faq-ic::after{rotate:0deg}
.faq-a{padding:0 22px 20px;color:var(--ink-2)}
.faq-a > :first-child{margin-top:0}.faq-a a{color:var(--accent-d)}
.faq-cats{position:sticky;top:12px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:8px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.faq-cats a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;transition:background-color 200ms}
.faq-cats a:hover{background:var(--gold-soft)}
.faq-cats span{font-size:12px;color:var(--ink-2)}
.faq-group{scroll-margin-top:90px}
.faq-group + .faq-group{margin-top:48px}
.faq-gt{margin:0 0 6px;font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.03em}
.faq-gi{margin:0 0 18px;color:var(--ink-2)}
.faq-gt + .faq-list{margin-top:16px}
@media (max-width:640px){.faq-cats{position:static;border-radius:var(--radius-img)}}
.faq-more{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px;border-radius:var(--radius);background:var(--hero);color:#fff}
.faq-more h2{margin:0 0 6px;font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.03em}
.faq-more p{margin:0;color:rgba(255,255,255,.8)}
.faq-more .wg-rich{font-size:17px;color:rgba(255,255,255,.85)}.faq-more .wg-rich a{color:#fff}
/* medewerkers */
.tm-wrap,.jb-wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vw,96px) 20px}
.tm-group{scroll-margin-top:90px}
.tm-group + .tm-group{margin-top:56px}
.tm-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px 20px}
.tm-card{display:flex;flex-direction:column;gap:4px}
.tm-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img);margin-bottom:10px;background:var(--sunk)}
.tm-ini{font-size:40px;font-weight:800;color:var(--accent-d);letter-spacing:-.02em}
.tm-card h3{margin:0;font-size:19px;line-height:1.3}
.tm-role{margin:0;color:var(--ink-2);font-size:15px}
.tm-contact{margin:6px 0 0;display:flex;flex-direction:column;gap:2px;font-size:15px}
.tm-contact a{color:var(--accent-d);text-decoration:none;overflow-wrap:anywhere}
.tm-contact a:hover{text-decoration:underline}
/* vacatures */
.jb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}
.jb-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:box-shadow 200ms,translate 200ms}
.jb-card:hover{box-shadow:var(--shadow);translate:0 -2px}
.jb-card h3{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.jb-card h3 a{color:inherit;text-decoration:none}
.jb-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.jb-card p{margin:0;color:var(--ink-2)}
.jb-more{margin-top:auto;font-weight:700;color:var(--accent-d)}
.jb-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.jb-meta span{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--gold-soft);color:var(--accent-d);font-size:13px;font-weight:700}
.jb-meta-hero{margin-top:16px}
.hero .jb-meta span{background:rgba(255,255,255,.14);color:#fff}
/* agenda */
.ev-wrap,.cs-wrap,.pt-wrap,.dl-wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vw,96px) 20px}
.ev-list{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.ev-card{position:relative;display:flex;gap:20px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:box-shadow 200ms,translate 200ms}
.ev-card:hover{box-shadow:var(--shadow);translate:0 -2px}
.ev-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:var(--radius-img);background:var(--gold-soft);color:var(--accent-d);line-height:1}
.ev-date b{font-size:26px}
.ev-date span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.ev-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-body h3{margin:0;font-size:21px;line-height:1.25}
.ev-body h3 a{color:inherit;text-decoration:none}
.ev-body h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ev-body p{margin:0;color:var(--ink-2)}
.ev-meta{font-weight:700;color:var(--accent-d) !important;font-size:15px}
.hero .ev-meta{color:#fff !important;opacity:.9;margin-top:14px}
.ev-detail,.cs-detail{max-width:860px;margin:0 auto;padding:clamp(40px,6vw,80px) 20px}
.ev-img,.cs-hero-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin-bottom:28px}
.ev-intro,.cs-intro{font-size:21px;line-height:1.5;margin:0 0 24px}
.ev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 28px}
.ev-facts div{padding:16px 18px;border-radius:var(--radius-img);background:var(--sunk)}
.ev-facts dt{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ev-facts dd{margin:4px 0 0;font-weight:700}
.ev-actions{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ev-none{color:var(--ink-2)}
.wg-more{margin:20px 0 0}
.wg-more a{font-weight:700;color:var(--accent-d)}
/* referenties */
.cs-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cs-filters button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;font:700 15px/1 var(--font);color:var(--ink);cursor:pointer}
.cs-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.cs-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:box-shadow 200ms,translate 200ms}
.cs-card[hidden]{display:none}
.cs-card:hover{box-shadow:var(--shadow);translate:0 -2px}
.cs-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cs-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.cs-body h3{margin:0;font-size:21px;line-height:1.25}
.cs-body h3 a{color:inherit;text-decoration:none}
.cs-body h3 a::after{content:"";position:absolute;inset:0}
.cs-body p{margin:0;color:var(--ink-2)}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cs-meta span{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--gold-soft);color:var(--accent-d);font-size:13px;font-weight:700}
.hero .cs-meta{margin-top:14px}
.hero .cs-meta span{background:rgba(255,255,255,.14);color:#fff}
.cs-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:28px 0}
.cs-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img)}
/* partners */
.pt-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pt-card{display:flex;flex-direction:column;gap:8px}
.pt-card a{display:block;text-decoration:none;color:inherit}
.pt-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:18px;border-radius:var(--radius-img);background:var(--sunk);transition:box-shadow 200ms}
.pt-card a:hover .pt-logo{box-shadow:var(--shadow)}
.pt-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pt-logo b{font-size:18px;text-align:center}
.pt-card p{margin:0;font-size:15px;color:var(--ink-2)}
.pt-row{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* downloads */
.dl-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.dl-row{position:relative;display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line)}
.dl-ext{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:36px;padding:0 8px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}
.dl-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-txt a{font-weight:700;font-size:18px;text-decoration:none;color:inherit}
.dl-txt a::after{content:"";position:absolute;inset:0}
.dl-row:hover .dl-txt a{color:var(--accent-d)}
.dl-txt small{color:var(--ink-2);font-size:15px}
.dl-meta{flex:none;color:var(--ink-3);font-size:14px}
@media (max-width:640px){.dl-meta{display:none}.ev-card{padding:16px}.ev-date{width:56px;height:56px}}
.jb-detail{max-width:860px;margin:0 auto;padding:clamp(48px,7vw,96px) 20px}
.jb-intro{margin:0 0 32px;font-size:clamp(19px,1.8vw,22px);line-height:1.55;color:var(--ink)}
.jb-block + .jb-block{margin-top:36px}
.jb-block h2{margin:0 0 12px;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em}
.jb-back{margin:28px 0 0}
.jb-back a{color:var(--accent-d);font-weight:700;text-decoration:none}
/* juridisch */
.legal{max-width:780px;margin:0 auto;padding:clamp(48px,7vw,96px) 20px;color:var(--ink-2)}
.legal h2{margin:44px 0 12px;font-size:clamp(24px,2.6vw,30px);line-height:1.15;color:var(--ink);letter-spacing:-.03em}
.legal h3{margin:24px 0 6px;font-size:19px;color:var(--ink)}
.legal a{color:var(--accent-d);font-weight:600}
.legal address{font-style:normal;padding:16px 20px;border-radius:var(--radius);background:var(--sunk)}
.legal-sum{padding:24px 26px;border-radius:var(--radius-img);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.legal-sum h2{margin-top:0}
.legal-date{margin-top:28px;font-size:14px;color:var(--ink-3)}
/* call to action: de zachte gloed */
.aurora{position:absolute;inset:-35%;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%}
.b1{width:60%;aspect-ratio:1;left:0;top:10%;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);opacity:.5}
.b2{width:70%;aspect-ratio:1;right:0;top:20%;background:radial-gradient(circle closest-side,rgba(255,255,255,.18),transparent)}
/* footer */
.ft{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line);background:var(--sunk)}
.ft .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding-top:56px;padding-bottom:40px}
.ft h2{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}
.ft p{margin:0 0 14px;color:var(--ink-2)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ft-addr{font-style:normal;margin:0 0 12px;color:var(--ink-2)}.ft-addr a{color:inherit;text-decoration:none}
.ft .ft-tel{margin:0 0 16px;color:var(--ink-2)}.ft-tel a{color:inherit}
.ft .ft-social{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:16px}.ft-social a{color:var(--ink-2);font-weight:600}
.ft ul a{text-decoration:none;color:var(--ink-2);font-weight:600}
.ft ul a:hover{color:var(--accent-d)}
.ft-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px 28px;max-width:var(--wrap);margin:0 auto;font-size:14px;color:var(--ink-3)}
.ft-bar a{color:inherit}
@media (max-width:760px){.ft .wrap{grid-template-columns:1fr}}
/* Paginabouwer: widgets */
.wg-page{position:relative;overflow:hidden;padding:clamp(16px,3vw,40px) 0 clamp(48px,7vw,96px)}
.wg{position:relative;isolation:isolate;padding:clamp(44px,6.5vw,96px) 0}
.wg-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wg-narrow{max-width:860px}
.tone-sand{margin:clamp(8px,1.5vw,20px) clamp(0px,2vw,28px);border-radius:var(--radius);background:var(--sunk);overflow:hidden}
.wg-h{margin:0 0 20px;font-size:clamp(30px,4vw,52px);line-height:1.04;font-weight:800;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.wg-text .wg-h::before{content:"";display:block;width:46px;height:5px;margin-bottom:20px;border-radius:3px;background:var(--gold)}
.wg-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.wg-eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--gold)}
.wg-rich{font-size:clamp(17px,1.45vw,19px);line-height:1.72;color:var(--ink-2)}
.wg-rich > :first-child{margin-top:0}.wg-rich > :last-child{margin-bottom:0}
.wg-upd{padding:0 0 28px}.wg-upd p{margin:0;font-size:14px;color:var(--ink-3)}
.wg-rich p{margin:0 0 16px}
.wg-rich h3{margin:30px 0 8px;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wg-rich ul,.wg-rich ol{margin:0 0 16px;padding-left:22px}
.wg-rich li{margin:6px 0}
.wg-rich li::marker{color:var(--gold)}
.wg-rich strong{color:var(--ink)}
.wg-rich a{color:var(--gold-text);font-weight:600;text-underline-offset:3px}
/* foto's */
.wg-media{position:relative;margin:0}
.wg-ph{position:relative;z-index:1;display:block;overflow:hidden;isolation:isolate;transform:translateZ(0);border-radius:var(--radius-img);background:var(--sunk);box-shadow:var(--shadow)}
.wg-ph img{display:block;width:100%;height:auto;transition:scale 1100ms cubic-bezier(.16,1,.3,1)}
.wg-media:hover .wg-ph img{scale:1.045}
.wg-chip{position:absolute;z-index:2;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:rgba(14,14,14,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FFFDF6;font-size:14px;font-weight:700;line-height:1.3}
/* afbeelding met tekst */
.wg-it-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,8vw,128px);align-items:center}
.wg-it-rev .wg-frame{order:2}
.wg-frame::before{content:"";position:absolute;inset:0;z-index:0;translate:24px 24px;border-radius:var(--radius-img);background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px rgba(14,14,14,.12)}
.wg-it-rev .wg-frame::before{translate:-24px 24px}
.wg-frame::after{content:"";position:absolute;z-index:0;left:-28px;top:-28px;width:120px;height:120px;background:radial-gradient(circle,var(--gold) 1.6px,transparent 2.2px) 0 0/16px 16px;opacity:.55}
.wg-it-rev .wg-frame::after{left:auto;right:-28px}
.wg-arc{position:absolute;z-index:0;left:calc(50% - 110px);top:4%;width:220px;fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 11;opacity:.8;pointer-events:none}
.wg-it-rev .wg-arc{scale:-1 1}
.wg-it-txt{max-width:580px}
.wg-cta-row{margin:28px 0 0}
/* grote afbeelding */
.wg-img-narrow .wg-in{max-width:880px}
.wg-par img{scale:1.12}
.wg-par{clip-path:inset(0 round var(--radius-img));box-shadow:none}
.wg-img .wg-media{border-radius:var(--radius-img);box-shadow:var(--shadow)}
.wg-media:hover .wg-par img{scale:1.16}
/* galerij */
.wg-gal-h{margin-bottom:clamp(24px,3vw,40px)}
.wg-gal-grid{display:grid;gap:clamp(16px,2.4vw,28px);align-items:start}
.wg-gal-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wg-gal-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wg-bento{grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(14px,2vw,24px);height:clamp(420px,48vw,680px)}
.wg-bento .wg-media{height:100%;min-height:0}
.wg-bento .wg-media:first-child{grid-row:1 / span 2}
.wg-bento .wg-ph{height:100%}
.wg-bento img{width:100%;height:100%;object-fit:cover}
.wg-bento .wg-media:nth-child(2) .wg-ph{border-top-right-radius:var(--radius-img)}
.wg-bento .wg-media:nth-child(3) .wg-ph{border-bottom-right-radius:var(--radius-img)}
.wg-bento .wg-chip{transition:translate 400ms cubic-bezier(.16,1,.3,1),background-color 300ms}
.wg-bento .wg-media:hover .wg-chip{translate:0 -4px;background:var(--gold-d,#0E7A57)}
.wg-gal-2 .wg-media:nth-child(2){margin-top:clamp(0px,4vw,56px)}
/* gecentreerde titel */
.wg-hl{text-align:center;padding:clamp(64px,10vw,150px) 0}
.wg-hl-in{max-width:1180px}
.wg-hl-t{margin:0 auto;max-width:26ch;font-size:clamp(36px,5.4vw,80px);line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--ink);text-wrap:balance}
.wg-gold{color:var(--gold-text);background:linear-gradient(var(--gold-soft),var(--gold-soft)) 0 90%/100% .34em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wg-hl-s{margin:26px auto 0;max-width:58ch;font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--ink-2)}
.wg-hl-ball{position:absolute;z-index:0;left:50%;top:50%;width:clamp(280px,42vw,560px);aspect-ratio:1;translate:-50% -50%;opacity:.08;pointer-events:none}
.wg-hl-ball svg{display:block;width:100%;height:100%}
/* call to action */
.wg-cta-box{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(260px,26vw,360px);padding:clamp(36px,6vw,80px) clamp(28px,6vw,84px);border-radius:var(--radius);background:var(--hero);color:#FFFDF6;box-shadow:0 40px 90px rgba(14,14,14,.28)}
.wg-cta-box .aurora{inset:-35%}
.wg-cta-txt{position:relative;z-index:1;max-width:620px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.wg-cta-txt h2{margin:0;font-size:clamp(30px,4.4vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.wg-cta-txt p{margin:0 0 10px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:rgba(255,253,246,.72)}
.wg-cta-pile{position:absolute;z-index:0;right:0;bottom:0;width:min(46%,560px);height:100%;touch-action:pan-y}
.wg-cta-pile .cb{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.wg-cta-pile .cb svg{display:block;width:100%;height:100%}
.wg-apps{margin:clamp(28px,4.5vw,56px) 0}
/* hoofding */
.pg-hero > :not(.pg-photo){position:relative;z-index:1}
.pg-photo{position:absolute;z-index:0;top:-160px;bottom:0;right:calc(-1 * max(20px, (100vw - 1240px) / 2 + 20px));width:min(64vw,1000px);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 62%)}
.pg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,.35),rgba(14,14,14,.1) 40%,rgba(14,14,14,.55))}
.pg-photo img{display:block;width:100%;height:100%;object-fit:cover;animation:wgKen 30s ease-in-out infinite alternate}
@keyframes wgKen{from{scale:1.02}to{scale:1.1}}
.pg-hero h1,.pg-hero > p{max-width:min(100%,700px)}
@keyframes wgRoll{to{rotate:360deg}}
@keyframes wgOpen{from{scale:.9}to{scale:1}}
@keyframes wgDash{to{stroke-dashoffset:-130}}
@keyframes wgUp{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes wgPar{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes wgLine{from{background-size:0% .34em}to{background-size:100% .34em}}
@keyframes wgSpinScroll{from{rotate:-50deg;scale:.9}to{rotate:70deg;scale:1.06}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .wg-rv{animation:wgUp linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .wg-gal-grid .wg-rv:nth-child(2){animation-range:entry 8% entry 90%}
    .wg-gal-grid .wg-rv:nth-child(3){animation-range:entry 16% entry 100%}
    .wg-par img{animation:wgPar linear both;animation-timeline:view();animation-range:cover}
    .wg-gold{animation:wgLine linear both;animation-timeline:view();animation-range:entry 60% cover 45%}
    .wg-open{animation:wgOpen linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .wg-hl-ball{animation:wgSpinScroll linear both;animation-timeline:view();animation-range:cover}
  }
}
@media (prefers-reduced-motion: reduce){.pg-photo img{animation:none}.wg-ph img{transition:none}}
@media (max-width:900px){.wg-arc{display:none}}
@media (max-width:760px){
  .wg-it-grid,.wg-gal-2,.wg-gal-3{grid-template-columns:1fr}
  .wg-it-rev .wg-frame{order:0}
  .wg-frame::before{translate:14px 14px}.wg-it-rev .wg-frame::before{translate:-14px 14px}
  .wg-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .wg-bento .wg-media:first-child{grid-row:auto;grid-column:1 / span 2}
  .wg-bento img{aspect-ratio:4/3}
  .wg-bento .wg-media:not(:first-child) img{aspect-ratio:1}
  .wg-gal-2 .wg-media:nth-child(2){margin-top:0}
  .pg-photo{top:-120px;width:100%;right:-20px;opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 85%);mask-image:linear-gradient(180deg,#000 20%,transparent 85%)}
      .pg-hero h1,.pg-hero > p{max-width:calc(100% - 40px)}
    .wg-cta-pile{position:absolute;z-index:0;right:0;bottom:0;width:min(46%,560px);height:100%;touch-action:pan-y}
.wg-cta-pile .cb{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.wg-cta-pile .cb svg{display:block;width:100%;height:100%}
  .wg-cta-box{align-items:flex-start}
}
/* ---------- formulieren ---------- */
.wg-form-box{max-width:760px}
.wg-form-text{max-width:100%;margin-bottom:28px}.wg-form-intro{font-size:19px;color:var(--ink-2)}
.wg-form-side .wg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.wg-form-side .wg-form-text{margin:0;position:sticky;top:110px}
@media (max-width:900px){.wg-form-side .wg-in{grid-template-columns:1fr}.wg-form-side .wg-form-text{position:static}}
.mf-hp,.mf-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.mf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mf-full{grid-column:1/-1}
.mf-label{font-weight:700;font-size:15px}
.mf-req{color:var(--accent-d)}
.mf-help{margin:0;font-size:14px;color:var(--ink-3)}
.mf input[type=text],.mf input[type=email],.mf input[type=tel],.mf input[type=number],.mf input[type=date],.mf select,.mf textarea{width:100%;padding:13px 15px;font:16px/1.45 var(--font);color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius);transition:border-color 160ms,box-shadow 160ms}
.mf input:focus,.mf select:focus,.mf textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-soft)}
.mf-choices{display:flex;flex-wrap:wrap;gap:8px 22px}
.mf-choice{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer}
.mf-choice input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex:none}
.mf-consent a{color:var(--accent-d)}
.mf-heading{margin:12px 0 0;font-size:20px}
.mf-field.is-err input,.mf-field.is-err select,.mf-field.is-err textarea{border-color:#B3261E}
.mf-err{margin:0;font-size:14px;font-weight:600;color:#B3261E}
.mf-note{margin:18px 0 0;padding:12px 16px;border-radius:12px;background:#FBE9E7;color:#8C1D18;font-weight:600}
.mf-actions{margin-top:24px}
.mf-submit{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:700 16px/1 var(--font);cursor:pointer;transition:background-color 160ms}
.mf-submit:hover{background:var(--accent-d)}
.mf-submit:disabled{opacity:.6;cursor:wait}
.mf-done{padding:28px;border-radius:var(--radius);background:var(--sunk);outline:0}
.mf-done-h{margin:0 0 8px;font-size:22px}
.mf-done-body p:last-child{margin-bottom:0}
@media (max-width:640px){.mf-grid{grid-template-columns:1fr}}
.nl-priv{margin:14px 0 0}.nl-priv a{color:var(--accent-d)}
/* ---------- blog ---------- */
.bl-wrap{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px)}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.bl-cats a{padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.bl-cats a[aria-current]{background:var(--brand);color:#fff;box-shadow:none}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.bl-card{display:flex;flex-direction:column;gap:8px}
.bl-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.bl-card h2,.bl-card h3{margin:2px 0 0;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.bl-card a{color:inherit;text-decoration:none}
.bl-card p{margin:0;color:var(--ink-2)}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 0;font-size:14px;color:var(--ink-3)}
.bl-tag{padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--accent-d);font-weight:800;text-decoration:none}
.bl-meta-hero{color:rgba(255,255,255,.8)}.bl-meta-hero .bl-tag{background:rgba(255,255,255,.16);color:#fff}
.bl-more{font-weight:700;color:var(--accent-d);font-size:15px}
.bl-pager{display:flex;justify-content:center;gap:6px;margin-top:40px}
.bl-pager a{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line)}
.bl-pager a[aria-current]{background:var(--brand);color:#fff;box-shadow:none}
.bl-top{max-width:900px;padding-top:clamp(28px,4vw,48px)}
.bl-cover{margin:0 0 28px}.bl-cover img{display:block;width:100%;border-radius:var(--radius)}
.bl-intro{font-size:clamp(19px,1.8vw,22px);line-height:1.6;color:var(--ink);margin:0}
.bl-related{border-top:1px solid var(--line)}
.bl-back{margin-top:28px}.bl-back a{color:var(--accent-d);font-weight:700;text-decoration:none}

/* ---------- Titels: Montserrat ---------- */
h1,h2,h3,.wg-h,.hh-t,.hb-t,.hi-t,.hd-t,.wg-hl-t,.wg-cta-txt h2,.faq-gt,.faq-more h2,.legal h2,.jb-block h2,.ft h2{font-family:var(--font-head);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.hero h1{font-size:clamp(38px,5.6vw,76px)}
.hh-t{font-size:clamp(52px,8.4vw,128px)}
.wg-h{font-size:clamp(38px,5vw,68px)}
.wg-hl-t{font-size:clamp(46px,7vw,108px)}
.wg-cta-txt h2{font-size:clamp(38px,5.4vw,74px)}
.hh-hl{color:var(--mark)}
.wg-gold{color:var(--ink)}
.h-eb,.wg-story-eb{background:var(--mark);color:var(--ink)}
.hb-dark .h-eb{background:var(--mark)}
.wg-text .wg-h::before{background:var(--brand-2)}
.wg-frame::before{background:var(--mark);box-shadow:none}
.wg-frame::after{background:radial-gradient(circle,var(--ink) 1.4px,transparent 2px) 0 0/16px 16px;opacity:.25}
.wg-arc{stroke:var(--ink);opacity:.35}
.wg-chip{background:rgba(14,14,14,.82);color:#FFFDF6}
.b1{background:radial-gradient(circle closest-side,color-mix(in srgb,var(--mark) 45%,transparent),transparent);opacity:.35}
.btn-gold{background:var(--accent);color:#FFFDF6}
.ft{background:var(--brand);color:var(--cream);border-top:0;margin-top:0}
.ft p,.ft-addr,.ft .ft-tel,.ft ul a,.ft-social a{color:rgba(255,253,246,.75)}
.ft ul a:hover{color:var(--mark)}
.ft-bar{color:rgba(255,253,246,.55);max-width:var(--wrap)}
.ft-wrap-bar{background:var(--brand)}
/* ---------- Veelgestelde vragen als widget ---------- */
.wg-faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wg-faq-q{border-bottom:1px solid var(--line)}
.wg-faq-q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-weight:700;font-size:19px}
.wg-faq-q summary::-webkit-details-marker{display:none}
.wg-faq-q summary::after{content:"+";flex:none;font:800 30px/1 var(--font-head);transition:rotate 250ms}
.wg-faq-q[open] summary::after{rotate:45deg}
.wg-faq-q .wg-rich{padding:0 0 22px}
.wg-faq .wg-cta-row a,.wg-hl .wg-cta-row a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font-weight:700;text-decoration:none;transition:background-color 160ms,color 160ms}
.wg-faq .wg-cta-row a:hover,.wg-hl .wg-cta-row a:hover{background:var(--ink);color:var(--bg)}
.wg-story-ph .wg-ph img{height:100%;object-fit:cover}
/* knop in een widget */
.wg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--accent);color:#FFFDF6;font-weight:700;font-size:16px;text-decoration:none;transition:background-color 160ms,translate 160ms}
.wg-btn:hover{background:var(--accent-d);translate:0 -1px}

/* ---------- Zoeken (module search) ---------- */
.nav-search{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background-color 160ms}
.nav-search:hover{background:rgba(255,255,255,.24)}
.nav-search[aria-current]{background:#fff;color:var(--ink)}
.srch{margin-top:34px;max-width:780px}
.srch-field{display:flex;align-items:center;gap:12px;background:#FFFDF6;color:var(--ink);border-radius:999px;padding:8px 8px 8px 24px;box-shadow:0 18px 48px rgba(0,0,0,.28);transition:box-shadow 160ms}
.srch-field:focus-within{box-shadow:0 0 0 4px var(--mark),0 18px 48px rgba(0,0,0,.28)}
.srch-ic{display:flex;color:var(--ink-3)}
.srch-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 clamp(17px,2vw,20px)/1.4 var(--font);padding:10px 0}
.srch-field input::placeholder{color:var(--ink-3)}
.srch-field input::-webkit-search-cancel-button{cursor:pointer}
.srch .btn{min-height:48px;padding:0 24px}
.srch-status{margin:16px 0 0;min-height:1.5em;font-size:16px;color:rgba(255,255,255,.82)}
.srch-results{padding:clamp(40px,6vw,72px) 0 clamp(8px,2vw,24px);max-width:900px}
.srch-group{margin:0 0 44px}
.srch-group h2{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:clamp(28px,3.4vw,40px)}
.srch-group h2 span,.srch-card h3 span{font:700 14px/1 var(--font);letter-spacing:0;padding:6px 10px;border-radius:999px;background:var(--mark);color:var(--ink)}
.srch-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.srch-list a{display:block;padding:18px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color 160ms,translate 160ms}
.srch-list a:hover,.srch-list a:focus-visible{border-color:var(--ink);translate:0 -1px}
.srch-list strong{display:block;font-size:19px;line-height:1.35}
.srch-list em{display:block;margin-top:3px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.srch-list span{display:block;margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.srch mark,.srch-results mark{background:var(--mark);color:var(--ink);padding:0 2px;border-radius:3px}
.srch-more{margin-top:14px;padding:11px 20px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:700 15px var(--font);cursor:pointer}
.srch-more:hover{background:var(--ink);color:var(--bg)}
.srch-none p{margin:0;font-size:18px;color:var(--ink-2)}
.srch-none .srch-alt{margin:0 0 10px;font-size:clamp(20px,2.4vw,24px);color:var(--ink)}
.srch-alt a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--mark);text-decoration-thickness:4px;text-underline-offset:4px}
.srch-overview{padding:clamp(48px,7vw,96px) 0}
.srch-out:has(.srch-results:not([hidden])) + .srch-overview{padding-top:clamp(24px,3vw,40px)}
.srch-overview h2{margin:0 0 28px;font-size:clamp(34px,4.6vw,60px)}
.srch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px;align-items:start}
.srch-card{display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.srch-card h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:26px}
.srch-card ul{flex:1;list-style:none;margin:0;padding:0}
.srch-card li a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:16px;line-height:1.4}
.srch-card li:last-child a{border-bottom:0}
.srch-card li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.srch-all{align-self:flex-start;margin-top:14px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.srch-all:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.srch .btn{display:none}.srch-field{padding:6px 18px}}

/* ==================================================================
 * birthday.be
 * ================================================================== */
.logo{display:block;line-height:0}
.logo img{display:block;height:56px;width:auto}
.wg-chip{background:rgba(11,33,74,.86);color:var(--cream)}
@media (max-width:600px){.logo img{height:44px}}

html.bd-lock,html.bd-lock body{overflow:hidden;overscroll-behavior:none}

/* ---------- Binnenkomer (sectie bday_intro) ---------- */
.bd{--bd-ink:#060B1C;display:none;color:var(--cream);-webkit-tap-highlight-color:transparent}
.bd-on .bd{display:block;position:fixed;inset:0;z-index:60;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.bd-room{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,#13295A 0%,var(--navy) 45%,#071430 100%);transition:opacity .9s}
.bd-room::before{content:"";position:absolute;inset:0;background:var(--bd-ink);opacity:.35}
.bd-uit .bd-room,.bd-uit .bd-grain,.bd-uit .bd-date,.bd-uit .bd-skip{opacity:0 !important;transition:opacity .8s}
.bd-weg .bd{pointer-events:none}
.bd-stage{position:absolute;left:50%;top:45%;z-index:2;width:min(86vw,940px);aspect-ratio:1302/322;transform:translate(-50%,-50%);pointer-events:none}
.bd-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bd-stage-f{z-index:4}
.bd-light,.bd-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bd-light{z-index:3}.bd-fx{z-index:6}
.bd-grain{position:absolute;inset:-50%;z-index:7;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:bd-grain 1s steps(6) infinite;transition:opacity 1.2s}
.bd-grain{opacity:.07}
@keyframes bd-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.bd-date{position:absolute;top:max(22px,env(safe-area-inset-top));left:0;right:0;z-index:8;margin:0;text-align:center;font:500 12px var(--font);letter-spacing:.22em;text-transform:uppercase;color:transparent;transition:color 1.4s}
.bd-lit .bd-date{color:rgba(255,252,245,.38)}
.bd-ui{position:absolute;left:0;right:0;z-index:8;padding:0 20px;text-align:center;pointer-events:none}
.bd-wish{bottom:max(9vh,64px)}
.bd-title{margin:0;font:700 clamp(40px,7.4vw,104px)/.95 var(--font-head);letter-spacing:-.02em}
.bd-title .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(6deg);filter:blur(8px)}
.bd-sub{margin:18px 0 0;font-size:clamp(15px,1.5vw,19px);color:rgba(255,252,245,.72);opacity:0;transform:translateY(8px);transition:.6s cubic-bezier(.2,.8,.2,1)}
.bd-wish.ask .bd-sub{opacity:1;transform:none}
.bd-blow{pointer-events:auto;margin-top:26px;display:inline-flex;align-items:center;gap:14px;border:0;background:rgba(255,252,245,.08);color:var(--cream);font:600 16px var(--font);padding:10px 22px 10px 10px;border-radius:999px;cursor:pointer;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),background .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,252,245,.14)}
.bd-wish.ask .bd-blow{opacity:1;transform:none}
.bd-blow:hover{background:rgba(255,252,245,.13)}
.bd-ring{position:relative;flex:none;width:44px;height:44px}
.bd-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.bd-ring circle{fill:none;stroke-width:3}
.bd-ring .bg{stroke:rgba(255,252,245,.16)}
.bd-ring .fg{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113}
.bd-ring i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.bd-ring i svg{width:20px;height:20px;transform:none}
.bd-mic{pointer-events:auto;display:block;margin:14px auto 0;padding:6px;background:none;border:0;color:rgba(255,252,245,.55);font:500 14px var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:0;transition:opacity .6s .3s}
.bd-wish.ask .bd-mic{opacity:1}
.bd-mic.on{color:var(--yellow);text-decoration:none}
.bd-meter{display:inline-block;width:60px;height:4px;margin-left:8px;border-radius:2px;background:rgba(255,252,245,.15);vertical-align:middle;overflow:hidden}
.bd-meter b{display:block;width:0;height:100%;background:var(--yellow)}
.bd-cue{position:absolute;left:0;right:0;top:16vh;z-index:8;text-align:center;font:700 clamp(22px,3vw,36px) var(--font-head);opacity:0;transition:opacity .25s;pointer-events:none}
.bd-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:9;padding:8px;background:none;border:0;font:500 13px var(--font);letter-spacing:.04em;cursor:pointer;display:none}
.bd-skip{display:block;color:rgba(255,252,245,.42);transition:color .2s,opacity .4s}
.bd-skip:hover{color:var(--cream)}
.bd-final .bd-skip{opacity:0;pointer-events:none}
@media (max-width:640px){.bd-stage{top:40%}}
.ft .btn-gold{background:var(--yellow);color:var(--navy)}
.ft .btn-gold:hover{background:#FFD36E}

/* ---------- Kop: licht op crème (behalve op de startpagina tijdens de binnenkomer) ---------- */
.top{position:relative;background:var(--cream)}
.top .wrap{padding-top:20px;padding-bottom:18px;max-width:1240px;padding-left:32px;padding-right:32px;border-bottom:1.5px solid var(--navy)}
.top-r{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:6px}
.top-r > .nav a,.nav-search{color:#3A4766}
.top-r > .nav a:hover{background:rgba(11,33,74,.06);color:var(--navy)}
.top-r > .nav a[aria-current]{background:transparent;color:var(--navy);font-weight:700;box-shadow:inset 0 -3px 0 var(--yellow);border-radius:0}
.menu-t summary{color:var(--navy)}
.menu-t summary span,.menu-t summary span::before,.menu-t summary span::after{background:var(--navy)}
.hero{padding-top:clamp(56px,7vw,90px)}
@media (max-width:600px){.top .wrap{padding-left:20px;padding-right:20px}}

/* ---------- Dagpagina's (module Dagen) ---------- */
.dg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.dg-eb{margin:0;font:700 12px var(--font);letter-spacing:.2em;text-transform:uppercase;color:#D9454B}
.dg-eb a{color:inherit;text-decoration:none}
.dg-eb-y{color:var(--yellow)}
.dg-open{padding-top:44px}
.dg-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-bottom:36px}
.dg-groot{position:relative;hyphens:manual;text-wrap:balance;margin:16px 0 0;font:800 clamp(48px,6.4vw,90px)/.96 var(--font-head);letter-spacing:-.035em;color:var(--navy)}
.dg-groot span{position:relative;color:var(--coral);white-space:nowrap}
.dg-groot-m{font-size:clamp(40px,5.4vw,72px)}
.dg-spark{position:absolute;left:calc(100% + 2px);top:-.18em;width:.5em;height:.48em;fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round}
.dg-sub{margin:20px 0 0;max-width:540px;text-wrap:balance;font-size:19px;line-height:1.5;color:#3A4766}
.dg-kies{margin-top:30px}
.dg-kies-v{margin:0 0 12px;font-size:17px;font-weight:700}
.dg-kies-r{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.dg-sel{position:relative;display:flex;flex-direction:column;justify-content:center;width:140px;height:62px;padding:0 14px;border:1.5px solid rgba(11,33,74,.25);border-radius:12px;background:#fff}
.dg-sel-m{width:180px}
.dg-sel span{font-size:12px;color:#5D6785}
.dg-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0 24px 0 0;margin:0;font:700 16px var(--font);color:var(--navy);cursor:pointer;width:100%}
.dg-sel::after{content:"";position:absolute;right:16px;top:27px;width:8px;height:8px;border-right:2.4px solid var(--navy);border-bottom:2.4px solid var(--navy);transform:rotate(45deg);pointer-events:none}
.dg-cta{text-decoration:none;display:inline-flex;align-items:center;gap:12px;min-height:62px;padding:0 28px;border:0;border-radius:12px;background:var(--coral);color:var(--navy);font:700 17px var(--font);cursor:pointer;transition:transform .15s}
.dg-cta:hover{transform:translateY(-2px)}

/* de scheurkalender */
.dg-hero-r{position:relative;container-type:inline-size}
/* is er naast de kalender geen plaats voor het briefje, dan laten we het weg en wordt de kalender kleiner */
@container (max-width:480px){.dg-note,.dg-pijl{display:none}}
@container (max-width:420px){.dg-cal{transform:rotate(4deg) scale(.86);margin-top:-20px;margin-bottom:-40px;margin-left:calc(50% - 190px)}}
.dg-cal{position:relative;width:380px;height:440px;margin:0 auto;transform:rotate(4deg);perspective:1100px}
.dg-sh{position:absolute;border-radius:10px 10px 22px 22px}
.dg-sh1{left:8px;top:96px;width:300px;height:320px;background:#C9BFFF;transform:rotate(-9deg)}
.dg-sh2{left:40px;top:92px;width:320px;height:330px;background:#EFE4CC;transform:rotate(3deg)}
.dg-sh3{left:36px;top:84px;width:320px;height:336px;background:#F6EEDC;transform:rotate(1.5deg)}
.dg-leaf{position:absolute;left:30px;top:70px;width:320px;height:340px;border:0;padding:0;border-radius:6px 6px 22px 22px;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--navy);text-decoration:none;font-family:var(--font);box-shadow:0 26px 50px -24px rgba(11,33,74,.45)}
.dg-leaf-top{cursor:pointer;transform-origin:50% 0;backface-visibility:hidden;transition:transform .9s cubic-bezier(.6,0,.2,1),opacity .9s}
.dg-leaf-top:hover{transform:rotateX(-8deg)}
.dg-leaf-top.is-flip{transform:rotateX(-165deg);opacity:0}
.dg-leaf-k{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.dg-leaf-n{font:800 168px/.86 var(--font-head);letter-spacing:-.07em;color:var(--coral)}
.dg-leaf-n2{color:var(--lilac)}
.dg-leaf-m{font:800 40px var(--font-head);letter-spacing:-.03em;margin-top:4px}
.dg-curl{position:absolute;right:0;bottom:0;width:58px;height:58px;border-radius:0 0 22px 0;background:linear-gradient(135deg,transparent 50%,#EFE4CC 50%)}
.dg-rug{position:absolute;left:22px;top:48px;width:336px;height:46px;border-radius:14px;background:var(--navy)}
.dg-klem{position:absolute;top:20px;width:22px;height:52px;border-radius:8px}
.dg-klem1{left:92px;background:var(--coral)}.dg-klem2{left:179px;background:var(--lilac)}.dg-klem3{left:266px;background:var(--yellow)}
.dg-spark2{position:absolute;right:-20px;bottom:30px;fill:none;stroke:var(--yellow);stroke-width:4.5;stroke-linecap:round}
.dg-note{position:absolute;right:-26px;top:10px;margin:0;width:110px;font:600 27px/1.05 "Caveat",cursive;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;color:var(--navy);transform:rotate(8deg);text-align:center}
.dg-pijl{position:absolute;right:10px;top:104px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}

.dg-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid rgba(11,33,74,.12);border-bottom:1.5px solid rgba(11,33,74,.12)}
.dg-strip > div{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px 16px;font-size:16px;font-weight:700}
.dg-strip > div + div{border-left:1.5px solid rgba(11,33,74,.12)}
.dg-zod{font-size:28px;line-height:1;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",var(--font)}
.dg-intro{max-width:780px;margin:44px 0 0;font-size:20px;line-height:1.6;color:#3A4766}

.dg-sec{padding-top:64px}
.dg-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:10px}
.dg-kop h2,.dg-h2{hyphens:manual;margin:0;font:800 clamp(32px,3.8vw,48px)/1.06 var(--font-head);letter-spacing:-.03em}
.dg-h2{margin:10px 0 44px}
.dg-tabs{display:flex;gap:6px}
.dg-tabs button{border:0;cursor:pointer;min-height:44px;padding:0 20px;border-radius:999px;font:700 14px var(--font);background:rgba(11,33,74,.06);color:var(--navy)}
.dg-tabs button[aria-selected="true"]{background:var(--navy);color:var(--cream)}
.dg-lijn{position:relative;height:90px;margin:0 -32px}
.dg-lijn svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--navy);stroke-width:2}
.dg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:-34px;padding:0 6px}
.dg-pc{position:relative;border-radius:16px;padding:28px 22px 24px;min-height:220px;display:flex;flex-direction:column;box-shadow:0 22px 40px -26px rgba(11,33,74,.45);transform-origin:50% -30px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dg-pc:hover{transform:rotate(0deg) translateY(-6px) !important}
.dg-clip{position:absolute;top:-34px;left:50%;width:14px;height:42px;margin-left:-7px;border-radius:3px;background:var(--navy)}
.dg-age small{display:block;font:600 12px var(--font);letter-spacing:.06em;color:#5D6785}
.dg-age b{display:block;font:800 60px/.95 var(--font-head);letter-spacing:-.05em}
.dg-ic{position:absolute;right:18px;top:24px;color:var(--navy)}
.dg-pc h3{margin:auto 0 6px;padding-top:20px;font:800 20px/1.15 var(--font-head);letter-spacing:-.02em}
.dg-pc p{margin:0;font-size:15px;line-height:1.45;color:#3A4766}
.dg-jaar{white-space:nowrap;color:#5D6785}
.dg-rest{display:flex;flex-wrap:wrap;gap:8px 22px;margin:34px 0 0;font-size:15px;line-height:1.5;color:#3A4766}
.dg-rest b{color:var(--navy)}
.dg-rest-k{font-weight:700;color:var(--navy)}

.dg-hist{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.dg-hist::before{content:"";position:absolute;left:-10px;right:-10px;top:216px;border-top:1.5px solid rgba(11,33,74,.25)}
.dg-ev{display:flex;flex-direction:column;align-items:center;text-align:center}
.dg-bal{position:relative;width:110px;height:122px;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;display:grid;place-items:center;font:800 22px var(--font-head);color:var(--navy);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.dg-bal::after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:inherit}
.dg-ev:hover .dg-bal{transform:translateY(-12px) rotate(-5deg)}
.dg-touw{width:0;border-left:1.5px dashed rgba(11,33,74,.4)}
.dg-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--cream);box-shadow:0 0 0 1.5px rgba(11,33,74,.25)}
.dg-ev h3{margin:24px 0 6px;font:700 18px/1.3 var(--font)}
.dg-ev p{margin:0;max-width:240px;font-size:15px;line-height:1.55;color:#3A4766}
.dg-meer{margin-top:34px;border-top:1.5px solid rgba(11,33,74,.12);padding-top:14px}
.dg-meer summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.dg-meer-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 36px;padding-top:14px}
.dg-meer-l div{display:flex;gap:14px;font-size:15px;line-height:1.5;color:#3A4766}
.dg-meer-l b{font:800 17px var(--font-head);color:var(--navy)}

.dg-kar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px;padding-bottom:80px}
.dg-kar > div{padding:6px 28px;display:flex;flex-direction:column}
.dg-kar > div:first-child{padding-left:0}
.dg-kar > div + div{border-left:1.5px solid rgba(11,33,74,.12)}
.dg-kar h3{margin:16px 0 4px;font:800 24px var(--font-head);letter-spacing:-.03em}
.dg-kar small{font-size:14px;color:#5D6785}
.dg-kar p{margin:10px 0 0;font-size:15px;line-height:1.5;color:#3A4766}

.dg-verder{background:var(--navy);color:var(--cream);padding:36px 0}
.dg-verder-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.dg-verder-nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.dg-pill{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(255,252,245,.45);color:var(--cream);text-decoration:none;font-weight:700;font-size:15px}
.dg-pill:hover{border-color:var(--cream);color:var(--cream)}
.dg-nu{display:inline-flex;align-items:center;gap:12px;font:800 24px var(--font-head)}
.dg-nu svg{fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linecap:round}
.dg-kal{color:var(--cream);font-weight:700;text-decoration:none}
.dg-kal:hover{color:var(--yellow)}

.dg-open-m{padding:56px 0 20px}
.dg-sec-m{padding-top:24px;padding-bottom:80px}
.dg-maand{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:22px 18px;list-style:none;margin:0;padding:0}
.dg-maand > li{display:flex}
.dg-md{--acc:var(--coral);position:relative;flex:1;display:flex;flex-direction:column;min-height:196px;padding:0 0 18px;border-radius:8px 8px 18px 18px;background:#fff;text-decoration:none;color:var(--navy);box-shadow:0 1px 0 rgba(11,33,74,.06),0 18px 34px -24px rgba(11,33,74,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.dg-md::before{content:"";display:block;height:14px;border-radius:8px 8px 0 0;background:var(--navy)}
.dg-md::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;border-radius:0 0 18px 0;background:linear-gradient(135deg,transparent 50%,#EFE4CC 50%);transition:width .25s,height .25s}
.dg-md-lilac{--acc:var(--lilac)}.dg-md-yellow{--acc:#E9A91C}
a.dg-md:hover{transform:translateY(-4px) rotate(-1deg);color:var(--navy);box-shadow:0 1px 0 rgba(11,33,74,.06),0 26px 40px -24px rgba(11,33,74,.55)}
a.dg-md:hover::after{width:36px;height:36px}
.dg-md-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:14px 18px 10px}
.dg-md-wd{flex-basis:100%;min-height:14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5D6785}
.dg-md-kop b{font:800 44px/.9 var(--font-head);letter-spacing:-.05em;color:var(--acc)}
.dg-md-kop small{font:800 15px var(--font-head);text-transform:lowercase;color:var(--navy)}
.dg-md-n{list-style:none;margin:0;padding:0 18px;display:flex;flex-direction:column;gap:6px}
.dg-md-n li{position:relative;padding-left:14px;font-size:14px;line-height:1.3;color:#3A4766;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-md-n li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.dg-md-meer{align-self:flex-start;margin:10px 18px 0;padding:3px 9px;border-radius:999px;background:#F6EEDC;font-size:12px;font-weight:700;color:var(--navy)}
.dg-md.is-vandaag{background:var(--navy);color:#fff}
.dg-md.is-vandaag::before{background:var(--acc)}
.dg-md.is-vandaag .dg-md-kop small,.dg-md.is-vandaag .dg-md-n li,.dg-md.is-vandaag .dg-md-wd{color:#fff}
a.dg-md.is-vandaag:hover{color:#fff}
.dg-md-leeg{min-height:0;background:transparent;box-shadow:none;border:1.5px dashed rgba(11,33,74,.18);opacity:.7}
.dg-md-leeg::before{background:rgba(11,33,74,.12)}.dg-md-leeg::after{display:none}
.dg-md-leeg .dg-md-kop b{color:#8A93AB}
@media (max-width:600px){.dg-maand{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dg-md{min-height:170px}.dg-md-leeg{min-height:0}.dg-md-kop{padding:12px 14px 8px}.dg-md-kop b{font-size:36px}.dg-md-n{padding:0 14px}.dg-md-n li{font-size:13px}.dg-md-meer{margin:8px 14px 0}}
@media (prefers-reduced-motion:reduce){.dg-md,.dg-md::after{transition:none}}
.dg-jr{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.dg-jr a,.dg-jr-leeg{display:flex;justify-content:space-between;align-items:center;padding:24px;border-radius:16px;background:#fff;border:1.5px solid rgba(11,33,74,.1);text-decoration:none;color:var(--navy);font-size:15px}
.dg-jr b{font:800 24px var(--font-head);text-transform:capitalize}
.dg-jr a:hover{border-color:var(--navy);color:var(--navy)}
.dg-jr-leeg{border-style:dashed;color:#8A93AB}

@media (max-width:1000px){
.dg-hero{grid-template-columns:minmax(0,1fr)}
.dg-hero-r{width:100%;max-width:640px;margin:0 auto}
.dg-cards{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
.dg-hist,.dg-kar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
.dg-hist::before{display:none}
.dg-kar > div:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:640px){
.dg-wrap{padding-left:20px;padding-right:20px}
.dg-note,.dg-pijl,.dg-spark{display:none}
.dg-strip{grid-template-columns:minmax(0,1fr)}
.dg-strip > div{justify-content:flex-start}
.dg-strip > div + div{border-left:0;border-top:1.5px solid rgba(11,33,74,.12)}
.dg-cards,.dg-hist,.dg-kar,.dg-meer-l{grid-template-columns:minmax(0,1fr)}
.dg-lijn{display:none}
.dg-cards{margin-top:56px;row-gap:60px}
.dg-kar > div{padding-left:0 !important;border-left:0 !important}
.dg-cal{transform:rotate(4deg) scale(.78);margin:-40px 0 -60px calc(50% - 190px)}
.dg-note{right:-14px}
.dg-sel{width:calc(50% - 6px)}
.dg-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dg-pc,.dg-bal,.dg-leaf-top{transition:none}}

body{overflow-x:clip}

/* binnenkomer naar de kalender: de kaarsjes worden de klemmen */
.bd-vlieg{position:fixed;z-index:70;border-radius:10px;pointer-events:none}
html.bd-on:not(.bd-klaar) .dg-home .dg-klem{opacity:0}
.dg-home .dg-klem{transition:opacity .25s}
.dg-hist-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dg-meer-a{font-weight:700;text-decoration:none;color:var(--navy)}
.dg-meer-a:hover{color:var(--coral)}
.dg-home-cta{padding-bottom:90px;text-align:center}
.dg-home-cta .dg-intro{margin:0 auto 20px}

/* ---------- Jaarlijkse dagen (feestdagen, werelddagen) ---------- */
.dg-jl-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:14px}
.dg-jl-l article{position:relative;padding:20px 22px 20px 26px;border-radius:18px;background:#fff;box-shadow:0 10px 28px -18px rgba(11,33,74,.35)}
.dg-jl-l article::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 4px 4px 0;background:var(--coral)}
.dg-jl-l article:nth-child(3n+2)::before{background:var(--lilac)}.dg-jl-l article:nth-child(3n+3)::before{background:var(--yellow)}
.dg-jl-l h3{margin:0 0 6px;font:800 19px/1.25 var(--font-head);color:var(--navy);hyphens:manual}
.dg-jl-l p{margin:0;font-size:15px;line-height:1.55;color:#3A4766}
.dg-jl-kort{margin:12px 0 0;font-size:15px;color:#3A4766}.dg-jl-kort b{color:var(--coral);font-weight:700}

/* ---------- Weerrecords (KMI Ukkel) ---------- */
.dg-weer{margin:-40px 0 80px;padding-top:28px;border-top:1.5px solid rgba(11,33,74,.12)}
.dg-weer-r{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.dg-weer-r > div{display:flex;align-items:center;gap:12px;padding:14px 22px 14px 14px;border-radius:16px;background:#fff;box-shadow:0 10px 28px -18px rgba(11,33,74,.35)}
.dg-weer-r svg{flex:none}
.dg-weer-r p{margin:0;display:grid;line-height:1.2}
.dg-weer-r span{font-size:13px;color:#5D6785}
.dg-weer-r b{font:800 22px/1.15 var(--font-head);color:var(--navy);letter-spacing:-.02em}
.dg-weer-r small{font-size:13px;color:#5D6785}
@media (max-width:640px){.dg-weer{margin-top:-50px}.dg-weer-r > div{flex:1 1 100%}}

/* een beetje leven: de kalender zweeft, het hoekje ademt, de sterretjes twinkelen (het logo animeert zelf, in logo.svg) */
@media (prefers-reduced-motion:no-preference){
  .dg-cal{animation:dgZweef 7s ease-in-out infinite}
  .dg-sh1{animation:dgAchter 7s ease-in-out infinite}
  .dg-curl{animation:dgHoek 5.5s ease-in-out infinite}
  .dg-klem{animation:dgKlem 7s ease-in-out infinite}
  .dg-klem2{animation-delay:-.35s}.dg-klem3{animation-delay:-.7s}
  .dg-spark,.dg-spark2{transform-box:fill-box;transform-origin:0 100%;animation:dgTwinkel 3.2s ease-in-out infinite}
  .dg-spark2{transform-origin:0 50%;animation-delay:-1.6s}
  .dg-note{animation:dgBriefje 6s ease-in-out infinite}
  .dg-pijl{animation:dgPijl 6s ease-in-out infinite}
}
@keyframes dgZweef{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:-.8deg}}
@keyframes dgAchter{0%,100%{translate:0 0}50%{translate:-3px 4px}}
@keyframes dgHoek{0%,100%{width:58px;height:58px}50%{width:68px;height:68px}}
@keyframes dgKlem{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes dgTwinkel{0%,100%{opacity:1;scale:1}50%{opacity:.45;scale:.86}}
@keyframes dgBriefje{0%,100%{rotate:0deg}50%{rotate:-2.5deg}}
@keyframes dgPijl{0%,100%{translate:0 0}50%{translate:2px -4px}}

/* knoppen met een feestje: bij hover een plofje confetti, een wiebel en de pijl die vooruit springt */
.btn,.wg-btn,.dg-cta,.dg-pill,.mf-submit{position:relative;isolation:isolate}
.btn::after,.wg-btn::after,.dg-cta::after,.dg-pill::after,.mf-submit::after{content:"";position:absolute;inset:-22px -26px;z-index:-1;pointer-events:none;opacity:0;transform:scale(.5);
  background:
    radial-gradient(circle,var(--coral) 0 3.5px,transparent 4px) 6% 30%/14px 14px no-repeat,
    radial-gradient(circle,var(--yellow) 0 4px,transparent 4.5px) 22% 2%/14px 14px no-repeat,
    radial-gradient(circle,var(--lilac) 0 3px,transparent 3.5px) 48% 0/12px 12px no-repeat,
    radial-gradient(circle,var(--coral) 0 2.5px,transparent 3px) 74% 4%/10px 10px no-repeat,
    radial-gradient(circle,var(--yellow) 0 3.5px,transparent 4px) 95% 26%/14px 14px no-repeat,
    radial-gradient(circle,var(--lilac) 0 4px,transparent 4.5px) 97% 78%/14px 14px no-repeat,
    radial-gradient(circle,var(--yellow) 0 2.5px,transparent 3px) 70% 100%/10px 10px no-repeat,
    radial-gradient(circle,var(--lilac) 0 3px,transparent 3.5px) 36% 98%/12px 12px no-repeat,
    radial-gradient(circle,var(--coral) 0 3.5px,transparent 4px) 4% 82%/14px 14px no-repeat,
    linear-gradient(var(--lilac),var(--lilac)) 14% 12%/9px 3px no-repeat,
    linear-gradient(var(--coral),var(--coral)) 88% 96%/3px 9px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) 60% 2%/3px 8px no-repeat}
.btn svg,.wg-btn svg,.dg-cta svg{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover,.wg-btn:hover,.dg-cta:hover,.dg-pill:hover,.mf-submit:hover{animation:knopWiebel .55s cubic-bezier(.3,1.4,.5,1) both}
  .btn:hover::after,.wg-btn:hover::after,.dg-cta:hover::after,.dg-pill:hover::after,.mf-submit:hover::after{animation:knopConfetti .75s cubic-bezier(.2,.7,.3,1) both}
  .btn:hover svg,.wg-btn:hover svg,.dg-cta:hover svg{transform:translateX(5px)}
}
@keyframes knopWiebel{0%{transform:none}30%{transform:translateY(-3px) rotate(-2.5deg) scale(1.03)}55%{transform:translateY(-3px) rotate(1.5deg) scale(1.03)}80%{transform:translateY(-2px) rotate(-.5deg) scale(1.02)}100%{transform:translateY(-2px) scale(1.02)}}
@keyframes knopConfetti{0%{opacity:0;transform:scale(.55) rotate(-6deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.18) rotate(4deg)}}

/* de voet: cijfers, staafjes per maand, records, links en de credits */
.ft-bd{position:relative;overflow:hidden;background:var(--navy)}
.ft-bd::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--coral) 0 25%,var(--yellow) 25% 50%,var(--lilac) 50% 75%,#7FD6C2 75%)}
.ft-bd .ft-bd-in{display:block;padding-top:clamp(56px,7vw,96px);padding-bottom:28px}
.ft-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(40px,5vw,64px);border-bottom:1.5px solid rgba(255,252,245,.12)}
.ft-bd .ft-zin{margin:0;font:800 clamp(34px,4.4vw,60px)/1 var(--font-head);letter-spacing:-.035em;color:var(--cream);text-wrap:balance}
.ft-bd .ft-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.ft-cijfers li{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:3px solid var(--c)}
.ft-cijfers b{font:800 clamp(28px,3.2vw,44px)/1 var(--font-head);letter-spacing:-.04em;color:var(--c);font-variant-numeric:tabular-nums}
.ft-cijfers span{font-size:14px;line-height:1.3;color:rgba(255,252,245,.7)}
.ft-c-coral{--c:var(--coral)}.ft-c-yellow{--c:var(--yellow)}.ft-c-lilac{--c:var(--lilac)}.ft-c-mint{--c:#7FD6C2}
.ft-mid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);padding:clamp(40px,5vw,60px) 0;border-bottom:1.5px solid rgba(255,252,245,.12)}
.ft-bd .ft-k{margin:0 0 20px;font:700 12px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.ft-staven{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:150px;list-style:none;margin:0;padding:0;align-items:end}
.ft-staven li{height:100%}
.ft-staaf{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%;text-decoration:none;color:rgba(255,252,245,.6)}
.ft-staaf-b{position:relative;width:100%;height:var(--h);min-height:6px;border-radius:6px 6px 3px 3px;background:var(--c);opacity:.78;transform-origin:50% 100%;transition:opacity .2s,transform .9s cubic-bezier(.2,.9,.3,1.15)}
.ft-staaf-b i{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 4px;font:700 12px var(--font);font-style:normal;color:var(--cream);white-space:nowrap;opacity:0;transition:opacity .2s,translate .2s}
.ft-staaf small{font-size:11px;font-weight:700;text-transform:lowercase}
.ft-s-coral{--c:var(--coral)}.ft-s-lilac{--c:var(--lilac)}.ft-s-yellow{--c:var(--yellow)}
.ft-staaf.is-top .ft-staaf-b{opacity:1}
.ft-staaf:hover{color:var(--cream)}
.ft-staaf:hover .ft-staaf-b{opacity:1}
.ft-staaf:hover i,.ft-staaf.is-top i{opacity:1;translate:-50% 0}
.ft-bd .ft-noot{margin:16px 0 0;font:600 24px/1.1 "Caveat",cursive;color:rgba(255,252,245,.8);rotate:-2deg}
.ft-rec ul{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.ft-rec li > a,.ft-rec li > .ft-r-i{text-decoration:none}
.ft-rec li > a,.ft-rec li:not(:has(a)){display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:rgba(255,252,245,.06);color:var(--cream);transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.ft-rec li > a:hover{background:rgba(255,252,245,.12);transform:translateX(4px);color:var(--cream)}
.ft-r-i{flex:none;width:42px;height:42px;border-radius:12px;background:var(--c) center/22px no-repeat}
.ft-r-warm{--c:var(--coral)}.ft-r-koud{--c:var(--lilac)}.ft-r-nat{--c:#7FD6C2}
.ft-r-warm .ft-r-i,.ft-r-koud .ft-r-i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B214A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14.5V5a2 2 0 1 1 4 0v9.5a4 4 0 1 1-4 0z'/%3E%3C/svg%3E")}
.ft-r-nat .ft-r-i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B214A' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E")}
.ft-r-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-r-t small{font-size:12px;color:rgba(255,252,245,.65)}
.ft-r-t b{font:800 22px/1.1 var(--font-head);letter-spacing:-.02em;color:var(--c)}
.ft-r-t em{font-style:normal;font-size:13px;color:rgba(255,252,245,.8)}
.ft-links ul{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.ft-bd .ft-links a{position:relative;display:inline-flex;align-items:center;min-height:34px;padding-left:18px;font-weight:600;font-size:15px;color:rgba(255,252,245,.8);text-decoration:none;transition:color .2s,padding .25s}
.ft-bd .ft-links a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--yellow);transition:transform .25s}
.ft-links li:nth-child(3n+2) a::before{background:var(--coral)}.ft-links li:nth-child(3n) a::before{background:var(--lilac)}
.ft-bd .ft-links a:hover{color:var(--cream);padding-left:24px}
.ft-bd .ft-links a:hover::before{transform:scale(1.5)}
.ft-merk{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding-top:36px}
.ft-merk > div:first-child{margin-right:auto}
.ft-bd .ft-naam{margin:0;font:800 26px var(--font-head);letter-spacing:-.03em;color:var(--cream)}
.ft-bd .ft-tag{margin:2px 0 0;color:rgba(255,252,245,.7)}
.ft-bd .ft-menu ul{flex-direction:row;flex-wrap:wrap;gap:6px 22px}
.ft-bd .ft-addr,.ft-bd .ft-tel{margin:0}
.ft-bd .ft-bar{border-top:1.5px solid rgba(255,252,245,.12);max-width:none;padding:20px clamp(16px,4vw,40px) 26px;font-size:14px;color:rgba(255,252,245,.6)}
.ft-bd .ft-bar a{color:rgba(255,252,245,.85);text-decoration:none}
.ft-bd .ft-bar a:hover{color:var(--yellow)}
.ft-credits{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ft-credits b{font-weight:800;color:var(--cream)}
.ft-mdl b{background:linear-gradient(90deg,var(--coral),var(--yellow),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-dot{width:5px;height:5px;border-radius:50%;background:var(--coral)}
/* groeien zodra de voet in beeld komt */
.ft-wacht .ft-staaf-b{transform:scaleY(0)}
.ft-staven li:nth-child(2) .ft-staaf-b{transition-delay:40ms}.ft-staven li:nth-child(3) .ft-staaf-b{transition-delay:80ms}.ft-staven li:nth-child(4) .ft-staaf-b{transition-delay:120ms}.ft-staven li:nth-child(5) .ft-staaf-b{transition-delay:160ms}.ft-staven li:nth-child(6) .ft-staaf-b{transition-delay:200ms}.ft-staven li:nth-child(7) .ft-staaf-b{transition-delay:240ms}.ft-staven li:nth-child(8) .ft-staaf-b{transition-delay:280ms}.ft-staven li:nth-child(9) .ft-staaf-b{transition-delay:320ms}.ft-staven li:nth-child(10) .ft-staaf-b{transition-delay:360ms}.ft-staven li:nth-child(11) .ft-staaf-b{transition-delay:400ms}.ft-staven li:nth-child(12) .ft-staaf-b{transition-delay:440ms}
@media (max-width:980px){.ft-top{grid-template-columns:1fr;align-items:start}.ft-mid{grid-template-columns:1fr 1fr}.ft-mnd{grid-column:1/-1}}
@media (max-width:640px){.ft-bd .ft-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}.ft-mid{grid-template-columns:1fr}.ft-staven{gap:4px;height:120px}.ft-staaf small{font-size:9px}.ft-merk{flex-direction:column;align-items:flex-start}.ft-bd .ft-bar{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.ft-staaf-b,.ft-rec a,.ft-links a{transition:none}.ft-wacht .ft-staaf-b{transform:none}}
.dg-open{overflow-x:clip}
/* gsm: de knoppen netjes op de randen van de inhoud */
.top-r{margin-right:-10px}
@media (max-width:600px){
  .dg-kies-r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}
  .dg-sel,.dg-sel-m{width:auto;min-width:0}
  .dg-cta{grid-column:1/-1;width:100%;justify-content:center}
}

/* ---------- gsm: kalender eerst, kleurrijke kenmerken, compacte jarigen ---------- */
@media (max-width:640px){
  /* de kalender komt voor de datumkiezer */
  .dg-hero{gap:0}
  .dg-hero-l{display:contents}
  .dg-hero-l > *{order:1}
  .dg-hero-r{order:2;margin:8px 0 4px}
  .dg-kies{order:3;margin-top:8px}
  .dg-cal{transform:rotate(4deg) scale(.68);margin:-64px 0 -84px calc(50% - 190px)}

  /* de drie kenmerken als kleurrijke tegeltjes naast elkaar */
  .dg-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;margin-top:8px}
  .dg-strip > div{flex-direction:column;justify-content:center;gap:8px;padding:16px 8px;border-radius:18px;font-size:14px;line-height:1.2;text-align:center;background:#FFE3E2}
  .dg-strip > div + div{border:0}
  .dg-strip > div:nth-child(2){background:#E6E9F2}
  .dg-strip > div:nth-child(3){background:#ECE8FF}
  .dg-strip svg{width:26px;height:26px}
  .dg-strip .dg-zod{font-size:24px}

  /* jarigen: twee naast elkaar, kleiner */
  .dg-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px;margin-top:44px}
  .dg-pc{min-height:0;padding:20px 14px 16px;border-radius:14px}
  .dg-clip{top:-26px;height:32px;width:11px;margin-left:-5.5px}
  .dg-age b{font-size:38px}
  .dg-age small{font-size:11px}
  .dg-ic{right:10px;top:14px;transform:scale(.7);transform-origin:100% 0}
  .dg-pc h3{padding-top:12px;font-size:16px;hyphens:auto;overflow-wrap:anywhere}
  .dg-pc p{font-size:13px;line-height:1.35}

  /* ballonnen los van het label erboven */
  .dg-eb + .dg-hist,.dg-h2 + .dg-hist{margin-top:34px}
}

/* ---------- startpagina: benieuwd naar morgen ---------- */
.dg-morgen{position:relative;overflow:hidden;background:#ECE8FF;padding:clamp(48px,6vw,80px) 0}
.dg-morgen::before{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,199,70,.35)}
.dg-morgen-in{position:relative;display:flex;align-items:center;gap:clamp(28px,5vw,64px)}
.dg-morgen-blad{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;height:186px;padding-top:26px;border-radius:8px 8px 18px 18px;background:var(--cream);box-shadow:0 22px 40px -22px rgba(11,33,74,.5);rotate:-5deg;transition:rotate .4s cubic-bezier(.3,1.5,.5,1)}
.dg-morgen-rug{position:absolute;left:-6px;right:-6px;top:0;height:30px;border-radius:10px;background:var(--navy)}
.dg-morgen-rug::before,.dg-morgen-rug::after{content:"";position:absolute;top:-12px;width:12px;height:28px;border-radius:5px;background:var(--coral);left:42px}
.dg-morgen-rug::after{left:auto;right:42px;background:var(--yellow)}
.dg-morgen-blad b{font:800 88px/.9 var(--font-head);letter-spacing:-.06em;color:var(--lilac)}
.dg-morgen-blad small{font:800 20px var(--font-head);color:var(--navy)}
.dg-morgen:hover .dg-morgen-blad{rotate:3deg}
.dg-morgen-t h2{margin:6px 0 14px;font:800 clamp(32px,4vw,52px)/1 var(--font-head);letter-spacing:-.035em;color:var(--navy)}
.dg-morgen-t h2 span{color:#7A6FD1;font-size:.55em;letter-spacing:-.01em;white-space:nowrap}
.dg-morgen .dg-eb-y{color:var(--coral)}
.dg-morgen-n{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.dg-morgen-n li{padding:7px 14px;border-radius:999px;background:#fff;font-size:15px;font-weight:700;color:var(--navy);box-shadow:0 6px 16px -12px rgba(11,33,74,.5)}
.dg-morgen-n .dg-morgen-m{background:var(--navy);color:var(--cream)}
@media (max-width:640px){
  .dg-morgen-in{flex-direction:column;align-items:flex-start;gap:30px}
  .dg-morgen-blad{width:130px;height:146px}
  .dg-morgen-blad b{font-size:64px}.dg-morgen-blad small{font-size:16px}
  .dg-morgen-rug::before{left:30px}.dg-morgen-rug::after{right:30px}
  .dg-morgen-t{width:100%}
  .dg-morgen .dg-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dg-morgen-blad{transition:none}}

/* ---------- ritme in de achtergrond: beige, hemel, wit, lila, navy ---------- */
#geschiedenis,#karakter{position:relative;isolation:isolate}
#geschiedenis::before,#karakter::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);border-radius:48px 48px 0 0}
/* de ballonnen hangen in de lucht */
#geschiedenis{margin-top:80px;padding-top:72px;padding-bottom:96px}
#geschiedenis::before{background:
  radial-gradient(ellipse 120px 34px at 12% 22%,rgba(255,255,255,.85) 60%,transparent 62%),
  radial-gradient(ellipse 80px 26px at 17% 19%,rgba(255,255,255,.85) 60%,transparent 62%),
  radial-gradient(ellipse 150px 40px at 84% 14%,rgba(255,255,255,.75) 60%,transparent 62%),
  radial-gradient(ellipse 90px 28px at 90% 10%,rgba(255,255,255,.75) 60%,transparent 62%),
  radial-gradient(ellipse 110px 30px at 58% 30%,rgba(255,255,255,.55) 60%,transparent 62%),
  radial-gradient(circle at 30% 70%,rgba(255,107,112,.35) 0 3px,transparent 3.5px),
  radial-gradient(circle at 72% 62%,rgba(163,148,255,.45) 0 3px,transparent 3.5px),
  radial-gradient(circle at 46% 88%,rgba(255,199,70,.55) 0 3px,transparent 3.5px),
  linear-gradient(180deg,#DDEBFA 0%,#EAF3FC 100%)}
#geschiedenis .dg-hist::before{border-top-color:rgba(11,33,74,.18)}
#geschiedenis .dg-dot{border-color:#E7F1FB}
#geschiedenis .dg-meer{border-top-color:rgba(11,33,74,.14)}
/* het karakter op een nieuw, wit blad */
#karakter{margin-top:-48px;padding-top:72px}
#karakter::before{background:#fff;box-shadow:0 -18px 40px -30px rgba(11,33,74,.35)}
#karakter .dg-weer-r > div{background:var(--cream);box-shadow:none}
/* staat er geen geschiedenis, dan krijgt het karakter zelf wat ruimte */
#vandaag-is-het + #karakter,#jarigen + #karakter{margin-top:80px}
@media (max-width:640px){
  #geschiedenis::before,#karakter::before{border-radius:32px 32px 0 0}
  #geschiedenis{margin-top:56px;padding-top:56px;padding-bottom:80px}
  #karakter{margin-top:-32px;padding-top:56px}
  #vandaag-is-het + #karakter,#jarigen + #karakter{margin-top:56px}
}
#karakter{padding-bottom:80px}
#karakter .dg-weer{margin-bottom:0}
#karakter .dg-kar:last-child{padding-bottom:0}
@media (max-width:640px){#karakter{padding-bottom:56px}}

/* toegankelijkheid: verborgen tekst voor schermlezers, en koraal met genoeg contrast voor tekst */
.bd-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dg-eb{color:#BF3439}
.dg-groot span,.dg-leaf-n:not(.dg-leaf-n2){color:#F45A60}
.dg-jl-kort b{color:#BF3439}

/* ---------- gewone pagina's (FAQ, contact, privacy): kop in de stijl van de dagen ---------- */
.hero{background:var(--cream);color:var(--navy);padding:clamp(48px,6vw,80px) 0 clamp(36px,5vw,56px)}
.hero::after{content:"";position:absolute;right:clamp(16px,8vw,140px);top:clamp(30px,5vw,60px);width:70px;height:64px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 60' fill='none' stroke='%23FFC746' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 34 4 6M24 30 40 6M30 46l26-8'/%3E%3C/svg%3E");opacity:.9}
.hero .crumbs{color:#5D6785;font-weight:600}
.hero .crumbs a{color:#BF3439;font-weight:700}
@media (max-width:640px){.hero .crumbs > span:last-child,.hero .crumbs > span:nth-last-child(2){display:none}}
.hero h1{color:var(--navy);letter-spacing:-.035em}
.hero p{color:#3A4766}
@media (max-width:640px){.hero::after{width:44px;height:40px;top:24px}}

/* rubrieken van de FAQ als vrolijke labels */
.faq-cats{position:static;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px;padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.faq-cats a{min-height:44px;padding:0 8px 0 18px;gap:10px;border-radius:999px;background:#FFE3E2;color:var(--navy);font-size:15px;transition:transform .25s cubic-bezier(.3,1.5,.5,1),background-color .2s}
.faq-cats a:nth-child(3n+2){background:#ECE8FF}
.faq-cats a:nth-child(3n+3){background:#FFF0C7}
.faq-cats a:hover{transform:translateY(-2px) rotate(-1.5deg);background:#FFD3D1}
.faq-cats a:nth-child(3n+2):hover{background:#DFD8FF}.faq-cats a:nth-child(3n+3):hover{background:#FFE6A3}
.faq-cats span{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--navy);color:var(--cream);font-size:12px;font-weight:800}
.faq-gt{display:flex;align-items:center;gap:12px;scroll-margin-top:24px}
.faq-gt::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--coral)}
.faq-group:nth-of-type(3n+2) .faq-gt::before{background:var(--lilac)}
.faq-group:nth-of-type(3n+3) .faq-gt::before{background:var(--yellow)}
.faq-group + .faq-group{margin-top:48px}

/* ---------- pagina per jarige ---------- */
.dg-pc-a{color:inherit;text-decoration:none}
.dg-pc-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.dg-pc:has(.dg-pc-a):hover{transform:rotate(0deg) translateY(-6px) !important;cursor:pointer}
.dg-rest a{color:inherit;text-decoration:none;border-bottom:1.5px solid rgba(255,107,112,.5)}
.dg-rest a:hover{color:#BF3439}
.pr-open{padding-bottom:24px}
.pr-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,5vw,72px)}
.pr-open .dg-eb a{color:inherit;text-decoration:none}
.pr-naam{margin-top:14px;hyphens:manual;overflow-wrap:break-word}
.pr-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 0}
.pr-feiten > div{padding:16px 18px;border-radius:18px;background:#FFE3E2}
.pr-feiten .pr-f2{background:#ECE8FF}.pr-feiten .pr-f3{background:#E6E9F2}.pr-feiten .pr-f4{background:#FFF0C7}
.pr-feiten .is-vandaag{background:var(--coral)}
.pr-feiten dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5D6785}
.pr-feiten dd{margin:6px 0 0;font:800 20px/1.2 var(--font-head);color:var(--navy);letter-spacing:-.02em}
.pr-feiten dd b{font-size:30px}
.pr-feiten dd a{color:inherit;text-decoration:none;border-bottom:2px solid rgba(11,33,74,.25)}
.pr-feiten dd a:hover{border-color:var(--navy)}
.pr-r{display:flex;justify-content:center;padding-top:30px}
.pr-kaart{width:min(100%,300px);min-height:300px;padding:34px 26px 26px}
.pr-kaart .dg-age b{font-size:96px}
.pr-kaart-n{margin:auto 0 6px !important;padding-top:20px;font:800 24px/1.15 var(--font-head) !important;color:var(--navy) !important;letter-spacing:-.02em}
.pr-h2{margin:0 0 18px;font:800 clamp(26px,3vw,36px)/1.1 var(--font-head);letter-spacing:-.03em;color:var(--navy)}
.pr-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pr-chips a{display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:16px;background:#fff;text-decoration:none;color:var(--navy);box-shadow:0 10px 24px -18px rgba(11,33,74,.45);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.pr-chips a:hover{transform:translateY(-3px) rotate(-1deg);color:var(--navy)}
.pr-chips b{font-size:16px}
.pr-chips span{font-size:13px;color:#5D6785}
.pr-cta{margin-top:26px}
.pr-kar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:80px}
.pr-kar > div{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:20px;background:#fff;box-shadow:0 10px 28px -20px rgba(11,33,74,.4)}
.pr-kar small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5D6785}
.pr-kar b{font:800 22px var(--font-head);color:var(--navy)}
.pr-kar span:not(.pr-kar-i){font-size:15px;color:#3A4766}
.pr-kar-i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:14px;background:#ECE8FF;font-size:24px;color:var(--navy);font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",var(--font)}
.pr-i2{background:#E9E4FF url("/assets/iconen/opaal.svg") center/30px no-repeat}
.pr-i3{background:#FFF0C7 url("/assets/iconen/goudsbloem.svg") center/30px no-repeat}
/* A tot Z */
.pr-abc{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.pr-abc a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--navy);font-weight:800;text-decoration:none;box-shadow:0 6px 16px -12px rgba(11,33,74,.5)}
.pr-abc a:nth-child(3n+1):hover{background:#FFE3E2}.pr-abc a:nth-child(3n+2):hover{background:#ECE8FF}.pr-abc a:nth-child(3n):hover{background:#FFF0C7}
.pr-az{columns:3 260px;column-gap:40px;padding-bottom:80px}
.pr-letter{break-inside:avoid;margin-bottom:30px;scroll-margin-top:24px}
.pr-letter h2{margin:0 0 10px;font:800 36px var(--font-head);color:var(--coral)}
.pr-letter:nth-child(3n+2) h2{color:var(--lilac)}.pr-letter:nth-child(3n) h2{color:#E9A91C}
.pr-letter ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-letter a{font-weight:700;color:var(--navy);text-decoration:none}
.pr-letter a:hover{color:#BF3439}
.pr-letter span{font-size:13px;color:#5D6785}
@media (max-width:760px){
  .pr-hero{grid-template-columns:1fr}
  .pr-r{order:-1;padding-top:20px}
  .pr-kaart{min-height:0;width:min(100%,250px)}
  .pr-kaart .dg-age b{font-size:64px}
  .pr-kar{grid-template-columns:1fr}
}
@media (max-width:420px){.pr-feiten dd{font-size:17px}.pr-feiten dd b{font-size:24px}}

/* ---------- bekende jarigen: overzicht en soorten ---------- */
.pr-zoek{position:relative;display:flex;align-items:center;gap:12px;max-width:560px;margin-top:28px;padding:0 20px;height:62px;border-radius:16px;background:#fff;border:1.5px solid rgba(11,33,74,.18);color:var(--navy);box-shadow:0 14px 30px -24px rgba(11,33,74,.5)}
.pr-zoek:focus-within{border-color:var(--navy)}
.pr-zoek input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:600 17px var(--font);color:var(--navy);outline:0}
.pr-zoek-r{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;border-radius:16px;background:#fff;box-shadow:0 24px 50px -20px rgba(11,33,74,.45)}
.pr-zoek-r a{display:flex;flex-direction:column;padding:10px 14px;border-radius:12px;color:var(--navy);text-decoration:none}
.pr-zoek-r a:hover,.pr-zoek-r a:focus{background:#FFF0C7}
.pr-zoek-r b{font-size:16px}.pr-zoek-r span{font-size:13px;color:#5D6785}
.pr-zoek-0{padding:12px 14px;color:#5D6785}
.pr-soorten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.pr-soort{--c:var(--coral);--z:#FFE3E2;position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:22px;background:var(--z);color:var(--navy);text-decoration:none;transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.pr-soort:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 22px 40px -26px rgba(11,33,74,.55);color:var(--navy)}
.pr-s-lilac{--c:var(--lilac);--z:#ECE8FF}.pr-s-yellow{--c:#E9A91C;--z:#FFF0C7}.pr-s-mint{--c:#3FB89C;--z:#DDF4EE}
.pr-s-navy{--c:var(--yellow);--z:var(--navy);color:var(--cream)}
.pr-s-navy:hover{color:var(--cream)}
.pr-soort-i{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff;color:var(--navy)}
.pr-soort-i svg{width:38px;height:38px}
.pr-s-navy .pr-soort-i{background:var(--yellow)}
.pr-soort-i b{font:800 20px var(--font-head);color:var(--navy)}
.pr-soort-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pr-soort-t b{font:800 22px/1.15 var(--font-head);letter-spacing:-.02em}
.pr-soort-t small{flex:none;padding:3px 10px;border-radius:999px;background:var(--c);color:#fff;font-size:13px;font-weight:800}
.pr-s-navy .pr-soort-t small{color:var(--navy)}
.pr-soort-v{display:flex;flex-wrap:wrap;gap:6px}
.pr-soort-v span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.75);font-size:13px;font-weight:600;color:var(--navy)}
.pr-s-navy .pr-soort-v span{background:rgba(255,252,245,.12);color:var(--cream)}
.pr-top{padding-bottom:80px}
/* een soort, per maand */
.pr-mnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.pr-mnav a{padding:8px 14px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 6px 16px -12px rgba(11,33,74,.5)}
.pr-mnav a:hover{background:#FFF0C7}
.pr-gm{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;align-items:start}
.pr-maand{padding:22px 22px 18px;border-radius:22px;background:#fff;box-shadow:0 12px 30px -24px rgba(11,33,74,.45);scroll-margin-top:24px}
.pr-maand.is-nu{outline:2.5px solid var(--coral)}
.pr-maand h2{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font:800 24px var(--font-head);text-transform:capitalize}
.pr-maand h2 a{color:var(--navy);text-decoration:none}
.pr-maand h2 small{padding:3px 10px;border-radius:999px;background:#ECE8FF;font:800 13px var(--font);color:var(--navy)}
.pr-maand ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pr-maand li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:7px 0;border-top:1px solid rgba(11,33,74,.07)}
.pr-dag{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#FFE3E2;font:800 14px var(--font-head);color:var(--navy)}
.pr-maand li:nth-child(3n+2) .pr-dag{background:#ECE8FF}.pr-maand li:nth-child(3n) .pr-dag{background:#FFF0C7}
.pr-maand li a{font-weight:700;color:var(--navy);text-decoration:none}
.pr-maand li a:hover{color:#BF3439}
.pr-maand em{margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--navy);color:var(--cream);font-style:normal;font-size:11px;font-weight:800;vertical-align:2px}
.pr-oms{font-size:13px;color:#5D6785}
.pr-andere{padding-bottom:80px}
.pr-andere .pr-chips{margin-top:12px}
@media (max-width:640px){.pr-gm{grid-template-columns:1fr}.pr-zoek{height:56px}}
@media (max-width:640px){
  .pr-soorten{grid-template-columns:1fr;gap:10px}
  .pr-soort{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;border-radius:18px}
  .pr-soort-i{width:46px;height:46px;border-radius:13px;flex:none}
  .pr-soort-i svg{width:30px;height:30px}
  .pr-soort-t{flex:1;align-items:center}
  .pr-soort-t b{font-size:18px}
  .pr-soort-v{display:none}
}

/* ==================================================================
 * Widgets in de stijl van birthday.be
 * Polaroids met klemmetjes, confetti, koraal, lila en geel, handschrift.
 * ================================================================== */
.wg{--wc1:var(--coral);--wc2:var(--lilac);--wc3:var(--yellow)}
.wg-ph{border-radius:20px;background:#F6EEDC;box-shadow:0 24px 48px -30px rgba(11,33,74,.45)}
.wg-eyebrow{gap:10px;color:#BF3439;font-size:12px;letter-spacing:.2em}
.wg-eyebrow::before{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:16px 0 0 var(--yellow),32px 0 0 var(--lilac);margin-right:32px}
.wg-h{color:var(--navy)}
.wg-gold{color:#F45A60;background:linear-gradient(#FFE6A3,#FFE6A3) 0 88%/100% .3em no-repeat}
.wg-rich a{color:#BF3439;text-decoration-thickness:2px;text-decoration-color:rgba(255,107,112,.45)}
.wg-rich a:hover{text-decoration-color:#BF3439}
.wg-rich li::marker{color:var(--coral)}
.wg-rich li:nth-child(3n+2)::marker{color:var(--lilac)}
.wg-rich li:nth-child(3n)::marker{color:#E9A91C}
.wg-rich ul{list-style:none;padding-left:0}
.wg-rich ul li{position:relative;padding-left:22px}
.wg-rich ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.wg-rich ul li:nth-child(3n+2)::before{background:var(--lilac)}
.wg-rich ul li:nth-child(3n)::before{background:var(--yellow)}

/* knoppen: koraal zoals "Ontdek jouw dag", de tweede keuze wit */
.wg-btn,.wg .wg-cta-row a:not(.ft-ghost){display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:14px;background:var(--coral);color:var(--navy);box-shadow:none;font:700 17px var(--font);text-decoration:none}
.wg-btn:hover,.wg .wg-cta-row a:not(.ft-ghost):hover{background:#FF7F83;color:var(--navy)}
.wg-btn::before,.wg .wg-cta-row a:not(.ft-ghost)::before{content:none}
.wg .ft-ghost{min-height:52px;padding:0 22px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -16px rgba(11,33,74,.5);color:var(--navy)}
.wg .ft-ghost:hover{box-shadow:0 14px 28px -16px rgba(11,33,74,.6);background:#FFF0C7}
.wg .ft-ghost{position:relative;isolation:isolate}

/* zachte vlakken: lila in plaats van zand */
.tone-sand{background:#ECE8FF;border-radius:36px;width:calc(100% - 40px);max-width:calc(var(--wrap) - 40px);margin-left:auto;margin-right:auto}
.tone-sand .wg-ph{background:#fff}

/* ---------- Uitgelicht: grote titel met confetti ---------- */
.wg-hl{overflow:hidden}
.wg-hl-ball{display:none}
.wg-hl::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;background:
  radial-gradient(circle,var(--coral) 0 5px,transparent 5.5px) 12% 22%/60px 60px no-repeat,
  radial-gradient(circle,var(--yellow) 0 7px,transparent 7.5px) 86% 18%/60px 60px no-repeat,
  radial-gradient(circle,var(--lilac) 0 6px,transparent 6.5px) 8% 78%/60px 60px no-repeat,
  radial-gradient(circle,var(--coral) 0 4px,transparent 4.5px) 92% 70%/60px 60px no-repeat,
  radial-gradient(circle,var(--lilac) 0 4px,transparent 4.5px) 22% 52%/60px 60px no-repeat,
  radial-gradient(circle,var(--yellow) 0 4px,transparent 4.5px) 78% 46%/60px 60px no-repeat,
  linear-gradient(var(--lilac),var(--lilac)) 18% 12%/22px 6px no-repeat,
  linear-gradient(var(--yellow),var(--yellow)) 80% 86%/6px 22px no-repeat,
  linear-gradient(var(--coral),var(--coral)) 70% 10%/18px 6px no-repeat}
.wg-hl .wg-eyebrow{justify-content:center}
.wg-hl-t{color:var(--navy)}
.wg-hl .wg-cta-row{margin-top:34px}
@media (prefers-reduced-motion:no-preference){.wg-hl::before{animation:wgConfetti 9s ease-in-out infinite alternate}}
@keyframes wgConfetti{to{transform:translateY(-10px) rotate(1deg)}}

/* ---------- Tekst: drie bolletjes boven de titel ---------- */
.wg-text .wg-h::before{width:44px;height:10px;border-radius:0;background:radial-gradient(circle,var(--coral) 0 4.5px,transparent 5px) 0 0/16px 10px,radial-gradient(circle,var(--yellow) 0 4.5px,transparent 5px) 16px 0/16px 10px,radial-gradient(circle,var(--lilac) 0 4.5px,transparent 5px) 32px 0/16px 10px;background-repeat:no-repeat}

/* ---------- Foto's als polaroids ---------- */
.wg-img .wg-ph,.wg-gal .wg-ph,.wg-story-ph .wg-ph{padding:12px 12px 52px;border-radius:6px;background:#fff;box-shadow:0 26px 44px -26px rgba(11,33,74,.5);transition:rotate .5s cubic-bezier(.3,1.4,.5,1),translate .5s}
.wg-img .wg-ph img,.wg-gal .wg-ph img,.wg-story-ph .wg-ph img{border-radius:2px}
.wg-img .wg-chip,.wg-gal .wg-chip{left:26px;bottom:8px;max-width:calc(100% - 52px);padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--navy);font:600 26px/1.3 "Caveat",cursive;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-img .wg-media{rotate:-1deg}
.wg-gal .wg-media:nth-child(3n+1) .wg-ph{rotate:-2deg}
.wg-gal .wg-media:nth-child(3n+2) .wg-ph{rotate:1.5deg}
.wg-gal .wg-media:nth-child(3n) .wg-ph{rotate:-1deg}
.wg-gal .wg-media:hover .wg-ph,.wg-img .wg-media:hover .wg-ph{rotate:0deg;translate:0 -6px}
.wg-bento{gap:clamp(20px,2.6vw,34px)}
.wg-bento .wg-ph{padding-bottom:52px}
.wg-bento .wg-ph img{height:100%}
.wg-bento .wg-media:hover .wg-chip{translate:none;background:none}
.wg-gal-2 .wg-media:nth-child(2){margin-top:clamp(0px,5vw,70px)}

/* ---------- Foto met tekst: polaroid met klem, gekleurd blad erachter ---------- */
.wg-frame .wg-ph{padding:12px;border-radius:6px;background:#fff;rotate:-2deg;box-shadow:0 26px 44px -26px rgba(11,33,74,.5)}
.wg-it-rev .wg-frame .wg-ph{rotate:2deg}
.wg-frame .wg-ph img{border-radius:2px}
.wg-frame::before{translate:22px 20px;rotate:4deg;border-radius:14px;background:#FFE3E2}
.wg-it-rev .wg-frame::before{translate:-22px 20px;rotate:-4deg;background:#FFF0C7}
.tone-sand .wg-frame::before{background:#fff;opacity:.7}
.wg-frame::after{left:-24px;top:-24px;width:110px;height:110px;opacity:1;background:radial-gradient(circle,var(--coral) 2px,transparent 2.6px) 0 0/18px 18px;-webkit-mask:radial-gradient(circle at 30% 30%,#000 30%,transparent 70%);mask:radial-gradient(circle at 30% 30%,#000 30%,transparent 70%)}
.wg-it-rev .wg-frame::after{background:radial-gradient(circle,var(--lilac) 2px,transparent 2.6px) 0 0/18px 18px}
.wg-it-grid > svg,.wg-arc{color:var(--coral);stroke:var(--coral)}
.wg-frame .wg-ph::after{content:"";position:absolute;left:50%;top:-16px;width:14px;height:40px;margin-left:-7px;border-radius:4px;background:var(--navy);z-index:3}
.wg-frame .wg-ph{overflow:visible}
.wg-frame .wg-ph img{position:relative;z-index:1}

/* ---------- Foto's met verhaal: aan de waslijn ---------- */
.wg-story-eb{background:#FFE3E2;color:#BF3439;letter-spacing:.18em}
.wg-story-row{position:relative;gap:clamp(10px,1.6vw,22px);padding-top:34px}
.wg-story-row::before{content:"";position:absolute;left:-4%;right:-4%;top:0;height:60px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 300 50, 1000 50, 1300 6' fill='none' stroke='%230B214A' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");pointer-events:none}
.wg-story-ph{position:relative;aspect-ratio:auto}
.wg-story-ph .wg-ph{padding:8px 8px 28px;aspect-ratio:4/5.2}
.wg-story-ph .wg-ph img{height:100%;object-fit:cover}
.wg-story-ph::before{content:"";position:absolute;z-index:3;left:50%;top:-22px;width:11px;height:32px;margin-left:-5.5px;border-radius:3px;background:var(--navy)}
.wg-story-ph:nth-child(odd) .wg-ph{rotate:-3deg}
.wg-story-ph:nth-child(even) .wg-ph{rotate:2.5deg;margin-top:14px}
.wg-story-ph:nth-child(3) .wg-ph,.wg-story-ph:nth-child(4) .wg-ph{margin-top:22px}
.wg-story-ph:hover .wg-ph{rotate:0deg;translate:0 -6px}
.wg-story-ph:nth-child(3n+1)::before{background:var(--coral)}.wg-story-ph:nth-child(3n+2)::before{background:var(--lilac)}.wg-story-ph:nth-child(3n)::before{background:var(--yellow)}

/* ---------- Video ---------- */
.wg-video-play,.wg-video-el{border-radius:24px;box-shadow:0 30px 60px -34px rgba(11,33,74,.6)}
.wg-video-ic{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,112,.5)}
.wg-video-ic::after{left:37px;top:30px;border-width:16px 0 16px 25px;border-color:transparent transparent transparent #fff}
.wg-video-play:hover .wg-video-ic{scale:1.06}
@media (prefers-reduced-motion:no-preference){.wg-video-ic{animation:wgPuls 2.4s ease-out infinite}}
@keyframes wgPuls{0%{box-shadow:0 0 0 0 rgba(255,107,112,.55)}100%{box-shadow:0 0 0 28px rgba(255,107,112,0)}}
.wg-video-cap{font:600 24px/1.3 "Caveat",cursive;color:var(--navy);margin-top:14px}

/* ---------- Vragen: witte kaartjes zoals op de FAQ ---------- */
.wg-faq-list{gap:12px;border-top:0}
.wg-faq-q{border:1.5px solid rgba(11,33,74,.1);border-radius:16px;background:#fff;padding:0 22px;transition:box-shadow .2s}
.wg-faq-q[open]{box-shadow:0 16px 34px -24px rgba(11,33,74,.45)}
.wg-faq-q summary{font-size:18px;padding:20px 0}
.wg-faq-q summary::after{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:20px;line-height:1}
.wg-faq .wg-cta-row{margin-top:26px}

/* ---------- Formulier en nieuwsbrief ---------- */
.wg-form-box{padding:clamp(24px,3.4vw,40px);border-radius:26px;background:#fff;box-shadow:0 26px 50px -36px rgba(11,33,74,.5)}
.mf input[type=text],.mf input[type=email],.mf input[type=tel],.mf input[type=number],.mf input[type=date],.mf select,.mf textarea{border:1.5px solid rgba(11,33,74,.2);border-radius:12px;background:var(--cream);font-size:16px}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px #FFE3E2;background:#fff}
.mf-label{color:var(--navy)}
.mf-req{color:#BF3439}
.mf-choice input{accent-color:var(--coral)}
.mf-submit{position:relative;isolation:isolate;min-height:56px;padding:0 28px;border-radius:14px;background:var(--coral);color:var(--navy)}
.mf-submit:hover{background:#FF7F83}
.mf-done{background:#ECE8FF;border-radius:20px}
.wg-form-side .wg-form-text .wg-h::after{content:"";display:block;width:90px;height:30px;margin-top:14px;background:no-repeat left/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' fill='none' stroke='%23FF6B70' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 18c10-12 18-12 24 0s14 12 22 0 16-12 22 0 12 8 16 2'/%3E%3C/svg%3E")}
.wg-nl .wg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4.4vw,56px);border-radius:36px;background:#ECE8FF;max-width:calc(var(--wrap) - 40px);position:relative;overflow:hidden}
.wg-nl .wg-in::before{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,199,70,.45);z-index:-1}
.wg-nl .wg-form-text{margin:0}
.wg-nl .wg-form-box{box-shadow:none}
.wg-nl .mf-submit{background:var(--navy);color:var(--cream)}
.wg-nl .mf-submit:hover{background:#1A3366;color:var(--cream)}
@media (max-width:760px){.wg-nl .wg-in{grid-template-columns:1fr;margin:0 16px;border-radius:28px}}

/* ---------- Oproep: navy met confetti en kaarsjes ---------- */
.wg-cta-box{background:var(--navy);border-radius:32px}
.wg-cta-box .aurora{display:none}
.wg-cta-box::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(circle,var(--coral) 0 5px,transparent 5.5px) 62% 20%/60px 60px no-repeat,
  radial-gradient(circle,var(--yellow) 0 6px,transparent 6.5px) 90% 14%/60px 60px no-repeat,
  radial-gradient(circle,var(--lilac) 0 5px,transparent 5.5px) 74% 80%/60px 60px no-repeat,
  radial-gradient(circle,var(--yellow) 0 3px,transparent 3.5px) 54% 64%/60px 60px no-repeat,
  linear-gradient(var(--lilac),var(--lilac)) 84% 52%/22px 6px no-repeat,
  linear-gradient(var(--coral),var(--coral)) 66% 92%/6px 20px no-repeat}
.wg-cta-box::after{content:"";position:absolute;right:clamp(20px,6vw,90px);bottom:0;width:clamp(120px,16vw,200px);height:clamp(130px,17vw,214px);z-index:0;background:no-repeat bottom/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 214'%3E%3Crect x='18' y='104' width='44' height='110' rx='9' fill='%23FF6B70' transform='rotate(-8 40 160)'/%3E%3Crect x='78' y='70' width='44' height='144' rx='9' fill='%23A394FF'/%3E%3Crect x='138' y='112' width='44' height='102' rx='9' fill='%23FFC746' transform='rotate(8 160 160)'/%3E%3Cpath d='M32 70c5 8 15 18 15 30a15 15 0 1 1-30 0c0-12 10-22 15-30z' fill='%23FFC746'/%3E%3Cpath d='M100 34c5 8 15 18 15 30a15 15 0 1 1-30 0c0-12 10-22 15-30z' fill='%23FF6B70'/%3E%3Cpath d='M168 76c5 8 15 18 15 30a15 15 0 1 1-30 0c0-12 10-22 15-30z' fill='%23A394FF'/%3E%3C/svg%3E")}
.wg-cta-pile{display:none}
.wg-cta-txt h2{color:var(--cream)}
.wg-cta .btn-gold{min-height:56px;padding:0 26px;border-radius:14px;background:var(--yellow);color:var(--navy)}
.wg-cta .btn-gold:hover{background:#FFD36E}
@media (max-width:760px){.wg-cta-box::after{width:90px;height:96px;right:16px;opacity:.9}.wg-cta-txt{padding-bottom:70px}}

/* gsm: polaroids iets rustiger */
@media (max-width:640px){
  .wg-img .wg-ph,.wg-gal .wg-ph{padding:8px 8px 40px}
  .wg-img .wg-chip,.wg-gal .wg-chip{font-size:21px;left:18px;bottom:6px}
  .wg-story-row{flex-wrap:wrap;justify-content:center;row-gap:44px;padding-top:28px;overflow:visible;scroll-snap-type:none}
  .wg-story-ph{flex:0 0 calc(50% - 12px)}
  .wg-story-row::before{display:none}
  /* elke foto krijgt een eigen stukje waslijn boven de knijper, zo klopt het ook als de rij wrapt */
  .wg-story-ph::after{content:"";position:absolute;z-index:2;left:-14px;right:-14px;top:-12px;height:2px;border-radius:2px;background:var(--navy);opacity:.9}
  .wg-story-ph::before{top:-18px;height:28px}
  .wg-story-ph:nth-child(even) .wg-ph,.wg-story-ph:nth-child(3) .wg-ph,.wg-story-ph:nth-child(4) .wg-ph{margin-top:0}
}
/* een soort: kaarten in kolommen zonder gaten, labels klein */
.pr-gm{display:block;columns:3 300px;column-gap:18px}
.pr-maand{break-inside:avoid;margin:0 0 18px;display:block}
.pr-maand li{grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:start;padding:6px 0}
.pr-dag{grid-row:span 2;width:30px;height:30px;font-size:13px;border-radius:9px}
.pr-n{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;padding-top:4px}
.pr-n a{line-height:1.25}
.pr-maand em{margin:0;padding:2px 7px;font-size:10px;line-height:1.2;letter-spacing:.04em;vertical-align:0;flex:none}
.pr-oms{grid-column:2;line-height:1.35}
.pr-maand h2{font-size:22px}
@media (max-width:640px){.pr-gm{columns:1}}

/* de lucht van de geschiedenis: echte wolkjes in de kantlijn, die heel traag drijven */
#geschiedenis::before{background:linear-gradient(180deg,#D9E8FA 0%,#EAF3FC 70%,#F1F7FD 100%)}
#geschiedenis::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none;border-radius:48px 48px 0 0;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='62'%20cy='52'%20r='30'/%3E%3Ccircle%20cx='100'%20cy='38'%20r='36'/%3E%3Ccircle%20cx='142'%20cy='54'%20r='26'/%3E%3Crect%20x='34'%20y='52'%20width='136'%20height='34'%20rx='17'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -40px top 70px/170px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='62'%20cy='52'%20r='30'/%3E%3Ccircle%20cx='100'%20cy='38'%20r='36'/%3E%3Ccircle%20cx='142'%20cy='54'%20r='26'/%3E%3Crect%20x='34'%20y='52'%20width='136'%20height='34'%20rx='17'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -50px top 34px/230px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='62'%20cy='52'%20r='30'/%3E%3Ccircle%20cx='100'%20cy='38'%20r='36'/%3E%3Ccircle%20cx='142'%20cy='54'%20r='26'/%3E%3Crect%20x='34'%20y='52'%20width='136'%20height='34'%20rx='17'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -30px top 58%/130px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2090'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='62'%20cy='52'%20r='30'/%3E%3Ccircle%20cx='100'%20cy='38'%20r='36'/%3E%3Ccircle%20cx='142'%20cy='54'%20r='26'/%3E%3Crect%20x='34'%20y='52'%20width='136'%20height='34'%20rx='17'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -30px top 80%/120px auto;opacity:.95}
@media (prefers-reduced-motion:no-preference){#geschiedenis::after{animation:dgWolk 24s ease-in-out infinite alternate}}
@keyframes dgWolk{to{transform:translateX(18px)}}
@media (max-width:760px){#geschiedenis::after{background-size:100px auto,130px auto,0 0,0 0;background-position:left -40px top 14px,right -50px top 10px,0 0,0 0}}

/* ==================================================================
 * Eigen widgets: leeftijd, verjaardagsmaatjes, wensenmachine
 * ================================================================== */
.bw-intro{margin:0 0 24px;max-width:none;text-wrap:pretty;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#3A4766}
.bw-veld{display:flex;flex-direction:column;gap:6px;max-width:360px;margin-bottom:16px}
.bw-veld span{font-size:14px;font-weight:700;color:var(--navy)}
.bw-veld input{height:58px;padding:0 16px;border:1.5px solid rgba(11,33,74,.22);border-radius:14px;background:#fff;font:700 18px var(--font);color:var(--navy)}
.bw-veld input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px #FFE3E2}
.bw-conf{position:fixed;z-index:200;width:9px;height:14px;margin:-7px 0 0 -4px;border-radius:2px;pointer-events:none;animation:bwConf 1.2s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bwConf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 160px)) rotate(var(--r));opacity:0}}

/* 1. leeftijd */
.bw-leeftijd{background:#ECE8FF;border-radius:36px;width:calc(100% - 40px);max-width:calc(var(--wrap) - 40px);margin:clamp(8px,1.5vw,20px) auto;overflow:hidden}
.bw-leeftijd .wg-in{max-width:none;padding:0 clamp(24px,4.4vw,56px)}
@media (max-width:760px){.bw-leeftijd{border-radius:28px}}
.bw-l-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.bw-l-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.bw-l-form .bw-veld{margin:0;flex:1 1 220px}
.bw-l-uit{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bw-tegel{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:120px;padding:18px;border-radius:20px;background:#fff;box-shadow:0 14px 30px -24px rgba(11,33,74,.5);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.bw-tegel b{font:800 clamp(24px,2.6vw,34px)/1 var(--font-head);letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bw-tegel span{font-size:14px;line-height:1.3;color:#5D6785}
.bw-t1{grid-row:span 2;background:var(--coral)}
.bw-t1 b{font-size:clamp(64px,8vw,112px);color:var(--navy)}
.bw-t1 span{color:var(--navy);font-weight:700;font-size:16px}
.bw-t2 b{color:#7B67E8}.bw-t3 b{color:#B57A00}.bw-t4 b{color:#E0484E}.bw-t5 b{color:#2E9E84}
.bw-t6{background:var(--navy)}.bw-t6 b{color:var(--yellow)}.bw-t6 span{color:rgba(255,252,245,.8)}
.bw-leeftijd:not(.is-klaar) .bw-tegel b{opacity:.35}
.is-klaar .bw-tegel{animation:bwOp .6s cubic-bezier(.3,1.5,.5,1) both}
.is-klaar .bw-t2{animation-delay:.05s}.is-klaar .bw-t3{animation-delay:.1s}.is-klaar .bw-t4{animation-delay:.15s}.is-klaar .bw-t5{animation-delay:.2s}.is-klaar .bw-t6{animation-delay:.25s}
@keyframes bwOp{0%{transform:translateY(10px) scale(.96)}100%{transform:none}}
.bw-mijlpaal{grid-column:1/-1;margin:4px 0 0;padding:14px 18px;border-radius:16px;background:#FFF0C7;font:600 24px/1.25 "Caveat",cursive;color:var(--navy)}
.bw-ster{position:absolute;right:-8px;top:-14px;padding:6px 14px;border-radius:999px;background:var(--yellow);font-weight:800;font-size:13px;color:var(--navy);rotate:6deg;box-shadow:0 8px 18px -10px rgba(11,33,74,.5)}
@media (max-width:860px){.bw-l-grid{grid-template-columns:1fr}}
@media (max-width:520px){.bw-l-uit{grid-template-columns:repeat(2,minmax(0,1fr))}.bw-t1{grid-row:auto;grid-column:1/-1;min-height:0}.bw-t1 b{font-size:64px}}

/* 2. verjaardagsmaatjes */
.bw-s-kop{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.bw-s-kop .wg-eyebrow{justify-content:center}
.bw-s-kop .bw-intro{margin-left:auto;margin-right:auto}
.bw-s-form{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.bw-s-lijn{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:34px 18px;margin-top:56px;padding-top:30px;min-height:120px}
.bw-s-lijn::before{content:"";position:absolute;left:0;right:0;top:0;height:50px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 50' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C 300 44, 1000 44, 1300 4' fill='none' stroke='%230B214A' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.bw-s-p{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:200px;padding:14px 14px 16px;border-radius:6px;background:#fff;color:var(--navy);text-decoration:none;box-shadow:0 22px 40px -26px rgba(11,33,74,.55);rotate:calc((var(--i) - 3.5) * 1.2deg);transform-origin:50% -20px;animation:bwHang .9s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 70ms);transition:rotate .4s,translate .4s}
.bw-s-p:nth-child(even){rotate:calc((3.5 - var(--i)) * 1.1deg);margin-top:14px}
.bw-s-p:hover{rotate:0deg;translate:0 -6px;color:var(--navy)}
@keyframes bwHang{0%{transform:translateY(-30px) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.bw-s-clip{position:absolute;left:50%;top:-22px;width:12px;height:34px;margin-left:-6px;border-radius:3px;background:var(--coral)}
.bw-s-p:nth-child(3n+2) .bw-s-clip{background:var(--lilac)}.bw-s-p:nth-child(3n) .bw-s-clip{background:var(--yellow)}
.bw-s-p em{display:grid;place-items:center;width:100%;aspect-ratio:1.25;margin-bottom:8px;border-radius:3px;background:#FFE3E2;font:800 46px var(--font-head);font-style:normal;color:var(--coral)}
.bw-s-p:nth-child(3n+2) em{background:#ECE8FF;color:var(--lilac)}.bw-s-p:nth-child(3n) em{background:#FFF0C7;color:#E9A91C}
.bw-s-p b{font-size:16px;line-height:1.25}
.bw-s-p span{font-size:13px;line-height:1.35;color:#5D6785}
.bw-s-leeg{margin:0;padding:22px 26px;border-radius:18px;background:#fff;font:600 24px/1.3 "Caveat",cursive;color:var(--navy)}
.bw-s-meer{margin:40px 0 0;text-align:center}
@media (prefers-reduced-motion:reduce){.bw-s-p{animation:none}}
@media (max-width:640px){.bw-s-p{width:calc(50% - 10px)}.bw-s-p em{font-size:34px}.bw-s-lijn::before{display:none}}

/* 3. wensenmachine */
.bw-w-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.bw-soorten{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.bw-soorten button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:#fff;color:var(--navy);font:700 15px var(--font);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(11,33,74,.18)}
.bw-soorten button[aria-checked="true"]{background:var(--navy);color:var(--cream);box-shadow:none}
.bw-w-kaart-w{perspective:1200px;display:flex;justify-content:center;padding:30px 0}
.bw-w-kaart{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;width:min(100%,460px);min-height:320px;padding:46px 34px 30px;border-radius:12px 12px 26px 26px;background:var(--cream);box-shadow:0 34px 60px -30px rgba(11,33,74,.55),0 0 0 1.5px rgba(11,33,74,.06);rotate:3deg;overflow:hidden}
.bw-w-kaart::before{content:"";position:absolute;inset:0 0 auto;height:18px;background:var(--navy)}
.bw-w-kaart::after{content:"";position:absolute;right:0;bottom:0;width:60px;height:60px;border-radius:0 0 26px 0;background:linear-gradient(135deg,transparent 50%,#EFE4CC 50%)}
.bw-w-clip{position:absolute;left:50%;top:-6px;width:16px;height:40px;margin-left:-8px;border-radius:5px;background:var(--coral);z-index:2}
.bw-w-tekst{margin:0;font:600 clamp(28px,3vw,38px)/1.2 "Caveat",cursive;color:var(--navy);min-height:3.6em}
.bw-w-kaart.is-draai{animation:bwDraai .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes bwDraai{0%{transform:rotateY(-90deg) scale(.96);opacity:.2}100%{transform:none;opacity:1}}
.bw-w-acties{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.bw-w-acties .ft-ghost{cursor:pointer;border:0;font:700 15px var(--font)}
.bw-wa{background:#25D366 !important;color:#fff !important}
@media (prefers-reduced-motion:reduce){.bw-w-kaart.is-draai{animation:none}}
@media (max-width:860px){.bw-w-grid{grid-template-columns:1fr}.bw-w-kaart{rotate:1.5deg}}
.bw-t4 b{font-size:clamp(20px,2vw,26px);white-space:nowrap}
.bw-t6{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;min-height:0}
.bw-t6 b{font-size:clamp(34px,3.4vw,46px)}
.bw-t6 span{font-size:16px;font-weight:700}
@media (max-width:520px){.bw-t4 b{font-size:20px}}
.bw-t6 b{white-space:nowrap}
@media (max-width:520px){.bw-t4 b{font-size:16px;letter-spacing:-.02em}.bw-tegel{padding:16px 14px}}

/* ==================================================================
 * Ook vandaag gebeurd: een tijdreis op een donkere band.
 * Een liniaal van het oudste jaar tot vandaag met genummerde spelden,
 * daaronder de gebeurtenissen als korte krantenberichten.
 * ================================================================== */
#geschiedenis{color:var(--cream)}
#geschiedenis::before{background:radial-gradient(900px 340px at 85% 0%,rgba(163,148,255,.22),transparent 70%),radial-gradient(700px 300px at 0% 100%,rgba(255,107,112,.14),transparent 70%),var(--navy)}
#geschiedenis::after{display:none}
#geschiedenis .dg-eb{color:var(--yellow)}
#geschiedenis .dg-h2{color:var(--cream)}
/* de liniaal */
.dg-tl{position:relative;margin:30px 0 8px;padding:34px 18px 40px}
.dg-tl-as{position:relative;height:0;border-top:1.5px solid rgba(253,250,242,.55)}
.dg-tl-as::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;background:repeating-linear-gradient(90deg,rgba(253,250,242,.28) 0 1px,transparent 1px 2%)}
.dg-tl-t{position:absolute;top:-10px;width:1.5px;height:10px;background:rgba(253,250,242,.6)}
.dg-tl-t i{position:absolute;top:16px;left:50%;transform:translateX(-50%);font:600 12px/1 var(--font);font-style:normal;letter-spacing:.06em;color:rgba(253,250,242,.62);white-space:nowrap}
.dg-tl-t:first-child i{transform:none;left:-1px}
.dg-tl-nu{background:none}
.dg-tl-nu::before{content:"";position:absolute;left:-5px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,112,.6)}
.dg-tl-nu i{transform:translateX(-100%);left:8px;color:var(--cream);font-weight:700}
.dg-tl-p{position:absolute;bottom:0;width:0;height:30px;border-left:1.5px solid var(--k)}
.dg-tl-p b{position:absolute;left:50%;top:-24px;transform:translateX(-50%);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--k);color:var(--navy);font:800 12px/1 var(--font-head);box-shadow:0 0 0 3px var(--navy)}
.dg-tl-o{bottom:auto;top:0;height:22px}
.dg-tl-o b{top:auto;bottom:-24px}
@media (prefers-reduced-motion:no-preference){
  .dg-tl-nu::before{animation:dgNu 2.4s ease-out infinite}
  .dg-tl-p b{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .dg-tl-p:hover b{transform:translateX(-50%) scale(1.25)}
}
@keyframes dgNu{70%,100%{box-shadow:0 0 0 10px rgba(255,107,112,0)}}
/* de berichten */
#geschiedenis .dg-hist{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
#geschiedenis .dg-hist::before{display:none}
#geschiedenis .dg-ev{display:block;text-align:left;padding:4px 26px 0;border-left:1.5px solid rgba(253,250,242,.14)}
#geschiedenis .dg-ev:first-child{padding-left:0;border-left:0}
.dg-ev-j{display:flex;align-items:center;gap:12px;margin:0}
.dg-ev-j b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--k);color:var(--navy);font:800 13px/1 var(--font-head)}
.dg-ev-j span{font:800 clamp(40px,4.2vw,56px)/1 var(--font-head);letter-spacing:-.045em;color:var(--k)}
.dg-ev-g{display:block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(253,250,242,.55)}
#geschiedenis .dg-ev h3{margin:14px 0 6px;font:700 19px/1.3 var(--font);color:var(--cream)}
#geschiedenis .dg-ev p:not(.dg-ev-j){margin:0;max-width:none;font-size:15px;line-height:1.55;color:rgba(253,250,242,.74)}
#geschiedenis .dg-meer{margin-top:40px;border-top:1.5px solid rgba(253,250,242,.16)}
#geschiedenis .dg-meer summary{color:var(--cream)}
#geschiedenis .dg-meer-l div{color:rgba(253,250,242,.74)}
#geschiedenis .dg-meer-l b{color:var(--yellow)}
#geschiedenis .dg-meer-l strong{color:var(--cream)}
@media (max-width:1000px){
  #geschiedenis .dg-hist{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  #geschiedenis .dg-ev:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){
  .dg-tl{margin:20px 0 0;padding:30px 10px 34px}
  .dg-tl-t i{font-size:10px;letter-spacing:.02em}
  .dg-tl-t:not(:first-child):not(.dg-tl-nu):nth-child(even) i{display:none}
  /* compact: jaar links, tekst rechts, geen lege ruimte */
  #geschiedenis .dg-hist{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:18px}
  #geschiedenis .dg-ev{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;padding:16px 0;border-left:0;border-top:1px solid rgba(253,250,242,.14)}
  #geschiedenis .dg-ev:first-child{border-top:0;padding-top:4px}
  .dg-ev-j{grid-row:1 / span 3;flex-direction:column;align-items:flex-start;gap:6px}
  .dg-ev-j b{width:22px;height:22px;font-size:11px}
  .dg-ev-j span{font-size:30px}
  .dg-ev-g{grid-column:2;margin:0;font-size:11px;letter-spacing:.1em}
  #geschiedenis .dg-ev h3{grid-column:2;margin:4px 0 4px;font-size:17px}
  #geschiedenis .dg-ev p:not(.dg-ev-j){grid-column:2;font-size:14px;line-height:1.5}
  #geschiedenis .dg-meer{margin-top:20px}
}

/* het karakter op de gsm: icoon links, tekst rechts, compact */
@media (max-width:640px){
  .dg-kar{row-gap:0;margin-top:14px}
  .dg-kar > div{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px 0 !important;border-top:1px solid rgba(11,33,74,.1)}
  .dg-kar > div:first-child{border-top:0;padding-top:4px !important}
  .dg-kar-i{grid-row:1 / span 3;width:52px;height:52px}
  .dg-kar h3{margin:2px 0 2px;font-size:19px}
  .dg-kar small{font-size:13px}
  .dg-kar p{margin-top:4px;font-size:14px;line-height:1.45}
}

/* ook jarig op de gsm: het label erboven, de namen als nette lijst */
@media (max-width:640px){
  .dg-rest{display:block;margin-top:26px;font-size:14px;line-height:1.45}
  .dg-rest-k{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#BF3439}
  .dg-rest > span:not(.dg-rest-k){display:block;padding:9px 0;border-top:1px solid rgba(11,33,74,.09)}
  .dg-rest > span:not(.dg-rest-k):last-child{border-bottom:1px solid rgba(11,33,74,.09)}
}

/* ==================================================================
 * Menu op de gsm: drie kaarsjes worden een kruisje, het menu valt als
 * een donker blad over de pagina, met grote links en de ontdek-links.
 * ================================================================== */
@media (max-width:900px){
  .menu-t{position:static}
  .menu-t summary{width:44px;height:44px;background:var(--navy);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
  .menu-t summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
  .menu-t summary span{background:none}
  .menu-t summary span::before,.menu-t summary span::after{display:none}
  .mt-k{position:relative;display:block;width:18px;height:14px}
  .mt-k i{position:absolute;left:0;height:2.4px;border-radius:2px;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s,width .3s,top .3s,background-color .3s}
  .mt-k i:nth-child(1){top:0;width:18px;background:var(--coral)}
  .mt-k i:nth-child(2){top:6px;width:12px;background:var(--lilac)}
  .mt-k i:nth-child(3){top:12px;width:15px;background:var(--yellow)}
  .menu-t summary:hover .mt-k i:nth-child(2){width:18px}
  .menu-t[open] summary{transform:rotate(90deg)}
  .menu-t[open] .mt-k i{background:var(--cream);width:18px;top:6px}
  .menu-t[open] .mt-k i:nth-child(1){transform:rotate(45deg)}
  .menu-t[open] .mt-k i:nth-child(2){opacity:0}
  .menu-t[open] .mt-k i:nth-child(3){transform:rotate(-45deg)}
  /* het blad */
  .mt-p{position:fixed;z-index:60;left:0;right:0;top:var(--mt-top,84px);bottom:0;overflow:auto;overscroll-behavior:contain;padding:22px 20px calc(28px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;
    background:radial-gradient(circle at 88% 12%,rgba(255,199,70,.9) 0 3px,transparent 3.5px),radial-gradient(circle at 12% 64%,rgba(163,148,255,.9) 0 3px,transparent 3.5px),radial-gradient(circle at 78% 82%,rgba(255,107,112,.9) 0 3px,transparent 3.5px),radial-gradient(500px 260px at 100% 0%,rgba(163,148,255,.25),transparent 70%),var(--navy);color:var(--cream)}
  .menu-t .mt-nav{position:static;display:block;min-width:0;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;counter-reset:mt}
  .mt-nav > li{counter-increment:mt;border-bottom:1px solid rgba(253,250,242,.12)}
  .menu-t .mt-nav > li > a{display:flex;align-items:baseline;gap:14px;min-height:0;padding:14px 4px;border-radius:0;background:none;color:var(--cream);font:800 30px/1.1 var(--font-head);letter-spacing:-.035em;white-space:normal}
  .mt-nav > li > a::before{content:counter(mt,decimal-leading-zero);font:700 12px/1 var(--font);letter-spacing:.08em;color:var(--yellow);transform:translateY(-4px)}
  .mt-nav > li > a span{background:linear-gradient(var(--coral),var(--coral)) 0 100%/0 3px no-repeat;transition:background-size .35s}
  .menu-t .mt-nav > li > a:hover,.menu-t .mt-nav > li > a[aria-current]{background:none;color:var(--cream)}
  .mt-nav > li > a:hover span,.mt-nav > li > a[aria-current] span{background-size:100% 3px}
  .mt-nav > li > a[aria-current]::before{color:var(--coral)}
  .menu-t .mt-nav .sub{padding:0 0 12px 34px}
  .menu-t .mt-nav .sub a{display:flex;min-height:40px;padding:0;color:rgba(253,250,242,.8);font-size:16px;background:none}
  .mt-eb{margin:30px 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
  .mt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
  .mt-chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid rgba(253,250,242,.22);color:var(--cream);font-size:14.5px;font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s}
  .mt-chips a:hover{background:rgba(253,250,242,.1);border-color:var(--cream)}
  html:has(.menu-t[open]){overflow:hidden}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .menu-t[open] .mt-p{animation:mtIn .45s cubic-bezier(.2,.9,.3,1) both}
  .menu-t[open] .mt-nav > li,.menu-t[open] .mt-eb,.menu-t[open] .mt-chips{animation:mtLi .5s cubic-bezier(.2,.9,.3,1) both}
  .menu-t[open] .mt-nav > li:nth-child(2){animation-delay:.05s}
  .menu-t[open] .mt-nav > li:nth-child(3){animation-delay:.1s}
  .menu-t[open] .mt-nav > li:nth-child(4){animation-delay:.15s}
  .menu-t[open] .mt-nav > li:nth-child(n+5){animation-delay:.2s}
  .menu-t[open] .mt-eb,.menu-t[open] .mt-chips{animation-delay:.22s}
}
@keyframes mtIn{from{clip-path:inset(0 0 100% 0 round 28px 28px 0 0)}to{clip-path:inset(0 0 0 0 round 28px 28px 0 0)}}
@keyframes mtLi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* het kalenderblad omslaan: de nieuwe dag komt zacht in beeld, de kalender blijft staan */
@view-transition{navigation:auto}
.dg-cal{view-transition-name:dg-kalender}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-group(dg-kalender){animation-duration:0s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* de keuzelijsten: geen blauw kadertje in het vak, het hele vak licht op */
.dg-sel select:focus{outline:none}
.dg-sel{transition:border-color .2s,box-shadow .2s}
.dg-sel:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(163,148,255,.35)}
.dg-sel:has(select:focus-visible){border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,107,112,.25)}

/* weerrecords op de gsm: drie naast elkaar, compact */
@media (max-width:640px){
  .dg-weer{margin-top:-24px;padding-top:22px}
  .dg-weer-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dg-weer-r > div{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 10px}
  .dg-weer-r svg{width:28px;height:28px}
  .dg-weer-r span,.dg-weer-r small{font-size:11.5px}
  .dg-weer-r b{font-size:17px;white-space:nowrap}
}
@media (max-width:900px){.menu-t .mt-nav > li > a{font-size:27px}}
/* het menublad sluit strak aan onder de hoofding, zonder rondingen */
@media (max-width:900px){
  .mt-p{border-radius:0;box-shadow:inset 0 3px 0 var(--coral)}
}
@keyframes mtIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* welke dag vieren we hierna, op de gsm: de dag bovenaan, vorige en volgende netjes naast elkaar */
@media (max-width:640px){
  .dg-verder-nav{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"nu nu" "vorige volgende";gap:18px 12px;align-items:center}
  .dg-verder-nav .dg-nu{grid-area:nu;justify-content:center;font-size:26px}
  .dg-verder-nav .dg-pill:first-child{grid-area:vorige}
  .dg-verder-nav .dg-pill:last-child{grid-area:volgende}
  .dg-verder-nav .dg-pill{justify-content:center;padding:0 12px;white-space:nowrap}
  .dg-kal{display:inline-flex;margin-top:22px}
}
.dg-verder .dg-eb{color:var(--yellow)}
@media (max-width:640px){.dg-verder-nav{width:100%}.dg-verder-nav .dg-nu{justify-content:flex-start}.dg-kal{margin-top:26px}}
@media (max-width:640px){.dg-verder-nav .dg-nu{font-size:clamp(21px,7vw,26px);gap:10px;white-space:nowrap}}

/* ---------- Jouw verjaardag: aftellen na "Ontdek jouw dag" (dag.js) ---------- */
.dg-groot.is-jouw{font-size:clamp(44px,5.8vw,82px)}
.dg-teller{font-weight:inherit;font-variant-numeric:tabular-nums;color:var(--navy)}
.dg-leaf-vlucht{pointer-events:none;transition:transform .5s cubic-bezier(.55,0,.3,1),opacity .15s .3s}
.dg-leaf-vlucht .dg-leaf-k:empty{display:none}
.dg-jaar .dg-sel{width:200px}
.dg-ander{display:inline-block;margin-top:14px;padding:4px 0;border:0;background:none;font:600 15px var(--font);color:#3A4766;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dg-ander:hover{color:var(--coral)}
@media (max-width:600px){.dg-jaar .dg-kies-r{grid-template-columns:minmax(0,1fr)}.dg-jaar .dg-sel{width:auto}}
.dg-jaar .dg-kies-v{color:var(--navy)}

/* ---------- Mijn dag (/mijn-dag/, mijn.js) ---------- */
.mj-kies .dg-kies-r{display:grid;grid-template-columns:90px minmax(0,1.3fr) minmax(0,1fr);gap:12px;max-width:560px}
.mj-kies .dg-sel{width:auto;min-width:0}
.mj-kies .dg-cta{grid-column:1/-1;justify-content:center}
.mj-privacy{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;color:#5D6785}
.mj-acties{display:flex;flex-wrap:wrap;gap:22px;margin:22px 0 0}
.mj-acties .dg-ander{margin:0}
.mj-leaf{cursor:default}
.mj-leaf:hover{transform:none}
.mj-leaf .dg-leaf-k{text-transform:uppercase}
.mj-open .dg-note{width:130px}

.mj-mp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:36px}
.mj-mp-top .dg-h2{margin-bottom:12px}
.mj-uitleg{margin:0;max-width:620px;color:#3A4766}
.mj-mp-nu{display:grid;justify-items:end;gap:12px}
.mj-mp-nu b{font:800 20px var(--font-head);color:#BF3439}
.mj-mp-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mj-mp-l li{position:relative;display:grid;gap:2px;padding:18px 18px 16px;border-radius:18px;background:#fff;box-shadow:0 10px 28px -18px rgba(11,33,74,.35)}
.mj-mp-l b{font:800 30px/1 var(--font-head);letter-spacing:-.03em;color:var(--navy)}
.mj-mp-l span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5D6785}
.mj-mp-l time{margin-top:8px;font-size:14px;line-height:1.35;color:var(--navy)}
.mj-mp-l small{font-size:13px;color:#5D6785}
.mj-mp-l .is-voorbij{background:transparent;box-shadow:none;border:1.5px dashed rgba(11,33,74,.18)}
.mj-mp-l .is-voorbij b{color:#8A93AB}
.mj-mp-l .is-voorbij::after{content:"";position:absolute;right:16px;top:18px;width:14px;height:8px;border-left:2.6px solid var(--mint,#7FD6C2);border-bottom:2.6px solid var(--mint,#7FD6C2);transform:rotate(-45deg)}
.mj-mp-l .is-volgende{background:var(--coral);box-shadow:0 18px 40px -20px rgba(255,107,112,.9);transform:rotate(-1.5deg)}
.mj-mp-l .is-volgende b,.mj-mp-l .is-volgende time,.mj-mp-l .is-volgende span,.mj-mp-l .is-volgende small{color:var(--navy)}

.mj-tal{margin-top:80px;padding:48px 0 52px;background:var(--navy);color:var(--cream)}

.mj-tweeling{margin:18px 0 0;padding:14px 18px;border-radius:14px;background:#FFE9A8;color:var(--navy)}
.mj-sa-l{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mj-sa-k{display:grid;align-content:start;gap:4px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 10px 28px -18px rgba(11,33,74,.35)}
.mj-sa-k a,.mj-sa-k b{font:800 19px/1.25 var(--font-head);color:var(--navy);text-decoration:none}
.mj-sa-k a:hover{color:var(--coral)}
.mj-sa-k span{font-size:14px;line-height:1.45;color:#3A4766}
.mj-sa-r{justify-self:start;margin-bottom:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#FFE3E2;color:#BF3439}
.mj-k1 .mj-sa-r{background:#E9E4FF;color:#5B47C9}.mj-k2 .mj-sa-r{background:#FFE9A8;color:#8A5A00}.mj-k3 .mj-sa-r{background:#D8F3EC;color:#22705F}

.mj-ev-l{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid rgba(11,33,74,.14);display:grid;gap:26px}
.mj-ev-l li{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:22px}
.mj-ev-l li::before{content:"";position:absolute;left:-36px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px var(--cream)}
.mj-ev-l .is-voor::before{background:#C9CEDB}
.mj-ev-l .is-geboren::before{background:var(--yellow);width:20px;height:20px;left:-39px;top:3px}
.mj-ev-l b{font:800 24px/1 var(--font-head);color:var(--navy)}
.mj-ev-l small{grid-column:1;font-size:13px;font-weight:700;color:#BF3439}
.mj-ev-l .is-voor small{color:#5D6785}
.mj-ev-l p{grid-column:2;grid-row:1/span 2;margin:0;line-height:1.55;color:#3A4766}
.mj-ev-l strong{color:var(--navy)}

.mj-kar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin-top:20px}
.mj-kar-k h3{margin:14px 0 2px;font:800 22px/1.2 var(--font-head);color:var(--navy)}
.mj-kar-k small{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5D6785}
.mj-kar-k p{margin:8px 0 0;font-size:15px;line-height:1.5;color:#3A4766}
.mj-kar-i{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font:800 30px/1 var(--font-head);color:var(--navy);background:#E9E4FF}
.mj-i-chin{background:#FFE3E2;color:#BF3439;font-family:serif}.mj-i-steen{background:#D8F3EC;color:#22705F}.mj-i-bloem{background:#FFE9A8;color:#B57A00}.mj-i-gen{font-size:17px;background:var(--navy);color:var(--cream)}

.mj-vj-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.mj-vj-l li{position:relative;display:grid;gap:2px;padding:16px 14px;border-radius:16px;background:#fff;box-shadow:0 10px 28px -18px rgba(11,33,74,.35)}
.mj-vj-l b{font:800 22px/1 var(--font-head);color:var(--navy)}
.mj-vj-l span{font-size:14px;color:#3A4766}
.mj-vj-l small{font-size:13px;color:#5D6785}
.mj-vj-l i{position:absolute;right:-6px;top:-10px;padding:3px 9px;border-radius:999px;background:var(--yellow);font:700 12px var(--font);font-style:normal;color:var(--navy);transform:rotate(6deg)}
.mj-vj-l .is-weekend{background:#FFF4D6}

.mj-club{margin-top:90px;padding:64px 0}
.mj-club h2{margin:10px 0 12px;font:800 clamp(30px,3.6vw,44px)/1.1 var(--font-head);letter-spacing:-.03em;color:var(--cream)}
.mj-club p:not(.dg-eb){max-width:640px;margin:0;color:rgba(255,252,245,.8)}

@media (max-width:1000px){
  .mj-mp-l{grid-template-columns:repeat(3,minmax(0,1fr))}
      .mj-sa-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mj-kar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mj-vj-l{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .mj-kies .dg-kies-r{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);max-width:none}
  .mj-kies .mj-sel-j{grid-column:1/-1}
  .mj-mp-top{grid-template-columns:minmax(0,1fr);gap:18px}
  .mj-mp-nu{justify-items:start}
  .mj-mp-nu .dg-cta{width:auto}
  .mj-mp-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mj-mp-l li{padding:14px}
  .mj-mp-l b{font-size:24px}
  .mj-tal{margin-top:56px;padding:36px 0 40px}
      .mj-sa-l{grid-template-columns:minmax(0,1fr);gap:10px}
  .mj-sa-k{padding:14px 16px}
  .mj-ev-l li{grid-template-columns:minmax(0,1fr)}
  .mj-ev-l p{grid-column:1;grid-row:auto;margin-top:6px}
  .mj-kar{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .mj-kar-i{width:52px;height:52px;font-size:24px;border-radius:16px}
  .mj-kar-k h3{font-size:19px}
  .mj-vj-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mj-club{margin-top:64px;padding:44px 0}
}
.mj-acties[hidden]{display:none}
.mj-club .dg-verder-in{display:block;text-align:left}
.mj-mp-l .mj-wd{font-style:normal}
.mj-club h2{hyphens:manual}
@media (max-width:640px){
  .mj-i-gen{font-size:14px}
  .mj-mp-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mj-mp-l li{padding:12px 10px 10px;border-radius:14px}
  .mj-mp-l b{font-size:19px}
  .mj-mp-l span{font-size:11px;letter-spacing:.1em}
  .mj-mp-l time{margin-top:4px;font-size:12.5px}
  .mj-mp-l small{font-size:12px}
  .mj-mp-l .mj-wd{display:none}
  .mj-mp-l .is-voorbij::after{right:10px;top:14px;width:10px;height:6px}
  .mj-sa-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mj-sa-k{padding:12px}
  .mj-sa-k a,.mj-sa-k b{font-size:16px}
  .mj-sa-k span{font-size:13px}
  .mj-vj-l{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .mj-vj-l li{padding:12px 8px;border-radius:12px}
  .mj-vj-l b{font-size:17px}
  .mj-vj-l span,.mj-vj-l small{font-size:12px}
  .mj-vj-l i{right:-4px;top:-9px;font-size:10px;padding:2px 7px}
  .mj-ev-l{gap:20px}
}
.mj-tal .dg-eb{color:var(--yellow)}
/* het kalenderblad als echt papier: een fijne korrel, een vleugje vergeling en de perforatie onder de klem */
.dg-leaf{background-color:#FFFCF5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .25' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 60%),linear-gradient(172deg,#FFFDF7 0%,#F8F1E1 100%);box-shadow:0 26px 50px -24px rgba(11,33,74,.45),inset 0 30px 16px -24px rgba(11,33,74,.16),inset 0 -1px 0 rgba(11,33,74,.06)}
.dg-leaf::before{content:"";position:absolute;left:18px;right:18px;top:31px;height:6px;background:radial-gradient(circle,rgba(11,33,74,.18) 1.5px,transparent 2px) 0 50%/11px 6px repeat-x;pointer-events:none}

/* het geboortejaar als een poststempel op het blad */
.mj-stempel{position:absolute;left:22px;bottom:26px;display:grid;place-items:center;align-content:center;width:84px;height:84px;border-radius:50%;border:2.5px solid rgba(91,71,201,.75);box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 5.5px rgba(91,71,201,.55);color:#5B47C9;transform:rotate(-14deg);opacity:.92;mix-blend-mode:multiply}
.mj-stempel small{font:700 9px var(--font);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1px}
.mj-stempel b{font:800 22px/1 var(--font-head);letter-spacing:-.02em}
.mj-stempel:has(b:empty){display:none}
.mj-open .dg-note{width:150px;top:-12px;right:-44px}

/* ---------- Mijn dag: je leven in getallen, als bento ---------- */
.mj-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}
.mj-b{position:relative;display:grid;align-content:start;gap:4px;padding:22px 24px;border-radius:22px;background:rgba(255,252,245,.06);border:1px solid rgba(255,252,245,.1);min-width:0}
.mj-b > span,.mj-b small{font-size:14px;color:rgba(255,252,245,.72)}
.mj-b-sec{grid-column:1/4;padding:26px 28px}
.mj-b-sec small{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--yellow)}
.mj-odo{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:5px;margin:10px 0 6px;font:800 clamp(30px,4.6vw,64px)/1 var(--font-head);color:var(--navy)}
.mj-odo-c{display:inline-grid;place-items:center;min-width:.82em;padding:.12em .06em;border-radius:.16em;background:linear-gradient(#FFFCF5 0 49%,#F1E9D6 51% 100%);box-shadow:0 6px 14px -8px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;overflow:hidden}
.mj-odo-c:last-child{background:linear-gradient(#FF8A8E 0 49%,#FF6B70 51% 100%)}
.mj-odo-p{color:var(--yellow);width:.22em;text-align:center}
.mj-odo-c.is-rol{animation:mjRol .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes mjRol{from{transform:translateY(-45%) rotateX(70deg);opacity:.2}to{transform:none;opacity:1}}
.mj-b-zon{grid-column:4;grid-row:1/4;justify-items:center;text-align:center;align-content:center;background:radial-gradient(circle at 50% 30%,rgba(255,199,70,.16),rgba(255,252,245,.04) 65%)}
.mj-baan{width:100%;max-width:240px;height:auto;overflow:visible}
.mj-aarde{offset-path:path("M14 75a96 54 0 1 0 192 0a96 54 0 1 0 -192 0");offset-rotate:0deg;animation:mjBaan 14s linear infinite}
@keyframes mjBaan{to{offset-distance:100%}}
.mj-b-zon > b{font:800 clamp(56px,6vw,84px)/1 var(--font-head);letter-spacing:-.04em;color:var(--yellow)}
.mj-km{margin:14px 0 0;font-size:13px;line-height:1.4;color:rgba(255,252,245,.7)}
.mj-km b{display:block;font:800 17px var(--font-head);color:var(--cream);font-variant-numeric:tabular-nums}
.mj-b-wk{grid-column:1/4}
.mj-wk-kop{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.mj-wk-kop b{font:800 34px/1 var(--font-head);color:#C5BBFF;letter-spacing:-.03em}
.mj-wk{position:relative}
.mj-wk canvas{display:block}
.mj-wk-nu{position:absolute;width:var(--d,8px);height:var(--d,8px);margin:calc(var(--d,8px) / -2) 0 0 calc(var(--d,8px) / -2);border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,112,.7);animation:wgPuls 1.6s ease-out infinite}
.mj-wk-nu[hidden]{display:none}
.mj-b-wk > small{margin-top:12px}
.mj-b-k b{font:800 clamp(28px,2.8vw,40px)/1.05 var(--font-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mj-b-k:nth-of-type(4) b{color:var(--mint,#7FD6C2)}.mj-b-k:nth-of-type(5) b{color:#FF9DA0}.mj-b-maan b{color:var(--cream)}
.mj-b-maan{grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.mj-b-maan svg{grid-row:1/3}
.mj-b-maan span{grid-column:2}
.mj-bento > .mj-b-k:nth-of-type(4){grid-column:1}.mj-bento > .mj-b-k:nth-of-type(5){grid-column:2}.mj-bento > .mj-b-maan{grid-column:3}
@media (max-width:1000px){
  .mj-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mj-b-sec,.mj-b-wk{grid-column:1/-1}
  .mj-b-zon{grid-column:1/-1;grid-row:auto;grid-template-columns:150px auto;justify-content:center;text-align:left;justify-items:start;column-gap:24px}
  .mj-b-zon .mj-baan{grid-row:1/4}
  .mj-bento > .mj-b-k:nth-of-type(4),.mj-bento > .mj-b-k:nth-of-type(5),.mj-bento > .mj-b-maan{grid-column:auto}
}
@media (max-width:640px){
  .mj-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mj-b{padding:16px;border-radius:18px}
  .mj-b-sec{padding:18px 14px}
  .mj-odo{gap:2px;font-size:clamp(19px,6.4vw,30px)}
  .mj-odo-c{min-width:.78em;border-radius:.18em}
  .mj-b-zon{grid-template-columns:110px auto;column-gap:16px}
  .mj-b-zon > b{font-size:48px}
  .mj-wk-kop b{font-size:26px}
  .mj-bento > .mj-b-maan{grid-column:1/-1}
  .mj-stempel{width:70px;height:70px;left:16px;bottom:20px}.mj-stempel b{font-size:18px}
}
.mj-leaf{padding-bottom:34px}
.mj-stempel{left:16px;bottom:14px;width:76px;height:76px}
.mj-stempel b{font-size:20px}
@media (max-width:640px){.mj-stempel{width:68px;height:68px;left:12px;bottom:12px}.mj-stempel b{font-size:17px}.mj-stempel small{font-size:8px}}
@media (max-width:640px){
  .mj-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mj-b-sec,.mj-b-zon,.mj-b-wk{grid-column:1/-1}
  .mj-bento > .mj-b-k,.mj-bento > .mj-b-k:nth-of-type(4),.mj-bento > .mj-b-k:nth-of-type(5),.mj-bento > .mj-b-maan{grid-column:span 2}
  .mj-b-k{padding:14px 12px}
  .mj-b-k b{font-size:20px}
  .mj-b-k > span{font-size:12.5px}
  .mj-b-maan{grid-template-columns:minmax(0,1fr)}
  .mj-b-maan svg{display:none}
  .mj-b-maan span{grid-column:auto}
}

/* ---------- Het kalenderblad omdraaien: de kalendermop op de achterkant (dag.js) ---------- */
.dg-blad{position:absolute;left:30px;top:70px;width:320px;height:340px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.55,-.15,.25,1.25)}
.dg-blad > .dg-leaf{left:0;top:0}
.dg-blad .dg-voor{backface-visibility:hidden}
.dg-blad.is-om{transform:rotateY(180deg)}
.dg-achter{transform:rotateY(180deg);backface-visibility:hidden;justify-content:flex-start;align-items:stretch;padding:44px 22px 30px;text-align:left;font-family:Georgia,"Times New Roman",serif;color:#1B2440;overflow:hidden}
.dg-om{position:absolute;inset:0;z-index:2;border:0;padding:0;background:none;cursor:pointer;border-radius:6px 6px 22px 22px}
.dg-om:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.dg-blad:not(.is-om):hover .dg-voor{transform:rotateY(-10deg)}
.dg-blad .dg-voor{transition:transform .35s}
.dg-mop-t{margin:0 0 6px;text-align:center;font:700 16px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.06em;text-transform:uppercase;color:#0B214A}
.dg-mop{font-size:14px;line-height:1.38;hyphens:auto;text-align:left}
.dg-mop p:only-child{text-align:justify}
.dg-mop p{margin:0}
.dg-mop p + p{margin-top:3px}
.dg-mop-kader{position:relative;margin:12px 4px 0;padding:9px 12px 8px;border:1px solid rgba(11,33,74,.55);outline:1px solid rgba(11,33,74,.25);outline-offset:3px;text-align:center}
.dg-mop-kader::before,.dg-mop-kader::after{content:"✦";position:absolute;top:-9px;font-size:11px;line-height:1;padding:0 4px;background:#FCF7EC;color:var(--coral)}
.dg-mop-kader::before{left:10px}.dg-mop-kader::after{right:10px}
.dg-mop-kader small{display:block;font:700 9px var(--font);letter-spacing:.22em;text-transform:uppercase;color:#5D6785}
.dg-mop-kader p{margin:3px 0 0;font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg-mop-kader b{font-family:var(--font-head);font-weight:800;color:#BF3439}
.dg-mop-weer{margin:auto 0 0;padding-top:10px;text-align:center;font:italic 12px/1.35 var(--font);color:#3A4766}
.dg-mop-weer span{display:inline-block;padding:4px 12px;border-top:1px dashed rgba(11,33,74,.3);border-bottom:1px dashed rgba(11,33,74,.3)}
.dg-mop-terug{position:absolute;right:16px;bottom:8px;font:600 15px "Caveat",cursive;color:#5D6785}
.dg-mop-weer + .dg-mop-terug{display:none}
.dg-om-hint{position:absolute;left:-8px;bottom:6px;z-index:3;margin:0;display:flex;align-items:flex-end;gap:2px;font:600 25px/1 "Caveat",cursive;color:var(--navy);transform:rotate(-7deg);pointer-events:none;transition:opacity .4s}
.dg-om-hint svg{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.dg-om-hint.is-weg{opacity:0}
.dg-cal{transition:transform .6s cubic-bezier(.3,1.2,.4,1),margin .6s cubic-bezier(.3,1.2,.4,1)}
.dg-cal.is-om{animation:none}
@media (prefers-reduced-motion:reduce){.dg-blad,.dg-cal{transition:none}}
@media (max-width:640px){
  .dg-om-hint{left:2px;bottom:-2px;font-size:22px}
  .dg-cal.is-om{transform:rotate(1deg) scale(.9);margin-top:-14px;margin-bottom:-30px}
}
.mj-fout{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#FFE3E2;color:#9E2A2F;font-size:15px;font-weight:600}
.mj-fout[hidden]{display:none}
.dg-sel select option:disabled{color:#B8BECC}

/* ---------- Het papier: dun kalenderpapier met lijntjes en een rode kantlijn ---------- */
.dg-leaf{background-color:#FAF8F2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .34 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 40% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FCFBF6,#F0ECE2)}
.dg-voor,.dg-leaf-next,.dg-leaf-vlucht,.mj-leaf{background-image:linear-gradient(90deg,transparent 38px,rgba(255,107,112,.42) 38px,rgba(255,107,112,.42) 39.5px,transparent 39.5px),repeating-linear-gradient(180deg,transparent 0 27px,rgba(70,110,170,.14) 27px 28px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .34 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 40% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),linear-gradient(180deg,#FCFBF6,#F0ECE2);background-position:0 0,0 46px,0 0,0 0,0 0}
.dg-curl{background:linear-gradient(135deg,transparent 50%,#E4DFD3 50%,#F7F4EC 100%)}
.dg-mop-kader::before,.dg-mop-kader::after{background:#F6F3EB}
/* de achterkant schemert gespiegeld door */
.dg-door{position:absolute;inset:44px 22px 30px;display:flex;flex-direction:column;gap:3px;transform:scaleX(-1);opacity:.032;font:14px/1.38 Georgia,"Times New Roman",serif;color:#000;text-align:left;filter:blur(.3px);pointer-events:none;overflow:hidden}
.dg-door b{text-align:center;font-size:16px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.dg-door i{margin-top:12px;font-style:normal;font-size:12.5px;text-align:center}
.dg-voor > :not(.dg-door):not(.dg-curl){position:relative}

/* staafjes per maand: de hoogte telt vanaf de ruimte boven het label, zodat geen staafje afgetopt wordt */
.ft-staaf{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);justify-items:stretch;align-items:end}
.ft-staaf small{justify-self:center}
.ft-staaf-b{align-self:end}

/* ---------- Minder sjabloon: plakband bovenaan, een stiftstreep in de titels, drukranden tussen de secties ---------- */
/* het label bovenaan een pagina op een strookje plakband */
.dg-tape{display:inline-block;margin-left:-4px;padding:7px 18px 6px;background:rgba(255,199,70,.78);font:700 15px/1.15 var(--font);letter-spacing:0;text-transform:none;color:var(--navy);transform:rotate(-2deg);transform-origin:left center;clip-path:polygon(0 8%,3% 0,7% 9%,11% 0,100% 0,97% 12%,100% 25%,97% 40%,100% 55%,97% 70%,100% 85%,97% 100%,0 100%,3% 85%,0 70%,3% 55%,0 40%,3% 25%)}
.dg-tape a{color:inherit}
/* een woord in de titel onder een gele stiftstreep; het losse label erboven valt dan weg */
.dg-kop h2,.dg-h2{position:relative;z-index:0}
.stift{padding:0 .1em;margin:0 -.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12c40-6 90-9 194-5' stroke='%23FFC746' stroke-width='12' stroke-linecap='round' fill='none' opacity='.9'/%3E%3C/svg%3E") 0 88%/100% .36em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#geschiedenis .stift{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12c40-6 90-9 194-5' stroke='%23FF6B70' stroke-width='12' stroke-linecap='round' fill='none' opacity='.75'/%3E%3C/svg%3E")}
.dg-eb:has(+ .dg-kop .stift),.dg-eb:has(+ .dg-h2 .stift){display:none}
.dg-sec > .dg-eb:has(+ .dg-kop .stift) + .dg-kop{margin-top:0}
/* drukranden: rechte overgang met twee kleurlijntjes, alsof de drukker even verschoof */
#geschiedenis::before,#karakter::before{border-radius:0!important}
#geschiedenis::after{border-radius:0!important}
#geschiedenis::before{box-shadow:0 -6px 0 #FF6B70,0 -10px 0 var(--cream),0 -13px 0 #FFC746}
#karakter::before{box-shadow:0 -6px 0 #A394FF,0 -10px 0 var(--cream),0 -13px 0 #7FD6C2}
#geschiedenis + #karakter::before{box-shadow:0 -6px 0 #A394FF,0 -10px 0 var(--navy),0 -13px 0 #7FD6C2}
/* gsm: "Draai me om!" niet tegen de vraag eronder */
@media (max-width:640px){.dg-hero-r:has(.dg-om-hint){margin-bottom:34px}.dg-om-hint{bottom:-6px}}

/* ---------- De drie kenmerken onder de kalender: op desktop een rustige strook, op de gsm een ticket ---------- */
.dg-st-kal,.dg-st-ring,.dg-st-m{display:none}
@media (max-width:640px){
  .dg-strip{position:relative;gap:0;margin-top:14px;border-radius:20px;background:#fff;box-shadow:0 14px 30px -18px rgba(11,33,74,.4);overflow:hidden}
  .dg-strip > div{position:relative;gap:8px;padding:18px 6px 16px;border-radius:0;background:none!important;justify-content:flex-start}
  .dg-strip > div + div{border-left:2px dashed rgba(11,33,74,.14)!important}
  /* de inkepingen van een ticket */
  .dg-strip > div + div::before,.dg-strip > div + div::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--cream)}
  .dg-strip > div + div::before{top:-8px}.dg-strip > div + div::after{bottom:-8px}
  .dg-strip svg{display:none}
  .dg-st-t{font-size:13px;font-weight:700;line-height:1.2}
  /* 1. een mini-kalenderblaadje */
  .dg-st-kal{display:grid;justify-items:center;width:64px;height:56px;padding-top:12px;border-radius:6px 6px 9px 9px;background:#FAF8F2;box-shadow:inset 0 9px 0 var(--navy),0 4px 10px -4px rgba(11,33,74,.45);transform:rotate(-4deg)}
  .dg-st-kal b{font:800 22px/1 var(--font-head);letter-spacing:-.04em;color:#F45A60}
  .dg-st-kal i{margin-top:2px;font:700 8.5px/1.2 var(--font);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--navy)}
  .dg-strip > div:first-child .dg-st-t{display:none}
  .dg-st-m{display:block;font-size:13px;font-weight:700;line-height:1.2;color:var(--navy)}
  .dg-st-m:empty{display:none}
  .dg-strip > div:first-child:has(.dg-st-m:empty) .dg-st-t{display:block}
  /* 2. het sterrenbeeld groot in een lila rondje */
  .dg-strip .dg-zod{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#ECE8FF;font-size:30px;color:#5B47C9}
  /* 3. een ring: hoe ver het jaar al is */
  .dg-st-ring{position:relative;display:grid;place-items:center;width:54px;height:54px}
  .dg-st-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#FF6B70 calc(var(--p) * 1%),#F1ECE2 0);-webkit-mask:radial-gradient(circle,transparent 19px,#000 19.5px);mask:radial-gradient(circle,transparent 19px,#000 19.5px)}
  .dg-st-ring b{position:relative;font:800 13px var(--font-head);color:var(--navy)}
}
@media (max-width:640px){.dg-strip > div:last-child .dg-st-t{white-space:nowrap;font-size:12px;letter-spacing:-.01em}.dg-strip > div{padding-left:4px;padding-right:4px}}

/* ---------- De cookievraag als een klein kalenderblaadje met kaarsjes (voet.js) ---------- */
#mdl-cs.mdl-cs{left:20px;bottom:20px;max-width:400px;padding:34px 24px 22px;border-radius:6px 6px 18px 18px;color:var(--navy);font-family:var(--font);font-size:15px;line-height:1.5;
  background:linear-gradient(var(--navy),var(--navy)) 0 0/100% 14px no-repeat,repeating-linear-gradient(180deg,transparent 0 25px,rgba(70,110,170,.12) 25px 26px) 0 14px/100% calc(100% - 14px) no-repeat,linear-gradient(180deg,#FCFBF6,#F2EEE4);
  box-shadow:0 26px 50px -20px rgba(11,33,74,.55),0 2px 0 rgba(11,33,74,.06);transform:rotate(-1.2deg);transform-origin:20% 100%;animation:csIn .6s cubic-bezier(.2,1.3,.4,1) both}
#mdl-cs .mdl-cs-t{margin:0 70px 8px 0;font:800 20px/1.15 var(--font-head);letter-spacing:-.02em;color:var(--navy)}
#mdl-cs .mdl-cs-p{margin:0 0 16px;opacity:1;color:#3A4766}
#mdl-cs a{color:#BF3439;font-weight:600}
#mdl-cs .mdl-cs-b button{min-width:0;padding:12px 14px;border:0;border-radius:12px;font:700 15px var(--font);color:var(--navy);transition:transform .15s}
#mdl-cs .mdl-cs-b [data-cs-yes]{order:2;background:var(--coral)}
#mdl-cs .mdl-cs-b [data-cs-no]{order:1;background:#E9E4FF}
#mdl-cs .mdl-cs-b button:hover,#mdl-cs .mdl-cs-b button:focus-visible{transform:translateY(-2px);background:var(--coral);color:var(--navy)}
#mdl-cs .mdl-cs-b [data-cs-no]:hover,#mdl-cs .mdl-cs-b [data-cs-no]:focus-visible{background:#DCD4FF}
/* de klemmetjes bovenaan en drie kaarsjes rechtsboven */
#mdl-cs::before{content:"";position:absolute;left:46px;top:-10px;width:12px;height:26px;border-radius:5px;background:var(--coral);box-shadow:44px 2px 0 var(--lilac),88px 0 0 var(--yellow)}
.cs-kaarsjes{position:absolute;right:22px;top:24px;display:flex;align-items:flex-end;gap:6px;transform:rotate(4deg)}
.cs-kaarsjes i{position:relative;display:block;width:9px;border-radius:3px 3px 2px 2px}
.cs-kaarsjes i:nth-child(1){height:30px;background:var(--coral)}.cs-kaarsjes i:nth-child(2){height:38px;background:var(--lilac)}.cs-kaarsjes i:nth-child(3){height:26px;background:var(--yellow)}
.cs-kaarsjes i::before{content:"";position:absolute;left:50%;top:-5px;width:1.5px;height:5px;margin-left:-.75px;background:var(--navy)}
.cs-kaarsjes i::after{content:"";position:absolute;left:50%;top:-17px;width:9px;height:13px;margin-left:-4.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#FFF6C8 0 25%,#FFC746 45%,#FF8A3D 100%);transform-origin:50% 100%;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
#mdl-cs.cs-ja .cs-kaarsjes i::after{transform:scale(1);animation:csVlam .5s ease-in-out .4s infinite alternate}
#mdl-cs.cs-ja .cs-kaarsjes i:nth-child(2)::after{transition-delay:.12s}#mdl-cs.cs-ja .cs-kaarsjes i:nth-child(3)::after{transition-delay:.24s}
/* een vlammetje dat al zachtjes flakkert als je over Ja beweegt */
#mdl-cs:has([data-cs-yes]:hover) .cs-kaarsjes i:nth-child(2)::after{transform:scale(.7)}
/* na de keuze: blijft even staan, dan weg */
#mdl-cs.cs-ja[hidden],#mdl-cs.cs-nee[hidden]{display:block}
#mdl-cs.cs-ja{animation:csJa 1.5s cubic-bezier(.3,1.2,.4,1) forwards}
#mdl-cs.cs-nee{animation:csNee .7s ease-in forwards}
@keyframes csIn{from{opacity:0;transform:translateY(40px) rotate(-6deg)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes csJa{0%{transform:rotate(-1.2deg)}15%{transform:translateY(-8px) rotate(1.5deg) scale(1.02)}30%{transform:rotate(-1.2deg)}75%{transform:rotate(-1.2deg);opacity:1}100%{transform:translateY(60px) rotate(4deg);opacity:0}}
@keyframes csNee{0%{transform:rotate(-1.2deg)}30%{transform:rotate(-3deg) translateX(-4px)}100%{transform:translateY(80px) rotate(-8deg);opacity:0}}
@keyframes csVlam{from{transform:scale(1) rotate(-4deg)}to{transform:scale(.88,1.08) rotate(4deg)}}
@media (max-width:520px){#mdl-cs.mdl-cs{left:10px;right:10px;bottom:10px;max-width:none;padding:30px 18px 18px}}
@media (prefers-reduced-motion:reduce){#mdl-cs.mdl-cs,#mdl-cs.cs-ja,#mdl-cs.cs-nee{animation:none}.cs-kaarsjes i::after{transition:none}}

/* ---------- Jarig in België (Statbel) op de dagpagina en Mijn dag ---------- */
.sb-r{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;align-items:center;margin-top:14px}
.sb-h{margin:0 0 14px;font:800 clamp(26px,3vw,40px)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--navy);hyphens:manual;text-wrap:balance}
.sb-v{margin:0;font-size:17px;line-height:1.55;color:#3A4766}
.sb-noot{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:#FFF1C9;font-size:15px;line-height:1.5;color:#5A4A1A}
.sb-gw{display:flex;height:14px;margin:26px 0 12px;border-radius:999px;overflow:hidden;background:#EEE6D3}
.sb-gw i{display:block;height:100%}
.sb-vl{background:var(--navy)}.sb-wa{background:var(--lilac)}.sb-bx{background:var(--coral)}
.sb-gw-l{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;font-size:14px;color:#5D6785}
.sb-gw-l li{display:flex;align-items:center;gap:7px}
.sb-gw-l i{width:10px;height:10px;border-radius:3px;flex:none}
.sb-gw-l b{font:800 16px var(--font-head);color:var(--navy)}
.sb-g{position:relative;margin:0;padding:26px 24px 18px;border-radius:20px;background:#fff;box-shadow:0 18px 40px -26px rgba(11,33,74,.45)}
.sb-g-v{position:relative;height:150px}
.sb-g-v svg{display:block;width:100%;height:100%;overflow:visible}
.sb-g-d{fill:none;stroke:rgba(11,33,74,.3);stroke-width:1.1;vector-effect:non-scaling-stroke}
.sb-g-top{fill:none;stroke:var(--coral);stroke-width:1.1;vector-effect:non-scaling-stroke}
.sb-g-nu{fill:none;stroke:var(--coral);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sb-g-pin{position:absolute;top:0;width:14px;height:14px;margin:-16px 0 0 -7px;border:3px solid #fff;border-radius:50%;background:var(--coral);box-shadow:0 2px 6px rgba(11,33,74,.25)}
.sb-g-m{display:flex;margin-top:8px;border-top:1.5px solid rgba(11,33,74,.18);padding-top:6px}
.sb-g-m span{min-width:0;overflow:hidden;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8A93AA;text-align:center}
.sb-g figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:#6B7590}
.sb-g figcaption a{color:inherit}
@media (max-width:860px){
  .sb-r{grid-template-columns:minmax(0,1fr);gap:28px}
  .sb-g{padding:22px 16px 14px}
  .sb-g-v{height:110px}
  .sb-g-m span{font-size:9px;letter-spacing:0}
}
.sb-h .stift{white-space:nowrap}

/* ---------- Kop van een gewone pagina: de streepjes horen bij de titel ---------- */
.hero::after{display:none}
.hero h1{display:inline-block;position:relative;max-width:calc(100% - 56px)}
.hero h1::after{content:"";position:absolute;right:-58px;top:-26px;width:50px;height:46px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 60' fill='none' stroke='%23FFC746' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 34 4 6M24 30 40 6M30 46l26-8'/%3E%3C/svg%3E")}
@media (max-width:640px){.hero h1::after{right:-44px;top:-18px;width:36px;height:34px}}
.wg-page > .wg-form:first-child{padding-top:clamp(8px,2vw,28px)}

/* ---------- Het formulier: een uitnodiging met postzegel en luchtpostrand ---------- */
.wg-form-text .wg-rich h3{margin:30px 0 14px;font:700 12px var(--font);letter-spacing:.2em;text-transform:uppercase;color:#D9454B}
.wg-form-text .wg-rich ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:reden}
.wg-form-text .wg-rich li{position:relative;margin:0;padding:14px 16px 14px 58px;border-radius:16px;background:#fff;box-shadow:0 12px 26px -22px rgba(11,33,74,.6);font-size:15.5px;line-height:1.5;color:#3A4766;counter-increment:reden;transition:transform .18s,box-shadow .18s,background-color .18s}
.wg-form-text .wg-rich li strong{display:block;font:800 16.5px/1.3 var(--font-head);letter-spacing:-.01em;color:var(--navy)}
.wg-form-text .wg-rich li::before{content:counter(reden);position:absolute;left:14px;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font:800 14px var(--font-head)}
.wg-form-text .wg-rich li:nth-child(4n+2)::before{background:var(--lilac)}
.wg-form-text .wg-rich li:nth-child(4n+3)::before{background:var(--yellow);color:var(--navy)}
.wg-form-text .wg-rich li:nth-child(4n+4)::before{background:#7FD6C2;color:var(--navy)}
.wg-form-text .wg-rich li.bd-reden{cursor:pointer}
.wg-form-text .wg-rich li.bd-reden:hover{transform:translateX(4px) rotate(-.4deg);box-shadow:0 16px 30px -22px rgba(11,33,74,.7)}
.wg-form-text .wg-rich li.bd-reden:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.wg-form-text .wg-rich li.is-gekozen{background:#FFF1C9;transform:translateX(6px)}
.wg-form-text .wg-rich li.is-gekozen::after{content:"✓";position:absolute;right:16px;top:14px;font:800 16px var(--font-head);color:var(--navy)}
.wg-form-text .wg-rich p{margin:22px 0 0;font-size:15.5px;color:#3A4766}

.wg-form-box{position:relative;overflow:visible;padding-top:clamp(56px,5vw,68px)}
.wg-form-box::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-radius:26px 26px 0 0;background:repeating-linear-gradient(-45deg,var(--coral) 0 14px,#fff 14px 24px,var(--lilac) 24px 38px,#fff 38px 48px,var(--yellow) 48px 62px,#fff 62px 72px)}
.bd-zegel{position:absolute;right:clamp(14px,3vw,30px);top:-26px;z-index:2;transform:rotate(6deg);filter:drop-shadow(0 6px 10px rgba(11,33,74,.22));transition:transform .3s}
.bd-zegel svg{display:block}
.wg-form-box:hover .bd-zegel{transform:rotate(-2deg) scale(1.04)}
.bd-stempel{position:absolute;right:clamp(84px,9vw,112px);top:-4px;z-index:3;transform:rotate(-14deg);pointer-events:none}
.bd-stempel svg{display:block}
.wg-form-box .mf{position:relative}
.wg-form-box .mf-grid{padding-right:clamp(0px,6vw,80px)}
.wg-form-box .mf-full{margin-right:calc(-1 * clamp(0px,6vw,80px))}

/* het onderwerp als knopjes */
.mf-t-radio .mf-choices{gap:8px}
.mf-t-radio .mf-choice{position:relative;gap:0}
.mf-t-radio .mf-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mf-t-radio .mf-choice span{display:inline-block;padding:9px 15px;border:1.5px solid rgba(11,33,74,.2);border-radius:12px;background:var(--cream);font-size:15px;font-weight:600;color:var(--navy);transition:background-color .15s,border-color .15s,transform .15s}
.mf-t-radio .mf-choice:hover span{border-color:var(--navy);transform:translateY(-1px)}
.mf-t-radio .mf-choice input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--yellow)}
.mf-t-radio .mf-choice input:focus-visible + span{outline:3px solid var(--coral);outline-offset:2px}
.mf-t-textarea textarea{min-height:150px;background-image:repeating-linear-gradient(transparent 0 29px,rgba(11,33,74,.07) 29px 30px);background-attachment:local;line-height:30px;padding-top:8px}

/* verstuurd */
.wg-form-box .mf-done{padding:30px 28px;border-radius:20px;background:#ECE8FF;text-align:center}
.wg-form-box .mf-done-h{margin:0 0 10px;font:800 clamp(24px,3vw,32px)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--navy)}
.wg-form-box .mf-done-h::before{content:"";display:block;width:76px;height:64px;margin:0 auto 12px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64'%3E%3Crect x='14' y='26' width='12' height='34' rx='3' fill='%23FF6B70' transform='rotate(-8 20 43)'/%3E%3Crect x='32' y='18' width='12' height='42' rx='3' fill='%23A394FF'/%3E%3Crect x='50' y='28' width='12' height='32' rx='3' fill='%23FFC746' transform='rotate(7 56 44)'/%3E%3Cpath d='M18 8c3 4 5 7 5 10a4.5 4.5 0 0 1-9 0c0-3 2-6 4-10z' fill='%23FFC746'/%3E%3Cpath d='M38 0c3 4 5 7 5 10a4.5 4.5 0 0 1-9 0c0-3 2-6 4-10z' fill='%23FF6B70'/%3E%3Cpath d='M57 10c3 4 5 7 5 10a4.5 4.5 0 0 1-9 0c0-3 2-6 4-10z' fill='%23A394FF'/%3E%3C/svg%3E")}
.wg-form-box .mf-done-body{color:#3A4766}
.is-verstuurd .bd-stempel{animation:bdStempel .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bdStempel{from{transform:rotate(-14deg) scale(1.8);opacity:0}to{transform:rotate(-14deg) scale(1);opacity:1}}
.bd-stempel{opacity:.9}

@media (max-width:640px){
  .bd-zegel{transform:rotate(6deg) scale(.78);transform-origin:top right;top:-22px}
  .bd-stempel{right:62px;top:-8px;transform:rotate(-14deg) scale(.72)}
  .wg-form-box .mf-grid{padding-right:0}
  .wg-form-box .mf-full{margin-right:0}
}
@media (prefers-reduced-motion:reduce){.wg-form-text .wg-rich li,.bd-zegel{transition:none}.is-verstuurd .bd-stempel{animation:none}}

/* ---------- Knoppen: overal dezelfde vorm (koraal, afronding 14px, zoals .dg-cta en de verstuurknop) ---------- */
.btn,.wg-btn,.mf-submit{min-height:56px;padding:0 26px;border-radius:14px;font:700 17px/1 var(--font)}
.btn-gold,.wg-btn,.mf-submit{background:var(--coral);color:var(--navy)}
.btn-gold:hover,.wg-btn:hover,.mf-submit:hover{background:#FF7F83;color:var(--navy)}
.ft .btn-gold{background:var(--yellow);color:var(--navy)}
.ft .btn-gold:hover{background:#FFD36E}
.dg-pill{border-radius:14px}

/* de zonnigste dag als vierde weertegel; op de gsm dan twee per rij */
@media (max-width:640px){.dg-weer-r:has(.dg-weer-z){grid-template-columns:repeat(2,minmax(0,1fr))}.dg-weer-z b{white-space:normal}}

/* ---------- Mijn dag voor iemand anders ---------- */
.mj-naam{position:relative;display:flex;flex-direction:column;justify-content:center;max-width:560px;height:62px;margin:0 0 12px;padding:0 14px;border:1.5px solid rgba(11,33,74,.25);border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
.mj-naam[hidden]{display:none}
.mj-naam span{font-size:12px;color:#5D6785}
.mj-naam input{border:0;background:transparent;padding:0;margin:0;font:700 16px var(--font);color:var(--navy);outline:none;width:100%}
.mj-naam input::placeholder{color:#9AA2B8;font-weight:500}
.mj-naam:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(163,148,255,.35)}
.mj-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;font-size:15px;color:#3A4766}
.mj-hint[hidden]{display:none}
.mj-hint > span{margin-right:2px}
.mj-wie{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:#FFE3E2;color:var(--navy);font:600 14.5px var(--font);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background-color .2s}
.mj-wie:hover{background:#FFD0CE;transform:translateY(-1px) rotate(-1.5deg)}
.mj-wie:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.mj-wie-x{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(11,33,74,.25)}
.mj-wie-x:hover{background:#fff}
.mj-kies .mj-hint{margin-top:10px}
.mj-kies .mj-hint .dg-ander{margin-top:0}
.mj-acties [hidden],.dg-ander[hidden]{display:none}

/* Mijn dag: twee keuzes naast elkaar, een andere datum of de dag van iemand anders */
.mj-acties{display:block;margin:24px 0 0}
.mj-acties-r{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.mj-knop2{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:0 24px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);font:700 17px var(--font);cursor:pointer;transition:transform .15s,background-color .15s}
.mj-knop2:hover{background:#fff;transform:translateY(-2px)}
.mj-knop2:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.mj-voor{width:250px;height:62px}
.mj-links{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0 0}
.mj-links[hidden]{display:none}
.mj-links .dg-ander{margin:0}
@media (max-width:640px){.mj-acties-r{display:grid;grid-template-columns:minmax(0,1fr)}.mj-voor{width:auto}}

/* achterkant van het kalenderblad: hoeveel Belgen er vandaag jarig zijn */
.dg-mop-belgen{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 0;font:800 13px/1.3 var(--font-head);color:#D9454B;letter-spacing:.01em;text-align:center}
.dg-mop-belgen::before{content:"";width:16px;height:18px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 0c1.2 1.6 2 2.6 2 3.6a2 2 0 0 1-4 0C6 2.6 6.8 1.6 8 0z' fill='%23FFC746'/%3E%3Crect x='7' y='6' width='2' height='4' rx='1' fill='%23A394FF'/%3E%3Crect x='1' y='10' width='14' height='7' rx='2.5' fill='%23FF6B70'/%3E%3C/svg%3E")}

/* Mijn dag: ontbreekt de voornaam, dan zegt het vak het zelf */
.mj-naam.is-fout{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,107,112,.22);animation:mjNaam .4s cubic-bezier(.3,1.4,.5,1)}
.mj-naam.is-fout span{color:#C2373D;font-weight:700}
@keyframes mjNaam{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.mj-naam.is-fout{animation:none}}

/* ---------- Mijn dag: het karakter als feestpaspoort, op een lila band ---------- */
.mj-pas-band{position:relative;margin-top:clamp(56px,7vw,88px);padding:clamp(52px,7vw,96px) 0;overflow:hidden;background:#E9E4FF}
.mj-pas-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:
  radial-gradient(circle,#FF6B70 0 4px,transparent 5px) 6% 22%/220px 180px,
  radial-gradient(circle,#FFC746 0 5px,transparent 6px) 64% 8%/260px 210px,
  radial-gradient(circle,#fff 0 3px,transparent 4px) 30% 70%/180px 160px,
  radial-gradient(circle,#A394FF 0 4px,transparent 5px) 88% 60%/240px 200px}
.mj-pas-band > .dg-wrap{position:relative}
.mj-pas-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:22px}
.mj-pas{position:relative;border-radius:22px;background:#FFFCF5 repeating-radial-gradient(circle at 78% 120%,transparent 0 9px,rgba(163,148,255,.09) 9px 10px);box-shadow:0 30px 60px -34px rgba(11,33,74,.55),0 2px 0 rgba(11,33,74,.06);transform:rotate(-1.4deg);padding-bottom:20px}
.mj-pas-tape{position:absolute;left:44px;top:-15px;z-index:2;width:118px;height:32px;background:rgba(255,199,70,.8);transform:rotate(-5deg);clip-path:polygon(0 8%,4% 0,8% 9%,12% 0,100% 0,96% 14%,100% 30%,96% 46%,100% 62%,96% 78%,100% 92%,97% 100%,0 100%,4% 86%,0 70%,4% 54%,0 38%,4% 22%)}
.mj-pas-kop{display:flex;align-items:center;gap:14px;padding:18px 26px;border-radius:22px 22px 0 0;background:var(--navy)}
.mj-pas-kop svg{flex:none}
.mj-pas-kop p{margin:0;display:grid;line-height:1.2}
.mj-pas-kop b{font:800 17px var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.mj-pas-kop span{font-size:13px;color:var(--yellow)}
.mj-pas-in{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;padding:26px 26px 14px}
.mj-pas-foto{display:grid;place-items:center;aspect-ratio:3/4;border:5px solid #fff;border-radius:14px;background:linear-gradient(160deg,#A394FF,#6E5BD9);box-shadow:0 10px 22px -12px rgba(11,33,74,.6)}
.mj-pas-foto span{font:400 74px/1 "Segoe UI Symbol","Apple Symbols","DejaVu Sans",var(--font);color:var(--yellow);text-shadow:0 3px 0 rgba(11,33,74,.25)}
.mj-pas-v{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:0;align-content:start}
.mj-pas-v > div{min-width:0}
.mj-pas-v > [hidden]{display:none}
.mj-pas-w{grid-column:1/-1}
.mj-pas-v dt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6B7590}
.mj-pas-v dd{margin:3px 0 0;font:800 19px/1.25 var(--font-head);color:var(--navy);overflow-wrap:break-word}
.mj-pas-mrz{margin:6px 26px 0;padding-top:12px;border-top:1.5px dashed rgba(11,33,74,.18);font:600 13px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.2em;color:#3A4766;opacity:.7}
.mj-pas-mrz span{display:block;overflow:hidden;white-space:nowrap}
.mj-pas-st{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:2.5px solid currentColor;border-radius:10px;font:800 13px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;mix-blend-mode:multiply;pointer-events:none}
.mj-pas-st1{right:22px;top:92px;color:#E0484E;transform:rotate(9deg);opacity:.55}
.mj-pas-st2{left:30px;top:322px;width:142px;flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.25;color:#6E5BD9;transform:rotate(-9deg);opacity:.6}
.mj-pas-st1:empty{display:none}
.mj-pas-hand{margin:0 0 18px;font:600 clamp(28px,3vw,38px)/1.15 "Caveat",cursive;color:var(--navy);transform:rotate(-2deg)}
.mj-pas-l{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.mj-pas-l li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:#3A4766}
.mj-pas-l li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--coral)}
.mj-pas-l li:nth-child(2)::before{background:var(--yellow)}
.mj-pas-l b{color:var(--navy)}
@media (max-width:900px){.mj-pas-r{grid-template-columns:minmax(0,1fr)}.mj-pas{transform:rotate(-1deg)}}
@media (max-width:640px){
  .mj-pas-kop{padding:14px 18px}
  .mj-pas-kop b{font-size:14px;letter-spacing:.12em}
  .mj-pas-in{grid-template-columns:92px minmax(0,1fr);gap:16px;padding:20px 18px 10px}
  .mj-pas-foto{border-width:4px}
  .mj-pas-foto span{font-size:46px}
  .mj-pas-v{gap:12px 12px}
  .mj-pas-v dt{font-size:10px;letter-spacing:.06em}
  .mj-pas-v dd{font-size:15px}
  .mj-pas-mrz{margin:4px 18px 0;font-size:10px;letter-spacing:.08em}
  .mj-pas-st{font-size:10.5px;padding:5px 10px}
  .mj-pas-st1{right:10px;top:auto;bottom:10px}
  .mj-pas-st2{left:14px;top:226px;width:96px;font-size:9.5px;padding:6px 6px;gap:3px;transform:rotate(-10deg)}
  .mj-pas-tape{left:26px;width:90px;height:26px}
}

/* Mijn dag: de vraag met rechts een link terug */
.mj-kies-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:560px}
.mj-kies-kop .dg-ander{margin:0;flex:none}

/* ---------- Mijn dag: een kaart maken voor iemand anders ---------- */
/* de envelop naast het kalenderblad, met een kaartje dat eruit piept */
.mj-open .dg-cal{z-index:1}
.mj-env{position:absolute;left:max(-28px,calc(50% - 400px));bottom:-8px;z-index:3;width:236px;height:150px;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-9deg);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mj-env[hidden]{display:none}
.mj-env::before{content:"";position:absolute;inset:0;border-radius:10px;background:#E2A61F}
.mj-env-k{position:absolute;left:16px;right:16px;top:-58px;height:140px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 0;border-radius:8px;background:#fff;box-shadow:0 6px 16px -10px rgba(11,33,74,.5);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.mj-env-k b{font:600 25px/1.05 "Caveat",cursive;color:var(--navy);text-align:center}
.mj-env-a{position:absolute;inset:0;z-index:2;border-radius:10px;background:var(--yellow);clip-path:polygon(0 32%,50% 66%,100% 32%,100% 100%,0 100%)}
.mj-env-f{position:absolute;left:50%;top:58%;z-index:3;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--coral);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.mj-env:hover,.mj-env:focus-visible{transform:rotate(-6deg) translateY(-4px)}
.mj-env:hover .mj-env-k,.mj-env:focus-visible .mj-env-k{transform:translateY(-22px) rotate(-2deg)}
.mj-env:focus-visible{outline:none}
.mj-env:focus-visible .mj-env-a{box-shadow:inset 0 0 0 3px var(--navy)}
@media (prefers-reduced-motion:no-preference){.mj-env:not([hidden]){animation:mjEnvIn .7s .4s cubic-bezier(.3,1.4,.5,1) both}}
@keyframes mjEnvIn{from{transform:rotate(-20deg) translate(-60px,40px);opacity:0}to{transform:rotate(-9deg);opacity:1}}
@media (max-width:900px){.mj-env{display:none}}
/* geen envelop zolang de kiezer open staat (je bent dan nog niet bij iemand) */
.mj-open:has(.mj-kies:not([hidden])) .mj-env{display:none}

/* het balkje onderaan op de gsm */
.mj-kbalk{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 20px;border:0;border-radius:12px;background:var(--navy);color:var(--cream);font:700 17px var(--font);box-shadow:0 14px 30px -12px rgba(11,33,74,.55);cursor:pointer}
.mj-kbalk[hidden]{display:none}
@media (min-width:901px){.mj-kbalk{display:none}}
@media (prefers-reduced-motion:no-preference){.mj-kbalk:not([hidden]){animation:mjBalkIn .4s cubic-bezier(.3,1.4,.5,1)}}
@keyframes mjBalkIn{from{transform:translateY(120%)}}

/* de maker: een paneel rechts, op de gsm een blad van onder */
html.mk-open,html.mk-open body{overflow:hidden}
.mk-sluier{position:fixed;inset:0;z-index:90;background:rgba(11,33,74,.45);opacity:0;transition:opacity .3s}
.mk-sluier.is-open{opacity:1}
.mk-sluier[hidden],.mk[hidden]{display:none}
.mk{position:fixed;top:0;right:0;bottom:0;z-index:91;display:flex;flex-direction:column;width:min(470px,100%);background:var(--cream);box-shadow:-20px 0 60px -20px rgba(11,33,74,.5);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.mk.is-open{transform:none}
.mk-kop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 14px}
.mk-greep{display:none}
.mk-titel{margin:0;font:800 23px/1.2 var(--font-head);letter-spacing:-.01em;color:var(--navy)}
.mk-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:12px;background:#fff;color:var(--navy);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(11,33,74,.15)}
.mk-x:hover{background:#FFE3E2}
.mk-in{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:18px;align-content:start;padding:6px 22px 22px}
.mk-voorbeeld{position:sticky;top:-6px;z-index:2;display:grid;place-items:center;margin:0 -22px;padding:8px 22px 14px;background:var(--cream);box-shadow:0 10px 12px -12px rgba(11,33,74,.25)}
.mk-voorbeeld img{display:block;width:min(250px,62%);aspect-ratio:4/5;border-radius:12px;background:#fff;box-shadow:0 18px 36px -18px rgba(11,33,74,.6);transform:rotate(-1.5deg)}
.mk-voorbeeld img.is-binnen{aspect-ratio:4/5;object-fit:cover;object-position:right center;border-radius:12px}
.mk-kant{display:flex;justify-content:center;gap:6px;margin:14px 0 0}
.mk-kant button{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:#FFE3E2;color:var(--navy);font:600 14px var(--font);cursor:pointer}
.mk-kant button[aria-pressed="true"]{background:var(--navy);color:var(--yellow)}
.mk-kant button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.mk-lbl{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6B7590}
.mk-chips{display:flex;flex-wrap:wrap;gap:8px}
.mk-chip{position:relative;cursor:pointer}
.mk-chip input{position:absolute;opacity:0;width:1px;height:1px}
.mk-chip span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:#FFE3E2;color:var(--navy);font:600 14.5px var(--font)}
.mk-chip input:checked + span{background:var(--navy);color:var(--yellow)}
.mk-chip input:focus-visible + span{outline:3px solid var(--coral);outline-offset:2px}
/* de getekende kaartjes: een raster met miniaturen */
.mk-tek-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:4px}
.mk-tek-k[hidden]{display:none}
.mk-tek-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 0}
.mk-tek-nav[hidden]{display:none}
.mk-tek-t{font:700 14px var(--font);color:var(--ink-2);min-width:48px;text-align:center}
.mk-tek-p{width:44px;height:44px;border-radius:50%;border:0;background:var(--coral);color:var(--navy);font:700 26px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:transform .15s,background .2s}
.mk-tek-p:hover:not(:disabled){transform:scale(1.08);background:var(--yellow)}
.mk-tek-p:disabled{opacity:.3;cursor:default}
.mk-tek-kop{grid-column:1/-1;margin:8px 0 0;font:800 12px var(--font);letter-spacing:.14em;text-transform:uppercase;color:#D9454B}
.mk-tek-k{position:relative;cursor:pointer;display:block}
.mk-tek-k input{position:absolute;opacity:0;width:1px;height:1px}
.mk-tek-k img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:#FEFDF9;border:2px solid transparent;box-shadow:0 2px 10px -4px rgba(11,33,74,.25);transition:transform .15s,border-color .15s}
.mk-tek-k:hover img{transform:translateY(-2px)}
.mk-tek-k input:checked + img{border-color:var(--navy);box-shadow:0 0 0 3px #FFE3E2}
.mk-tek-k input:focus-visible + img{outline:3px solid var(--coral);outline-offset:2px}
@media (max-width:640px){.mk-tek-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-sel{width:auto}
.mk-vink{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.mk-check{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer;font-size:15px;color:var(--navy)}
.mk-check[hidden]{display:none}
.mk-check input{position:absolute;opacity:0;width:1px;height:1px}
.mk-box{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,33,74,.35)}
.mk-check input:checked + .mk-box{background:var(--coral);box-shadow:none}
.mk-check input:checked + .mk-box::after{content:"";width:10px;height:5px;margin-top:-3px;border-left:2.6px solid var(--navy);border-bottom:2.6px solid var(--navy);transform:rotate(-45deg)}
.mk-check input:focus-visible + .mk-box{outline:3px solid var(--navy);outline-offset:2px}
.mk-check.is-uit{opacity:.45;cursor:not-allowed}
.mk-samen{width:100%}
.mk-samen[hidden]{display:none}
.mk-samen select{width:100%;text-overflow:ellipsis}
.mk-vol{width:100%;min-width:0}
.mk-vink-1{grid-template-columns:minmax(0,1fr)}
.mk-samen{margin-top:4px}
.mk-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mk-twee .mk-sel{width:auto;min-width:0}
.mk-twee [hidden]{display:none}
.mk-twee:has(> [hidden]){grid-template-columns:1fr}
.mk-zin{display:grid;gap:6px;justify-items:end}
.mk-zin .mk-veld{width:100%}
.mk-zin .dg-ander{margin:0}
.mk-zin[hidden]{display:none}
.mk-meer-x{display:grid;gap:18px}
.mk-meer-x[open]{padding-bottom:6px}
.mk-meer-x summary{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;cursor:pointer;list-style:none;font:600 15px var(--font);color:#3A4766;text-decoration:underline;text-underline-offset:3px}
.mk-meer-x summary::-webkit-details-marker{display:none}
.mk-meer-x summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.mk-meer-x[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.mk-meer-x summary:hover{color:var(--coral)}
.mk-lbl-r{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mk-lbl-r .dg-ander{margin:0;padding:0;font-size:15px;letter-spacing:0;text-transform:none}
.mk-lbl-r .dg-ander[hidden]{display:none}
.mk-hand{position:relative;border:1.5px dashed rgba(11,33,74,.3);border-radius:12px;background:#fff;touch-action:none}
.mk-hand canvas{display:block;width:100%;height:auto;aspect-ratio:72/22;cursor:crosshair;touch-action:none}
.mk-hand-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 24px/1.1 "Caveat",cursive;color:#8A93AB;pointer-events:none}
.mk-hand-ph[hidden]{display:none}
.mk-veld{max-width:none;margin:0}
.mk-veld-l{height:auto;padding:12px 14px 8px}
.mk-veld textarea{border:0;background:transparent;padding:2px 0 0;margin:0;font:600 16px/1.45 var(--font);color:var(--navy);outline:none;resize:none;width:100%}
.mk-veld textarea::placeholder{color:#9AA2B8;font-weight:500}
.mk-tel{align-self:flex-end;font-size:12px;color:#9AA2B8}
.mk-voet{padding:14px 22px max(16px,env(safe-area-inset-bottom));border-top:1.5px solid rgba(11,33,74,.1);background:var(--cream)}
.mk-stuur{width:100%;justify-content:center}
.mk-meer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:10px 0 0}
.mk-meer .dg-ander{margin:0;font-size:14px}
/* stap 2: versturen */
.mk-in[hidden],.mk-voet[hidden],.mk-s2 [hidden]{display:none}
.mk-s-terug{margin:0}
.mk-s-terug .dg-ander{margin:0;padding:0}
.mk-s-kaart{display:grid;place-items:center;padding:4px 0 6px}
.mk-s-kaart img{display:block;width:min(200px,50%);aspect-ratio:4/5;border-radius:12px;background:#fff;box-shadow:0 18px 36px -18px rgba(11,33,74,.6);transform:rotate(-1.5deg)}
.mk-sform .mk-veld{max-width:none;margin:0}
.mk-sform [data-k="s-velden"]{display:grid;gap:12px}
.mk-sform [data-k="s-velden"][hidden]{display:none}
.mk-sform .mk-s-knop{margin-top:4px}
.mk-pot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.mk-s-msg{margin:0;font-size:14.5px;color:#3A4766}
.mk-s-msg.is-fout{color:#C2373D;font-weight:700}
.mk-s-msg:empty{display:none}
.mk-s-knop{width:100%;justify-content:center}
.mk-s-knop:disabled{opacity:.6;cursor:wait}
.mk-s-uit{margin:0;padding:14px 16px;border-radius:12px;background:#FFE3E2;color:var(--navy);font-size:15px}
.mk-s-ok{display:grid;gap:6px;justify-items:center;padding:18px 16px;border-radius:14px;background:#E9F6EC;text-align:center}
.mk-s-oktitel{margin:0;font:800 19px/1.3 var(--font-head);color:var(--navy)}
.mk-s-ok .dg-ander{margin:0}
.mk-s-alt{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0}
.mk-s-alt .dg-ander{margin:0;font-size:15px}
@media (max-width:640px){
  .mk{top:auto;left:0;width:100%;height:min(92dvh,92vh);border-radius:22px 22px 0 0;transform:translateY(100%);box-shadow:0 -20px 60px -20px rgba(11,33,74,.5)}
  .mk-greep{display:block;position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(11,33,74,.2)}
  .mk-kop{padding:22px 18px 10px}
  .mk-titel{font-size:20px}
  .mk-in{padding:4px 18px 18px}
  .mk-voorbeeld{margin:0 -18px;padding:6px 18px 12px}
  .mk-voorbeeld img{width:min(150px,42%)}
  
  .mk-vink{grid-template-columns:minmax(0,1fr)}
  .mk-voet{padding:12px 18px max(14px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.mk,.mk-sluier,.mj-env,.mj-env-k{transition:none}}

/* ---------- De kaartpagina (/kaart/): een kaart die openvouwt ---------- */
.kv{--kw:min(84vw,420px,calc((100svh - 300px) * .8));padding:34px 16px 70px;overflow:hidden}
.kv-in{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.kv-kop{margin:0 0 22px;text-align:center}
.kv-kop b{display:block;font:600 clamp(30px,6vw,42px)/1.1 "Caveat",cursive;color:var(--navy)}
.kv-kop span{display:block;margin-top:4px;font-size:16px;color:#5D6785}
.kv-stage{perspective:1800px;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.kv-stage[hidden]{display:none}
.kv-kaart{position:relative;display:block;width:var(--kw);aspect-ratio:4/5;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.kv-kaart:focus-visible{outline:3px solid var(--coral);outline-offset:8px;border-radius:8px}
.kv-kaart canvas{display:block;width:100%;height:100%}
.kv-binnen,.kv-voor,.kv-achter{position:absolute;inset:0;overflow:hidden;border-radius:6px}
.kv-binnen{background:var(--cream);box-shadow:0 22px 46px -20px rgba(11,33,74,.55)}
.kv-klep{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.3,.7,.2,1)}
.kv-voor,.kv-achter{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kv-voor{box-shadow:0 22px 46px -20px rgba(11,33,74,.55)}
.kv-achter{transform:rotateY(180deg);box-shadow:0 22px 46px -20px rgba(11,33,74,.45),inset -18px 0 24px -18px rgba(11,33,74,.18)}
.kv:not(.is-klaar) .kv-kaart{opacity:0}
.kv.is-klaar .kv-kaart{opacity:1;transition:opacity .4s}
.kv.is-open .kv-klep{transform:rotateY(-180deg)}
.kv-hint{margin:24px 0 0;min-height:24px;font-weight:700;font-size:16px;color:var(--navy);text-align:center}
.kv-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin:22px 0 0}
.kv-cta[hidden],.kv-cta [hidden]{display:none}
.kv-cta .dg-ander{margin:0}
.kv-leeg{max-width:460px;margin:20px auto 0;text-align:center;font-size:18px;color:var(--navy)}
.kv-leeg[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.kv.is-klaar:not(.is-open) .kv-klep{animation:kvWiebel 4s 1.2s ease-in-out infinite}}
@keyframes kvWiebel{0%,84%,100%{transform:none}90%{transform:rotateY(-14deg)}95%{transform:rotateY(-4deg)}}
@media (min-width:820px){.kv{--kw:min(38vw,440px,calc((100svh - 300px) * .8))}.kv.is-open .kv-stage{transform:translateX(calc(var(--kw) / 2))}}
@media (prefers-reduced-motion:reduce){.kv-klep,.kv-stage{transition:none}}

/* ==================================================================
 * Accounts (binnenkort): kalender met plakkertjes
 * ================================================================== */
.ba-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ba-cal-w{order:-1}
.ba-cal{transform:rotate(3deg)}
.ba-txt .bw-intro{max-width:560px}
.ba-cal-w{position:relative;z-index:2;container-type:inline-size;padding:40px 0 30px}
.ba-cal{transform:rotate(-3deg)}
.ba-leaf{padding-top:46px}
.ba-stempel{position:absolute;z-index:5;left:auto;right:-6px;top:auto;bottom:16px;width:92px;height:92px;padding:0 8px;background:rgba(255,252,245,.9);transform:rotate(-10deg)}
.ba-stempel small{font-size:8px;letter-spacing:.14em}
.ba-leaf .dg-leaf-n{font-size:150px}
.ba-stempel b{font-size:12px;letter-spacing:0;white-space:nowrap}
.ba-plak{position:absolute;z-index:4;padding:10px 16px 11px;font:600 23px/1 "Caveat","Segoe Print","Bradley Hand",cursive;color:var(--navy);white-space:nowrap;box-shadow:0 10px 18px -12px rgba(11,33,74,.55)}
.ba-plak::before{content:"";position:absolute;left:50%;top:-8px;width:44px;height:14px;margin-left:-22px;background:rgba(255,252,245,.55);transform:rotate(-2deg)}
.ba-plak1{left:-30px;top:236px;background:var(--yellow);transform:rotate(-7deg)}
.ba-plak2{right:-26px;top:236px;background:#FFC9CB;transform:rotate(5deg)}
.ba-plak3{left:-16px;bottom:-4px;background:#D6CDFF;transform:rotate(3deg)}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr}.ba-cal-w{order:2;padding:20px 0 10px}.ba-plak{font-size:20px}}
@media (prefers-reduced-motion:no-preference){.ba-cal{animation:dgZweef 8s ease-in-out infinite}}
@media (max-width:640px){.ba-cal-w{padding:10px 0 60px}.ba-plak1{left:30px;top:246px}.ba-plak2{right:30px;top:200px}.ba-plak3{left:30px}.ba-stempel{right:24px}.ba-plak{font-size:20px}}
/* de kalender meteen onder de hoofding, zonder gat */
.wg-page > .ba:first-child{margin-top:clamp(-8px,-1vw,0px)}
/* tekstwidget met tussenkopjes (bv. de stappen): grotere kopjes met een gekleurde stip, drie kleuren om de beurt */
.wg-text .wg-rich h3{display:flex;align-items:baseline;gap:12px;margin:34px 0 10px;font-size:clamp(22px,2.2vw,27px);line-height:1.2;color:var(--navy)}
.wg-text .wg-rich h3::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--coral);translate:0 -1px}
.wg-text .wg-rich h3:nth-of-type(3n+2)::before{background:var(--yellow)}
.wg-text .wg-rich h3:nth-of-type(3n)::before{background:var(--lilac)}
.wg-text .wg-rich h3+p{margin-bottom:0;padding-left:26px}
/* tekstwidgets lijnen links uit met de rest van de pagina (geen gecentreerde smalle kolom), de tekst zelf blijft leesbaar breed */
.tone-sand .wg-in{padding-left:clamp(24px,4.4vw,56px);padding-right:clamp(24px,4.4vw,56px)}
/* de link om de binnenkomer nog eens te zien, rechts onder de kalender van vandaag */
.bd-opnieuw{margin:14px 0 0;text-align:right}
.bd-opnieuw[hidden],html.bd-on .bd-opnieuw{display:none}
.bd-opnieuw .dg-ander{margin:0;font-size:14px;color:#5D6785}
.bd-opnieuw .dg-ander:hover{color:var(--navy)}
@media (max-width:640px){.bd-opnieuw{text-align:center;margin-top:24px}}
/* ---------- Grote afbeelding: een fotoprint met plakband, een roze kaart erachter en het onderschrift in handschrift. Geen zoom. ---------- */
.wg-img .wg-media{position:relative;overflow:visible;rotate:-1deg;margin:18px 0 12px;padding:14px;border-radius:6px;background:#fff;box-shadow:16px 16px 0 -2px #FFE3E2,0 30px 50px -28px rgba(11,33,74,.5)}
.wg-img .wg-ph{position:relative;overflow:hidden;clip-path:none;padding:0;border-radius:2px;background:#F6EEDC;box-shadow:none;transform:none}
.wg-img .wg-ph img,.wg-img .wg-par img,.wg-img .wg-media:hover .wg-par img{display:block;width:100%;height:auto;animation:none;scale:1;translate:0;transition:none}
.wg-img .wg-media::before,.wg-img .wg-media::after{content:"";position:absolute;z-index:2;top:-13px;width:96px;height:30px;border-radius:3px;opacity:.9;box-shadow:0 2px 4px rgba(11,33,74,.15)}
.wg-img .wg-media::before{left:34px;background:rgba(255,199,70,.85);transform:rotate(-7deg)}
.wg-img .wg-media::after{right:34px;background:rgba(163,148,255,.8);transform:rotate(6deg)}
.wg-img .wg-chip{position:static;display:block;margin:0;padding:16px 6px 6px;max-width:none;background:none;color:var(--navy);font:600 clamp(24px,2.4vw,30px)/1.25 "Caveat",cursive;letter-spacing:0;text-transform:none;white-space:normal;transform:rotate(-.6deg)}
.wg-img .wg-media:hover{rotate:0deg;translate:0 -6px}
@media (max-width:640px){.wg-img .wg-media{padding:10px}.wg-img .wg-media::before,.wg-img .wg-media::after{width:70px;height:24px;top:-10px}.wg-img .wg-media::before{left:16px}.wg-img .wg-media::after{right:16px}.wg-img .wg-chip{padding:12px 4px 4px;font-size:22px}}

/* ---------- Hoofding met foto: geen vervaagde achtergrond maar een fotoprint rechts, schuin, met plakband ---------- */
.hero.has-photo{overflow:visible}
.hero.has-photo .wrap{padding-right:min(40%,460px)}
.hero.has-photo .pg-photo{position:absolute;z-index:1;top:50%;right:max(20px,calc((100% - 1240px) / 2 + 20px));bottom:auto;width:min(32vw,380px);aspect-ratio:4/3;height:auto;translate:0 -50%;rotate:2.5deg;padding:12px 12px 30px;border-radius:6px;background:#fff;box-shadow:14px 14px 0 -2px #FFE3E2,0 26px 44px -26px rgba(11,33,74,.5);pointer-events:none;-webkit-mask-image:none;mask-image:none;opacity:1}
.hero.has-photo .pg-photo::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:90px;height:28px;margin-left:-45px;border-radius:3px;background:rgba(255,199,70,.85);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(11,33,74,.15)}
.hero.has-photo .pg-photo::after{display:none}
.hero.has-photo .pg-photo img{width:100%;height:100%;object-fit:cover;border-radius:2px;opacity:1;animation:none}
@media (max-width:760px){.hero.has-photo{display:flex;flex-direction:column}.hero.has-photo .wrap{order:1;padding-right:20px}.hero.has-photo .pg-photo{order:2;position:relative;top:auto;right:auto;translate:0;width:min(calc(100% - 56px),340px);margin:30px auto 8px;rotate:-1.5deg;opacity:1}}
/* titels nooit afbreken met een koppelteken (ver-jaardag), liever een woord naar de volgende regel */
h1,h2,.wg-h,.dg-groot,.hh-t{hyphens:manual;overflow-wrap:normal}
/* ---------- Typografische trap: de paginatitel groot, de widgettitels een stap kleiner, tussenkopjes nog een stap ---------- */
.hero h1{font-size:clamp(44px,7vw,88px)}
.wg-h{font-size:clamp(28px,3.4vw,44px);line-height:1.06}
.ba .wg-h{font-size:clamp(32px,3.8vw,50px)}
.wg-cta-txt h2{font-size:clamp(32px,4vw,52px)}
.wg-nl .wg-h,.wg-form-text .wg-h{font-size:clamp(28px,3.4vw,44px)}
/* ---------- Tekstwidget als redactioneel blok: titel in een smalle kolom links, tekst breed rechts, een lijn erboven ---------- */
.wg-text .wg-in{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(24px,3vw,40px);border-top:1.5px solid rgba(11,33,74,.12)}
.wg-text .wg-in::before{content:none}
.wg-text .wg-h{grid-column:1;margin:0;position:sticky;top:110px;max-width:none}
.wg-text .wg-rich{grid-column:2;max-width:720px}
.wg-text .wg-rich > p:first-child{margin-top:2px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--navy)}
.wg-text .wg-rich h3:first-child{margin-top:0}
@media (max-width:860px){.wg-text .wg-in{grid-template-columns:minmax(0,1fr);row-gap:26px}.wg-text .wg-h{position:static;grid-column:1}.wg-text .wg-rich{grid-column:1}}
/* de kalenderwidget als warm geel vlak, zelfde vorm en breedte als het inschrijfblok */
.ba{width:calc(100% - 40px);max-width:calc(var(--wrap) - 40px);margin-left:auto;margin-right:auto;padding:clamp(28px,4vw,56px) 0;border-radius:36px;background:#FFF3CF}
.ba .wg-in{padding:0 clamp(24px,4.4vw,56px)}
.ba-cal-w{padding-top:30px}
.ba .dg-sh2{background:#F1E6CC}.ba .dg-sh3{background:#F8F0DC}
@media (max-width:640px){.ba{border-radius:24px}.ba-cal-w{padding:10px 0 50px}}
/* ---------- Startpagina: de sectie Over birthday.be tussen de kalender en de jarigen ---------- */
main#inhoud{display:flex;flex-direction:column}
main#inhoud > *{order:2}
main#inhoud > .dg-home{order:0}
main#inhoud > .bo{order:1}
main#inhoud > .bd-rest{order:2;display:block}
.bo{padding:clamp(40px,6vw,88px) 0}
.bo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.bo-foto{position:relative;margin:0 auto;width:min(100%,420px);rotate:-2.5deg}
.bo-print{display:block;padding:12px 12px 44px;border-radius:6px;background:#fff;box-shadow:14px 14px 0 -2px #FFE3E2,0 30px 50px -28px rgba(11,33,74,.5)}
.bo-print img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#F6EEDC}
.bo-foto::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:96px;height:30px;margin-left:-48px;border-radius:3px;background:rgba(255,199,70,.85);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(11,33,74,.15)}
.bo-notitie{position:absolute;left:24px;bottom:8px;font:600 26px/1 "Caveat","Segoe Print","Bradley Hand",cursive;color:var(--navy);transform:rotate(-2deg)}
.bo-t{max-width:14ch}
.bo-txt .wg-rich{max-width:560px}
.bo-txt .wg-rich p:first-child{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--navy)}
.bo-link{margin:6px 0 0}.bo-link .dg-ander{margin:0;font-size:16px}
@media (max-width:860px){.bo-grid{grid-template-columns:1fr;gap:36px}.bo-foto{width:min(100%,320px);order:2}.bo-t{max-width:none}}

/* ---------- De cartoon van de dag: op de startpagina (onder de jarigen), op de dagpagina en op /cartoons/ ---------- */
main#inhoud > .bc{order:3}
.bc{padding:clamp(40px,6vw,88px) 0}
.bd-rest .bc{padding:clamp(24px,4vw,56px) 0 clamp(16px,3vw,40px)}
.bc + #karakter{margin-top:0}
.bc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.bc-poster,.bc-post{position:relative;margin:0 auto;width:min(100%,420px)}
.bc-poster{rotate:-1.5deg}
.bc-ph{position:relative;display:block;padding:12px 12px 14px;border-radius:6px;background:#fff;box-shadow:14px 14px 0 -2px #E9E4FF,0 30px 50px -28px rgba(11,33,74,.5);text-decoration:none;color:inherit;transition:rotate .5s cubic-bezier(.3,1.4,.5,1),translate .5s}
.bc-ph::after{content:"";position:absolute;left:50%;top:-16px;width:14px;height:40px;margin-left:-7px;border-radius:4px;background:var(--navy);z-index:3}
.bc-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#FFFCF5}
a.bc-ph:hover{translate:0 -6px}
.bc-cap{margin:18px 6px 0;font:600 clamp(20px,1.9vw,25px)/1.25 "Caveat","Segoe Print","Bradley Hand",cursive;color:var(--navy);text-wrap:pretty;rotate:-1deg}
.bc-cap .bc-jaar{display:block;font:700 13px var(--font);letter-spacing:.14em;text-transform:uppercase;color:#D9454B;margin:0 0 4px;rotate:0deg}
.bc-cap .bc-dag-link{display:block;margin-top:6px;font:600 15px var(--font);color:#3A4766;text-decoration:underline;text-underline-offset:3px}
.bc-datum{text-transform:none;letter-spacing:0;font-weight:700;color:var(--navy)}
.bc-t{max-width:14ch;text-wrap:balance}
.bc-p{max-width:560px;margin:0 0 10px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--navy);text-wrap:pretty}
.bc-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0}
.bc-links .dg-ander{margin-top:6px;font-size:16px}
.bc-volg{margin:22px 0 0;font-size:15px;color:var(--ink-3);text-wrap:pretty}
.bc-volg a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bc-volg .bc-alle{margin-left:18px;font-weight:600;color:#3A4766}
@media (max-width:860px){.bc-grid{grid-template-columns:1fr;gap:40px}.bc-poster{width:min(100%,320px)}.bc-t{max-width:none}}
/* op de dagpagina: de cartoons van deze dag, alle jaren naast elkaar */
.bc-dag .bc-rij{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px) clamp(24px,4vw,48px);align-items:flex-start;margin:0 0 8px}
.bc-dag .bc-post{margin:0;width:min(100%,360px);rotate:-1.5deg}
.bc-dag .bc-post:nth-child(even){rotate:1.5deg}
.bc-dag .bc-cap{margin-left:4px}
/* het archief: een raster, het nieuwste eerst, om beurten een beetje scheef */
.bc-archief .bc-grid-a{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(36px,5vw,64px) clamp(24px,3vw,40px);padding-top:16px}
.bc-archief .bc-post{width:100%;rotate:-1.5deg}
.bc-archief .bc-post:nth-child(3n+2){rotate:1.5deg}
.bc-archief .bc-post:nth-child(3n){rotate:-.5deg}
.bc-archief .bc-post:hover{rotate:0deg}
.bc-archief .bc-cap{font-size:21px}
.bc-meer{margin:48px 0 0;text-align:center}
.bc-meer .dg-cta{min-height:56px;border-radius:14px}
.bc-leeg{font-size:18px;color:var(--ink-2)}
.bc-archief .bc-volg{margin-top:40px}
.bc[hidden],.bc-dag[hidden],[data-ct-meer][hidden],[data-ct-dag][hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bc-ph,.bc-post{transition:none}}

/* ---------- Stuur een kaartje: de maker open op de pagina, in twee kolommen ---------- */
.kj-open .dg-sub{max-width:560px}
.kj-kies .mj-naam{margin:0 0 14px}
.kj-wanneer{margin:0 0 10px}
.kj-jaar-help{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;color:#5D6785}
.kj-jaar-help svg,.mj-privacy svg{flex:none}
.kj-jaar-help + .mj-fout[hidden] + .mj-privacy{margin-top:8px}
.kj-ander{margin:16px 0 0}
.kj-maker{padding:0 32px 64px}
.mk.mk-inline{position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,56px);width:100%;max-width:none;height:auto;transform:none;box-shadow:none;background:transparent;border-radius:0}
.mk.mk-inline .mk-kop,.mk.mk-inline .mk-in{grid-column:1/-1}
.mk.mk-inline .mk-in[hidden],.mk.mk-inline .mk-s2[hidden]{display:none}
.mk.mk-inline .mk-s2{grid-column:1/-1;max-width:640px}
.mk.mk-inline .mk-kop{padding:0 0 10px}
.mk.mk-inline .mk-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,56px);overflow:visible;padding:0;max-height:none;align-items:start}
.mk.mk-inline .mk-rechts{display:grid;gap:18px;align-content:start}
.mk.mk-inline .mk-voorbeeld{position:sticky;top:24px;margin:0;padding:0;background:transparent;box-shadow:none}
.mk.mk-inline .mk-voorbeeld img{width:min(100%,440px)}
.mk.mk-inline .mk-voet{grid-column:2;position:static;padding:18px 0 0;background:transparent;border:0}
.mk.mk-inline .mk-voet .mk-stuur{width:auto;min-width:280px}
.mk.mk-inline .mk-x{display:none}
@media (max-width:860px){.mk.mk-inline{grid-template-columns:1fr}.mk.mk-inline .mk-voet{grid-column:1}.mk.mk-inline .mk-in{grid-template-columns:1fr;row-gap:18px}.mk.mk-inline .mk-voorbeeld{position:static}.kj-maker{padding:0 20px 48px}}

/* Stuur een kaartje: rechts een waaier van drie voorbeeldkaartjes met een bijschrift */
.kj-open .dg-wrap{position:relative}
.kj-voorbeeld{position:absolute;right:clamp(16px,4vw,64px);top:70px;width:min(38%,500px);display:flex;flex-direction:column;align-items:center;gap:26px}
.kj-voorbeeld[hidden]{display:none}
.kj-waaier{display:flex;justify-content:center;width:100%;padding:20px 0 0}
.kj-waaier img{width:36%;height:auto;aspect-ratio:1080/1350;border-radius:14px;box-shadow:0 18px 40px rgba(11,33,74,.22);background:var(--cream);border:6px solid #fff;transition:transform .3s}
.kj-waaier img:nth-child(1){transform:rotate(-9deg) translateY(18px);margin-right:-6%}
.kj-waaier img:nth-child(2){transform:translateY(-14px);z-index:1}
.kj-waaier img:nth-child(3){transform:rotate(8deg) translateY(22px);margin-left:-6%}
.kj-waaier:hover img:nth-child(1){transform:rotate(-12deg) translateY(10px)}.kj-waaier:hover img:nth-child(3){transform:rotate(11deg) translateY(14px)}
.kj-voorbeeld p{position:relative;margin:10px 0 0;max-width:340px;padding:34px 24px 10px 52px;text-align:left;font:600 26px/32px var(--font-hand,'Caveat',cursive);color:var(--navy);background:linear-gradient(90deg,transparent 40px,rgba(255,107,91,.55) 40px,rgba(255,107,91,.55) 42px,transparent 42px),repeating-linear-gradient(180deg,transparent 0,transparent 31px,rgba(139,123,255,.35) 31px,rgba(139,123,255,.35) 32px),#fff;background-position:0 0,0 22px,0 0;border-radius:4px;box-shadow:0 1px 1px rgba(11,33,74,.08),0 12px 26px rgba(11,33,74,.14);transform:rotate(-2.5deg);text-wrap:pretty}
.kj-voorbeeld p:before{content:"";position:absolute;left:50%;top:-12px;width:92px;height:26px;margin-left:-46px;background:rgba(255,201,60,.8);transform:rotate(3deg);box-shadow:0 1px 2px rgba(11,33,74,.12)}
@media (max-width:1000px){.kj-voorbeeld{display:none}}

/* Stuur een kaartje: kop van de maker met een duidelijke knop, en stap 2 (versturen) in twee kolommen */
.kj-open.kj-maak{padding-bottom:8px}
.mk.mk-inline .mk-kop{align-items:center;gap:16px;flex-wrap:wrap;padding:8px 0 22px}
.mk.mk-inline .mk-titel{font-size:clamp(24px,3vw,32px)}
.mk.mk-inline .kj-ander{margin:0}
.mk.mk-inline .kj-ander .dg-ander{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:48px;padding:0 20px;border:2px solid var(--navy);border-radius:14px;background:transparent;color:var(--navy);font:700 15px var(--font);text-decoration:none;transition:background .2s,transform .15s}
.mk.mk-inline .kj-ander .dg-ander::before{content:"\21BA";font-size:18px;line-height:1}
.mk.mk-inline .kj-ander .dg-ander:hover{background:var(--yellow);transform:translateY(-1px)}
.mk.mk-inline .mk-s2{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"terug terug" "kaart form" "kaart ok" "kaart of";grid-template-rows:auto auto auto 1fr;row-gap:22px;align-items:start}
.mk.mk-inline .mk-s2 .mk-s-terug{grid-area:terug}
.mk.mk-inline .mk-s2 .mk-s-terug .dg-ander{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--line);border-radius:14px;color:var(--navy);font-weight:700;text-decoration:none;transition:background .2s,border-color .2s}
.mk.mk-inline .mk-s2 .mk-s-terug .dg-ander:hover{border-color:var(--navy);background:#fff}
.mk.mk-inline .mk-s2 .mk-s-kaart{grid-area:kaart;grid-row:2/5;position:sticky;top:24px;place-items:start center;padding:0}
.mk.mk-inline .mk-s2 .mk-s-kaart img{width:min(100%,400px);transform:rotate(-2deg)}
.mk.mk-inline .mk-s2 .mk-sform{grid-area:form;padding:28px;border:2px solid var(--line);border-radius:20px;background:#fff;display:grid;gap:14px}
.mk.mk-inline .mk-s2 .mk-sform [data-k="s-velden"]{display:grid;gap:14px}
.mk.mk-inline .mk-s2 .mk-s-ok{grid-area:ok}
.mk.mk-inline .mk-s2 > .mk-v{grid-area:of;margin:0}
.mk.mk-inline .mk-s2 .mk-s-alt{gap:10px}
.mk.mk-inline .mk-s2 .mk-s-alt .dg-ander{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--line);border-radius:999px;color:var(--navy);font-weight:700;text-decoration:none;transition:background .2s,border-color .2s}
.mk.mk-inline .mk-s2 .mk-s-alt .dg-ander:hover{border-color:var(--navy);background:#fff}
@media (max-width:860px){.mk.mk-inline .mk-s2{grid-template-columns:1fr;grid-template-areas:"terug" "kaart" "form" "ok" "of";grid-template-rows:none}.mk.mk-inline .mk-s2 .mk-s-kaart{grid-row:auto;position:static}.mk.mk-inline .mk-s2 .mk-s-kaart img{width:min(70%,300px)}.mk.mk-inline .mk-s2 .mk-sform{padding:20px}}
.mk.mk-inline .mk-greep{display:none}

/* Stuur een kaartje op de gsm: kleinere kaart, thema's en tekeningen als bandjes om door te vegen, voor/binnenkant als schakelaar */
@media (max-width:860px){
  .mk.mk-inline .mk-voorbeeld img,.mk.mk-inline .mk-voorbeeld img.is-binnen{width:min(60%,250px);aspect-ratio:4/5;transform:rotate(-1.5deg);border-radius:12px}
  .mk.mk-inline .mk-voorbeeld img.is-binnen{object-fit:cover;object-position:right center}
  .mk.mk-inline .mk-kant{display:inline-flex;gap:0;padding:4px;margin:16px auto 0;border-radius:999px;background:#E9E5FF}
  .mk.mk-inline .mk-kant button{min-height:38px;padding:0 20px;background:transparent;color:var(--navy);font-weight:700}
  .mk.mk-inline .mk-kant button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 2px 8px -2px rgba(11,33,74,.35)}
  .mk.mk-inline .mk-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .mk.mk-inline .mk-chips::-webkit-scrollbar,.mk.mk-inline .mk-tek-grid::-webkit-scrollbar{display:none}
  .mk.mk-inline .mk-chip{flex:0 0 auto}
  .mk.mk-inline .mk-chip span{white-space:nowrap;background:#fff;border:2px solid var(--line);min-height:40px;padding:0 16px}
  .mk.mk-inline .mk-chip input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--yellow)}
  .mk.mk-inline .mk-tek-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;position:relative;margin:0 -20px;padding:4px 20px 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .mk.mk-inline .mk-tek-k{flex:0 0 29%;scroll-snap-align:start}
  .kj-maker{overflow-x:clip}
  .mk.mk-inline .mk-rechts,.mk.mk-inline .mk-v,.mk.mk-inline .mk-tek{min-width:0}
  .mk.mk-inline .mk-tek-bar{position:relative;height:4px;margin:2px 0 0;border-radius:2px;background:#E9E5FF}
  .mk.mk-inline .mk-tek-bar[hidden]{display:none}
  .mk.mk-inline .mk-tek-bar i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--coral)}
}
@media (min-width:861px){.mk-tek-bar{display:none}}

/* sociale media in de voet: rond icoon in koraal met de naam ernaast */
.ft-bd .ft-social{flex-direction:row;flex-wrap:wrap;gap:10px 18px;margin:0}
.ft-bd .ft-social a.ft-so{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cream);font-weight:700;text-decoration:none}
.ft-so-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--coral);transition:transform .25s,background .2s}
.ft-so-i::before{content:"";width:22px;height:22px;background:var(--navy);-webkit-mask:var(--so) center/contain no-repeat;mask:var(--so) center/contain no-repeat}
.ft-so:hover .ft-so-i{transform:rotate(-8deg) scale(1.08);background:var(--yellow)}
.ft-so-instagram{--so:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='.6' fill='%23000'/%3E%3C/svg%3E")}
.ft-so-facebook{--so:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8V6.5c0-.8.4-1.2 1.2-1.2H17V2h-2.6C11.6 2 10 3.7 10 6.3V8H7.5v3.4H10V22h4V11.4h2.8L17.3 8z'/%3E%3C/svg%3E")}

/* Stuur een kaartje: lucht onder het formulier, zodat de privacyzin niet tegen de voet plakt */
.kj-open{padding-bottom:clamp(56px,8vw,112px)}