/* Rubik self-hosted (variable font, AVG + CSP font-src 'self') */
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/rubik-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/rubik-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;
  src:url('../fonts/rubik-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Rubik';font-style:italic;font-weight:300 900;font-display:swap;
  src:url('../fonts/rubik-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Netwerk de Kempen, site-breed design-system
   Skin: cream grond, donkergroen expressief panel, amber accent
   Gegrond op beetrootand.com (structuur), complexlaw.co.uk
   (kaarten, warmte), portrait.so (diagram, lichtheid).
   Contrast-regel: amber #e99f08 alleen op donkergroen of als
   knopvlak; tekst-accent op lichte grond is amber-text #7a4a2c.
   ============================================================ */
:root{
  --green-deep:#08271A; --green:#0F3A27; --green-soft:#E3DBCD;
  --amber:#E99F08; --amber-d:#C98606; --amber-text:#7A4A2C; --amber-soft:#F3D59F; --sand:#F7EEE6;
  --cream:#EDDCCC; --paper:#FFFBF7; --paper-dim:#F6ECE2; --ink:#08271A; --muted:#5C5348; --line:#DCC3AE;
  /* Donkerder secundair, voor de getinte gronden waar --muted onder 4.5:1 zakt
     (zand, groen-soft, de footer-nevel). Zie style-guide, contrastregels. */
  --muted-d:#4E463C;
  --on-green:#F3EEE6; --on-green-dim:#C9D2C4;
  --r:18px; --r-lg:32px;
  --sh:0 2px 14px rgba(8,39,26,.08); --sh-h:0 20px 44px rgba(8,39,26,.18);
  --sans:'Rubik',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1); --dur:.6s; --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:10px}

/* Nederlandse samenstellingen zijn lang (arbeidsongeschiktheidsverzekering,
   kleineondernemersregeling) en breken standaard niet af. Op 320px duwden ze
   vijf pagina's in een horizontale scroll, koppen voorop. break-word grijpt
   alleen in als een woord anders echt niet past, dus op ruimere schermen
   verandert er niets aan de zetting. .page-hero h1 had dit al los. */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,td,th{overflow-wrap:break-word}

/* display-typografie */
.disp{font-weight:800;font-style:italic;text-transform:uppercase;line-height:1.02;letter-spacing:-.045em;color:var(--green-deep);margin:0}
.disp .am{color:var(--amber-text);font-style:normal}
.hero .disp .am,.slot .disp .am,.login-uitleg .disp .am{color:var(--amber)}
h1.disp{font-size:clamp(42px,7.6vw,96px)}
h2.disp{font-size:clamp(30px,4.2vw,50px)}
h3.disp{font-size:clamp(24px,3vw,36px)}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--muted)}

/* label met dot */
.label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--green);margin-bottom:18px}
.label .dot{width:10px;height:10px;border-radius:50%;background:var(--amber);flex:none}
.label.center{justify-content:center}

/* sectie-header two-col */
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,52px)}
@media(max-width:820px){.sec-head{grid-template-columns:1fr}}

/* knoppen met hover-circle */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:600;font-size:1rem;border-radius:999px;padding:15px 28px;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.btn>*{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:var(--amber-text);transform:scale(0);transition:transform .35s var(--ease);z-index:0}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:scale(1.05)}
.btn .a{transition:transform .25s var(--ease);display:inline-block}
.btn:hover .a{transform:translateX(4px)}
.btn-p{background:var(--amber);color:var(--green-deep);box-shadow:0 8px 22px rgba(233,159,8,.35)}
.btn-p:hover{color:#fff}
.btn-ghost{background:transparent;color:var(--on-green);border-color:rgba(243,238,230,.55)}
.btn-ghost::after{background:var(--on-green)}
.btn-ghost:hover{color:var(--green-deep);border-color:var(--on-green)}
.btn-line{background:transparent;color:var(--green);border-color:var(--green)}
.btn-line::after{background:var(--green)}
.btn-line:hover{color:var(--cream)}
.btn-dash{background:var(--paper);color:var(--green);border:2px dashed var(--green)}
.btn-dash::after{background:var(--green-soft)}
.btn-dash:hover{color:var(--green-deep);border-style:solid}
.tlink{font-weight:600;color:var(--green);border-bottom:2px solid var(--amber);padding-bottom:2px;transition:color .2s var(--ease)}
.tlink:hover{color:var(--amber-text)}


/* header */
header.nav{position:sticky;top:0;z-index:60;background:rgba(237,220,204,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:none;margin:0 auto;padding:0 clamp(18px,3vw,48px)}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);font-size:1.05rem;white-space:nowrap}
.logo .mono{width:42px;height:42px;border-radius:50%;background:var(--green-deep);color:var(--amber);display:grid;place-items:center;font-size:.8rem;font-style:italic;flex:none}
.logo-am{color:var(--amber-text)}
/* het logo van Loes (november 2026): beeld in plaats van de mono-cirkel plus woordmerk; op een smal
   scherm wisselt <picture> naar alleen de stippenkaart (inc/template-tags.php, ndk_logo) */
.logo picture{display:block}
.logo .logo-beeld{display:block;height:40px;width:auto;max-width:none}
/* hoogte via de breedte, zodat het woordmerk op 320px meekrimpt in plaats van de footer breed te duwen */
.foot-merk .logo,.login-kaart .logo{max-width:100%}
.foot-merk .logo .logo-beeld{height:auto;width:min(340px,100%)}
.login-kaart .logo .logo-beeld{height:auto;width:min(252px,100%)}
@media(max-width:560px){header.nav .logo .logo-beeld{height:40px}}
nav.menu{display:flex;gap:clamp(12px,2vw,26px);font-weight:500;font-size:.98rem}
nav.menu a{position:relative;padding:6px 2px;color:var(--ink)}
nav.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
nav.menu a:hover::after,nav.menu a.actief::after{transform:scaleX(1)}
nav.menu a.actief{font-weight:600;color:var(--green-deep)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-bel-wrap{position:relative}
.nav-bel{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--green-deep)}
.nav-bel:hover,.nav-bel:focus-visible{background:var(--green-soft)}
.nav-bel .dash-badge{position:absolute;top:1px;right:0}
.bel-paneel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 24px));background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-h);padding:16px 18px;z-index:70}
@media(max-width:720px){.bel-paneel{position:fixed;left:12px;right:12px;top:82px;width:auto}}
.bel-paneel .bel-kop{margin:0 0 10px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.bel-paneel .bel-inbox{display:block;font-weight:600;font-size:.92rem;color:var(--green);background:var(--amber-soft);border-radius:10px;padding:8px 12px;margin-bottom:10px}
.bel-paneel .bel-inbox:hover{color:var(--amber-text)}
.bel-paneel ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.bel-paneel li{position:relative;padding-left:16px;font-size:.93rem;line-height:1.4}
.bel-paneel li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.bel-paneel li.ongelezen::before{background:var(--amber)}
.bel-paneel li.ongelezen a{font-weight:600}
.bel-paneel li a{color:var(--green-deep)}
.bel-paneel li a:hover{color:var(--amber-text)}
.bel-paneel li small{display:block;color:var(--muted);font-size:.8rem}
.bel-paneel .bel-leeg{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.bel-paneel .tlink{font-size:.92rem}
.dash-notif li.ongelezen a{font-weight:700}
.dash-notif li.ongelezen::marker{color:var(--amber)}
.nav-login{font-weight:500;font-size:.95rem;color:var(--muted)}
.nav-login:hover{color:var(--green-deep)}
.nav-cta .btn{padding:11px 20px;font-size:.95rem;white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:12px;place-items:center;gap:0;flex:none}
.burger span{display:block;width:22px;height:2.5px;background:var(--green-deep);border-radius:2px;margin:2.5px 0;transition:transform .25s var(--ease),opacity .25s var(--ease)}
@media(max-width:1060px){.burger{display:grid}nav.menu{display:none}}
.mnav{position:fixed;inset:0;overflow:hidden;background:var(--zand-l);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.mnav.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease)}
.mnav a.groot{color:var(--groen);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(26px,8vw,40px);letter-spacing:-.03em}
.mnav a.groot:hover,.mnav a.groot.actief{color:var(--roest-t)}
.mnav .klein{color:var(--muted-d);font-weight:500;font-size:1.05rem}
.mnav .sluit{position:absolute;top:18px;right:18px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(8,39,26,.08);color:var(--groen);font-size:1.5rem;cursor:pointer}
.mnav::before{content:"";position:absolute;z-index:-1;border-radius:50%;aspect-ratio:1;background:var(--goud);width:clamp(180px,46vw,300px);right:clamp(-110px,-16vw,-70px);top:clamp(-150px,-24vw,-90px);pointer-events:none}
.hero :focus-visible,.slot :focus-visible{outline-color:var(--amber)}
.mnav :focus-visible{outline-color:var(--groen)}
@media(max-width:560px){.nav-login{display:none}header.nav .logo .word{display:none}.logo .mono{width:38px;height:38px}.nav-cta .btn{padding:11px 18px;font-size:.9rem}}
@media(max-width:380px){.nav-cta{gap:8px}.nav-cta .btn{padding:10px 13px;font-size:.84rem}}

/* hero (home) */
.hero-out{padding:12px}
.hero{position:relative;background:var(--green-deep);border-radius:var(--r-lg);min-height:min(calc(100vh - 156px),820px);min-height:min(calc(100svh - 156px),820px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:clamp(90px,12vh,140px) clamp(20px,5vw,60px) clamp(84px,10vh,120px)}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;will-change:transform}
.rings span{position:absolute;border:1px solid rgba(243,238,230,.13);border-radius:50%}
.rings .r1{width:34vmax;height:34vmax}
.rings .r2{width:52vmax;height:52vmax;border-color:rgba(243,238,230,.10)}
.rings .r3{width:72vmax;height:72vmax;border-color:rgba(243,238,230,.07)}
.rings .r4{width:94vmax;height:94vmax;border-color:rgba(243,238,230,.05)}
.hero-kicker{color:var(--amber);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;margin-bottom:22px}
.hero h1{color:var(--on-green);position:relative;z-index:1;max-width:14ch}
.hero h1 .w{display:inline-block}
.hero-sub{color:var(--on-green-dim);max-width:52ch;margin:26px auto 34px;font-size:clamp(16px,1.4vw,19px);position:relative;z-index:1}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.hero-stats{position:relative;z-index:1;display:flex;gap:clamp(22px,5vw,72px);flex-wrap:wrap;justify-content:center;margin-top:clamp(48px,8vh,84px);padding-top:30px;border-top:1px solid rgba(243,238,230,.16);width:min(860px,100%)}
.hero-stats div{text-align:center}
.hero-stats b{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:800;font-style:italic;color:var(--amber);letter-spacing:-.02em}
.hero-stats small{color:var(--on-green-dim);font-size:.88rem}
.badge{position:absolute;left:clamp(18px,4vw,54px);bottom:clamp(18px,4vw,50px);width:104px;height:104px;z-index:2;display:grid;place-items:center;color:var(--on-green)}
.badge svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.badge svg text{fill:var(--on-green-dim);font-size:11px;font-weight:600;letter-spacing:.22em}
.badge .arr{font-size:1.5rem;color:var(--amber);transition:transform .25s var(--ease)}
.badge:hover .arr{transform:translateY(4px)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.badge{display:none}}
@media(max-height:840px){.hero{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(36px,5vh,64px)}.hero .disp{font-size:min(clamp(42px,7.6vw,96px),8.8vh)}.hero-kicker{margin-bottom:12px}.hero-sub{margin:18px auto 24px}.hero-stats{margin-top:clamp(20px,3.2vh,38px);padding-top:18px}}

/* marquee */
.marquee{overflow:hidden;padding:clamp(26px,4.5vw,48px) 0;border-bottom:1px solid var(--line)}
.marquee-in{display:flex;gap:0;width:max-content;animation:mq 32s linear infinite}
.marquee span{display:flex;gap:.6em;white-space:nowrap;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(26px,3.6vw,46px);color:var(--green-deep);padding-right:.6em}
.marquee .am{color:var(--amber-text);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

section.blk{padding:clamp(64px,9vw,120px) 0}
section.blk.strak{padding:clamp(36px,5vw,64px) 0}

/* binnenpagina-header met kringen (bouwsteen 13). Sinds fase 16.2 (2 november 2026) licht, in
   de vormtaal van de footer-CTA en de homepage-hero: zandroze vlak, donkere kringen en een
   gouden boog. Met portret staat de boog achter het portret, zonder portret steekt hij in de
   hoek rechtsboven, zoals op de homepage. */
.page-hero-out{padding:12px}
.page-hero{--pr:clamp(48px,8vw,140px);--pw:clamp(230px,24vw,380px);position:relative;background:var(--zand-l);color:var(--groen);border-radius:var(--r-lg);overflow:hidden;padding:clamp(56px,8vw,104px) clamp(24px,5vw,64px)}
/* Vangnet: een lange naam of samenstelling in de titel mag breken, niet uit beeld lopen. */
.page-hero h1{overflow-wrap:anywhere}
.page-hero .kring{position:absolute;border:1px solid rgba(8,39,26,.09);border-radius:50%;right:-14vmax;top:-22vmax;width:44vmax;height:44vmax;pointer-events:none}
.page-hero .kring.k2{width:66vmax;height:66vmax;right:-24vmax;top:-32vmax;border-color:rgba(8,39,26,.05)}
.ph-boog{position:absolute;border-radius:50%;aspect-ratio:1;background:var(--goud);pointer-events:none;width:clamp(180px,26vw,420px);right:clamp(-160px,-10vw,-80px);top:clamp(-260px,-16vw,-110px)}
.page-hero .crumb{color:var(--muted);font-size:.85rem;margin-bottom:14px;position:relative;z-index:1}
.page-hero .crumb a{border-bottom:1px solid rgba(8,39,26,.3)}
.page-hero .crumb a:hover{color:var(--groen)}
.page-hero h1{position:relative;z-index:1;color:var(--groen);max-width:18ch;font-size:clamp(34px,5.4vw,64px)}
.page-hero .disp .am{color:var(--roest-t)}
.page-hero p.intro{position:relative;z-index:1;color:var(--muted);max-width:54ch;margin-top:16px;font-size:clamp(15px,1.3vw,18px)}
.page-hero .ph-acties{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.page-hero .ph-meta{position:relative;z-index:1;display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.95rem}
.page-hero .ph-meta b{color:var(--groen);font-weight:600}
.page-hero .datum-groot{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px 22px;margin-bottom:18px}
.page-hero .datum-groot b{font-size:clamp(28px,3vw,40px);font-weight:800;font-style:italic;color:var(--roest-t);line-height:1}
.page-hero .datum-groot small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-top:4px}
.page-hero :focus-visible{outline-color:var(--groen)}
/* een knop voor donkere grond (btn-ghost) is op het lichte vlak een lijnknop */
.page-hero .btn-ghost{color:var(--green);border-color:var(--green)}
.page-hero .btn-ghost::after{background:var(--green)}
.page-hero .btn-ghost:hover{color:#fff;border-color:var(--green)}
.ph-portret{position:absolute;right:clamp(48px,8vw,140px);bottom:0;width:clamp(230px,24vw,380px);height:92%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.ph-portret::before{content:"";position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:135%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(233,159,8,.18),transparent 72%);z-index:0}
.ph-portret img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.page-hero .ph-portret{right:var(--pr);width:var(--pw)}
.page-hero .ph-portret::before{display:none}
.page-hero.met-portret{padding-right:clamp(300px,34vw,540px);min-height:clamp(360px,34vw,520px);display:flex;flex-direction:column;justify-content:center}
@media(min-width:881px) and (max-width:1000px){.page-hero.met-portret{padding-right:calc(var(--pr) + var(--pw) * 1.23 + 24px)}}
@media(min-width:881px){.page-hero.met-portret .ph-boog{width:calc(var(--pw) * 1.45);right:calc(var(--pr) - var(--pw) * .22);top:auto;bottom:calc(var(--pw) * -.62)}}
@media(max-width:880px){.ph-portret{display:none}.page-hero.met-portret{padding-right:clamp(24px,5vw,64px)}}

/* opbrengst-kaarten */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}
.card{border-radius:var(--r);padding:clamp(24px,2.6vw,36px);box-shadow:var(--sh);transition:transform .28s var(--ease),box-shadow .28s var(--ease);position:relative}
.card .num{font-weight:800;font-style:italic;font-size:.95rem;color:var(--amber-text);letter-spacing:.06em}
.card h3{font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--green-deep);margin:14px 0 10px;line-height:1.2}
.card p{color:var(--muted);font-size:.99rem}
.card .pic{height:130px;border-radius:12px;margin-bottom:20px;display:grid;place-items:center;overflow:hidden}
.card .pic svg{width:130px;height:auto;transition:transform .35s var(--ease)}
.card:hover .pic svg{transform:translateY(-4px) scale(1.04)}
.c-groen{background:var(--green-soft)} .c-groen .pic{background:rgba(15,58,39,.08)}
.c-amber{background:var(--amber-soft)} .c-amber .pic{background:rgba(233,159,8,.14)}
.c-zand{background:var(--sand)} .c-zand .pic{background:rgba(8,39,26,.06)}

/* leden-netwerkdiagram (home) */
.net{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.net{grid-template-columns:1fr}}
.net-diagram{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(14px,2vw,26px);box-shadow:var(--sh)}
.net-diagram svg{width:100%;height:auto;display:block}
.net-diagram .spoke{stroke:#c7b39f;stroke-width:1.5;stroke-dasharray:340;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
html.js .net-diagram:not(.in) .spoke{stroke-dashoffset:340}
/* De reveal-stagger (per knoop een --d) mag alleen de opacity vertragen; de hover-transform reageert direct. */
.net-diagram .node{transition:transform .18s var(--ease),opacity .5s var(--ease) var(--d,0s);transform-origin:center;transform-box:fill-box;opacity:1}
html.js .net-diagram:not(.in) .node{opacity:0}
.net-diagram a{cursor:pointer}
.net-diagram a:hover .node,.net-diagram a:focus-visible .node{transform:scale(1.12)}
.net-diagram .node circle{fill:var(--green)}
.net-diagram .node.alt circle{fill:var(--amber)}
.net-diagram .node text{fill:#fffbf7;font-weight:600;font-size:13px;text-anchor:middle}
.net-diagram .node .dorp{fill:var(--muted);font-size:10.5px;font-weight:500}
@media(max-width:700px){.net-diagram .node .dorp{font-size:14px}}
/* Op smal scherm botsen de labels van de kleine tussenknopen met de hoofdlabels; portretten blijven, labels weg. */
@media(max-width:560px){.net-diagram .node.klein .dorp{display:none}}
.net-diagram .kern circle{fill:var(--green-deep)}
.net-diagram .kern text{fill:var(--amber);font-style:italic;font-weight:800;font-size:15px}
.mem-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 26px}
.mem-chips a{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--ink);transition:transform .2s var(--ease),border-color .2s var(--ease)}
.mem-chips a:hover{transform:translateY(-2px);border-color:var(--amber)}
.mem-chips b{color:var(--muted);font-weight:400}

/* agenda-rijen + tilted foto's */
.blk-agenda{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tilt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,30px);margin-bottom:clamp(40px,6vw,70px)}
@media(max-width:820px){.tilt-row{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.tilt{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s var(--ease);position:relative;background:var(--sand)}
.tilt img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tilt figcaption{position:absolute;left:12px;bottom:12px;background:rgba(8,39,26,.82);color:var(--on-green);font-size:.8rem;padding:6px 12px;border-radius:999px}
.tilt.t1{transform:rotate(-3.5deg)} .tilt.t2{transform:rotate(2deg) translateY(14px)} .tilt.t3{transform:rotate(-1.5deg)}
.tilt:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--sh-h)}
.agenda-list{display:flex;flex-direction:column;gap:14px}
/* wit op de zandgrond van de pagina, zodat de rijen eruit springen (fase 16.2) */
.ag{display:grid;grid-template-columns:92px 1fr auto;gap:clamp(16px,2.5vw,32px);align-items:center;background:var(--paper);box-shadow:var(--sh);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.ag:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.ag:hover .btn-line{background:var(--green);color:var(--cream)}
.ag:hover .btn .a{transform:translateX(4px)}
.ag:hover .tlink{color:var(--amber-text)}
.ag-date{text-align:center;background:var(--green-deep);color:var(--on-green);border-radius:14px;padding:12px 6px}
.ag-date b{display:block;font-size:1.5rem;font-weight:800;font-style:italic;color:var(--amber);line-height:1}
.ag-date small{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.ag-body .tag{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-text);background:var(--amber-soft);border-radius:999px;padding:4px 12px;margin-bottom:8px}
.ag-body h3{margin:0 0 4px;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--green-deep)}
.ag-body p{color:var(--muted);font-size:.92rem}
.ag .btn{padding:12px 22px;font-size:.95rem}
@media(max-width:720px){.ag{grid-template-columns:76px 1fr}.ag .actie{grid-column:2}}

/* seizoensoverzicht presentaties */
.seizoen{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:1020px){.seizoen{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.seizoen{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Wie presenteert wanneer. De INGEPLANDE kaart krijgt de vulling, want dat is
   de kaart met inhoud en met iets te doen (een gast meldt zich aan voor die
   ochtend); een komend ontbijt zonder presentatie en een geweest ontbijt zakken
   terug naar rustig papier. Status zit nooit in kleur alleen: er hoort altijd
   een woord bij (WCAG 1.4.1). De actielink strekt over de hele kaart. */
.sz{position:relative;background:var(--paper);box-shadow:var(--sh);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:6px;min-height:132px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.sz.vol{border-top:4px solid var(--groen)}
/* een open of geweest ontbijt zakt terug naar een omlijnd vak op de zandgrond */
.sz.leeg{background:transparent;box-shadow:none;border:1px dashed rgba(8,39,26,.3)}
.sz.vol:hover,.sz.leeg:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.sz.leeg:hover{background:var(--paper)}
.sz .sz-actie::after{content:"";position:absolute;inset:0}
.sz b.datum{font-weight:800;font-style:italic;color:var(--green-deep);font-size:1.05rem}
.sz .status{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;border-radius:999px;padding:4px 11px}
.sz.vol .status{background:var(--green-deep);color:var(--amber)}
.sz.leeg .status{background:var(--sand);color:var(--muted-d)}
/* Geweest treedt terug zonder vlak, niet via opacity. Met opacity:.55 zakte de
   kaarttekst naar 2,2:1 en dat haalt AA niet; bovendien meet je het niet met
   getComputedStyle, want die geeft de onverdunde kleur terug. --muted-d haalt
   6,8:1 op de zandgrond. */
.sz.voorbij{background:transparent;box-shadow:none;border-color:rgba(8,39,26,.14)}
.sz.voorbij b.datum,.sz.voorbij p b{color:var(--muted-d);font-weight:600}
.sz.voorbij .status{background:var(--sand);color:var(--muted-d)}
.sz p{font-size:.85rem;color:var(--muted-d);line-height:1.4}
.sz p b{color:var(--ink);font-weight:600}
/* wie presenteert: klein portret in een gouden bol, de vorm van "Wie zit erin" */
.sz .sz-wie{display:flex;align-items:flex-end;gap:12px;margin-top:10px}
.sz .sz-wie .wz-bol{flex:none;width:56px;margin:0;--bol:var(--goud)}
.sz .sz-wie p{flex:1;min-width:0}
/* twee kolommen op een telefoon: de bol boven de tekst, en een korter gespatieerde pill */
@media(max-width:640px){.sz .sz-wie{flex-direction:column;align-items:flex-start;gap:8px}.sz .status{letter-spacing:.02em;font-size:.66rem;padding:4px 8px}}
.sz .sz-actie{margin-top:auto;align-self:flex-start;font-weight:600;font-size:.85rem;color:var(--amber-text);border-bottom:1px solid var(--amber);padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.sz:hover .sz-actie,.sz .sz-actie:focus-visible{color:var(--green-deep);border-bottom-color:var(--green-deep)}

/* quote-panel */
.quote-panel{background:var(--amber-soft);border-radius:var(--r-lg);padding:clamp(44px,7vw,90px) clamp(24px,6vw,90px);text-align:center;position:relative;overflow:hidden}
.quote-panel::before{content:"";position:absolute;width:60vmax;height:60vmax;border:1px solid rgba(201,134,6,.18);border-radius:50%;left:50%;top:-30vmax;transform:translateX(-50%);pointer-events:none}
.quote-panel blockquote{margin:0 auto;max-width:24ch;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.04em;line-height:1.08;font-size:clamp(24px,3.4vw,42px);color:var(--green-deep)}
.quote-panel blockquote .am{color:var(--amber-text);font-style:normal}
.quote-panel .qp-portret{position:absolute;bottom:0;width:clamp(120px,14vw,200px);pointer-events:none}
.quote-panel .qp-portret.links{left:clamp(10px,3vw,46px)}
.quote-panel .qp-portret.rechts{right:clamp(10px,3vw,46px)}
.quote-panel .qp-portret img{display:block;width:100%;height:auto}
@media(max-width:880px){.quote-panel .qp-portret{display:none}}
/* zolang de portretten er staan houdt de tekstkolom hun zone vrij, anders schuift
   de motto-regel onder een portret door (portretbreedte + zijafstand + 24px lucht) */
@media(min-width:881px){.quote-panel{padding-inline:calc(clamp(120px,14vw,200px) + clamp(10px,3vw,46px) + 24px)}}
.quote-wie{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:30px}
/* het beeldmerk heel en op eigen breedte; flex:none, anders knijpt de tekst ernaast hem op een telefoon samen */
.quote-wie .av{flex:none;width:clamp(72px,8vw,104px)}
.quote-wie .av img{display:block;width:100%;height:auto}
.quote-wie div{text-align:left;font-size:.95rem}
.quote-wie b{color:var(--green-deep)}
.quote-wie small{color:var(--muted)}

.nieuws-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.nieuws-filters button,.gids-filters button{font-family:var(--sans);cursor:pointer;font-size:.85rem;font-weight:600;color:var(--green);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 16px;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.nieuws-filters button:hover,.gids-filters button:hover{border-color:var(--amber);transform:translateY(-2px)}
.nieuws-filters button.actief,.gids-filters button.actief{background:var(--green-deep);color:var(--on-green);border-color:var(--green-deep)}

/* featured nieuws / event-spotlight (bouwsteen 11) */
.spot{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
@media(max-width:880px){.spot{grid-template-columns:1fr}}
.spot-img{position:relative;min-height:320px}
.spot-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot-img .datum{position:absolute;top:18px;left:18px;background:var(--green-deep);color:var(--on-green);border-radius:14px;padding:10px 16px;text-align:center}
.spot-img .datum b{display:block;font-size:1.4rem;font-weight:800;font-style:italic;color:var(--amber);line-height:1}
.spot-img .datum small{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.spot-body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.spot-body .tag{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-text);background:var(--amber-soft);border-radius:999px;padding:4px 12px}
.spot-body h2,.spot-body h3{margin:0;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(22px,2.4vw,32px);color:var(--green-deep);line-height:1.1}
.spot-body .meta-regel{color:var(--muted);font-size:.95rem}
.spot-body .btn{margin-top:8px}

/* slot-cta */
.slot-out{padding:12px}
.slot{position:relative;background:var(--green-deep);border-radius:var(--r-lg);overflow:hidden;text-align:center;padding:clamp(70px,10vw,130px) clamp(22px,5vw,60px)}
.slot .ph-portret{width:clamp(260px,28vw,420px);right:clamp(40px,7vw,120px)}
.slot.met-portret{text-align:left;padding-right:clamp(320px,38vw,580px)}
.slot.met-portret h2,.slot.met-portret p{margin-left:0}
.slot.met-portret .hero-cta{justify-content:flex-start}
@media(max-width:880px){.slot.met-portret{text-align:center;padding-right:clamp(22px,5vw,60px)}.slot.met-portret .hero-cta{justify-content:center}}
.slot .rings span{border-color:rgba(243,238,230,.10)}
.slot h2{color:var(--on-green);position:relative;z-index:1;margin:0 auto;max-width:16ch}
.slot p{color:var(--on-green-dim);max-width:46ch;margin:22px auto 32px;position:relative;z-index:1}
.slot .hero-cta{margin-bottom:18px}
.slot .sub{font-size:.95rem;color:var(--on-green-dim);position:relative;z-index:1}
.slot .sub a{color:var(--on-green);border-bottom:2px solid var(--amber);padding-bottom:2px}

/* footer: groene nevel met woordmerk. De tint zet de footer af van de cream
   pagina (Stripe-recept: haarlijn plus tint doen samen het werk), het
   watermerk laat de naam als laatste beeld achter. */
footer.site{padding:clamp(48px,7vw,80px) 0 0;position:relative;overflow:hidden;background:linear-gradient(180deg,#f6ece2 0%,var(--green-soft) 100%);border-top:1px solid var(--line)}
footer.site .wrap{max-width:none;padding:0 clamp(18px,3vw,48px);position:relative;z-index:1}
.foot-watermerk{position:absolute;left:50%;bottom:-3.6vw;transform:translateX(-50%);width:100%;text-align:center;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.05em;font-size:clamp(60px,13vw,190px);line-height:.8;color:rgba(15,58,39,.07);white-space:nowrap;pointer-events:none;user-select:none}
.foot-merk{border-left:3px solid var(--amber);padding-left:clamp(14px,1.6vw,22px)}
/* 404 heeft alleen de legal-regel: daar wordt een verloop een harde band, dus
   die footer krijgt een egale tint. */
footer.site-klein{background:#f6ece2;padding:clamp(28px,4vw,44px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px);padding-bottom:clamp(36px,5vw,60px)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{margin:0 0 14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-d);font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.97rem}
.foot-grid ul a:hover{color:var(--amber-text)}
.foot-missie{color:var(--muted-d);font-size:.95rem;max-width:34ch;margin-top:14px}
.foot-contact{font-style:normal;margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--muted-d)}
.foot-contact a{align-self:flex-start;border-bottom:1px solid var(--line)}
.foot-contact a:hover{color:var(--amber-text)}
.foot-legal{border-top:1px solid var(--line);padding:20px 0;font-size:.82rem;color:var(--muted-d);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot-legal a{border-bottom:1px solid var(--line)}
.foot-legal a:hover{color:var(--green-deep)}

/* prikbord: type-keuze en pills */
.prikbord-type{border:0;padding:0;margin:0 0 4px;display:flex;gap:22px;flex-wrap:wrap}
.prikbord-type label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.prikbord-type input{width:16px;height:16px;accent-color:var(--green)}
.prikbord-tag{margin-left:6px}
.dash-item[data-type="aanbod"] .prikbord-tag{background:var(--green-soft);color:var(--green)}

/* wel/niet-overzicht bij een ontbijt (vinkje en kruisje) */
.welniet{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.welniet-chip{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;border-radius:999px;padding:5px 14px;margin:0 0 8px}
.welniet-chip.wel{background:var(--green-soft);color:var(--green)}
.welniet-chip.niet{background:var(--sand);color:var(--muted-d)}
.welniet-namen{margin:0;color:var(--muted);font-size:.92rem}

/* foto-avatars: vullen de initialen-cirkels, fallback blijft initialen */
.met-foto{position:relative}
.met-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%}

/* ── bibliotheek-bouwstenen ── */

/* 01 leden-band — voorraad uit de sectiebibliotheek, (nog) op geen pagina
   gebruikt; geldt ook voor .btn-dash en .gids-meer. Niet blind mee-porteren naar WP. */
.team-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,50px)}
.team-head .lead{margin:14px auto 26px;max-width:52ch}
.avatar-band{overflow:hidden;display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);padding:6px 0 44px}
.av-rij{display:flex;gap:clamp(14px,2vw,26px);justify-content:center}
.av-rij.schuif{transform:translateX(clamp(-70px,-5vw,-40px))}
a.av{position:relative;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--green-deep);flex:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease);animation:zweef 7s ease-in-out infinite}
a.av:hover{transform:translateY(-8px) scale(1.05);box-shadow:var(--sh-h);z-index:2}
.av small{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background:var(--green-deep);color:var(--on-green);font-size:.72rem;font-weight:500;padding:4px 12px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
a.av:hover small{opacity:1}
.av.g{background:var(--green-soft)} .av.a{background:var(--amber-soft)} .av.z{background:var(--sand)} .av.d{background:var(--green-deep);color:var(--amber)}
.av.m1{width:clamp(74px,9vw,128px);height:clamp(74px,9vw,128px);font-size:clamp(.95rem,1.4vw,1.3rem)}
.av.m2{width:clamp(60px,7vw,104px);height:clamp(60px,7vw,104px);font-size:clamp(.85rem,1.1vw,1.05rem)}
.av:nth-child(odd){animation-delay:-3.5s}
@keyframes zweef{0%,100%{translate:0 0}50%{translate:0 -8px}}
.team-cta{text-align:center;margin-top:clamp(26px,4vw,44px)}

/* 02 missie 2-col */
.missie{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:880px){.missie{grid-template-columns:1fr}}
.missie-punten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,32px);margin-top:clamp(24px,3vw,38px)}
@media(max-width:560px){.missie-punten{grid-template-columns:1fr}}
.missie-punt .ico{width:46px;height:46px;border-radius:50%;background:var(--goud);display:grid;place-items:center;margin-bottom:12px}
.missie-punt h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;color:var(--green-deep)}
.missie-punt p{font-size:.93rem;color:var(--muted)}
.missie-visual{position:relative;background:var(--zand-l);border-radius:var(--r-lg);min-height:420px;overflow:hidden;display:grid;place-items:center}
.missie-visual .kring{position:absolute;border:1px solid rgba(8,39,26,.12);border-radius:50%}
.missie-visual .k1{width:130%;aspect-ratio:1}
.missie-visual .k2{width:88%;aspect-ratio:1;border-color:rgba(8,39,26,.09)}
.missie-visual .k3{width:50%;aspect-ratio:1;border-color:rgba(8,39,26,.07)}
.missie-visual .kern-txt{position:relative;z-index:1;text-align:center;color:var(--groen);padding:20px}
.missie-visual .kern-txt b{display:block;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.missie-visual .kern-txt span{color:var(--roest-t);font-size:.9rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* het stippenlogo boven de tekst en de gouden boog in de hoek, zoals de page-hero zonder portret
   en de slot-CTA: zonder die twee las het vlak als een placeholder (review 16.2) */
.missie-visual{align-content:center;gap:clamp(14px,2vw,22px)}
.missie-visual .kring{border-color:rgba(8,39,26,.09)}
.missie-visual .k3{border-color:rgba(8,39,26,.05)}
.missie-visual .mv-boog{position:absolute;border-radius:50%;aspect-ratio:1;background:var(--goud);pointer-events:none;width:clamp(150px,36%,240px);right:-12%;top:-16%}
.missie-visual .kaart{position:relative;z-index:1;width:clamp(150px,44%,250px)}
.missie-visual .kern-txt{padding-top:0}
.missie-visual .kern-txt .am{color:var(--roest-t);font-style:normal;letter-spacing:-.03em;font-size:inherit;text-transform:inherit;font-weight:inherit}

/* 03 kernwaarden */

/* 04 stappen met lijn + profiel-mock */
.stappen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:880px){.stappen{grid-template-columns:1fr}}
.stap-lijst{position:relative;display:flex;flex-direction:column;gap:clamp(26px,3.5vw,40px);margin-top:clamp(22px,3vw,34px);padding-left:34px}
.stap-lijst::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line)}
.stap{position:relative}
.stap .nr{position:absolute;left:-34px;top:0;width:28px;height:28px;border-radius:50%;background:var(--green-deep);color:var(--amber);font-weight:800;font-style:italic;font-size:.85rem;display:grid;place-items:center}
.stap h3{margin:0 0 4px;font-size:1.1rem;font-weight:700;color:var(--green-deep)}
.stap p{font-size:.95rem;color:var(--muted)}
.profiel-mock{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-h);padding:clamp(24px,3vw,40px);transform:rotate(2deg);transition:transform .35s var(--ease)}
.profiel-mock:hover{transform:rotate(0)}
.profiel-mock .pm-kop{display:flex;align-items:center;gap:16px;margin-bottom:18px;background:none;padding:0;overflow:visible}
.profiel-mock .pm-av{width:64px;height:64px;border-radius:50%;background:var(--green-deep);color:var(--amber);display:grid;place-items:center;font-weight:700}
.profiel-mock .pm-kop b{color:var(--green-deep)}
.profiel-mock .pm-kop small{display:block;color:var(--muted)}
.profiel-mock .pm-regel{height:10px;border-radius:6px;background:var(--sand);margin:10px 0}
.profiel-mock .pm-regel.kort{width:60%}
.profiel-mock .pm-tags{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.profiel-mock .pm-tags span{font-size:.75rem;font-weight:600;background:var(--green-soft);color:var(--green);border-radius:999px;padding:4px 12px}

/* 05 claim-je-pagina */
.claim{text-align:center;max-width:720px;margin:0 auto}
.claim .lead{margin:14px auto 30px;max-width:46ch}
.claim-veld{display:flex;align-items:center;background:var(--paper);border:2px solid var(--green);border-radius:999px;padding:6px 6px 6px 22px;max-width:560px;margin:0 auto;box-shadow:var(--sh);transition:box-shadow .25s var(--ease)}
.claim-veld:focus-within{box-shadow:0 0 0 4px rgba(233,159,8,.25)}
.claim-veld .prefix{color:var(--muted);font-weight:500;font-size:.95rem;white-space:nowrap}
.claim-veld input{border:0;background:none;font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--green-deep);padding:10px 4px;flex:1;min-width:60px;outline:none}
.claim-veld .btn{padding:12px 22px;font-size:.92rem;flex:none}
.claim small.sub{display:block;margin-top:14px;color:var(--muted);font-size:.85rem}
@media(max-width:560px){.claim-veld{flex-direction:column;border-radius:24px;gap:8px;padding:14px}.claim-veld .prefix{white-space:normal}}

/* 06 lidmaatschap-kaart */
.lid-kaart{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);max-width:760px;margin:34px auto 0;padding:clamp(50px,6vw,76px) clamp(24px,5vw,64px) clamp(34px,4vw,52px);text-align:center;box-shadow:var(--sh)}
.lid-kaart .bloem{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--amber);display:grid;place-items:center;box-shadow:0 8px 22px rgba(233,159,8,.4);animation:draai 16s linear infinite}
@keyframes draai{to{transform:translateX(-50%) rotate(360deg)}}
.lid-kaart .lead{max-width:44ch;margin:12px auto 30px}
.lid-feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,30px);text-align:left;margin-bottom:32px}
@media(max-width:560px){.lid-feats{grid-template-columns:1fr}}
.lid-feat{display:flex;gap:14px;align-items:flex-start}
.lid-feat .vink{width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none;margin-top:2px}
.lid-feat h4{margin:0 0 2px;font-size:1rem;font-weight:700;color:var(--green-deep)}
.lid-feat p{font-size:.9rem;color:var(--muted)}
.lid-prijs{font-weight:800;font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--green-deep);margin-bottom:22px}
.lid-prijs small{font-weight:500;font-style:normal;font-size:.9rem;color:var(--muted)}

/* 07 polaroid-sfeerveld */
.sfeer{position:relative;min-height:clamp(660px,50vw,740px);display:grid;place-items:center}
.sfeer-kern{text-align:center;max-width:520px;position:relative;z-index:2;padding:20px}
.sfeer-kern .lead{margin:14px auto 22px}
.pol{position:absolute;background:#fff;padding:10px 10px 30px;border-radius:8px;box-shadow:var(--sh-h);width:clamp(150px,16vw,230px);transition:transform .35s var(--ease);z-index:1}
.pol img{aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.pol figcaption{font-size:.72rem;color:var(--muted);text-align:center;position:absolute;left:0;right:0;bottom:8px}
.pol:hover{transform:scale(1.06) rotate(0deg)!important;z-index:3}
.pol.p1{top:6%;left:4%;transform:rotate(-7deg)}
.pol.p2{bottom:3%;left:9%;transform:rotate(5deg)}
.pol.p3{top:10%;right:5%;transform:rotate(6deg)}
.pol.p4{bottom:2%;right:8%;transform:rotate(-4deg)}
@media(max-width:880px){.sfeer{min-height:0;display:block;padding-bottom:10px}.sfeer-kern{margin:0 auto 26px}.pol{position:relative;transform:none!important;width:46%;display:inline-block;margin:2%}.pol:hover{transform:none!important}}

/* 08 ledenquotes 3-col */
.quotes3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media(max-width:900px){.quotes3{grid-template-columns:1fr}}
.q-kaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:16px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.q-kaart .aanhaling{font-weight:800;font-style:italic;font-size:2.2rem;line-height:0;color:var(--amber);height:14px}
.q-kaart p{color:var(--ink);font-size:.98rem;flex:1}
.q-wie{display:flex;align-items:center;gap:12px}
.q-wie .av-s{width:44px;height:44px;border-radius:50%;background:var(--green-deep);color:var(--amber);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.q-wie b{display:block;color:var(--green-deep);font-size:.95rem}
.q-wie small{color:var(--muted);font-size:.85rem}

/* 09 faq */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:box-shadow .25s var(--ease)}
.faq details:hover{box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 26px;font-weight:600;color:var(--green-deep);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:30px;height:30px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:700;flex:none;transition:transform .3s var(--ease),background .3s var(--ease)}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--amber);color:var(--green-deep)}
.faq .antw{padding:0 26px 22px;color:var(--muted);font-size:.97rem;max-width:62ch}
.hulp-acties{max-width:820px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:14px}

/* 10 stats-band */
/* licht sinds fase 16.2 */
.stats-band{background:var(--paper);box-shadow:var(--sh);border-radius:var(--r-lg);padding:clamp(36px,5vw,60px) clamp(22px,4vw,50px);display:flex;gap:clamp(22px,5vw,80px);flex-wrap:wrap;justify-content:center;position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;width:70vmax;height:70vmax;border:1px solid rgba(8,39,26,.08);border-radius:50%;left:50%;top:-40vmax;transform:translateX(-50%)}
.stats-band div{text-align:center;position:relative;z-index:1}
.stats-band b{display:block;font-size:clamp(30px,3.2vw,46px);font-weight:800;font-style:italic;color:var(--groen);letter-spacing:-.02em}
.stats-band small{color:var(--muted);font-size:.9rem}
@media(max-width:560px){.stats-band{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}.stats-band .stat-woord b{font-size:25px}}

/* 12 compacte cta-kaart */
/* wit sinds fase 16.2: amber-soft met een gouden knop was te veel geel */
.cta-kaart{background:var(--paper);box-shadow:var(--sh);border-radius:var(--r-lg);padding:clamp(36px,5vw,64px);display:flex;gap:clamp(20px,4vw,50px);align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-kaart::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border:1px solid rgba(8,39,26,.1);border-radius:50%}
.cta-kaart h2,.cta-kaart h3{margin:0 0 8px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(22px,2.6vw,34px);color:var(--green-deep);line-height:1.08}
.cta-kaart h2 .am,.cta-kaart h3 .am{color:var(--amber-text);font-style:normal}
.cta-kaart p{color:var(--muted);max-width:44ch}
.cta-kaart .knoppen{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.cta-kaart .ph-portret{width:clamp(170px,16vw,240px);right:clamp(24px,4vw,64px);height:96%}
.cta-kaart .ph-portret::before{background:var(--zand)}
.cta-kaart.met-portret{padding-right:clamp(210px,22vw,330px)}
@media(max-width:880px){.cta-kaart.met-portret{padding-right:clamp(36px,5vw,64px)}}

/* 14 ledengids */
.gids-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.gids-zoek{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 20px;max-width:380px;margin-bottom:16px;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.gids-zoek:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,159,8,.18)}
.gids-zoek input{border:0;background:none;font-family:var(--sans);font-size:.95rem;color:var(--ink);padding:8px 0;flex:1;outline:none}
.gids-zoek svg{flex:none}
/* drie kolommen: een tegel met portret en logo wordt niet smaller dan 262 tot 297 pixels, dus
   vier passen nergens in het kader van 1112 en twee pas vanaf 600 breed */
.gids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media(max-width:1020px){.gids{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gids{grid-template-columns:1fr}}
/* padding-top: het portret steekt 28 procent boven zijn bol uit */
.lid-tegel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2vw,26px);padding-top:clamp(46px,4.4vw,54px);display:flex;flex-direction:column;gap:4px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.lid-tegel:hover{transform:translateY(-6px);box-shadow:var(--sh-h)}
.lid-tegel .lt-kop{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.lid-tegel .wz-bol{flex:none;width:clamp(84px,7.5vw,104px);margin:0}
.lid-tegel:nth-child(odd){--bol:var(--goud)}
.lid-tegel:nth-child(even){--bol:var(--zand)}
@media (hover:hover) and (pointer:fine){.lid-tegel:hover .wz-bol img{transform:translateY(-6px) scale(1.03)}}
.lid-tegel .lt-logo{margin-left:auto;margin-right:12px;display:flex;align-items:center}
.lid-tegel .lt-logo img{display:block;max-height:60px;max-width:150px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.lid-tegel .pijl{color:var(--amber-text);font-weight:700;transition:transform .25s var(--ease)}
.lid-tegel:hover .pijl{transform:translateX(5px)}
.lid-tegel h3{margin:0;font-size:1.05rem;font-weight:700;color:var(--green-deep)}
.lid-tegel small{color:var(--muted);font-size:.88rem}
.lid-tegel .lt-tag{margin-top:12px;align-self:flex-start;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-text);background:var(--amber-soft);border-radius:999px;padding:3px 10px}
/* telefoon: een compacte rij per lid, bol links en de tekst ernaast (fase 16.2, wens Sepp voor
   compacte app-schermen). lt-kop valt weg als doos zodat bol, logo en pijl in het raster vallen;
   padding-top 24px is de ruimte voor het hoofd dat 28 procent boven de bol van 72px uitsteekt.
   De filter zet display:none inline, dat wint van dit raster. */
@media(max-width:600px){
  .gids{gap:10px}
  .lid-tegel{display:grid;grid-template-columns:72px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:24px 16px 14px}
  .lid-tegel .lt-kop{display:contents}
  .lid-tegel .wz-bol{grid-column:1;grid-row:1 / span 3;width:72px;align-self:end}
  .lid-tegel h3,.lid-tegel small,.lid-tegel .lt-tag{grid-column:2}
  .lid-tegel .lt-tag{margin-top:6px;justify-self:start}
  .lid-tegel .lt-logo{grid-column:3;grid-row:1 / span 2;margin:0;align-self:start;justify-content:flex-end}
  .lid-tegel .lt-logo img{max-height:36px;max-width:72px}
  .lid-tegel .pijl{grid-column:3;grid-row:1 / span 3;justify-self:end}
  .lid-tegel:has(.lt-logo) .pijl{grid-row:3}
}
.gids-meer{text-align:center;margin-top:clamp(24px,3vw,36px)}
.gids-leeg{display:none;text-align:center;padding:clamp(36px,5vw,60px) 20px;color:var(--muted)}
.gids-leeg b{display:block;font-weight:800;font-style:italic;text-transform:uppercase;color:var(--green-deep);font-size:1.3rem;margin-bottom:8px}
.gids-leeg.zichtbaar{display:block}

/* 15 contactblok */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:880px){.contact{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.contact-info .ci{display:flex;gap:14px;align-items:flex-start}
.contact-info .ico{width:44px;height:44px;border-radius:50%;background:var(--goud);display:grid;place-items:center;flex:none}
.contact-info .ci-l,.missie-punt .ci-l,.contact-info .ci-a,.missie-punt .ci-a{stroke:var(--groen)}.contact-info .ci-v{fill:var(--groen)}
.ico svg [stroke]{stroke:var(--groen)}
.contact-info h3{margin:0 0 2px;font-size:1rem;font-weight:700;color:var(--green-deep)}
.contact-info p{font-size:.93rem;color:var(--muted)}
.contact-info p.ci-waar{color:var(--green-deep);font-weight:600;margin:2px 0 4px}
.contact-form{scroll-margin-top:110px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,44px);box-shadow:var(--sh);display:grid;gap:16px}
.contact-form .rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.contact-form .rij{grid-template-columns:1fr}}
.contact-form label{display:block;font-weight:600;font-size:.9rem;color:var(--green-deep);margin-bottom:6px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,159,8,.2)}
.contact-form textarea{min-height:120px;resize:vertical}
/* Tekstvak met knoppen (assets/js/tekst-editor.js). Vaste balk boven het vak,
   knoppen met een woord erbij en minstens 44px hoog: dit wordt bediend door
   leden die nooit een editor gebruikten, ook op de telefoon. */
.te [hidden]{display:none!important}
.te{border:1px solid var(--line);border-radius:12px;background:var(--cream);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.te:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,159,8,.2)}
.te-balk{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-bottom:1px solid var(--line);background:var(--paper);border-radius:12px 12px 0 0}
.te-knop{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--green-deep);font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer}
.te-knop:hover{background:var(--green-soft)}
.te-knop:focus-visible{outline:2px solid var(--amber-text);outline-offset:1px}
.te-knop[aria-pressed=true],.te-knop--aan{background:var(--green);color:var(--on-green);border-color:var(--green)}
.te-vak{padding:12px 14px;font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--ink);outline:none;overflow-wrap:anywhere}
.te-vak:empty::before{content:attr(data-placeholder);color:var(--muted-d);pointer-events:none}
.te-vak p{margin:0 0 .8em}
.te-vak p:last-child{margin-bottom:0}
.te-vak h2{font-size:1.2rem;line-height:1.3;margin:.6em 0 .4em;color:var(--green-deep)}
.te-vak ul,.te-vak ol{margin:0 0 .8em;padding-left:1.4em}
.te-vak a{color:var(--amber-text);text-decoration:underline}
/* Usability-ronde 24 september 2026: alles raakbaar met een duim (44px). */
.contact-form input[type=file]{padding:8px;font-size:.92rem}
.contact-form input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--on-green);background:var(--green);border:0;border-radius:999px;padding:10px 18px;margin-right:12px;min-height:44px;cursor:pointer}
.pf-meer{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:0 16px}
.pf-meer>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--green);font-size:.95rem}
.pf-meer[open]{padding-bottom:16px}
.pf-meer[open]>summary{margin-bottom:8px}
.pf-meer>div,.pf-meer>.rij{margin-top:14px}
.dash-uitklap summary{min-height:44px;display:flex;align-items:center}
.nieuws-filters button,.gids-filters button{min-height:44px}
.dash-sectie .tlink{display:inline-block;padding-top:10px;padding-bottom:4px}
.pf-hulp{margin:0 0 8px;font-size:.84rem;color:var(--muted-d)}
.pf-voorbeeld{margin:0 0 10px;max-width:220px}
.pf-voorbeeld img{display:block;width:100%;height:auto;border-radius:12px}
.pf-voorbeeld.is-logo{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;max-width:200px}
.pf-voorbeeld.is-logo img{max-height:64px;width:auto;border-radius:0}
.pf-gekozen{margin:10px 0 0}
.pf-gekozen img{display:block;max-width:220px;max-height:220px;width:auto;height:auto;border-radius:12px;margin:0 0 6px}
.pf-gekozen.is-logo img{max-height:64px;border-radius:0;background:var(--paper);border:1px solid var(--line);padding:12px}
.pf-gekozen .pf-hulp{margin:0 0 4px}
.pf-gekozen button{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.contact-form .pf-weg{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 0;font-weight:500;cursor:pointer}
.contact-form .pf-weg input{width:22px;height:22px;margin:0;accent-color:var(--green)}
.te-tip{margin:0;padding:8px 14px 10px;font-size:.82rem;color:var(--muted-d);border-top:1px dashed var(--line)}
.te-fout{margin:0;padding:0 14px 10px;font-size:.88rem;font-weight:600;color:#9b2c1f}
.te-paneel{display:grid;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--green-soft)}
.te-paneel-rij label{margin-bottom:4px}
.te-paneel-rij input{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.te-paneel-acties{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.te-paneel-acties .btn{padding:10px 20px;font-size:.95rem}
.te-stil{min-height:44px;background:none;border:0;padding:0 4px;font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--green-deep);text-decoration:underline;cursor:pointer}
@media(max-width:480px){.te-knop{padding:0 10px}.te-knop span{font-size:.85rem}}
.contact-form .btn{justify-self:start}
.contact-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);font-weight:400}
.contact-form .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green);flex:none}
.contact-form .consent a{color:var(--green);border-bottom:1px solid var(--amber)}
.contact-form .form-hint{margin:-8px 0 0;font-size:.86rem;color:var(--muted)}
.veld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-kop{margin:0 0 4px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);font-size:1.3rem}
.form-sub{color:var(--muted);font-size:.92rem;margin-bottom:6px}

/* ── nieuwe componenten binnenpagina's ── */

/* lid-profiel (Glide/Webflow-patroon: identiteitskaart + inhoudskolom) */
.prof{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:880px){.prof{grid-template-columns:1fr}}
.prof-kaart{position:sticky;top:100px;background:var(--green-deep);border-radius:var(--r-lg);padding:clamp(28px,3vw,44px);text-align:center;overflow:hidden}
@media(max-width:880px){.prof-kaart{position:static}}
.prof-kaart .kring{position:absolute;border:1px solid rgba(243,238,230,.12);border-radius:50%;left:50%;top:-46vmin;transform:translateX(-50%);width:70vmin;height:70vmin;pointer-events:none}
.prof-kaart .pav{position:relative;width:104px;height:104px;border-radius:50%;background:var(--amber);color:var(--green-deep);display:grid;place-items:center;font-weight:800;font-style:italic;font-size:1.6rem;margin:0 auto 18px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.prof-kaart h1{position:relative;margin:0;color:var(--on-green);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(24px,2.6vw,32px);line-height:1.1}
.prof-kaart .rol{position:relative;color:var(--amber);font-weight:600;margin-top:6px}
.prof-logo{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:14px;max-width:100%}
.prof-logo img{display:block;max-height:72px;max-width:240px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.prof-kaart .dorp{position:relative;color:var(--on-green-dim);font-size:.92rem;margin-top:2px}
.prof-kaart .plek{position:relative;display:inline-block;margin-top:14px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--on-green);background:rgba(243,238,230,.12);border-radius:999px;padding:5px 14px}
.prof-kaart .p-acties{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:24px}
.prof-kaart .p-acties .btn{justify-content:center}
.prof-kaart .p-links{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:18px;font-size:.9rem}
.prof-kaart .p-links a{color:var(--on-green-dim);border-bottom:1px solid rgba(243,238,230,.3)}
.prof-kaart .p-links a:hover{color:var(--on-green)}
/* Icoontjes-rij op de profielkaart: ronde chips in de ringen-stijl van de kaart. */
.p-socials{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.p-socials a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,238,230,.16);color:var(--on-green);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.p-socials a:hover,.p-socials a:focus-visible{background:var(--amber);border-color:var(--amber);color:var(--green-deep)}
.prof-body h2{font-size:clamp(20px,1.8vw,25px);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);margin:0 0 12px}
.prof-body h2 .am{color:var(--amber-text);font-style:normal}
.prof-body>p{color:var(--muted);margin-bottom:16px;max-width:62ch}
/* In-content-links (profielen en artikelen) volgen de tlink-stijl, anders zijn ze onzichtbaar door de globale a-reset. */
.prof-body p a,.art-body a{font-weight:600;color:var(--green);border-bottom:2px solid var(--amber);padding-bottom:1px;transition:color .2s var(--ease)}
.prof-body p a:hover,.prof-body p a:focus-visible,.art-body a:hover,.art-body a:focus-visible{color:var(--amber-text)}
.prof-blok{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);margin-top:22px}
.prof-blok h3{margin:0 0 12px;font-size:1rem;font-weight:700;color:var(--green-deep)}
/* Instellingen (fase 15.5): schakelaars voor mail per soort, en rijen met een kleine knop rechts. */
.inst-schakels{list-style:none;margin:0 0 12px;padding:0}
.inst-schakels li+li{border-top:1px solid var(--line)}
.schakel{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;cursor:pointer;color:var(--ink)}
.schakel input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px;height:28px;margin:0;border-radius:999px;background:var(--muted);cursor:pointer;transition:background .2s var(--ease)}
.schakel input::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:var(--sh);transition:transform .2s var(--ease)}
.schakel input:checked{background:var(--green)}
.schakel input:checked::before{transform:translateX(18px)}
.schakel input:focus-visible{outline:3px solid var(--amber-text);outline-offset:2px}
.inst-blok p{margin:0 0 6px;font-size:.92rem;line-height:1.55}
.inst-blok .form-sub{margin:0 0 6px}
.inst-blok>.btn{margin-top:10px;padding:9px 20px;font-size:.92rem}
.inst-rijen{list-style:none;margin:0;padding:0}
.inst-rijen li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.inst-rijen li+li{border-top:1px solid var(--line)}
.inst-rijen b{display:block;color:var(--green-deep);font-weight:600}
.inst-rijen small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.inst-rijen form{margin:0;flex:none}
.inst-rijen .btn{flex:none;white-space:nowrap;padding:9px 16px;font-size:.88rem}
.dash-naar-inst{margin:0 0 14px}
.mp-kop+.dash-naar-inst{margin:-4px 0 14px}
@media (prefers-reduced-motion:reduce){.schakel input,.schakel input::before{transition:none}}
.prof-tags{display:flex;gap:8px;flex-wrap:wrap}
.prof-tags span{font-size:.8rem;font-weight:600;background:var(--green-soft);color:var(--green);border-radius:999px;padding:5px 14px}
.prof-gun{display:flex;flex-direction:column;gap:10px}
.prof-gun .gun{display:flex;gap:12px;align-items:center;font-size:.95rem;color:var(--ink)}
.prof-gun .gun .gav{width:38px;height:38px;border-radius:50%;background:var(--amber-soft);color:var(--green-deep);display:grid;place-items:center;font-weight:700;font-size:.78rem;flex:none}
.prof-gun .gun small{color:var(--muted)}
.prof-foto{border-radius:var(--r);overflow:hidden;margin-top:22px;box-shadow:var(--sh)}
.prof-foto img{aspect-ratio:16/9;object-fit:cover;width:100%}
.prof-zelf{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:.85rem;color:var(--muted)}
.prof-zelf .stip{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}

/* event-detail (OpenPhone-patroon: inhoud + sticky formulier) */
.ev{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:start}
.ev>*{min-width:0}
@media(max-width:880px){.ev{grid-template-columns:1fr}}
.ev-form-kaart{position:sticky;top:100px}
@media(max-width:880px){.ev-form-kaart{position:static}}
.ev-body h2{font-size:clamp(20px,1.8vw,25px);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);margin:26px 0 12px}
.ev-body h2 .am{color:var(--amber-text);font-style:normal}
.ev-body h2:first-child{margin-top:0}
.ev-body p{color:var(--muted);margin-bottom:14px;max-width:62ch}
.ev-details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);margin:22px 0}
@media(max-width:560px){.ev-details{grid-template-columns:1fr}}
.ev-details .evd{display:flex;gap:12px;align-items:flex-start}
.ev-details .ico{width:40px;height:40px;border-radius:50%;background:var(--goud);display:grid;place-items:center;flex:none}
.ev-details h3{margin:0 0 2px;font-size:.92rem;font-weight:700;color:var(--green-deep)}
.ev-details p{font-size:.9rem;color:var(--muted);margin:0}
.ev-spreker{display:flex;gap:16px;align-items:center;background:var(--amber-soft);border-radius:var(--r);padding:clamp(18px,2.2vw,26px);margin:22px 0}
.ev-spreker .sav{width:60px;height:60px;border-radius:50%;background:var(--green-deep);color:var(--amber);display:grid;place-items:center;font-weight:700;flex:none}
.ev-spreker b{color:var(--green-deep)}
.ev-spreker small{display:block;color:var(--amber-text)}
.ev-wie{margin-top:26px}
.ev-wie h3{margin:0 0 14px;font-size:1rem;font-weight:700;color:var(--green-deep)}
.ev-wie .rijtje{display:flex;align-items:center;flex-wrap:wrap;row-gap:10px}
.ev-wie .wav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--green-deep);border:2px solid var(--cream);margin-left:-8px}
.ev-wie .wav:first-child{margin-left:0}
.ev-wie .rest{margin-left:12px;font-size:.9rem;color:var(--muted)}

/* artikel */
.art-kop{max-width:820px;margin:0 auto;text-align:center;padding:clamp(40px,6vw,72px) 0 clamp(26px,4vw,44px)}
.art-kop .cat{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-text);background:var(--amber-soft);border-radius:999px;padding:4px 14px;margin-bottom:18px}
.art-kop h1{font-size:clamp(30px,4.6vw,56px)}
.art-kop .art-meta{color:var(--muted);font-size:.92rem;margin-top:18px}
.art-kop .art-meta b{color:var(--ink);font-weight:600}
.art-hero{max-width:980px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.art-hero img{aspect-ratio:21/10;object-fit:cover;width:100%}
.art-body{max-width:620px;margin:clamp(30px,4vw,50px) auto 0;font-size:1.05rem}
.art-body p{margin-bottom:1.2em;color:var(--ink)}
.art-body h2{font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);font-size:clamp(20px,2vw,26px);margin:1.6em 0 .6em}
.art-body h2 .am{color:var(--amber-text);font-style:normal}
.art-body blockquote{margin:1.6em 0;padding:clamp(20px,2.4vw,30px);background:var(--amber-soft);border-radius:var(--r);font-weight:600;color:var(--green-deep)}
.art-body ul{padding-left:1.2em;margin:0 0 1.2em;color:var(--ink)}
.art-body li{margin-bottom:.4em}
.art-deel{max-width:680px;margin:clamp(26px,3vw,40px) auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;gap:18px;align-items:center;font-size:.9rem;color:var(--muted)}
.art-deel a{font-weight:600;color:var(--green);border-bottom:2px solid var(--amber)}
.art-deel a:hover{color:var(--amber-text)}

/* over-ons tijdlijn (Workable/Slash-patroon langs de lijn van bouwsteen 04) */


/* login */
.login-out{padding:12px}
.login-panel{position:relative;background:var(--green-deep);border-radius:var(--r-lg);overflow:hidden;padding:clamp(48px,7vw,96px) clamp(20px,4vw,60px)}
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;max-width:1040px;margin:0 auto;position:relative;z-index:1}
.login-grid>*{min-width:0}
@media(max-width:880px){.login-grid{grid-template-columns:1fr}}
.login-uitleg h1{color:var(--on-green);font-size:clamp(30px,4vw,46px)}
.login-uitleg p.intro{color:var(--on-green-dim);margin-top:14px;max-width:44ch}
.login-punten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.login-punten li{display:flex;gap:12px;align-items:flex-start;color:var(--on-green-dim);font-size:.97rem}
.login-punten .vink{width:24px;height:24px;border-radius:50%;background:rgba(243,238,230,.14);color:var(--amber);display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none;margin-top:2px}
.login-punten b{color:var(--on-green);font-weight:600}
.login-kaart{background:var(--paper);border-radius:var(--r-lg);padding:clamp(26px,3.5vw,44px);box-shadow:var(--sh-h)}
.login-kaart .logo{margin-bottom:18px}
.login-kaart form{display:grid;gap:16px}
.login-kaart label{display:block;font-weight:600;font-size:.9rem;color:var(--green-deep);margin-bottom:6px}
.login-kaart input{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.login-kaart input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,159,8,.2)}
.login-kaart .btn{justify-content:center;width:100%}
.login-kaart .sub{font-size:.88rem;color:var(--muted);text-align:center}
.login-melding{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--cream);border:1px solid var(--line);font-size:.92rem;color:var(--green-deep)}
.login-melding.fout{border-color:var(--amber-text);color:var(--amber-text);font-weight:600}
.login-kaart .sub a{font-weight:600;color:var(--green);border-bottom:1px solid var(--amber)}
/* Op mobiel (15.5, keuze 9): eerst de passkey als knop, dan het formulier, de uitleg eronder. */
@media(max-width:980px){
  .login-grid>.login-kaart{order:-1}
  .login-kaart{display:flex;flex-direction:column}
  .login-kaart>form{order:1}
  .login-kaart>.sub{order:2}
  .login-kaart>.login-passkey{order:0;margin:0 0 18px}
  .login-kaart .login-passkey a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;border:0;border-radius:999px;background:var(--amber);color:var(--green-deep);font-size:1rem}
}
.ev-lid-login{margin:0 0 14px;font-size:.95rem;color:var(--muted)}
.login-melding{display:none;background:var(--amber-soft);color:var(--amber-text);font-size:.9rem;border-radius:12px;padding:12px 16px}
.login-melding.zichtbaar{display:block}

/* privacy / tekstpagina */
.tekst{max-width:680px;margin:0 auto;padding:clamp(30px,5vw,60px) 0}
.tekst h2{font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--green-deep);font-size:clamp(19px,1.8vw,24px);margin:1.8em 0 .5em}
.tekst p,.tekst li{color:var(--ink);font-size:.98rem}
.tekst p{margin-bottom:1em}
.tekst ul{padding-left:1.2em;margin-bottom:1em}

/* lichte breadcrumb op cream (profiel, artikel) */
.crumb-licht{font-size:.85rem;color:var(--muted);margin:26px 0 0}
.crumb-licht a{border-bottom:1px solid var(--line)}
.crumb-licht a:hover{color:var(--green-deep)}

/* reveal: render-safe */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
/* Lange tekst: het script maakt van elk kind een reveal; tot dan niets laten zien, anders knippert het. */
html.js .per-blok:not(.per-blok-klaar)>*{opacity:0}
@media print{html.js .reveal,html.js .per-blok>*{opacity:1!important;transform:none!important}}
html.js .hero h1 .w{opacity:0;transform:translateY(26px);display:inline-block;transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .hero.in h1 .w{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.per-blok>*,.hero h1 .w{opacity:1!important;transform:none!important}
  .net-diagram .spoke{stroke-dashoffset:0}
  .net-diagram .node{opacity:1}
}

/* wp_login_form-integratie in de login-kaart: de native submit-input
   krijgt de btn-p-pill, en de onthoud-mij-regel wordt één nette rij. */
.login-kaart #wp-submit{width:100%;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--green-deep);background:var(--amber);border:none;border-radius:999px;padding:15px 28px;cursor:pointer;box-shadow:0 8px 22px rgba(233,159,8,.35);transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.login-kaart #wp-submit:hover,.login-kaart #wp-submit:focus{background:var(--amber-text);color:#fff;transform:translateY(-3px)}
.login-kaart .login-remember label{display:flex;align-items:center;gap:9px;margin:0;font-weight:500;color:var(--muted)}
.login-kaart .login-remember input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);padding:0}

/* ============================================================
   Ledendashboard (referral-suite): jump-nav, secties, kaarten.
   Hergebruikt de bestaande tokens; kringen-motief komt van de
   page-hero erboven.
   ============================================================ */
/* Master-detail: links het menu (.dash-side), rechts het actieve paneel
   (.dash-detail), volledige breedte. Zonder JS staan alle secties gewoon
   onder elkaar (progressive enhancement); met JS wisselt er één tegelijk. */
.dash-shell{max-width:1640px;margin:0 auto;padding:clamp(20px,3vw,36px) clamp(18px,4vw,44px) 0}
.dash-side{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.dash-side-kop{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:14px 12px 6px}
.dash-side a{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-size:.94rem;color:var(--green);padding:10px 14px;border-radius:12px;transition:background .2s var(--ease),color .2s var(--ease)}
.dash-side a:hover,.dash-side a:focus{background:var(--green-soft)}
.dash-side a.actief{background:var(--green-deep);color:var(--on-green)}
.dash-detail{min-width:0}
.dash-detail .dash-sectie{padding:0}
.dash-detail .dash-sectie>.wrap{display:block;max-width:none;padding:0}
.dash-detail .contact-form{max-width:880px}
/* Met JS: één paneel zichtbaar, de rest verborgen. Gate op .dash-klaar,
   die de JS pas zet nadat een paneel actief is. Breekt de JS ervóór, dan
   blijven alle secties zichtbaar in plaats van een leeg dashboard. */
.dash-shell.dash-klaar .dash-detail .dash-sectie{display:none}
.dash-shell.dash-klaar .dash-detail .dash-sectie.actief{display:block}

@media(min-width:981px){
  .dash-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
  .dash-side{position:sticky;top:92px;max-height:calc(100vh - 108px);overflow-y:auto;margin-bottom:0;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
  .dash-side-kop:first-child{margin-top:4px}
}

/* Mobiel/tablet: het menu wordt een chips-balk boven het paneel, als één
   rij die horizontaal scrolt (besluit Sepp, 28 september 2026). Wrappen
   kostte op 390px bijna de helft van het scherm, en de balk is sticky.
   De fade rechts laat zien dat er meer is; de JS schuift de actieve chip
   in beeld. */
@media(max-width:980px){
  .dash-side{flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;position:sticky;top:64px;z-index:40;background:rgba(237,220,204,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:6px 32px 6px clamp(14px,4vw,24px);margin:0 calc(-1 * clamp(18px,4vw,44px)) 18px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .dash-side::-webkit-scrollbar{display:none}
  .dash-side-kop{display:none}
  .dash-side a{flex:0 0 auto;justify-content:flex-start;min-height:44px;white-space:nowrap;font-size:.9rem;padding:0 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
  .dash-side a.actief{background:var(--green-deep);color:var(--on-green);border-color:var(--green-deep)}
}
.dash-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--amber);color:var(--green-deep);font-size:.72rem;font-weight:700;vertical-align:1px}
.dash-melding{margin:20px 0 0;font-weight:600}
.dash-sectie{scroll-margin-top:140px}
.dash-sectie + .dash-sectie{border-top:1px solid var(--line)}
/* In de master-detail heeft elk paneel geen scheidingsrand nodig (er is er
   maar één zichtbaar) en start het strak bovenaan. */
.dash-detail .dash-sectie + .dash-sectie{border-top:0}
/* Beheer-paneel: het bewerkveld (links, groot) staat altijd in beeld, de
   lijst met te bewerken items ernaast (rechts). Lost de oude opzet op waarin
   het formulier ónder de lijst stond en na 'Bewerk' buiten beeld viel. */
.beheer-grid{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start;margin-top:22px}
.beheer-grid>form{margin-top:0}
.beheer-zij{margin-top:0}
.beheer-zij .dash-item:first-of-type{padding-top:0}
@media(min-width:981px){
  .beheer-grid{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
}
/* 2FA-nudge boven het dashboard (admin/bestuur zonder 2FA). */
.tfa-nudge{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;background:var(--zand-l);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-top:22px}
.tfa-nudge b{color:var(--green-deep)}
.tfa-nudge p{color:var(--amber-text);margin:6px 0 0;max-width:60ch}
.tfa-nudge .btn{flex:0 0 auto}
/* De WP 2FA-setup-shortcode staat in een kaart; laat de plugin zijn eigen
   opmaak binnen de kaart houden. */
.tfa-kaart{display:block}
/* Op een telefoon zet je de authenticator-app op hetzelfde toestel: dan scan je
   geen QR, je kopieert de code. Stappen met de code eerst, de QR klein eronder. */
@media (max-width:640px){
  .wp2fa-modal .mb-30.clear-both{display:flex;flex-direction:column;gap:16px}
  .wp2fa-modal .mb-30.clear-both > .modal-60{order:-1;width:auto;float:none}
  .wp2fa-modal .mb-30.clear-both > .modal-40{width:auto;float:none}
  .wp2fa-modal .qr-code-wrapper img{max-width:150px;height:auto}
  .wp2fa-modal .app-key-wrapper{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .wp2fa-modal .app-key-wrapper input{flex:1 1 180px;min-height:44px;font-size:16px}
  .wp2fa-modal .click-to-copy{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
}
.net-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.dash-notif{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash-notif li{padding-bottom:10px;border-bottom:1px solid var(--line)}
.dash-notif li:last-child{border-bottom:0;padding-bottom:0}
.dash-notif small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.dash-item{padding:14px 0;border-bottom:1px solid var(--line)}
/* vervanger in de RSVP-kaart: ingeklapt bij aangemeld, open bij afgemeld */
.rsvp-vervanger{background:var(--cream);border:1px solid var(--line);border-radius:12px}
.rsvp-vervanger summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;font-weight:600;font-size:.92rem;color:var(--green-deep)}
.rsvp-vervanger summary::-webkit-details-marker{display:none}
.rsvp-vervanger summary .plus{width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:700;flex:none;transition:transform .3s var(--ease),background .3s var(--ease)}
.rsvp-vervanger[open] summary .plus{transform:rotate(45deg);background:var(--amber);color:var(--green-deep)}
.rsvp-vervanger .velden{padding:0 14px 14px;display:grid;gap:12px}
.rsvp-vervanger .velden input{background:var(--paper)}
.rsvp-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.dash-uitklap{margin:8px 0}
.dash-uitklap summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--green)}
.dash-uitklap[open] summary{margin-bottom:6px}
/* "Klopt via niet?" per gast ingeklapt: open stond hij bij elke gast en
   verdubbelde hij de toezichtlijst op mobiel. */
.gast-via-check{margin:0 0 4px}
.dash-uitklap .gast-via-check>summary{font-weight:500;font-size:.84rem;margin-bottom:0}
.gast-via-check .dash-inline{margin-top:0}
/* Afmelden en Koppeling wissen in de gastenlijst: minstens 44px raakvlak. */
.dash-uitklap .dash-inline .btn{min-height:44px}
/* Functies-blok (rollen v9): drie groepen vinkjes naast elkaar, op mobiel onder elkaar. */
.functies-groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 18px;margin-top:4px}
.functies-groep{border:1px solid var(--line);border-radius:12px;padding:10px 14px 8px;margin:0;min-width:0}
.functies-groep legend{font-weight:600;font-size:.85rem;color:var(--green);padding:0 4px}
.functie-vink{display:flex;align-items:center;gap:8px;font-size:.9rem;padding:4px 0;cursor:pointer}
.functie-bezetting .functie-groepkop th{padding-top:16px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.functie-bezetting tbody:first-of-type .functie-groepkop th{padding-top:4px}
.functie-leeg{color:var(--muted)}
.functie-houder{display:block}
.functie-draag{margin-left:8px;font-size:.84rem}
@media(max-width:1024px){.functie-draag{display:inline-flex;align-items:center;min-height:44px}}
@media (max-width:600px){.functie-bezetting .dash-tabel,.functie-bezetting .dash-tabel tbody{display:block}.functie-bezetting .dash-tabel tr{display:block;padding:8px 4px;border-bottom:1px solid var(--line)}.functie-bezetting .dash-tabel th,.functie-bezetting .dash-tabel td{display:block;border:0;padding:0}.functie-bezetting .dash-tabel td{color:var(--ink);font-size:.88rem;margin-top:2px}.functie-bezetting .functie-groepkop{border-bottom:0}}
.functies-overdragen{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.functie-overdragen label{flex:1;min-width:160px;font-size:.9rem}
.functie-overdragen select{min-width:180px}
@media(max-width:1024px){.functie-overdragen select,.functie-overdragen .btn{min-height:44px}}
.functie-vink input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);margin:0;flex:none}
/* Aanwezigheidslijst: verborgen op scherm, alleen zichtbaar bij het printen
   van precies dat ene ontbijt (JS zet .nu-printen plus body .ndk-print-actief). */
.dash-print-only{display:none}
@media print{
  body.ndk-print-actief *{visibility:hidden}
  body.ndk-print-actief .nu-printen{display:block!important;visibility:visible;position:absolute;left:0;top:0;width:100%}
  body.ndk-print-actief .nu-printen *{visibility:visible}
  .aanwezig-print h2{font-size:20px;margin:0 0 4px}
  .aanwezig-print h3{font-size:15px;margin:14px 0 4px}
  .aanwezig-print ol{margin:0;padding-left:22px}
  .aanwezig-print li{padding:2px 0}
}
.dash-item:last-child{border-bottom:0}
.dash-item p{margin:0 0 4px}
.dash-item small{color:var(--muted);font-weight:400}
.dash-reacties{margin-top:8px;padding-left:12px;border-left:2px solid var(--line)}
.dash-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.dash-inline select,.dash-inline input[type=text],.dash-inline input[type=email]{flex:1;min-width:160px;font-family:var(--sans);font-size:.9rem;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.dash-inline .btn{padding:9px 18px}
.dash-status{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.dash-status-omgezet{background:var(--amber-soft);color:var(--amber-text)}
.dash-status-niets,.dash-status-wacht{background:var(--sand);color:var(--green-deep)}
.dash-status-afgewezen{background:var(--amber-soft);color:var(--amber-text)}
/* presentatie-download onder een verslag */
.art-presentatie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;max-width:620px;margin:clamp(20px,4vw,34px) auto 0}
.art-presentatie .ap-ico{font-size:1.6rem;line-height:1}
.art-presentatie div{flex:1;min-width:140px}
.art-presentatie b{display:block;color:var(--green-deep)}
.art-presentatie small{color:var(--muted)}
.dash-gastgrens,.dash-markering{display:inline-block;margin-left:6px;padding:1px 10px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text);font-size:.78rem;font-weight:600}
.dash-markering{white-space:nowrap}
/* Boven de gastgrens weegt zwaarder dan de laatste keer: amber knopvlak, green-deep tekst (4,95:1). */
.dash-gastgrens.is-boven{background:var(--amber);color:var(--green-deep)}
@media(max-width:600px){.dash-gastgrens{display:table;margin:4px 0 0}}
/* Deadlines in Achter de schermen: open of dicht in één oogopslag, de datum erachter. */
.dash-deadlines{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 4px}
.dash-deadline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}
.dash-deadline .welniet-chip{margin:0;padding:3px 12px;font-size:.84rem}
.dash-deadline .form-sub{margin:0}
.dash-placemat{display:flex;flex-wrap:wrap;gap:0 22px}
.dash-placemat a{display:inline-flex;align-items:center;min-height:44px}
.dash-branches th[scope=row] small{display:block;margin-top:3px;font-weight:400;color:var(--muted);font-size:.82rem;line-height:1.5}
.dash-branches .dash-tabel td{white-space:nowrap;vertical-align:top;text-align:right}
.dash-branches .dash-tabel th[scope=col]:last-child{text-align:right}
/* Eén lid per vak (fase 12.1 stap 8): markering vooraan de regel. */
.dash-vakken{list-style:none;margin:0 0 14px;padding:0}
.dash-vakken li{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.5}
.dash-vakken li:first-child{border-top:1px solid var(--line)}
.dash-vakken .dash-markering,.dash-vak .dash-markering{margin:0 6px 0 0}
.dash-vak-dubbel.is-collegas .dash-markering{background:var(--sand);color:var(--ink)}
.dash-opbrengst{display:inline-block;margin-left:8px;font-size:.82rem;font-weight:700;color:var(--amber-text)}
.prof-nudge{margin-top:22px;background:var(--zand-l);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.prof-nudge-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prof-nudge-kop b{color:var(--green-deep)}
.prof-nudge-bar{flex:1;min-width:120px;height:8px;border-radius:999px;background:rgba(8,39,26,.14);overflow:hidden}
.prof-nudge-bar span{display:block;height:100%;background:var(--amber);border-radius:999px}
.prof-nudge p{color:var(--amber-text);margin:10px 0 14px}
/* Aanleveren voor het ontbijt: de PDF van de spotlight, de vraag van de expert. Geen kaart in de kaart. */
.ov-beurt{display:grid;gap:18px}
.ov-beurt .contact-form{background:none;border:0;box-shadow:none;border-radius:0;padding:0;gap:10px}
.ov-beurt .contact-form + .contact-form{padding-top:18px;border-top:1px solid var(--line)}
.ov-beurt p{margin:0;color:var(--muted-d)}
.ov-beurt .ov-beurt-kop b{color:var(--green-deep);font-size:1.02rem}
.ov-beurt .ov-beurt-uitleg{color:var(--muted-d);font-size:.92rem;line-height:1.5;max-width:62ch}
.ov-beurt .contact-form label{margin:4px 0 0}
.ov-beurt .contact-form textarea{min-height:76px}
.ov-beurt .ov-beurt-stand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.92rem}
.ov-beurt .ov-pil{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;background:var(--green-soft);font-size:.8rem;font-weight:600;color:var(--green-deep)}
.ov-beurt .ov-pil::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ov-beurt .ov-beurt-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.ov-beurt .ov-beurt-melding{padding:10px 14px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);font-weight:600;font-size:.92rem}
.ov-beurt .ov-beurt-melding.is-fout{background:var(--paper);border:1px solid var(--roest-t);color:var(--roest-t)}
.dash-tabel{width:100%;border-collapse:collapse;font-size:.92rem}
.dash-tabel th,.dash-tabel td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.dash-tabel th{font-weight:600;color:var(--green-deep)}
.dash-form{margin-top:24px}
.dash-voorkeur{margin-top:24px}
@media (max-width:880px){.net-dash-grid{grid-template-columns:1fr}}

/* ============================================================
   Toegankelijkheid: visually-hidden tekst en skip-link.
   ============================================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:12px 18px;background:var(--green-deep);color:#fff;border-radius:10px;z-index:1000;font-weight:600}
/* main is alleen een focus-doel voor de skip-link, geen eigen focusring. */
#main:focus{outline:none}

/* Onder 16px zoomt iOS Safari in bij focus op een veld; op touch-formaten dus
   altijd 16px. Staat aan het einde zodat dit de losse veld-stylings overschrijft. */
@media(max-width:1024px){
  .contact-form input,.contact-form textarea,.contact-form select,
  .login-kaart input,.gids-zoek input,.claim-veld input,
  .dash-inline select,.dash-inline input[type=text],.dash-inline input[type=email]{font-size:1rem}
}

/* Placemat (fase 12.1): losse printpagina, A4 liggend. Op scherm een vel op
   cream met een balk erboven; geprint alleen het vel. Het groene kopvlak
   print mee (print-color-adjust), anders valt het kringen-motief weg. */
.placemat-pagina{padding:clamp(12px,3vw,32px)}
.pm-balk{max-width:1120px;margin:0 auto 18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pm-status{flex:1;min-width:240px;margin:0;font-size:.92rem;color:var(--muted)}
.pm-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pm-acties form{margin:0}
.pm-acties .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;font-size:.92rem}
.pm-balk .tlink{display:inline-flex;align-items:center;min-height:44px}
.pm-melding{max-width:1120px;margin:0 auto 14px;font-weight:600;color:var(--green)}
.pm-melding.is-fout{color:var(--amber-text)}
.pm-printer-instellen{max-width:1120px;margin:0 auto 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 18px}
.pm-printer-instellen summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--green)}
.pm-printer-instellen label{display:block;margin:10px 0 8px;font-size:.9rem;color:var(--muted-d)}
.pm-printer-rij{display:flex;flex-wrap:wrap;gap:10px}
.pm-printer-rij input{flex:1;min-width:220px;font-family:var(--sans);font-size:1rem;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pm-printer-rij .btn{padding:12px 22px;font-size:.92rem}
.pm-status b{display:inline-block;margin-right:6px;padding:3px 12px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.pm-status.is-definitief b{background:var(--green-soft);color:var(--green)}
/* Het vel (fase 19): de papieren lijst van de club, licht in de stijl van
   Loes. Logo en datum boven, een gouden lijn, dan twee tabellen met dezelfde
   kolommen als de PDF (template-parts/placemat-pdf.php). */
.pm-vel{max-width:1120px;margin:0 auto;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh);padding:clamp(18px,3vw,36px) clamp(18px,3.4vw,44px) clamp(22px,3vw,40px)}
.pm-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding-bottom:14px;border-bottom:3px solid var(--amber)}
.pm-logo{margin:0;line-height:0}
.pm-logo img{display:block;height:clamp(30px,4vw,44px);width:auto}
.pm-wanneer{text-align:right}
.pm-kicker{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text)}
.pm-datum{margin:2px 0 0;color:var(--green-deep);font-size:clamp(22px,2.8vw,32px);line-height:1.05;letter-spacing:-.02em}
.pm-stand{margin:6px 0 0;font-size:.8rem;color:var(--muted)}
.pm-stand b{margin-right:4px;color:var(--amber-text);text-transform:uppercase;letter-spacing:.06em}
.pm-stand.is-definitief b{color:var(--green-deep)}
.pm-meta{margin:12px 0 0;font-size:.92rem;color:var(--muted)}
.pm-meta b{color:var(--green-deep)}
.pm-tabel{margin-top:18px;overflow-x:auto}
.pm-lijst{width:100%;min-width:760px;border-collapse:collapse;table-layout:fixed;font-size:.95rem;line-height:1.25}
.pm-lijst th{background:var(--cream);color:var(--green-deep);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:8px 10px;border-bottom:2px solid var(--amber)}
.pm-lijst td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:break-word;hyphens:auto}
.pm-lijst td.tel{white-space:nowrap}
.pm-lijst tbody tr:nth-child(even) td{background:var(--sand)}
.pm-lijst b{color:var(--green-deep)}
.pm-lijst .nr{width:3%;padding-left:0;text-align:right;font-weight:700;color:var(--amber-text)}
.pm-lijst .naam{width:19%}
.pm-lijst .bedrijf{width:25%}
.pm-lijst .tel{width:11%}
.pm-lijst .mail{width:23%}
.pm-lijst .laatste{width:19%}
.pm-lijst td.bedrijf,.pm-lijst td.tel,.pm-lijst td.mail{font-size:.88rem;color:var(--muted-d)}
.pm-lijst td.laatste{border-left:1px solid var(--line);font-size:.88rem;font-weight:700;color:var(--amber-text)}
.pm-lijst tr.is-leeg td{height:2.4em}
/* Genoemde pagina: alleen het vel gaat liggend, de aanwezigheidslijst niet. */
.pm-vel{page:placemat}
@page placemat{size:A4 landscape;margin:8mm 9mm}
/* Het vel als A4 liggend (4 november 2026): op papier en op een scherm vanaf
   760px dezelfde maten in mm en pt, zodat wat je ziet is wat de printer
   geeft. De tabellen rekken hun rijen op tot het vel vol is: elke tabel
   groeit naar zijn aantal rijen (--rijen in template-parts/placemat.php).
   Past de lijst niet op één vel, dan loopt hij door op een tweede. */
@media print,screen and (min-width:760px){
  .pm-vel{display:flex;flex-direction:column;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pm-kop{gap:2mm 6mm;padding-bottom:1.6mm;border-bottom-width:.8mm}
  .pm-logo img{height:9mm}
  .pm-kicker,.pm-stand{font-size:7.5pt}
  .pm-datum{font-size:17pt}
  .pm-stand{margin-top:.8mm}
  .pm-meta{margin-top:1.6mm;font-size:8.5pt;line-height:1.2}
  .pm-tabel{flex:var(--rijen,1) 1 auto;display:flex;flex-direction:column;margin-top:2.6mm;overflow:visible}
  .pm-tabel + .pm-tabel{margin-top:3.2mm}
  .pm-lijst{flex:1 1 auto;min-width:0}
  .pm-lijst th{padding:1mm 1.6mm;font-size:7pt;line-height:1.2;border-bottom-width:.5mm}
  /* Zelfde maten als de PDF per dichtheid (ndk_placemat_dichtheid), zodat beide routes op een vel passen. */
  .pm-lijst td{padding:.5mm 1.6mm;font-size:10pt;line-height:5mm}
  .pm-lijst td.bedrijf,.pm-lijst td.tel,.pm-lijst td.mail,.pm-lijst td.laatste{font-size:9pt}
  .pm-vel.is-midden .pm-lijst td{padding:.3mm 1.6mm;font-size:9pt;line-height:4.2mm}
  .pm-vel.is-midden .pm-lijst td.bedrijf,.pm-vel.is-midden .pm-lijst td.tel,.pm-vel.is-midden .pm-lijst td.mail,.pm-vel.is-midden .pm-lijst td.laatste{font-size:8pt}
  .pm-vel.is-vol .pm-lijst td{padding:.15mm 1.6mm;font-size:8pt;line-height:3.3mm}
  .pm-vel.is-vol .pm-lijst td.bedrijf,.pm-vel.is-vol .pm-lijst td.tel,.pm-vel.is-vol .pm-lijst td.mail,.pm-vel.is-vol .pm-lijst td.laatste{font-size:7.5pt}
  .pm-lijst tr.is-leeg td{height:auto}
  /* Op papier telt dat het vel één A4 blijft: een te lang bedrijf of adres valt af in plaats van de rij te verdubbelen. */
  .pm-lijst td.bedrijf,.pm-lijst td.tel,.pm-lijst td.mail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Op het scherm een wit vel van 297 bij 210 mm, als een printvoorbeeld. Is
   het venster smaller, dan schaalt site.js het vel mee (--pm-zoom); de
   print blijft op ware grootte. */
@media screen and (min-width:760px){
  .pm-vel{box-sizing:border-box;width:297mm;max-width:none;min-height:210mm;padding:8mm 9mm;border-radius:2px;background:#fff;zoom:var(--pm-zoom,1)}
}
@media print{
  .placemat-pagina{padding:0;background:#fff}
  .placemat-pagina .pm-balk,.pm-melding,.pm-printer-instellen{display:none}
  /* 194 mm is het bedrukbare vlak (210 min twee keer 8 mm marge); een hair eraf zodat afronding geen leeg tweede vel geeft. */
  .pm-vel{max-width:none;min-height:193.5mm;border-radius:0;box-shadow:none;background:#fff;padding:0}
  .pm-lijst thead{display:table-header-group}
  .pm-lijst tr{break-inside:avoid}
}

.dash-ontbijt-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0}

/* Presentatie voor het scherm bij het ontbijt (route A, besluit Sepp 21
   oktober 2026; sinds fase 19, 4 november 2026, licht in de stijl van Loes
   en in de opbouw van de presentatie van Pim). Schermvullende dia's op
   zand-licht met de donkere kringen, de gouden boog op welkom, spotlight,
   expert en slot, en het logo op elke dia. De maat schaalt met de kleinste
   van breedte en hoogte, zodat dezelfde dia op een beamer, een tv en een
   laptop past. Tekst-accent op licht is roest-t (contrastregel). */
.scherm-pagina{margin:0;background:var(--zand-l);color:var(--groen)}
.pr-dia{position:relative;overflow:hidden;display:flex;min-height:100vh;min-height:100svh;box-sizing:border-box;padding:5.4em 7vw 5em;background:var(--zand-l);font-size:clamp(15px,min(1.55vw,2.7vh),36px)}
.pr-inhoud{position:relative;z-index:1;width:100%;max-width:62em;margin:auto 0}
/* Opening en slot dragen het logo groot in de tekst, dus geen ruimte boven voor het kleine. */
.pr-opening,.pr-slot{padding-top:2.6em}
/* De kringen staan in een eigen laag die afsnijdt. Los in de dia telden ze
   mee voor de scrollhoogte en kon je de dia in loze ruimte scrollen. */
.pr-kringen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pr-kring{position:absolute;border:1px solid rgba(8,39,26,.09);border-radius:50%;width:70vmax;height:70vmax;right:-22vmax;top:-36vmax;pointer-events:none}
.pr-kring.k2{width:104vmax;height:104vmax;right:-38vmax;top:-52vmax;border-color:rgba(8,39,26,.05)}
/* Lijst-dia's en pitches krijgen het motief linksonder, zodat doorklikken beweegt. */
.pr-programma .pr-kring,.pr-pitch .pr-kring,.pr-agenda-tien .pr-kring,.pr-agenda-expert .pr-kring{right:auto;top:auto;left:-30vmax;bottom:-44vmax}
.pr-programma .pr-kring.k2,.pr-pitch .pr-kring.k2,.pr-agenda-tien .pr-kring.k2,.pr-agenda-expert .pr-kring.k2{left:-46vmax;bottom:-62vmax}
/* De gouden boog: rechtsboven op opening, welkom, de titeldia's en slot, achter het portret bij spotlight en expert. */
.pr-boog{width:min(30vw,52vh);right:max(-12vw,-20vh);top:max(-14vw,-24vh)}
.pr-tien .pr-boog,.pr-bedankt .pr-boog,.pr-expert .pr-boog{width:min(44vw,76vh);top:auto;right:max(2vw,4vh);bottom:min(-22vw,-38vh)}
.pr-logo{position:absolute;z-index:2;top:2em;left:7vw;margin:0;line-height:0}
.pr-logo img{display:block;height:2.2em;width:auto}
.pr-logo.is-groot{position:static;margin:0 0 1.6em}
.pr-logo.is-groot img{height:2.8em}
.pr-kicker{margin:0 0 1em;color:var(--groen);font-size:.72em;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.pr-deel{margin-left:.6em;color:var(--muted);letter-spacing:.08em}
.pr-dia .disp{color:var(--groen)}
.pr-dia .disp .am{color:var(--roest-t)}
.pr-dia h1.disp{font-size:min(4.2em,11vw)}
.pr-dia h2.disp{font-size:min(3.2em,11vw);margin-bottom:.5em}
.pr-datum{margin:.3em 0 0;font-size:1.9em;font-weight:800;font-style:italic;letter-spacing:-.02em;color:var(--roest-t)}
.pr-lead{margin:.8em 0 0;font-size:1.15em;color:var(--muted)}
.pr-naam + .pr-lead{margin-top:-.2em}
.pr-onderwerp{max-width:30em;margin:.9em 0 0;font-size:1.6em;line-height:1.25;color:var(--groen)}
.pr-naam + .pr-onderwerp{margin-top:.2em}
/* Een titeldia zoals bij Pim (bedrijf in de spotlight): de kop groot. */
.pr-dia h2.pr-titel{font-size:min(4.2em,13vw)}
/* De tekst van de mededeling en de bijzondere bijeenkomst: leesbaar vanaf de
   achterste tafel. Eigen klasse, want .pr-mededeling is de dia zelf (tot 4
   november 2026 kreeg de hele dia zo een max-breedte en tekstmaat). */
.pr-tekst{max-width:30em}
.pr-tekst p{margin:0 0 .6em;font-size:1.5em;line-height:1.3;color:var(--groen)}
.pr-mededeling .pr-inhoud{padding-right:calc(min(30vw,52vh) + 2vw);box-sizing:border-box}
.pr-stats{display:flex;flex-wrap:wrap;gap:1em 3em;margin-top:1.6em;padding-top:1.1em;border-top:1px solid var(--line)}
.pr-stats b{display:block;font-size:2.4em;font-weight:800;font-style:italic;line-height:1;letter-spacing:-.02em;color:var(--groen)}
.pr-stats small{font-size:.85em;color:var(--muted)}
.pr-afgemeld{max-width:40em;margin:1.4em 0 0;font-size:.95em;line-height:1.4;color:var(--muted)}
.pr-afgemeld b{margin-right:.5em;color:var(--roest-t);font-size:.8em;text-transform:uppercase;letter-spacing:.1em}
.pr-dia .kol-2{--kol:2}
.pr-dia .kol-3{--kol:3}
.pr-dia .kol-4{--kol:4}
.pr-bezoekers,.pr-punten,.pr-agenda{list-style:none;margin:0;padding:0}
/* Welkom: gasten en vervangers als rustige lijst met lijnen, zoals de
   agenda-dia's, met de initialen in een gouden bol (de ledentegel op een
   telefoon). Geen kaarten en geen e-mail meer (Sepp, 4 november 2026). */
.pr-bezoekers{display:grid;grid-template-columns:repeat(var(--kol,1),minmax(0,1fr));column-gap:3em;max-width:58em}
.pr-bezoekers.kol-1{max-width:32em}
.pr-bezoekers li{display:grid;grid-template-columns:2.7em minmax(0,1fr);align-items:center;gap:1em;padding:.75em 0;border-bottom:1px solid var(--line)}
.pr-ini{display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:var(--goud);color:var(--groen);font-weight:800;font-style:italic;letter-spacing:-.02em}
.pr-bezoekers b{display:block;font-size:1.35em;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--groen);hyphens:auto}
.pr-sub{display:flex;flex-wrap:wrap;gap:0 .8em;margin-top:.2em;font-size:.95em;color:var(--muted-d)}
.pr-sub .pr-accent{margin-top:0}
.pr-welkom:has(.pr-bezoekers) h2.disp{font-size:min(2.8em,11vw);margin-bottom:.2em}
.pr-welkom .pr-lead{margin-top:.3em}
.pr-welkom .pr-afgemeld{margin-top:1.2em}
.pr-lead + .pr-bezoekers{margin-top:1.1em}
/* De bijdragenronde: de vier soorten bijdrage van Pim, elk als lijntekening
   op een gouden bol met het woord eronder, geen kaarten (Sepp, 4 november
   2026). De bollen komen een voor een op als de dia in beeld komt. */
.pr-bijdragen{list-style:none;margin:2.2em 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4em;max-width:64em}
.pr-bijdragen li{display:flex;flex-direction:column;align-items:flex-start;gap:1.1em}
.pr-ill{display:grid;place-items:center;width:min(8.6em,22vh);height:min(8.6em,22vh);border-radius:50%;background:var(--goud);color:var(--groen)}
.pr-ill svg{width:48%;height:48%}
.pr-bijdragen b{font-size:1.5em;font-weight:700;line-height:1.2;color:var(--groen)}
.is-js .pr-bijdrage .pr-ill{transform:scale(.6) rotate(-8deg);opacity:0;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.is-js .pr-bijdrage.is-actief .pr-ill{transform:none;opacity:1}
.is-js .pr-bijdrage.is-actief li:nth-child(2) .pr-ill{transition-delay:.12s}
.is-js .pr-bijdrage.is-actief li:nth-child(3) .pr-ill{transition-delay:.24s}
.is-js .pr-bijdrage.is-actief li:nth-child(4) .pr-ill{transition-delay:.36s}
.pr-accent{display:block;margin-top:.35em;font-size:.85em;font-weight:700;color:var(--roest-t)}
/* Een hele gouden schijf op de dia's die verder geen goud hadden (Sepp, 4
   november 2026). In de achtergrondlaag, rechts naast de inhoud; met tekst
   erin een illustratie: de dag op de agenda, de minuut bij de pitch. Groen
   op goud is 7,17:1. Hij groeit op als de dia in beeld komt. */
.pr-schijf{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1;background:var(--goud);color:var(--groen);width:min(24vw,42vh);right:7vw;top:50%;margin-top:calc(min(24vw,42vh) / -2);line-height:1}
.pr-schijf b{font-size:min(9vw,15vh);font-weight:800;font-style:italic;letter-spacing:-.04em}
.pr-schijf small{margin-top:.4em;font-size:min(1.7vw,3vh);font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.pr-programma .pr-schijf{width:min(16vw,28vh);margin-top:0;top:auto;bottom:14%}
.pr-pitchuitleg .pr-schijf{width:min(28vw,48vh);margin-top:calc(min(28vw,48vh) / -2)}
.pr-tafelgesprek .pr-schijf{width:min(30vw,52vh);margin-top:calc(min(30vw,52vh) / -2)}
.pr-evaluatie .pr-schijf{width:min(32vw,56vh);margin-top:0;top:auto;right:7vw;bottom:max(-11vw,-20vh)}
.is-js .pr-schijf{transform:scale(.82);transition:transform .8s var(--ease)}
.is-js .is-actief .pr-schijf{transform:none}
.pr-programma .pr-inhoud,.pr-agenda-tien .pr-inhoud,.pr-agenda-expert .pr-inhoud,.pr-pitchuitleg .pr-inhoud,.pr-tafelgesprek .pr-inhoud{padding-right:calc(min(24vw,42vh) + 3vw);box-sizing:border-box}
.pr-programma .pr-inhoud{padding-right:calc(min(16vw,28vh) + 3vw)}
.pr-pitchuitleg .pr-inhoud{padding-right:calc(min(28vw,48vh) + 3vw)}
.pr-tafelgesprek .pr-inhoud{padding-right:calc(min(30vw,52vh) + 3vw)}
/* Het slot: rechts groot het volgende ontbijt op een gouden schijf (Sepp,
   4 november 2026: de datum moet je echt zien). */
.pr-volgend{position:absolute;z-index:1;right:6vw;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;width:min(38vw,68vh);aspect-ratio:1;margin:calc(min(38vw,68vh) / -2) 0 0;border-radius:50%;background:var(--goud);color:var(--groen);text-align:center;line-height:1}
.pr-volgend small{margin-bottom:.5em;font-size:min(1.9vw,3.3vh);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.pr-volgend b{font-size:min(3.8vw,6.6vh);font-weight:800;font-style:italic;letter-spacing:-.03em}
.pr-volgend b + b{font-size:min(4.6vw,8.2vh)}
.pr-slot .pr-inhoud{padding-right:calc(min(38vw,68vh) + 4vw);box-sizing:border-box}
.is-js .pr-volgend{transform:scale(.85);transition:transform .8s var(--ease)}
.is-js .pr-slot.is-actief .pr-volgend{transform:none}
/* De spotlight in één dia: de kop groot, de spreker eronder, rechts het portret. */
.pr-spreker{margin:.1em 0 0;font-size:2.1em;font-weight:800;font-style:italic;line-height:1.1;letter-spacing:-.02em;color:var(--groen)}
.pr-tien .pr-bedrijf{margin-top:.25em;font-size:1.35em;color:var(--muted-d)}
.pr-tien .pr-onderwerp{margin-top:1.1em}
/* De PDF van de spreker: elke pagina een dia, zo groot als het scherm toelaat. */
.pr-dia.pr-pdf{display:grid;place-items:center;padding:0}
.pr-pdf img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.is-js .pr-dia.pr-pdf{height:100%}
.pr-dia.pr-pdf-fout{place-content:center;text-align:center;padding:4vh 4vw}
.pr-slides-los{margin:1.6em 0 0}
.pr-slides-los .pr-knop{display:inline-flex;align-items:center;text-decoration:none}
/* Het programma: genummerd zoals Pim het opsomde, in twee kolommen zodat acht punten op een 16:9-scherm passen. */
.pr-punten{counter-reset:pr;columns:2;column-gap:3em;max-width:52em}
.pr-punten li{position:relative;counter-increment:pr;break-inside:avoid;padding:.55em 0 .55em 1.7em;border-bottom:1px solid var(--line);font-size:1.2em;line-height:1.25;color:var(--groen)}
.pr-punten li::before{content:counter(pr);position:absolute;left:0;font-weight:800;font-style:italic;color:var(--roest-t)}
.pr-punten b{font-weight:700}
/* Een agenda-dia zoals bij Pim: datum en wie, dit ontbijt voorop. */
.pr-agenda{max-width:48em;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:2.4em}
/* Wie nu aan de beurt is staat vet, de drie daarna rustiger eronder (Sepp, 4 november 2026). */
.pr-agenda li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:.3em;align-items:baseline;padding:.6em 0;border-bottom:1px solid var(--line);font-size:1.25em;color:var(--groen)}
.pr-agenda-wie{font-weight:500}
.pr-agenda-datum{font-weight:600;white-space:nowrap;color:var(--muted-d)}
.pr-agenda li.is-nu{font-size:1.45em}
.pr-agenda li.is-nu .pr-agenda-datum{font-weight:800;font-style:italic;letter-spacing:-.01em;color:var(--roest-t)}
.pr-agenda li.is-nu .pr-agenda-wie{font-weight:800}
.pr-agenda small{display:inline-block;margin-left:.7em;font-size:.5em;font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.1em;vertical-align:middle;color:var(--roest-t)}
.pr-noot{max-width:40em;margin:1.6em 0 0;font-size:.95em;line-height:1.4;color:var(--muted)}
/* De pitch: naam en bedrijf links, het gezicht in de gouden bol rechts, de klok rechtsonder. */
.pr-pitch .pr-inhoud{padding-right:calc(min(24vw,42vh) + 4vw);box-sizing:border-box}
.pr-naam{hyphens:auto}
.pr-regel{margin-top:.7em;font-size:1.05em}
.pr-contact{display:flex;flex-wrap:wrap;gap:.3em 1.6em;margin:1.1em 0 0;font-size:1.1em;color:var(--muted-d)}
/* Het bedrijfslogo boven de naam, zo groot als bij Pim: het eerste wat de zaal ziet. */
.pr-bedrijfslogo{margin:0 0 1em;line-height:0}
.pr-bedrijfslogo img{display:block;width:auto;height:auto;max-width:min(26em,100%);max-height:6.4em;object-fit:contain;object-position:left center}
/* Wie hierna pitcht: los onderaan de dia, met een lijn erboven, zodat het
   niet bij de persoon in beeld lijkt te horen (Sepp, 4 november 2026). */
.pr-volgende{position:absolute;z-index:2;left:7vw;bottom:2.2em;margin:0;padding-top:.7em;border-top:1px solid var(--line);min-width:16em;max-width:calc(100% - 14vw - 8em);transition:transform .35s var(--ease)}
.pr-volgende small{display:block;font-size:.68em;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-d)}
.pr-volgende b{display:block;margin-top:.15em;font-size:1.6em;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--groen)}
.is-js:not(.is-rustig) .pr-volgende{transform:translateY(-84px)}
/* Ruimte onderin, zodat een lange naam of een groot logo nooit onder de volgende-regel schuift. */
.pr-pitch,.pr-pitchuitleg{padding-bottom:8em}
/* Een gast of vervanger heeft geen profiel: een vaste dia met naam en bedrijf groot, zonder foto of logo, met de gouden boog. */
.pr-pitch.is-bezoeker .pr-inhoud{padding-right:calc(min(32vw,54vh) + 3vw)}
.pr-pitch.is-bezoeker .pr-naam{font-size:min(4.2em,13vw)}
.pr-pitch .pr-naam.is-lang{font-size:min(2.6em,9vw);overflow-wrap:anywhere}
/* De expertsessie: de vraag of stelling is de kop, wie hem stelt staat erboven. */
.pr-wie{margin:0 0 .5em;font-size:1.3em;color:var(--muted-d)}
.pr-wie b{color:var(--groen)}
.pr-dia h2.pr-vraag{max-width:16em;font-size:min(2.8em,10vw);line-height:1.12}
.pr-vraag::before{content:"\201E";color:var(--roest-t)}
.pr-vraag::after{content:"\201D";color:var(--roest-t)}
.pr-gezicht{position:absolute;z-index:1;right:7vw;top:50%;width:min(24vw,42vh);transform:translateY(-50%)}
.pr-gezicht .wz-bol{width:100%;margin:0;--bol:var(--goud)}
.pr-gezicht .wz-bol.is-init span{font-size:min(9vw,15vh)}
/* De klok: een ring die leegloopt. Groen op licht (de rest), roest de laatste tien tellen, en bij nul een vol vlak met "Tijd". */
.pr-klok{position:absolute;z-index:2;right:2em;bottom:2em;display:grid;place-items:center;width:6em;height:6em;padding:0;border:0;border-radius:50%;background:var(--paper);box-shadow:var(--sh);color:var(--groen);font:inherit;cursor:pointer;transition:transform .35s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.pr-klok svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pr-klok circle{fill:none;stroke-width:8}
.pr-klok-baan{stroke:rgba(8,39,26,.1)}
.pr-klok-rest{stroke:var(--groen);stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s var(--ease)}
.pr-klok-tijd{position:relative;font-size:1.5em;font-weight:800;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pr-klok.is-bijna{color:var(--roest-t)}
.pr-klok.is-bijna .pr-klok-rest{stroke:var(--roest)}
.pr-klok.is-op{background:var(--roest-t);color:#fff}
.pr-klok.is-op .pr-klok-baan{stroke:rgba(255,255,255,.25)}
.pr-klok:focus-visible{outline:3px solid var(--groen);outline-offset:4px}
/* Zolang de balk in beeld is, schuift de klok erboven. */
.is-js:not(.is-rustig) .pr-klok{transform:translateY(-84px)}
.pr-tafelgesprek .pr-klok{width:8em;height:8em}
/* Op een groot scherm staat de klok van het tafelgesprek midden op de gouden schijf, als wijzerplaat; hij schuift niet mee met de balk. */
@media(min-width:881px){
  .pr-tafelgesprek .pr-klok{width:10em;height:10em;top:50%;bottom:auto;right:calc(7vw + min(30vw,52vh) / 2);margin:-5em -5em 0 0}
  .is-js:not(.is-rustig) .pr-tafelgesprek .pr-klok{transform:none}
  .pr-tafelgesprek .pr-klok-tijd{font-size:2.4em}
}
/* Het portret op de dia van de spreker: dezelfde uitsnede als in de pagina-hero. */
/* overflow-y:clip snijdt de gloed onder de rand af, anders scrollt de dia erheen. */
.pr-portret{z-index:1;height:84%;overflow-x:visible;overflow-y:clip}
.pr-portret::before{display:none}
.pr-dia:has(.pr-portret) .pr-inhoud{padding-right:clamp(240px,30vw,460px);box-sizing:border-box}
/* Het stippenlogo op de openingsdia, rechts naast de tekst. */
.pr-opening .kaart,.pr-pitch.is-bezoeker .kaart{top:auto;right:7vw;bottom:16%;width:min(32vw,54vh)}
.pr-pitch.is-bezoeker .kaart{bottom:24%}
.pr-opening .pr-inhoud{padding-right:calc(min(32vw,54vh) + 3vw);box-sizing:border-box}
.pr-balk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px clamp(16px,3vw,32px);background:var(--zand-l);color:var(--muted);font-size:.9rem}
.pr-terug{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--groen);text-decoration:underline;text-underline-offset:3px}
.pr-stand{flex:1;min-width:200px;margin:0}
.pr-stand b{display:inline-block;margin-right:6px;padding:2px 11px;border:1px solid var(--roest-t);border-radius:999px;color:var(--roest-t);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pr-knoppen{display:flex;align-items:center;gap:8px;margin-left:auto}
.pr-knop{min-width:48px;min-height:48px;padding:0 14px;border:1.5px solid var(--groen);border-radius:999px;background:var(--paper);color:var(--groen);font:inherit;font-weight:600;cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
@media(hover:hover){.pr-knop:not(:disabled):hover{background:var(--groen);border-color:var(--groen);color:#fff}}
.pr-knop:focus-visible,.pr-terug:focus-visible{outline:3px solid var(--groen);outline-offset:3px;border-radius:10px}
.pr-knop:disabled{opacity:.35;cursor:default}
.pr-teller{min-width:4.2em;text-align:center;font-variant-numeric:tabular-nums;color:var(--groen)}
.pr-knoppen{display:none}
.is-js .pr-knoppen{display:flex}
/* pan-y: een horizontale veeg op een touchscherm gaat naar site.js en niet naar de browser. */
.is-js .pr-dias{position:fixed;inset:0}
.is-js .pr-dias,.is-js .pr-dia{touch-action:pan-y}
.is-js .pr-dia{position:absolute;inset:0;min-height:0;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.is-js .pr-dia.is-actief{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Het verloop laat wat onder de balk staat (portret, een lange lijst op de
   telefoon) zacht weglopen in plaats van hard afgesneden. */
.is-js .pr-balk{position:fixed;left:0;right:0;bottom:0;z-index:5;padding-top:40px;background:linear-gradient(to top,var(--zand-l) 60%,rgba(247,238,230,0));transition:opacity .35s var(--ease)}
/* Na een paar tellen zonder muis of toets verdwijnt de balk; de zaal kijkt naar de dia. */
.is-rustig .pr-balk{opacity:0;pointer-events:none}
.is-rustig,.is-rustig .pr-dias{cursor:none}
/* Zwart scherm (B of punt, zoals in PowerPoint) voor als de zaal naar de spreker moet kijken. */
.pr-zwart{display:none}
/* ?toetsen=1: laat zien welke toets een klikker stuurt, om een klikker ter plekke te testen. */
.pr-toets{position:fixed;z-index:7;top:12px;right:12px;margin:0;padding:8px 14px;border-radius:12px;background:var(--groen);color:#fff;font:600 .95rem/1.3 var(--sans)}
.is-zwart .pr-zwart{display:block;position:fixed;inset:0;z-index:6;background:#000}
/* Schermvullend: alleen de dia's en de pijlen, de rest leidt af. */
.is-vol .pr-terug,.is-vol .pr-stand,.is-vol .pr-vol{display:none}
@media(prefers-reduced-motion:reduce){.is-js .pr-dia,.is-js .pr-balk,.pr-klok{transform:none;transition:none}.pr-volgende{transition:none}.pr-klok-rest{transition:none}}
@media(max-width:880px){
  .pr-dia:has(.pr-portret) .pr-inhoud,.pr-pitch .pr-inhoud,.pr-opening .pr-inhoud{padding-right:0}
  .pr-programma .pr-inhoud,.pr-agenda-tien .pr-inhoud,.pr-agenda-expert .pr-inhoud,.pr-pitchuitleg .pr-inhoud,.pr-tafelgesprek .pr-inhoud,.pr-slot .pr-inhoud,.pr-mededeling .pr-inhoud{padding-right:0}
  .pr-schijf{display:none}
  .pr-slot{flex-direction:column}
  .pr-slot .pr-inhoud{margin:auto 0 0}
  .pr-volgend{position:relative;right:auto;top:auto;width:min(64vw,260px);margin:1.6em 0 auto}
  .pr-volgend small{font-size:.8rem}
  .pr-volgend b{font-size:1.5rem}
  .pr-volgend b + b{font-size:1.9rem}
  .pr-opening .kaart,.pr-pitch.is-bezoeker .kaart{display:none}
  .pr-pitch.is-bezoeker .pr-inhoud{padding-right:0}
  .pr-gezicht{position:relative;right:auto;top:auto;transform:none;width:min(40vw,180px);margin:0 0 1.4em;order:-1}
  .pr-pitch{flex-direction:column}
  .pr-pitch .pr-inhoud{margin:0}
}
@media(max-width:760px){
  .pr-dia{padding:4.6em 16px 150px}
  .pr-logo{left:16px}
  .pr-stand-tekst{display:none}
  .pr-dia .pr-kaarten{--kol:1}
  .pr-punten{columns:1}
  .pr-agenda{grid-template-columns:minmax(0,1fr)}
  .pr-agenda-datum{white-space:normal}
  .pr-klok{right:16px;bottom:16px;width:4.6em;height:4.6em}
  .is-js:not(.is-rustig) .pr-klok{transform:translateY(-120px)}
  .pr-volgende{left:16px;bottom:16px;min-width:0;max-width:calc(100% - 32px - 5.4em)}
  .is-js:not(.is-rustig) .pr-volgende{transform:translateY(-120px)}
  .pr-bijdragen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-bezoekers{grid-template-columns:minmax(0,1fr)}
  .pr-sub{overflow-wrap:anywhere}
}

/* ============================================================
   Variant A van Loes Tops (gekozen 2 november 2026)
   Overgenomen uit ontwerp/homepage-varianten-2026-10 (nieuw.css plus
   variant-a.css): de hero met het stippenlogo, de waarom-bolletjes,
   "Wie zit erin" en de lichte slot-CTA met de gouden boog. Het
   palet van Loes staat hieronder; de tokens bovenin dit bestand
   zijn er sinds dezelfde dag op omgezet.
   ============================================================ */

:root{
  --roest:#A76944; --olijf:#797649; --zand:#EDDCCC; --goud:#E99F08; --groen:#08271A;
  --zand-l:#F7EEE6; --roest-t:#7A4A2C;
  --kop:77px;          /* hoogte van de sticky header, inclusief rand */
  --kaart-1:var(--groen); --kaart-2:var(--goud);
}

/* knop-hover: tekst wit in plaats van een accentkleur op een donker vlak (feedback Sepp) */
@media (hover:hover) and (pointer:fine){
  .btn-p:hover,.btn-line:hover,.btn-ghost:hover,.ag:hover .btn-line{color:#fff}
  .btn-ghost::after{background:var(--amber-text)}
  .btn-ghost:hover{border-color:var(--amber-text)}
}

/* ---------- hero: altijd volledig in beeld ---------- */
.nhero-out{padding:12px}
.nhero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  height:calc(100svh - var(--kop) - 24px);min-height:460px;max-height:940px;display:flex;align-items:center}
.nhero > .wrap{position:relative;z-index:3;width:100%;max-width:none;padding:0 clamp(24px,5vw,80px)}
.nh-tekst{max-width:min(700px,56%)}
.nh-kicker{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--green-deep);margin:0 0 clamp(10px,2svh,18px)}
.nhero h1.disp{font-size:clamp(34px,min(6.4vw,8.4svh),92px)}
.nh-lead{font-size:clamp(16px,min(1.35vw,2.3svh),19px);color:var(--muted);max-width:50ch;margin:clamp(12px,2.4svh,22px) 0 0}
.nhero .hero-cta{justify-content:flex-start;margin-top:clamp(16px,3.4svh,30px)}
.nh-stats{display:flex;flex-wrap:nowrap;gap:clamp(16px,2.2vw,36px);margin-top:clamp(18px,4svh,42px);padding-top:clamp(12px,2.4svh,22px);border-top:1px solid var(--line)}
.nh-stats div{display:flex;flex-direction:column}
.nh-stats b{font-weight:800;font-style:italic;font-size:clamp(24px,min(2.8vw,4.6svh),42px);line-height:1;color:var(--green-deep)}
.nh-stats small{font-size:.88rem;color:var(--muted)}
.nhero.donker .nh-kicker{color:var(--amber)}
.nhero.donker h1.disp{color:var(--on-green)}
.nhero.donker .disp .am{color:var(--amber)}
.nhero.donker .nh-lead,.nhero.donker .nh-stats small{color:var(--on-green-dim)}
.nhero.donker .nh-stats{border-color:rgba(255,255,255,.18)}
.nhero.donker .nh-stats b{color:var(--amber)}
.nhero.donker :focus-visible{outline-color:#fff}
/* maten die de kaart nodig heeft om tussen de kop en het portret te passen; % is hier de breedte van de hero */
.nhero{--pad:clamp(24px,5vw,80px);--hh:clamp(460px,calc(100svh - var(--kop) - 24px),940px);
  --ph:min(calc(var(--hh) * .9),62vw);--pr:clamp(8px,calc(6vw - 36px),130px);
  --tr:calc(var(--pad) + min(640px,calc((100% - 2 * var(--pad)) * .54)))}
.nh-pf{position:absolute;bottom:0;right:var(--pr);height:var(--ph);width:auto;max-width:none;z-index:2}
.nh-boog,.nh-schijf{position:absolute;border-radius:50%;pointer-events:none}
.nhero .rings{z-index:0}

/* het stippenlogo: de kaart van de Kempen, 1-op-1 uit het logo van Loes (donkergroen met gouden accentstippen) */
.kaart{position:absolute;z-index:1;width:clamp(150px,min(25vw,40svh),400px);aspect-ratio:21.65/15.37;pointer-events:none}
/* naast een portret: begint na de kop en houdt op waar de persoon begint (het beeld is 3:4, de persoon zit
   in het midden, dus ongeveer 14 procent van de beeldbreedte is lege rand) */
@media (min-width:881px){
  .nhero:has(.nh-pf) .kaart{left:calc(var(--tr) + 2vw);
    width:clamp(170px,calc(100% - var(--tr) - 2vw - var(--pr) - var(--ph) * .75 * .86 - 1vw),min(25vw,40svh,400px))}
}
.kaart svg{display:block;width:100%;height:100%;overflow:visible}
.kaart circle{transform-box:fill-box;transform-origin:center;transition:transform 1.5s var(--ease),opacity .9s var(--ease)}
.kaart .lijnen{transition:opacity .8s var(--ease) .9s}
.kaart.los .lijnen{opacity:0;transition:none}

/* ---------- waarom: de bolletjes in de kaarten ---------- */
.card .pic{position:relative;display:block}
.trosje{position:absolute;inset:0}
.trosje i{position:absolute;border-radius:50%;background:var(--t1);
  left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transition:left .7s var(--ease) var(--d),top .7s var(--ease) var(--d),width .7s var(--ease) var(--d),height .7s var(--ease) var(--d),margin .7s var(--ease) var(--d),background .5s var(--ease);
  animation:zweef 3.6s ease-in-out var(--z) infinite alternate}
.trosje i.t2{background:var(--t2)}
.trosje i.t3{background:var(--t3)}
.trosje.samen i{left:var(--x2);top:var(--y2);width:var(--s2);height:var(--s2);margin:calc(var(--s2) / -2) 0 0 calc(var(--s2) / -2)}
@media (hover:hover) and (pointer:fine){.card:hover .trosje i{left:var(--x2);top:var(--y2);width:var(--s2);height:var(--s2);margin:calc(var(--s2) / -2) 0 0 calc(var(--s2) / -2)}}
@keyframes zweef{from{translate:0 -3px}to{translate:0 3px}}
.c-groen .trosje{--t1:var(--green-deep);--t2:var(--amber);--t3:var(--olijf)}
.c-amber .trosje{--t1:var(--amber-text);--t2:var(--amber);--t3:var(--green-deep)}
.c-zand .trosje{--t1:var(--amber);--t2:var(--green-deep);--t3:var(--roest)}

/* ---------- wie zit erin ---------- */
/* padding-top: de hoofden steken 28 procent boven hun bol uit en tillen bij hover nog 8px, dus ruimte onder de kop */
.wz-rij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,2vw,24px);padding-top:clamp(28px,4.5vw,60px)}
/* het portret steekt 28 procent boven zijn bol uit, dus de tweede rij krijgt die ruimte erbij;
   anders valt een hoofd over het vak van de rij erboven (Maarten Rijntjes, notariaat) */
@media (max-width:900px){.wz-rij{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(40px,11vw,64px)}}
.wz-lid{text-decoration:none;display:block;text-align:center}
.wz-bol{position:relative;display:block;aspect-ratio:1;margin-bottom:12px}
.wz-bol::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bol,var(--sand))}
.wz-bol img{position:absolute;left:8%;bottom:0;width:84%;height:128%;max-width:none;object-fit:cover;object-position:top;border-radius:0 0 999px 999px;transition:transform .45s var(--ease)}
.wz-lid b{display:block;font-weight:700;color:var(--green-deep);line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.wz-lid small{font-size:.9rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.wz-lid:hover .wz-bol img{transform:translateY(-8px) scale(1.03)}}
.wz-meer{margin-top:clamp(28px,4vw,40px)}
/* zonder vrijstaand portret: de ronde profielfoto in de bol, en zonder foto de initialen */
.wz-bol.is-rond img{left:0;top:0;bottom:auto;width:100%;height:100%;border-radius:50%;object-position:center top}
.wz-bol.is-init span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--groen)}
.bestuur-rij .wz-lid small{display:block;overflow-wrap:break-word;hyphens:auto}
.bestuur-rij .wz-lid .rol{color:var(--roest-t);font-weight:600;font-size:.85rem;margin-top:2px}

/* ---------- footer-CTA: gecentreerd, en dezelfde vormtaal als de hero ---------- */
/* tekst en portret staan samen in het midden: op een breed scherm groeit de rand, niet het gat ertussen */
.slot.met-portret{--rand:max(clamp(22px,5vw,60px),calc((100% - 1040px) / 2));--pw:clamp(260px,26vw,380px);--kw:clamp(110px,10vw,150px)}
/* de tekstkolom houdt rekening met de stippenkaart naast de kop, anders botst een lange kop ertegen */
@media (min-width:881px){
  .slot.met-portret{padding-left:var(--rand);padding-right:calc(var(--rand) + var(--pw) * .9 + var(--kw) + clamp(20px,2.5vw,40px))}
}
.slot.met-portret .ph-portret{right:var(--rand);width:var(--pw)}
.slot .ph-portret::before{display:none}
.slot-boog{position:absolute;border-radius:50%;aspect-ratio:1;pointer-events:none;
  width:calc(var(--pw) * 1.45);right:calc(var(--rand) - var(--pw) * .22);bottom:calc(var(--pw) * -.62)}
/* de kaart staat buiten de tekststroom, naast de kop en voor het portret, zodat het vlak niet hoger wordt dan nu */
.slot .kaart{z-index:1;width:var(--kw,clamp(110px,10vw,150px));top:clamp(70px,10vw,130px);right:calc(var(--rand) + var(--pw) * .9)}
/* een licht vlak in plaats van het donkergroen van voor november 2026 */
.slot{color:var(--groen)}
.slot h2{color:var(--groen)}
.slot .disp .am{color:var(--roest-t)}
.slot p,.slot .sub{color:var(--muted)}
.slot .sub a{color:var(--groen)}
.slot .rings span{border-color:rgba(8,39,26,.09)}
.slot :focus-visible{outline-color:var(--groen)}
@media (max-width:880px){
  .slot-boog{display:none}
  .slot .kaart{width:64px;top:22px;right:28px}
}

/* ---------- mobiel ---------- */
@media (max-width:880px){
  .nhero{height:auto;min-height:calc(100svh - var(--kop) - 24px);max-height:none;align-items:flex-start;padding:clamp(28px,6svh,48px) 0 clamp(28px,5svh,40px)}
  .nh-tekst{max-width:none}
  .nhero h1.disp{font-size:clamp(34px,10.4vw,54px)}
  .nh-pf{display:none}
  /* html body ervoor: de variant-css komt later en zet de desktoppositie, die moet hier wijken */
  html body .nhero .kaart{width:84px;right:var(--pad);top:clamp(28px,6svh,48px);left:auto;bottom:auto;margin-top:0}
  /* de kicker staat naast de kaart en is minstens zo hoog, zodat de kop er altijd onder begint */
  .nh-kicker{max-width:calc(100% - 104px);min-height:60px;display:flex;align-items:center}
  .nh-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
}
@media (prefers-reduced-motion:reduce){
  .trosje i{animation:none}
  .kaart circle,.kaart .lijnen,.trosje i{transition:none}
}

/* Variant A, zand: zandroze als grond, goud als accent en als boog in de hero, zoals in de
   social-post van Loes. De footer-CTA is licht met dezelfde gouden boog. */
.nh-a{background:var(--zand)}
.nh-a .nh-schijf{width:clamp(420px,min(62vw,110svh),1100px);aspect-ratio:1;left:-14%;top:22%;background:var(--zand-l)}
.nh-a .nh-boog{width:clamp(420px,min(56vw,118svh),1080px);aspect-ratio:1;right:-18%;top:-34%;background:var(--goud);z-index:1}
.nh-a .kaart{top:9%}
.nh-a .nh-stats{border-color:#DCC3AE}

.wz-lid:nth-child(odd){--bol:var(--goud)}
.wz-lid:nth-child(even){--bol:var(--zand-l)}

/* footer-CTA: zandroze licht met een gouden boog, zoals de hero */
.slot{background:var(--zand-l)}
.slot-boog{background:var(--goud)}

/* ==========================================================================
   Mobiele review, 2 november 2026: raakvlakken en wat op een telefoon brak.
   Een link die een lid onderweg gebruikt (bellen, wachtwoord vergeten, delen)
   krijgt 44px hoogte; tekst die op een telefoon onleesbaar klein werd gaat
   naar minimaal 12px.
   ========================================================================== */
/* privacy: .tekst zette de zijpadding van .wrap op 0, de tekst raakte de rand */
.wrap.tekst{padding-inline:clamp(18px,4vw,44px)}
@media(max-width:880px){.blk.strak>.wrap.tekst{padding-top:0}}
/* sfeer-polaroids: de desktopposities lekten door in de gestapelde stand */
@media(max-width:880px){
  .sfeer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sfeer-kern{grid-column:1/-1}
  .sfeer .pol{position:relative;top:auto;left:auto;right:auto;width:auto;margin:0}
}
/* seizoenskaart: de status-pill was 10,5px in hoofdletters */
@media(max-width:640px){.sz .status{font-size:.75rem}}
/* profielkaart: website en telefoon als knopjes naast elkaar */
@media(max-width:880px){
  .prof-kaart .p-links{gap:10px}
  .prof-kaart .p-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(243,238,230,.45);border-radius:999px;color:var(--on-green);font-weight:600}
  .prof-kaart .p-links a.p-terug{display:none}
}
/* artikel delen: drie pill-knopjes in plaats van tekstlinks van 25px */
.art-deel{flex-wrap:wrap;gap:10px 12px}
.art-deel span{flex-basis:100%}
@media(min-width:561px){.art-deel span{flex-basis:auto;margin-right:6px}}
.art-deel a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);transition:border-color .2s var(--ease),color .2s var(--ease)}
.art-deel a:hover{border-color:var(--amber-text)}
/* inloggen: wachtwoord vergeten is een kernhandeling, dus een echt raakvlak */
.login-kaart .sub a{display:inline-block;padding:12px 2px;margin:-8px 0;border-bottom:0;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:1px;text-underline-offset:4px}
/* kruimelpad: groter raakvlak zonder dat het er anders uitziet */
.page-hero .crumb a,.crumb-licht a{display:inline-block;padding:12px 0;margin:-12px 0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(8,39,26,.3);text-decoration-thickness:1px;text-underline-offset:3px}
/* kleine pills: minimaal 12px */
.lid-tegel .lt-tag{font-size:.75rem}
.pol figcaption{font-size:.78rem}

/* ==========================================================================
   Mobiel ontworpen secties (review 2 november 2026). Waar een desktopsectie
   op een telefoon alleen gestapeld werd tot een lange lap, krijgt hij hier
   een eigen vorm: compacte rijen met het beeld klein links, een veegrij voor
   foto's, de handeling (aanmelden, zoeken) eerder in beeld, en elk gegeven
   een keer. Desktop blijft ongemoeid: alles staat achter een max-width.
   ========================================================================== */

/* kop van een over-ons-pagina: afbreken met een koppelteken, niet midden in een woord */
.page-hero h1{overflow-wrap:break-word;hyphens:auto}
/* vanaf 561 past elk woord, dus heel laten en de regels in balans */
@media(min-width:561px){.page-hero h1{hyphens:manual;text-wrap:balance}}
/* een woord met een eigen zacht afbreekstreepje breekt alleen daar */
.page-hero h1 .am-eigen-breek{hyphens:manual}

/* inhoudsopgave kennisartikel, op elke breedte */
.art-toc{max-width:620px;margin:clamp(24px,3vw,36px) auto 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.art-toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 20px;font-weight:700;color:var(--green-deep)}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--amber-soft);color:var(--amber-text);font-weight:700;transition:transform .25s var(--ease)}
.art-toc[open] summary::after{transform:rotate(45deg)}
.art-toc ol{margin:0;padding:0 20px 12px 40px;color:var(--muted)}
.art-toc li a{display:block;padding:10px 0;color:var(--green);font-weight:600;border-top:1px solid var(--line)}
.art-toc li:first-child a{border-top:0}
.art-toc li a:hover{color:var(--amber-text)}

@media(max-width:880px){
  /* gast en bijeenkomst: het aanmeldformulier direct onder de kop, de uitleg erna */
  .ev{display:flex;flex-direction:column}
  .ev-form-kaart{order:-1;width:100%}
  /* ledenprofiel: wat iemand doet staat direct onder de kaart, het verhaal daarna */
  .prof-body{display:flex;flex-direction:column}
  .prof-body>.prof-wat{order:-1;margin:0 0 26px}
  /* hero home: de marquee piekt onder de knoppen in beeld, zodat je ziet dat er meer komt */
  .nhero{min-height:calc(100svh - var(--kop) - 96px)}
}

@media(max-width:640px){
  /* seizoensoverzicht: een kolom, eerst wat nog komt, wat geweest is onderaan */
  .seizoen{grid-template-columns:1fr;gap:10px}
  .sz{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center;min-height:0;padding:14px 16px}
  .sz b.datum{grid-column:1}
  .sz .status{grid-column:2;justify-self:start}
  .sz>p,.sz .sz-wie,.sz .sz-actie{grid-column:1/-1}
  .sz .sz-wie{flex-direction:row;align-items:center;gap:12px;margin-top:2px}
  .sz .sz-wie .wz-bol{width:44px;margin-top:6px}
  .sz.voorbij{order:1}
  /* over ons, tijdlijn: tekst links, de foto als vierkantje rechts, zonder kanteling */
}

@media(max-width:560px){
  /* ritme: minder lege zandgrond tussen secties */
  section.blk{padding:56px 0}
  section.blk.strak{padding:32px 0}
  /* knoppen in een hero passen naast elkaar */
  .hero-cta{gap:10px}
  .hero-cta .btn,.ph-acties .btn{padding:13px 20px;font-size:.95rem}

  /* menu: inloggen is een echte knop, geen grijs regeltje */
  .mnav .klein{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid rgba(8,39,26,.45);border-radius:999px;color:var(--groen);font-weight:600}

  /* footer: merkblok breed, dan twee kolommen links met een raakvlak van 44px */
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:22px}
  .foot-grid>div:first-child{grid-column:1/-1}
  .foot-grid>div:nth-child(2){grid-row:span 2}
  .foot-grid ul{gap:0}
  .foot-grid ul a{display:block;padding:11px 0}
  .foot-grid h4{margin-bottom:4px}

  /* waarom lid worden: het bolletjesvlak klein links, de tekst ernaast */
  .cards3 .card{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;align-items:start;padding:18px}
  .cards3 .card .pic{grid-row:1/span 3;width:76px;height:76px;margin:0}
  .cards3 .card .num,.cards3 .card h3,.cards3 .card p{grid-column:2}
  .cards3 .card h3{margin:2px 0 4px;font-size:1.08rem}
  .cards3 .card p{font-size:.93rem}

  /* sfeerfoto's bij de agenda: een veegrij waarin de volgende foto al piekt */
  .tilt-row{display:flex;gap:12px;max-width:none;margin:0 -18px clamp(28px,6vw,40px);padding:8px 18px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none}
  .tilt-row::-webkit-scrollbar{display:none}
  .tilt-row .tilt{flex:0 0 80%;scroll-snap-align:start;transform:none}
  .tilt-row .tilt:hover{transform:none}

  /* agenda-rij: compact, datum links, kop en tijd ernaast, een klein knopje */
  .ag{grid-template-columns:58px minmax(0,1fr);gap:8px 14px;align-items:start;padding:14px}
  .ag-date{grid-row:1/span 2;padding:10px 4px;border-radius:12px}
  .ag-date b{font-size:1.3rem}
  .ag-body .tag{display:none}
  .ag-body h3{font-size:1.02rem;line-height:1.25}
  .ag-body p{font-size:.86rem;line-height:1.45}
  .ag .actie{grid-column:2}
  .ag .btn{padding:8px 16px;font-size:.88rem}

  /* uitgelicht (agenda, nieuws): het beeld een strook, niet een half scherm */
  .spot-img{min-height:0;aspect-ratio:16/9}
  .spot-body{padding:22px 20px 24px;gap:10px}


  /* ledengids en nieuws: de filters als een veegbare chiprij, het zoekveld eerder in beeld */
  .gids-filters,.nieuws-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .gids-filters::-webkit-scrollbar,.nieuws-filters::-webkit-scrollbar{display:none}
  .gids-filters button,.nieuws-filters button{flex:none;white-space:nowrap}
  .lead-mob-weg{display:none}

  /* over ons, bestuur: een rij per persoon zoals de ledengids, de rol leesbaar op een regel */
  .bestuur-rij{grid-template-columns:1fr;row-gap:10px;padding-top:4px}
  .bestuur-rij .wz-lid{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;row-gap:1px;align-items:center;text-align:left;padding-top:20px}
  .bestuur-rij .wz-lid .wz-bol{grid-row:1/span 3;width:72px;margin:0;align-self:end}
  .bestuur-rij .wz-lid b,.bestuur-rij .wz-lid small{grid-column:2;hyphens:manual}

  /* waarden en missiepunten: het icoon links, titel en tekst ernaast */
  .missie-punt{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .missie-punt .ico{grid-row:1/span 2;width:44px;height:44px;margin:0}
  .missie-punt h3,.missie-punt p{grid-column:2}
  .missie-punten{gap:22px}
  .missie-visual{min-height:240px;padding:28px 0}

  /* word lid, naamcheck: een herkenbaar invoerveld met de knop ernaast */
  .claim-veld{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:10px;border-radius:var(--r);padding:16px}
  .claim-veld .prefix{flex-basis:100%;font-size:.85rem;text-align:left}
  .claim-veld input{flex:1;min-width:0;min-height:48px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px}
  .claim-veld input:focus{border-color:var(--amber)}
  .claim-veld .btn{padding:12px 16px}
  .lid-prijs small{white-space:nowrap}
}
/* paginakop op een smalle telefoon: een lang woord als "onschatbare" past op een regel */
@media(max-width:420px){.page-hero h1{font-size:clamp(28px,8.2vw,34px)}}
/* hero home: twee knoppen naast elkaar vanaf 360 breed */
@media(max-width:560px){.nhero .hero-cta .btn{padding:12px 16px;font-size:.92rem}}

/* ---------- inlogpaneel en profielkaart van een lid: licht, zoals de page-hero ----------
   De laatste twee donkergroene vlakken van voor november 2026. Zandroze vlak met donkere
   kringen en de gouden boog voor het inlogpaneel, een witte kaart op de zandgrond voor het
   ledenprofiel. Staat onderaan zodat ook de mobiele regels van hierboven wijken. */
.login-panel{background:var(--zand-l);color:var(--groen)}
.login-panel .rings span{border-color:rgba(8,39,26,.09)}
.login-panel .ph-boog{z-index:0}
.login-uitleg h1{color:var(--groen)}
.login-uitleg .disp .am{color:var(--roest-t)}
.login-uitleg p.intro,.login-punten li{color:var(--muted)}
.login-punten b{color:var(--groen)}
.login-punten .vink{background:var(--goud);color:var(--groen)}
.login-panel :focus-visible{outline-color:var(--groen)}
.prof-kaart{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh)}
.prof-kaart .kring{border-color:rgba(8,39,26,.08)}
.prof-kaart .pav{box-shadow:var(--sh)}
.prof-kaart h1{color:var(--groen)}
.prof-kaart .rol{color:var(--roest-t)}
.prof-kaart .dorp{color:var(--muted)}
.prof-kaart .plek{color:var(--groen);background:var(--zand-l)}
.prof-kaart .p-links a{color:var(--groen);border-bottom-color:rgba(8,39,26,.3)}
.prof-kaart .p-links a:hover{color:var(--roest-t)}
.prof-kaart .p-socials a{border-color:var(--line);color:var(--groen)}
.prof-kaart .p-socials a:hover,.prof-kaart .p-socials a:focus-visible{background:var(--goud);border-color:var(--goud);color:var(--groen)}
.prof-kaart :focus-visible{outline-color:var(--groen)}
@media(max-width:880px){.prof-kaart .p-links a{border:1px solid var(--line);color:var(--groen)}}
@media(max-width:880px){.login-panel .ph-boog{display:none}}

/* ---------- Mijn pagina (3 november 2026, inc/mijn-pagina.php) ----------
   Je eigen ledenpagina zoals een bezoeker hem ziet, met een Bewerk-knop per blok die
   een venster opent (rondloop Happy Digital, ux-onderzoek/rondloop-happydigital.md).
   Daarnaast de tabbladen Statistieken en Logboek. Alles op de bestaande tokens. */
.mp{container-type:inline-size}
.mp-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:18px}
.mp-kop .label{margin-bottom:10px}
.mp-bekijk{padding:11px 20px;font-size:.92rem}
.mp-uitleg{margin:0 0 18px}
.mp-uitleg a{color:var(--groen);border-bottom:2px solid var(--goud)}

/* tabbladen: een segmentrij, het actieve tabblad donkergroen */
.mp-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 22px;background:var(--paper);border:1px solid var(--line);border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--groen);white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.mp-tabs a:hover{background:var(--zand-l)}
.mp-tabs a.actief{background:var(--groen);color:var(--on-green)}
.mp-tabs a:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.mp-klaar>.mp-tab{display:none}
.mp-klaar>.mp-tab.actief{display:block;animation:mp-in .35s var(--ease)}
@keyframes mp-in{from{opacity:0;transform:translateY(6px)}}

/* de pagina zelf: dezelfde twee kolommen als de ledenpagina, op de breedte van het paneel */
.mp-prof{grid-template-columns:minmax(250px,.8fr) 1.2fr;gap:clamp(20px,3vw,40px)}
@container (max-width:700px){.mp-prof{grid-template-columns:1fr}.mp-prof .prof-kaart{position:relative;top:auto}}
.mp-kaart{position:sticky;top:100px;padding-top:clamp(36px,3.4vw,48px)}
.mp-kaart .mp-naam{position:relative;margin:0;color:var(--groen);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(22px,2.2vw,28px);line-height:1.1}
.mp-kaart .rol{margin-top:6px}
.mp-kaart .plek{margin-top:12px}
.mp-foto{position:relative;width:104px;margin:0 auto 18px}
.mp-foto .pav{margin:0}
.mp-logo{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.mp-logo .prof-logo{margin-top:14px}
.mp-links{position:relative;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.mp-links .p-socials,.mp-links .p-links{justify-content:flex-start}
.mp-links .p-socials{margin-top:10px}
.mp-prive{margin-top:14px;font-size:.84rem;color:var(--muted)}
.mp-body .mp-blok{position:relative;scroll-margin-top:120px}
.mp-body .mp-blok+.mp-blok{margin-top:22px}
.mp-body .prof-blok.mp-blok{margin-top:22px}
.mp-blokkop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mp-blokkop>span{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mp-blokkop h3{margin:0}
.mp-body .mp-blokkop{margin-bottom:12px}
.mp-wieis{font-size:clamp(20px,1.8vw,25px);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--groen);margin:0}
.mp-wieis .am{color:var(--roest-t);font-style:normal}
.mp-tekst{color:var(--muted);margin-bottom:14px;max-width:62ch}
.mp-tekst a{font-weight:600;color:var(--groen);border-bottom:2px solid var(--goud)}
.mp-sfeerfoto{position:relative;margin-top:0}
.mp-schakel{display:grid;gap:12px;justify-items:start}
.mp-schakel p{color:var(--muted);font-size:.95rem}
.mp-schakel .btn,.mp-leeg-knop{padding:11px 20px;font-size:.92rem}
.mp-mist{color:var(--muted);font-size:.92rem}
.mp-kaart .rol.mp-mist{color:var(--muted);font-weight:500;font-style:italic}

/* Bewerk-knop: klein, potlood plus een woord, de volle zin in aria-label */
.mp-bewerk{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--groen);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;flex:none;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.mp-bewerk:hover,.mp-bewerk:focus-visible{background:var(--goud);border-color:var(--goud);color:var(--groen)}
.mp-bewerk:active{transform:scale(.96)}
.mp-bewerk:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.mp-hoek{position:absolute;top:12px;right:12px;z-index:1}
.mp-rond{position:absolute;right:-6px;bottom:-4px;padding:0;width:44px;box-shadow:var(--sh)}
.mp-op-foto{position:absolute;top:12px;right:12px;box-shadow:var(--sh)}
.mp-logo-leeg{margin-top:14px;min-height:44px;padding:0 16px;border:1px dashed var(--line);border-radius:12px;background:transparent;font:inherit;font-size:.88rem;font-weight:600;color:var(--groen);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.mp-logo-leeg:hover,.mp-logo-leeg:focus-visible{border-color:var(--groen);background:var(--zand-l)}

/* leeg blok: een uitnodiging, geen leeg vlak */
.mp-leeg{display:grid;justify-items:start;gap:12px;padding:clamp(20px,2.4vw,28px);border:1.5px dashed var(--line);border-radius:var(--r);background:var(--zand-l)}
.mp-leeg p{color:var(--muted-d);max-width:52ch}
.mp-leeg-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--roest-t)}
.mp-blok:not(.prof-blok)>.mp-leeg{margin-top:4px}

/* meldingen */
.mp-fout{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--roest-t);color:var(--roest-t);font-weight:600}
.mp-net-opgeslagen{margin:8px 0 12px;font-size:.88rem;font-weight:600;color:var(--groen);display:flex;align-items:center;gap:8px}
.mp-net-opgeslagen::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--goud);flex:none}
.mp-kaart .mp-net-opgeslagen{justify-content:center}
.mp-net{animation:mp-net 1.6s var(--ease) .2s}
@keyframes mp-net{0%,100%{box-shadow:0 0 0 0 rgba(233,159,8,0)}30%{box-shadow:0 0 0 6px rgba(233,159,8,.35)}}
.mp-foto.mp-net{animation:none}
.mp-foto.mp-net .pav{animation:mp-net 1.6s var(--ease) .2s}

/* vensters: native dialog, in de bovenste laag */
.mp-vensters-kop{display:none}
.mp-dlg{padding:0;border:0;background:transparent;width:min(560px,calc(100vw - 24px));max-width:none;max-height:min(92svh,860px);overflow:auto;color:var(--ink);text-align:left;overscroll-behavior:contain}
.mp-dlg::backdrop{background:rgba(8,39,26,.38);backdrop-filter:blur(4px)}
.mp-dlg[open]{animation:mp-dlg-in .3s var(--ease)}
.mp-dlg[open]::backdrop{animation:mp-waas .3s var(--ease)}
@keyframes mp-dlg-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes mp-waas{from{opacity:0}}
.mp-dlg .mp-form{box-shadow:var(--sh-h);border-radius:var(--r-lg);gap:16px;scroll-margin-top:0}
.mp-dlg-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 2px}
.mp-dlg-kop h3{margin:0;font-size:1.15rem;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:var(--groen)}
.mp-dlg-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--groen);cursor:pointer;flex:none;transition:background .2s var(--ease)}
.mp-dlg-x:hover,.mp-dlg-x:focus-visible{background:var(--zand-l)}
/* opslaan blijft in beeld, ook als het venster scrollt */
.mp-dlg-voet{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:4px calc(-1 * clamp(24px,3.5vw,44px)) calc(-1 * clamp(24px,3.5vw,44px));padding:14px clamp(24px,3.5vw,44px) clamp(18px,3vw,28px);background:var(--paper);border-top:1px solid var(--zand-l);border-radius:0 0 var(--r-lg) var(--r-lg)}
html:not(.js) .mp-dlg-voet{position:static}
.mp-annuleer{min-height:44px;padding:0 6px;border:0;background:none;font:inherit;font-weight:600;color:var(--groen);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mp-annuleer:hover{color:var(--roest-t)}
@media(max-width:560px){
  .mp-dlg{width:100vw;max-height:92svh;margin:auto 0 0;border-radius:0}
  .mp-dlg .mp-form{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .mp-dlg-voet{border-radius:0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mp-dlg[open]{animation:mp-dlg-op .32s var(--ease)}
  @keyframes mp-dlg-op{from{transform:translateY(100%)}}
  .mp-dlg-voet .btn{flex:1;justify-content:center}
}
/* zonder JS: geen knoppen die niets doen, de formulieren staan gewoon onder de pagina */
html:not(.js) .mp-bewerk,html:not(.js) .mp-leeg-knop,html:not(.js) .mp-logo-leeg,html:not(.js) .mp-dlg-x,html:not(.js) .mp-annuleer{display:none}
html:not(.js) .mp-vensters{display:grid;gap:22px;margin-top:32px}
html:not(.js) .mp-vensters-kop{display:block;font-weight:700;color:var(--groen)}
html:not(.js) .mp-dlg{display:block;position:static;width:auto;max-height:none;overflow:visible}

/* Statistieken */
.mp-periode{position:relative;display:inline-flex;gap:4px;padding:4px;margin:0 0 18px;background:var(--zand-l);border-radius:999px}
.mp-periode input{position:absolute;opacity:0;pointer-events:none}
.mp-periode label{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--groen);cursor:pointer;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.mp-periode input:checked+label{background:var(--paper);box-shadow:var(--sh)}
.mp-periode input:focus-visible+label{outline:2px solid var(--groen);outline-offset:2px}
.mp-stats:has(#mp-p-maand:checked) .mp-per[data-periode=jaar],.mp-stats:has(#mp-p-jaar:checked) .mp-per[data-periode=maand]{display:none}
.mp-weergaven{margin-top:0}
.mp-groot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--muted)}
.mp-groot b{font-size:clamp(34px,4vw,48px);font-weight:800;font-style:italic;letter-spacing:-.03em;line-height:1;color:var(--groen);font-variant-numeric:tabular-nums}
.mp-grafiek{display:flex;align-items:flex-end;gap:3px;height:140px;margin-top:20px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.mp-grafiek:not(.is-dagen){gap:8px}
.mp-staaf{flex:1;min-width:0;height:max(var(--h),2px);background:var(--groen);border-radius:4px 4px 0 0;transform-origin:bottom;transition:background .2s var(--ease)}
.mp-staaf.is-nul{background:var(--line)}
.mp-staaf.is-nu{background:var(--goud)}
.mp-staaf:hover{background:var(--roest-t)}
.mp-klaar>.mp-tab.actief .mp-staaf{animation:mp-staaf .6s var(--ease) both;animation-delay:calc(var(--i,0) * 14ms)}
@keyframes mp-staaf{from{transform:scaleY(0)}}
.mp-as{display:flex;justify-content:space-between;margin-top:8px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mp-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.mp-tegel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;gap:2px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.mp-tegel:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.mp-tegel b{font-size:1.9rem;font-weight:800;font-style:italic;letter-spacing:-.03em;line-height:1.1;color:var(--groen);font-variant-numeric:tabular-nums}
.mp-tegel small{font-size:.85rem;color:var(--muted);line-height:1.35}
.mp-opkomst p{color:var(--muted)}
.mp-opkomst p b{color:var(--groen)}
.mp-balk{height:10px;margin-top:12px;border-radius:999px;background:var(--zand-l);overflow:hidden}
.mp-balk span{display:block;height:100%;width:var(--w);background:var(--goud);border-radius:999px;transform-origin:left}
.mp-klaar>.mp-tab.actief .mp-balk span{animation:mp-balk .8s var(--ease) both .15s}
@keyframes mp-balk{from{transform:scaleX(0)}}
.mp-stats-uitleg{margin-top:16px;font-size:.84rem;color:var(--muted);max-width:70ch}

/* Logboek: per maand een tijdlijn */
.mp-log-maand{margin:26px 0 10px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mp-log-maand:first-of-type{margin-top:0}
.mp-log-lijst{list-style:none;margin:0;padding:6px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.mp-log-lijst li{position:relative;display:grid;grid-template-columns:7.5em 1fr;gap:4px 16px;padding:12px 20px 12px 40px}
.mp-log-lijst li+li{border-top:1px solid var(--zand-l)}
.mp-log-lijst li::before{content:"";position:absolute;left:20px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--groen)}
.mp-log-lijst li.mp-log-pagina::before{background:var(--goud)}
.mp-log-lijst li.mp-log-agenda::before{background:var(--roest-t)}
.mp-log-lijst li.mp-log-account::before,.mp-log-lijst li.mp-log-prikbord::before{background:var(--paper);border:2px solid var(--groen)}
.mp-log-lijst time{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.mp-log-tekst{display:flex;flex-direction:column;gap:1px;color:var(--ink)}
.mp-log-tekst a{color:var(--ink);font-weight:500;transition:color .2s var(--ease)}
.mp-log-tekst a:hover{color:var(--roest-t)}
.mp-log-tekst small{font-size:.78rem;color:var(--muted)}
@media(max-width:560px){
  .mp-log-lijst li{grid-template-columns:1fr;padding:12px 16px 12px 36px}
  .mp-log-lijst li::before{left:16px}
  .mp-log-lijst li time{order:2;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .mp-klaar>.mp-tab.actief,.mp-dlg[open],.mp-dlg[open]::backdrop,.mp-net,.mp-foto.mp-net .pav,.mp-klaar>.mp-tab.actief .mp-staaf,.mp-klaar>.mp-tab.actief .mp-balk span{animation:none}
}


/* ============================================================
   Dashboard-schil op de pc (fase 18, 3 november 2026). Structuur van
   Happy Digital (ux-onderzoek/rondloop-happydigital.md, rondloop 2):
   zijbalk op de grond, inhoud in een eigen vlak dat zelf scrolt,
   inklappen tot een iconenrail, zoeken met Ctrl of Cmd plus K, de
   profielkaart onderin. Kleur, letter, radius en schaduw uit de style
   guide: cream als grond, zand als vlak, paper voor kaarten en menu's,
   radius 12 alleen voor het zoekveld (een veld), 18 voor vlak en menu,
   999 voor alles wat klikbaar en klein is (pillen, keuze Sepp na de
   ux-design-review van 3 november 2026), 50% voor de ronde knoppen;
   alleen --sh en --sh-h. Hover alleen achter @media(hover:hover), want een
   liggende iPad krijgt deze schil ook. Onder 981px verandert er niets
   (app-schil of chips-rij).
   ============================================================ */

/* Overal: wat alleen op de pc bestaat. De groepen vallen weg met
   display:contents, zodat de links in de chips-rij blijven staan. */
/* .dash-side a{display:flex} weegt zwaarder dan één klasse, dus hier met .dash-side ervoor. */
.zb-kop,.zb-profiel,.zb-groep-kop,.dash-side .zb-zoek,.dash-side .zb-alleen-pc{display:none}
.zb-menu,.zb-groep,.zb-groep-lijst,.zb-voet{display:contents}
.dash-side .zb-i{display:none}

@media(min-width:981px){
  body.ndk-dash{--zb:264px;--schil-h:calc(100vh - var(--wp-admin--admin-bar--height,0px));overflow:hidden;background:var(--cream)}
  body.ndk-dash.ndk-zb-dicht{--zb:76px}
  body.ndk-dash header.nav,body.ndk-dash #mnav,body.ndk-dash footer.site,body.ndk-dash .page-hero-out{display:none}

  body.ndk-dash .dash-shell{display:grid;grid-template-columns:var(--zb) minmax(0,1fr);gap:0;max-width:none;margin:0;padding:0;height:var(--schil-h);align-items:stretch;transition:grid-template-columns .3s var(--ease)}

  /* --- zijbalk --- */
  body.ndk-dash .dash-side{position:relative;top:auto;z-index:20;display:flex;flex-direction:column;gap:0;height:var(--schil-h);max-height:none;min-width:0;margin:0;padding:14px 12px 12px;background:none;border:0;border-radius:0;overflow:visible}
  body.ndk-dash .dash-side .zb-i{display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  body.ndk-dash .zb-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 14px 6px}
  body.ndk-dash .dash-side .zb-merk{display:block;padding:0;min-height:0;border-radius:999px;background:none}
  body.ndk-dash .zb-merk img{display:block;height:34px;width:auto}
  body.ndk-dash .zb-kop-knoppen{display:flex;align-items:center;gap:2px}
  body.ndk-dash .zb-klap{position:relative;display:grid;place-items:center;width:38px;height:38px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--green);cursor:pointer;transition:background .2s var(--ease)}
  body.ndk-dash .zb-klap[hidden]{display:none}
  body.ndk-dash .zb-klap:focus-visible{background:var(--green-soft)}

  body.ndk-dash .dash-side .zb-zoek{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:40px;margin:0 0 14px;padding:0 8px 0 12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--muted);font-weight:500;font-size:.92rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
  body.ndk-dash .zb-kbd{margin-left:auto;padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:var(--sand);font:600 .72rem/1.5 var(--sans);color:var(--muted-d)}

  body.ndk-dash .zb-menu{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;margin:0 -6px;padding:0 6px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding-block:12px 44px;transition:box-shadow .2s var(--ease)}
  /* Past het menu niet, dan vervaagt de onderrand en krijgt de bovenrand een
     schaduw zodra je scrolt (dash-schil.js zet de klassen): zo zie je dat er
     meer staat. */
  body.ndk-dash .zb-menu.meer-onder{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent)}
  body.ndk-dash .zb-menu.gescrold{box-shadow:inset 0 1px 0 var(--line),inset 0 10px 10px -10px rgba(8,39,26,.22)}
  body.ndk-dash .zb-groep{display:flex;flex-direction:column}
  body.ndk-dash .zb-groep-lijst{display:flex;flex-direction:column;gap:2px}
  body.ndk-dash .dash-side .zb-groep-kop{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 4px;padding:4px 8px 4px 12px;background:none;border:0;border-radius:999px;cursor:pointer;font:700 .72rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  body.ndk-dash .dash-side .zb-groep-kop .zb-i{width:14px;height:14px;transition:transform .25s var(--ease)}
  body.ndk-dash .zb-groep-kop[aria-expanded="false"] .zb-i{transform:rotate(-90deg)}
  body.ndk-dash .zb-groep-kop[aria-expanded="false"]+.zb-groep-lijst{display:none}

  /* Menu-items: 40 hoog, icoon plus woord, als pil; hover groen-soft, actief
     het donkergroene vlak (zoals het volle primaire vlak van de referentie). */
  body.ndk-dash .zb-groep-lijst>a,body.ndk-dash .zb-voet>a,body.ndk-dash .zb-menu>a{justify-content:flex-start;gap:11px;min-height:40px;padding:0 12px 0 14px;border:0;border-radius:999px;font-size:.93rem;font-weight:600;color:var(--green);white-space:nowrap;background:none}
  body.ndk-dash .zb-groep-lijst>a.actief,body.ndk-dash .zb-menu>a.actief,body.ndk-dash .zb-voet>a.actief{background:var(--green-deep);color:var(--on-green)}
  body.ndk-dash .dash-side a .dash-side-label{overflow:hidden;text-overflow:ellipsis}
  body.ndk-dash .dash-side a .dash-badge{margin-left:auto}

  /* Mijn pagina klapt open naar zijn tabbladen: een lijn links, het actieve
     tabblad krijgt een gouden streep (decoratief, geen tekst in goud). */

  /* --- voet en profielkaart --- */
  body.ndk-dash .zb-voet{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
  /* Instellingen en Hulp staan op de pc in het profielmenu (keuze Sepp, 3 november 2026). */
  body.ndk-dash .dash-side .zb-voet>a{display:none}
  body.ndk-dash .dash-side .zb-alleen-pc{display:flex}
  body.ndk-dash .zb-profiel{display:block;position:relative;margin-top:0}
  body.ndk-dash .zb-profiel>summary{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 8px;border-radius:999px;list-style:none;cursor:pointer;transition:background .2s var(--ease)}
  body.ndk-dash .zb-profiel>summary::-webkit-details-marker{display:none}
  body.ndk-dash .zb-profiel[open]>summary,body.ndk-dash .zb-profiel>summary.is-actief{background:var(--green-soft)}
  body.ndk-dash .zb-profiel>summary>.zb-i{margin-left:auto;color:var(--muted)}
  body.ndk-dash .zb-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--amber);color:var(--green-deep);font-weight:700;font-size:.8rem}
  body.ndk-dash .zb-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
  body.ndk-dash .zb-wie{display:flex;flex-direction:column;min-width:0;line-height:1.3}
  body.ndk-dash .zb-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.9rem;color:var(--green-deep)}
  body.ndk-dash .zb-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;color:var(--muted)}
  body.ndk-dash .zb-profiel-menu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;gap:2px;width:max(100%,250px);padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-h)}
  body.ndk-dash .zb-profiel[open] .zb-profiel-menu{animation:zbOmhoog .22s var(--ease)}
  body.ndk-dash .zb-profiel-kop{display:flex;flex-direction:column;margin:0 0 4px;padding:8px 10px 10px;border-bottom:1px solid var(--line)}
  body.ndk-dash .zb-functie{margin-top:4px;font-size:.78rem;font-weight:600;color:var(--amber-text)}
  body.ndk-dash .zb-profiel-menu a{position:relative;justify-content:flex-start;gap:11px;min-height:38px;padding:0 12px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--green-deep);background:none}
  body.ndk-dash .zb-profiel-menu .zb-uit{margin-top:9px}
  body.ndk-dash .zb-profiel-menu .zb-uit::before{content:"";position:absolute;left:8px;right:8px;top:-6px;border-top:1px solid var(--line)}

  /* --- het inhoudsvlak --- */
  body.ndk-dash .dash-detail{height:calc(var(--schil-h) - 24px);margin:12px 12px 12px 0;padding:clamp(28px,3vw,44px) clamp(28px,3.6vw,60px) 64px;overflow-y:auto;overscroll-behavior:contain;background:var(--sand);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
  body.ndk-dash .dash-detail>*{max-width:1200px;margin-left:auto;margin-right:auto}
  /* Het vlak heeft zelf de ruimte; .blk.strak zou er nog 64px boven zetten. */
  body.ndk-dash .dash-detail .dash-sectie{padding:0}
  /* Koppen in het vlak op de h3-maat van de sheet (sectie 2), de groet ook. */
  body.ndk-dash .dash-detail h2.disp,body.ndk-dash .dash-detail h1.disp{font-size:clamp(24px,3vw,36px)}

  /* Hover alleen met een muis: op een liggende iPad blijft een vlak anders na een tik hangen. */
  @media(hover:hover){
    body.ndk-dash .zb-klap:hover{background:var(--green-soft)}
    body.ndk-dash .dash-side .zb-zoek:hover{background:var(--paper);border-color:var(--green);box-shadow:var(--sh)}
    body.ndk-dash .dash-side .zb-groep-kop:hover{color:var(--green)}
    body.ndk-dash .zb-groep-lijst>a:not(.actief):hover,body.ndk-dash .zb-voet>a:not(.actief):hover,body.ndk-dash .zb-menu>a:not(.actief):hover{background:var(--green-soft)}
    body.ndk-dash .zb-profiel>summary:hover{background:var(--green-soft)}
    body.ndk-dash .zb-profiel-menu a:hover{background:var(--green-soft)}
  }

  /* --- ingeklapt: een iconenrail van 76 --- */
  body.ndk-dash.ndk-zb-dicht .dash-side{padding:14px 12px 12px}
  body.ndk-dash.ndk-zb-dicht .zb-kop{flex-direction:column;gap:8px;padding:0 0 12px}
  body.ndk-dash.ndk-zb-dicht .zb-kop-knoppen{flex-direction:column}
  body.ndk-dash.ndk-zb-dicht .zb-merk img{height:30px}
  body.ndk-dash.ndk-zb-dicht .dash-side .dash-side-label,body.ndk-dash.ndk-zb-dicht .zb-kbd,body.ndk-dash.ndk-zb-dicht .zb-wie,body.ndk-dash.ndk-zb-dicht .zb-profiel>summary>.zb-i{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  body.ndk-dash.ndk-zb-dicht .dash-side .zb-groep-kop{display:none}
  body.ndk-dash.ndk-zb-dicht .zb-groep-kop[aria-expanded="false"]+.zb-groep-lijst{display:flex}
  body.ndk-dash.ndk-zb-dicht .zb-groep+.zb-groep{padding-top:12px;border-top:1px solid var(--line)}
  body.ndk-dash.ndk-zb-dicht .zb-groep-lijst>a,body.ndk-dash.ndk-zb-dicht .zb-voet>a,body.ndk-dash.ndk-zb-dicht .dash-side .zb-zoek{position:relative;justify-content:center;padding:0}
  body.ndk-dash.ndk-zb-dicht .dash-side a .dash-badge{position:absolute;top:2px;right:2px;margin:0}
  body.ndk-dash.ndk-zb-dicht .zb-profiel>summary{justify-content:center;padding:6px 0}
  body.ndk-dash.ndk-zb-dicht .dash-side .zb-zoek{border-radius:999px}
}
@keyframes zbOmhoog{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- zoekvenster (Ctrl of Cmd plus K) --- */
.zk-dlg{width:min(680px,calc(100vw - 32px));max-height:min(540px,calc(100vh - 120px));margin:clamp(56px,14vh,160px) auto auto;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);box-shadow:var(--sh-h);overflow:hidden}
.zk-dlg[open]{display:flex;flex-direction:column;animation:zbOmhoog .22s var(--ease)}
.zk-dlg::backdrop{background:rgba(8,39,26,.38);backdrop-filter:blur(4px)}
.zk-dlg .zb-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zk-veld{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.zk-veld input{flex:1;min-width:0;padding:8px 0;border:0;background:none;outline:none;font:500 1.05rem/1.4 var(--sans);color:var(--ink)}
.zk-veld input::-webkit-search-cancel-button{display:none}
.zk-sluit{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--sand);font:600 .74rem var(--sans);color:var(--muted-d);cursor:pointer}
.zk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px;border-bottom:1px solid var(--line)}
.zk-chips button{min-height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:600 .82rem var(--sans);color:var(--green);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.zk-chips button[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--on-green)}
.zk-lijst{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 10px}
.zk-kop{margin:0;padding:12px 10px 4px;font:700 .72rem var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.zk-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;color:var(--ink);text-decoration:none}
.zk-item[aria-selected="true"]{background:var(--green-soft)}
.zk-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--sand);color:var(--green)}
.zk-item[aria-selected="true"] .zk-ico{background:var(--paper)}
.zk-ico .zb-i{width:17px;height:17px}
.zk-tekst{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.zk-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--green-deep)}
.zk-o{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;color:var(--muted-d)}
.zk-t mark{background:var(--amber-soft);color:inherit}
.zk-leeg{margin:0;padding:32px 18px;text-align:center;color:var(--muted)}
.zk-voet{display:flex;justify-content:flex-end;gap:18px;padding:9px 18px;border-top:1px solid var(--line);background:var(--sand);font-size:.78rem;color:var(--muted-d)}
.zk-voet kbd,.zk-voet kbd+kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:3px;padding:0 5px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:600 .7rem var(--sans)}
@media(hover:hover){
  .zk-sluit:hover{border-color:var(--green);color:var(--green)}
  .zk-chips button:hover{border-color:var(--green)}
}
/* Tooltip van de rail: het woord naast het icoon, bij hover en bij focus (dash-schil.js). */
.zb-tip{position:fixed;z-index:90;padding:6px 12px;border-radius:999px;background:var(--green-deep);color:var(--on-green);font:600 .82rem/1.3 var(--sans);white-space:nowrap;pointer-events:none;box-shadow:var(--sh);transform:translateY(-50%);animation:zbTip .16s var(--ease)}
.zb-tip[hidden]{display:none}
@keyframes zbTip{from{opacity:0;transform:translate(-4px,-50%)}to{opacity:1;transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){
  .zb-tip{animation:none}
  body.ndk-dash .dash-shell,body.ndk-dash .zb-groep-kop .zb-i,body.ndk-dash .zb-menu{transition:none}
  body.ndk-dash .zb-profiel[open] .zb-profiel-menu,.zk-dlg[open]{animation:none}
}

/* ===============================================================
   Overzicht, fase 18.4 (3 november 2026). Op mobiel blijft de app-schil
   zoals hij was: de groet, de ontbijtkaart voor gewone leden en de
   tabbladen bestaan alleen in de schil op de pc.
   =============================================================== */
.ov-kop-pc,.ov-ontbijt-label,.ov-ontbijt:not(.dash-ontbijt),.ov-ontbijt .ov-ontbijt-stand,.ov-ontbijt .ov-ontbijt-agenda,.ov-tabs,.ov-wie{display:none}
/* Het label boven de bestuurslijsten staat ook op mobiel: zonder label lazen de lijsten als iets voor elk lid (fase 18.6). */
.ov-bestuur{margin-top:34px}
.ov-leeg-knop{margin-top:4px}
.ov-ontbijt{margin-top:20px}
.ov-ontbijt-label{margin:0 0 2px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.ov-bron{text-align:center;margin-top:10px}
.ov-feed{margin-top:26px}
.ov-getallen .stats-band{margin-top:26px}
.ov-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;font:600 .92rem var(--sans);color:var(--groen);white-space:nowrap;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
@media(hover:hover){.ov-tab:not([aria-selected="true"]):hover{background:var(--zand-l)}}
.ov-tab[aria-selected="true"]{background:var(--groen);color:var(--on-green)}
.ov-tab:focus-visible,.ov-paneel:focus-visible{outline:3px solid var(--groen);outline-offset:3px}
/* Lege staat: op mobiel de gewone regel, op de pc een uitnodiging zoals .mp-leeg. */
.ov-leeg-ico{display:none}
@media(min-width:981px){
  body.ndk-dash .ov-kop-mob,body.ndk-dash .ov-uitlog,body.ndk-dash .feed-ontbijt{display:none}
  body.ndk-dash .ov-kop-pc{display:block}
  /* Ontbijt links, wie komen er rechts, de getallen over de volle breedte eronder (fase 18.6). */
  body.ndk-dash .ov-boven{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:26px;align-items:stretch}
  body.ndk-dash .ov-boven>.ov-getallen{grid-column:1/-1}
  body.ndk-dash .ov-ontbijt-plek{display:flex;flex-direction:column;min-width:0}
  body.ndk-dash .ov-ontbijt-plek>*{flex:1}
  body.ndk-dash .ov-ontbijt-plek.heeft-app>.ov-ontbijt{display:none}
  /* De presentatie en de placemat staan nu op de wie-kaart. */
  body.ndk-dash .ov-ontbijt .dash-ontbijt-knoppen .btn{display:none}
  /* Het kringen-motief op de ontbijtkaart (keuze Sepp, 3 november 2026): de
     lichte kringen van de page-hero, rechtsboven, achter de inhoud. */
  body.ndk-dash .ov-ontbijt{position:relative;overflow:hidden;display:flex;flex-direction:column;margin:0}
  body.ndk-dash .ov-ontbijt::before,body.ndk-dash .ov-ontbijt::after{content:"";position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(8,39,26,.09);width:260px;height:260px;right:-110px;top:-130px;background:none}
  body.ndk-dash .ov-ontbijt::after{width:400px;height:400px;right:-180px;top:-200px;border-color:rgba(8,39,26,.05)}
  body.ndk-dash .ov-ontbijt>*{position:relative;z-index:1}
  body.ndk-dash .ov-ontbijt-label{display:block}
  body.ndk-dash .ov-ontbijt-mob{display:none}
  body.ndk-dash .ov-ontbijt h3{margin:0;font-size:1.35rem}
  body.ndk-dash .ov-ontbijt .ov-ontbijt-stand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0;color:var(--muted-d);font-size:.92rem}
  body.ndk-dash .ov-pil{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;background:var(--sand);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--amber-text)}
  body.ndk-dash .ov-pil.is-erbij{background:var(--green-soft);border-color:transparent;color:var(--green-deep)}
  body.ndk-dash .ov-pil::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  body.ndk-dash .ov-ontbijt .dash-ontbijt-knoppen{margin-top:auto;padding-top:18px;align-items:center}
  body.ndk-dash .ov-ontbijt .btn{padding:11px 20px;font-size:.9rem}
  body.ndk-dash .ov-ontbijt .dash-ontbijt-knoppen{gap:10px}
  body.ndk-dash .ov-ontbijt .ov-ontbijt-agenda{display:inline-block;order:2}
  /* De tekstlink altijd op een eigen regel onder de knoppen, op elke breedte. */
  body.ndk-dash .ov-ontbijt.dash-ontbijt .dash-ontbijt-knoppen::before{content:"";order:1;flex-basis:100%;height:0}
  /* De getallen in dezelfde kaarttaal als de rest (.prof-blok: rand, geen
     schaduw), met de bronregel in de kaart. */
  body.ndk-dash .ov-getallen{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px)}
  body.ndk-dash .ov-getallen .stats-band{margin:0;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:20px;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  body.ndk-dash .ov-getallen .stats-band::before{display:none}
  body.ndk-dash .ov-getallen .stats-band div{text-align:left}
  body.ndk-dash .ov-getallen .stats-band b{font-size:clamp(26px,2.6vw,38px)}
  body.ndk-dash .ov-bron{text-align:left;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
  /* Feed, meldingen en prikbord: drie kolommen vanaf 1280 (keuze Sepp,
     3 november 2026), daaronder de feed breed en de andere twee ernaast. */
  body.ndk-dash .ov-midden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px;align-items:stretch}
  body.ndk-dash .ov-midden>.ov-feed{margin:0;grid-column:1/-1}
  body.ndk-dash .ov-midden .net-dash-grid{display:contents}
  body.ndk-dash .ov-midden .prof-blok{display:flex;flex-direction:column;align-items:flex-start;margin:0}
  body.ndk-dash .ov-midden .prof-blok>.dash-notif{align-self:stretch}
  body.ndk-dash .ov-midden .prof-blok>.tlink{margin-top:auto}
  body.ndk-dash .ov-midden .prof-blok>.ov-leeg+.tlink,body.ndk-dash .ov-midden .prof-blok>.dash-notif+.tlink{margin-top:16px}
  body.ndk-dash .ov-leeg{display:grid;justify-items:start;gap:10px;align-self:stretch;margin:0 0 auto;padding:18px 20px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--zand-l)}
  body.ndk-dash .ov-leeg p{margin:0;color:var(--muted-d)}
  body.ndk-dash .ov-leeg-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--roest-t)}
  body.ndk-dash .ov-leeg-ico .zb-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  @media(min-width:1280px){
    body.ndk-dash .ov-midden{grid-template-columns:repeat(3,minmax(0,1fr))}
    body.ndk-dash .ov-midden>.ov-feed{grid-column:auto}
  }
  body.ndk-dash .ov-bestuur{margin-top:40px}
  body.ndk-dash .ov-bestuur-label{display:flex}
  body.ndk-dash .ov-bestuur.tabs-aan .ov-tabs{display:inline-flex;gap:4px;padding:4px;margin:10px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
  body.ndk-dash .ov-bestuur.tabs-aan .ov-paneel:not(.is-actief){display:none}
  body.ndk-dash .ov-bestuur.tabs-aan .ov-paneel.is-actief{animation:mp-in .35s var(--ease)}
  body.ndk-dash .ov-bestuur.tabs-aan .ov-paneel>.prof-blok:first-child{margin-top:16px!important}
}
@media(prefers-reduced-motion:reduce){body.ndk-dash .ov-bestuur.tabs-aan .ov-paneel.is-actief{animation:none}}
/* Het ontbijtblok van Start, op de pc verhuisd naar het Overzicht
   (dash-schil.js). Zelfde inhoud en knoppen als op mobiel, licht gekleed in
   de pc-kaarttaal: paper, 1px lijn, de kringen in groen op een lage dekking. */
@media(min-width:981px){
  body.ndk-dash .ov-ontbijt-plek .app-ontbijt{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px)}
  body.ndk-dash .ov-ontbijt-plek .app-rings span{left:auto;right:-140px;top:-130px;transform:none;border-color:rgba(8,39,26,.09)}
  body.ndk-dash .ov-ontbijt-plek .app-rings .r2{right:-210px;top:-200px;border-color:rgba(8,39,26,.06)}
  body.ndk-dash .ov-ontbijt-plek .app-rings .r3{right:-290px;top:-280px;border-color:rgba(8,39,26,.04)}
  body.ndk-dash .ov-ontbijt-plek .app-rings .r4{display:none}
  body.ndk-dash .ov-ontbijt-plek .app-label{color:var(--green);margin-bottom:8px}
  body.ndk-dash .ov-ontbijt-plek .app-ontbijt-kop{font-size:clamp(26px,2.4vw,34px);color:var(--green-deep)}
  body.ndk-dash .ov-ontbijt-plek .app-ontbijt-kop .am{color:var(--roest-t)}
  body.ndk-dash .ov-ontbijt-plek .app-klein{color:var(--muted-d)}
  body.ndk-dash .ov-ontbijt-plek .app-tekstknop,body.ndk-dash .ov-ontbijt-plek p.app-klein a{color:var(--green)}
  body.ndk-dash .ov-ontbijt-plek .app-feiten svg.app-i{color:var(--roest-t)}
  body.ndk-dash .ov-ontbijt-plek .app-chips .app-pijl{color:var(--muted)}
  body.ndk-dash .ov-ontbijt-plek .app-snel{max-width:480px}
  body.ndk-dash .ov-ontbijt-plek .app-snel-knop{background:var(--paper);border:1px solid var(--line);color:var(--green-deep)}
  body.ndk-dash .ov-ontbijt-plek .app-snel-knop[aria-expanded="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--on-green)}
  body.ndk-dash .ov-ontbijt-plek .btn-ghost{color:var(--green);border-color:var(--green)}
  body.ndk-dash .ov-ontbijt-plek .btn-ghost::after{background:var(--green)}
  body.ndk-dash .ov-ontbijt-plek .app-bericht.fout{color:var(--amber-text)}
  body.ndk-dash .ov-ontbijt-plek .app-veld{max-width:420px}
  /* Wie komen er: dezelfde segmentlijst als het paneel Wie op mobiel. */
  body.ndk-dash .ov-wie{display:flex;flex-direction:column;margin:0;min-width:0}
  body.ndk-dash .ov-wie h3{margin:0}
  body.ndk-dash .ov-wie .app-wie{margin-top:6px}
  body.ndk-dash .ov-wie .app-segment{margin:10px 0 8px}
  body.ndk-dash .ov-wie .app-segment button{min-height:44px;font-size:.88rem}
  /* Geen kaart in de kaart: de lijst staat los in de wie-kaart. Vanaf vijf namen scrolt hij zelf
     (wens Sepp, 3 november 2026): vier rijen plus een halve, zodat de afgesneden naam laat
     zien dat er meer is. Elke rij even hoog (61px, de hoogte met bedrijfsnaam), anders passen er
     bij namen zonder bedrijf zes in het vlak. */
  body.ndk-dash .ov-wie .app-kaart{background:none;border:0;box-shadow:none;border-radius:0;padding:0}
  body.ndk-dash .ov-wie .app-wie-deel .app-lijst{max-height:275px;overflow-y:auto;overscroll-behavior:contain}
  body.ndk-dash .ov-wie .app-persoon{min-height:61px}
  body.ndk-dash .ov-wie-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:auto 0 0;padding-top:16px}
  @media(hover:hover){
    body.ndk-dash .ov-ontbijt-plek .app-snel-knop:not([aria-expanded="true"]):hover{background:var(--green-soft);color:var(--green-deep)}
    body.ndk-dash .ov-ontbijt-plek .btn-ghost:hover{color:#fff}
  }
}

/* ===============================================================
   Fase 18.6 (3 november 2026): het vraagteken bij een veld, de
   ledengids en de hulp als paneel. Mobiel eerst; de pc-indeling
   staat in het blok min-width 981 onderaan.
   =============================================================== */

/* Vraagteken achter een veldlabel (ndk_label). Kort label, de uitleg op
   hover, focus of tik. Het rondje is 22px, het raakvlak 44px. */
.veld-kop{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.contact-form .veld-kop label{margin:0}
.vt{position:relative;display:inline-flex}
.vt-knop{display:grid;place-items:center;width:44px;height:44px;margin:-11px -8px -11px -4px;padding:0;border:0;background:none;cursor:pointer;color:var(--green)}
.vt-knop span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);font:700 .76rem/1 var(--sans);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.vt-knop[aria-expanded="true"] span{background:var(--green);border-color:var(--green);color:var(--on-green)}
.vt-knop:focus-visible{outline:none}
.vt-knop:focus-visible span{outline:3px solid var(--green);outline-offset:2px}
.vt-tip{--vt-dx:0px;position:absolute;z-index:30;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:min(280px,calc(100vw - 32px));padding:10px 14px;border-radius:var(--r);background:var(--green-deep);color:var(--on-green);font-size:.86rem;font-weight:500;line-height:1.45;text-align:left;box-shadow:var(--sh-h);transform:translate(calc(-50% + var(--vt-dx)),4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s}
.vt-tip::after{content:"";position:absolute;left:calc(50% - var(--vt-dx));top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--green-deep)}
.vt-knop[aria-expanded="true"]+.vt-tip,.vt:focus-within:not(.vt-weg) .vt-tip{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--vt-dx)),0);transition-delay:0s}
@media(hover:hover){
  .vt:not(.vt-weg):hover .vt-tip{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--vt-dx)),0);transition-delay:0s}
  .vt-knop:hover span{border-color:var(--green)}
}
/* Valt de tip buiten het scherm of het venster, dan schuift site.js hem via --vt-dx terug (het pijltje blijft bij
   het vraagteken), en past hij boven niet, dan komt hij eronder (vt-onder). */
.vt-onder .vt-tip{bottom:auto;top:calc(100% + 8px);transform:translate(calc(-50% + var(--vt-dx)),-4px)}
.vt-onder .vt-tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--green-deep)}

/* Ledengids-paneel. Op mobiel alleen de lijst, elke rij een link. */
.lg{margin-top:20px}
.lg-zoek{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lg-zoek:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,159,8,.2)}
.lg-zoek input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.lg-lijst:not(:has(li:not([hidden]))){display:none}
.lg-d-tags span{white-space:nowrap}
/* Scrollrijen: een vervagende rand zegt dat er meer is. */
.hp-inhoud{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.lg-zoek .zb-i{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted-d);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lg-zoek input{flex:1;min-width:0;min-height:46px;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none}
.lg-teller{margin:10px 2px 0;font-size:.84rem;color:var(--muted-d)}
.lg-teller:empty{display:none}
.lg-lijst{list-style:none;margin:10px 0 0;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.lg-lijst li[hidden]{display:none}
.lg-rij{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 8px;border-radius:999px;color:inherit;text-decoration:none;transition:background-color .15s var(--ease)}
.lg-rij:active{background:var(--paper-dim)}
.lg-rij.actief{background:var(--green-soft)}
.lg-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--green-deep);color:var(--amber);font-weight:700;font-size:.8rem}
.lg-av img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lg-tekst{display:flex;flex-direction:column;min-width:0}
.lg-tekst b{font-weight:600;color:var(--green-deep);line-height:1.3}
.lg-tekst small{font-size:.84rem;color:var(--muted-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-leeg{margin:12px 2px 0;color:var(--muted-d)}
.lg-vlak{display:none}
.lg-detail[hidden]{display:none}
.lg-detail:focus{outline:none}
.lg-d-kop{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;padding-top:24px}
.lg-d-kop .wz-bol{width:104px;margin:0;--bol:var(--goud)}
.lg-d-wie h3{margin:0;font-size:clamp(22px,2vw,28px);color:var(--green-deep)}
.lg-d-sub{margin:4px 0 0;color:var(--muted-d)}
.lg-d-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.lg-d-tags:empty{display:none}
.lg-d-tags span{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;background:var(--sand);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--roest-t)}
.lg-d-logo{align-self:start;max-width:140px}
.lg-d-logo img{display:block;max-width:100%;max-height:52px;width:auto;height:auto}
.lg-d-contact{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.lg-pil{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.9rem;font-weight:600;color:var(--green-deep);text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.lg-pil svg{width:16px;height:16px;flex:none}
.lg-pil .zb-i,.lg-pil .app-i{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lg-d-doe{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.lg-d-over{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.lg-d-over h4{margin:0 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.lg-d-over p{margin:0 0 12px;max-width:62ch}
.lg-d-meer{margin-top:12px}

/* Hulp-paneel en /hulp/ voor een ingelogd lid. */
.hp-inhoud{display:flex;gap:6px;margin:18px 0 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hp-inhoud::-webkit-scrollbar{display:none}
.hp-inhoud a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.88rem;font-weight:600;color:var(--green-deep);text-decoration:none;transition:background-color .2s var(--ease)}
.hp-grid{display:grid;gap:14px;margin-top:18px}
.hp-kaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,26px);scroll-margin-top:90px}
.hp-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green);margin-bottom:12px}
.hp-ico .zb-i{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hp-kaart h3{margin:0 0 10px;font-size:1.2rem;color:var(--green-deep)}
.hp-kaart p{margin:0 0 10px}
.hp-kaart>:last-child{margin-bottom:0}
.hp-kaart a{color:var(--green);font-weight:600;text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.hp-sub{font-weight:600;color:var(--green-deep)}
.hp-klein{font-size:.9rem;color:var(--muted-d)}
.hp-lijst{margin:0 0 10px;padding-left:1.1em}
.hp-lijst li{margin:0 0 6px}
.hp-lijst li::marker{color:var(--roest-t)}
.hp-taken .hp-waar{display:block;font-size:.88rem}
.hp-tijden{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.hp-tijden li{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.hp-tijden li:last-child{border-bottom:1px solid var(--line)}
.hp-tijden b{color:var(--green-deep)}
.hp-tijden span{font-size:.9rem;color:var(--muted-d)}
.hp-let{margin-top:14px;padding:2px 0 2px 16px;border-left:3px solid var(--roest-t)}
.hp-let b{display:block;margin-bottom:6px;color:var(--roest-t)}
.hp-let p{font-size:.92rem}
.hp-kaart kbd{display:inline-block;min-width:1.9em;padding:1px 7px;border:1px solid var(--line);border-radius:999px;background:var(--sand);font:600 .8rem/1.5 var(--sans);text-align:center;color:var(--green-deep)}
.hp-vraag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:clamp(18px,2.2vw,26px);border-radius:var(--r);background:var(--zand-l);border:1.5px dashed var(--line)}
.hp-vraag p{margin:0;max-width:52ch}

@media(hover:hover){
  .lg-rij:not(.actief):hover{background:var(--paper-dim)}
  .lg-pil:hover,.hp-inhoud a:hover{background:var(--green-soft);border-color:var(--green-soft)}
}

@media(min-width:700px){
  .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(min-width:981px){
  /* Master-detail: de lijst links met een eigen scroll, het gekozen lid rechts. */
  body.ndk-dash .lg{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:20px;align-items:start}
  body.ndk-dash .lg-kant{position:sticky;top:0;display:flex;flex-direction:column;max-height:calc(100vh - 140px);min-height:0}
  body.ndk-dash .lg-lijst{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.ndk-dash .lg-zoek,body.ndk-dash .lg-teller{flex:none}
  body.ndk-dash .lg-rij{min-height:52px}
  html.js body.ndk-dash .lg-vlak{display:block;min-height:420px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,34px);position:relative;overflow:hidden}
  body.ndk-dash .lg-vlak::before,body.ndk-dash .lg-vlak::after{content:"";position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(8,39,26,.08);width:300px;height:300px;right:-120px;top:-150px}
  body.ndk-dash .lg-vlak::after{width:460px;height:460px;right:-200px;top:-230px;border-color:rgba(8,39,26,.05)}
  body.ndk-dash .lg-detail{position:relative;z-index:1;animation:mp-in .3s var(--ease)}
  body.ndk-dash .lg-pil,body.ndk-dash .hp-inhoud a{min-height:44px}
  body.ndk-dash .hp-inhoud{flex-wrap:wrap;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
  /* De chips herhalen wat Wie komen er ernaast al toont, en hun anker is op de pc verborgen. */
  body.ndk-dash .ov-ontbijt-plek .app-chips{display:none}
  /* Hulp op de pc in drie kolommen vanaf 1280. */
  body.ndk-dash .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1280px){
  body.ndk-dash .hp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Een smal lid-vlak: het logo onder de naam in plaats van ernaast. */
@media(min-width:981px) and (max-width:1180px){
  body.ndk-dash .lg{grid-template-columns:minmax(230px,270px) minmax(0,1fr)}
  body.ndk-dash .lg-d-kop{grid-template-columns:1fr;gap:12px}
  body.ndk-dash .lg-d-logo{grid-column:auto;justify-self:start}
  body.ndk-dash .ov-boven{grid-template-columns:minmax(0,1fr)}
}
body.ndk-dash .ov-wie .app-segment button{white-space:nowrap}
/* Een liggende iPad krijgt de schil ook: velden op 16px, anders zoomt Safari in. */
@media(pointer:coarse){
  body.ndk-dash .contact-form input,body.ndk-dash .contact-form textarea,body.ndk-dash .contact-form select{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .vt-tip{transition:none}
  body.ndk-dash .lg-detail{animation:none}
}

/* Feedbackronde 5 november 2026 */

/* Uitklap in het hoofdmenu */
.menu-groep{position:relative;display:flex;align-items:center}
.menu-pijl{display:grid;place-items:center;width:26px;height:44px;margin:-8px 0;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.menu-pijl svg{transition:transform .2s var(--ease)}
.menu-sub{position:absolute;left:-12px;top:calc(100% + 10px);z-index:70;display:flex;flex-direction:column;gap:2px;min-width:190px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-h);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.menu-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.menu-groep.open .menu-sub,.menu-groep:has(:focus-visible):not(.dicht) .menu-sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-groep.open .menu-pijl svg,.menu-groep:has(:focus-visible):not(.dicht) .menu-pijl svg{transform:rotate(180deg)}
@media(hover:hover){
  .menu-groep:hover:not(.dicht) .menu-sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .menu-groep:hover:not(.dicht) .menu-pijl svg{transform:rotate(180deg)}
}
nav.menu .menu-sub a{padding:10px 12px;border-radius:12px;white-space:nowrap;transition:background .2s var(--ease)}
nav.menu .menu-sub a::after{display:none}
nav.menu .menu-sub a:hover,nav.menu .menu-sub a.actief{background:var(--sand);color:var(--green-deep)}

/* De ochtend: titel staat er, de uitleg komt bij hover, focus of tik.
   .is-actief zet site.js; zonder JS staat de uitleg gewoon open. */
.och{container-type:inline-size;list-style:none;margin:0;padding:0;display:flex;gap:12px;min-height:clamp(440px,36vw,520px)}
.och-stap{position:relative;isolation:isolate;display:flex;align-items:flex-end;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r);background:var(--sand);box-shadow:var(--sh);transition:flex-grow .4s var(--ease)}
.och-stap.kern{flex-grow:1.25;box-shadow:0 0 0 3px var(--amber),var(--sh)}
.och-stap.open,.och-stap.kern.open{flex-grow:2}
.och-beeld{position:absolute;inset:0;z-index:-2}
.och-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.och-stap.open .och-beeld img{transform:scale(1.04)}
.och-inhoud{width:100%;min-width:0;padding:120px 18px 18px;color:var(--paper);background:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.78) calc(100% - 120px),rgba(0,0,0,0) 100%)}
.och-pill{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:var(--amber);color:var(--green-deep);font-size:.72rem;font-weight:700;line-height:1.3}
.och-kop-h{margin:0;font:inherit}
.och-kop{display:block;width:100%;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.och-kop::before{content:"";position:absolute;inset:0;z-index:1}
.och-kop:focus-visible{outline:none}
.och-stap:has(.och-kop:focus-visible){outline:3px solid var(--green);outline-offset:3px}
.och-tijd{display:block;margin-bottom:2px;color:var(--amber);font-size:1rem;font-weight:800;font-style:italic}
.och-titel{display:block;max-width:10.5em;color:var(--paper);font-size:clamp(18px,1.4vw,20px);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.och-uitleg-in{min-height:0;overflow:hidden}
.och-uitleg p{padding-top:8px;color:var(--paper);font-size:.95rem;line-height:1.45}
.och-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.och-tags li{padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--groen);background:var(--sand);font-size:.8rem}
.och.is-actief .och-uitleg{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .35s var(--ease),opacity .25s var(--ease),visibility .35s}
.och.is-actief .open .och-uitleg{grid-template-rows:1fr;opacity:1;visibility:visible}
.och-plus{display:none;position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--paper);box-shadow:var(--sh);pointer-events:none;transition:transform .3s var(--ease)}
.och.is-actief .och-plus{display:block}
.och-plus::before,.och-plus::after{content:"";position:absolute;left:9px;right:9px;top:15px;height:2px;border-radius:2px;background:var(--groen)}
.och-plus::after{transform:rotate(90deg)}
.och-stap.open .och-plus{transform:rotate(45deg)}
@media(min-width:1100px){
  /* de breedte van een open paneel, vast zodat de tekst niet herschikt tijdens het openen */
  .och.is-actief .och-uitleg p,.och.is-actief .och-tags{width:calc((100cqw - 48px) * 2 / 6.25 - 40px)}
}
/* met de muis opent een paneel vanzelf, dus het kruisje zou niets bedienen */
@media(min-width:1100px) and (hover:hover){.och-stap.open .och-plus{opacity:0}}
@media(max-width:1099px){
  .och{flex-direction:column;gap:10px;min-height:0}
  .och-stap,.och-stap.kern,.och-stap.open,.och-stap.kern.open{flex:none}
  .och-stap{align-items:flex-start;gap:14px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);box-shadow:none}
  .och-beeld{position:static;z-index:auto;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden}
  .och-stap.open .och-beeld img{transform:none}
  .och-inhoud{flex:1;width:auto;margin:0;padding:0;color:inherit;background:none}
  .och-kop{color:var(--green-deep)}
  .och-tijd{color:var(--amber-text)}
  .och-titel{max-width:none;color:var(--green-deep);font-size:1.1rem}
  .och-uitleg p{color:var(--muted)}
  .och-tags li{border-color:var(--line);color:var(--green-deep);background:var(--sand)}
  .och.is-actief .och-plus{position:relative;top:auto;right:auto;display:block;flex:none;background:var(--sand)}
  .och-plus::before,.och-plus::after{background:var(--green)}
  .och-stap.kern{background:var(--paper);border:2px solid var(--amber);box-shadow:none}
}

/* De expertsessie: donkergroen panel met kringen, kernonderdeel van de ochtend */
.expert{position:relative;isolation:isolate;overflow:hidden;margin:12px;border-radius:var(--r-lg);padding-block:clamp(56px,7vw,104px);background:var(--zand-l);color:var(--groen)}
.expert .kring{position:absolute;z-index:-1;right:-14vmax;top:-22vmax;width:44vmax;height:44vmax;border:1px solid rgba(8,39,26,.09);border-radius:50%;pointer-events:none}
.expert .kring.k2{right:-24vmax;top:-32vmax;width:66vmax;height:66vmax;border-color:rgba(8,39,26,.05)}
.expert .ph-boog{z-index:-1}
.expert-kop{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center}
.expert-kop>*{min-width:0}
.expert .lead{margin:16px 0 22px}
.expert-foto{overflow:hidden;border-radius:var(--r);transform:rotate(2deg);transition:transform .3s var(--ease)}
.expert-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.expert-stappen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin:clamp(28px,4vw,48px) 0 0;padding:clamp(22px,3vw,32px) 0 0;border-top:1px solid rgba(8,39,26,.14)}
.expert-stappen .nr{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--goud);color:var(--groen);font-weight:700}
.expert-stappen h3{margin:12px 0 4px;color:var(--groen);font-size:1.05rem;font-weight:700}
.expert-stappen p{color:var(--muted);font-size:.95rem}
@media(hover:hover){.expert-foto:hover{transform:rotate(0)}}
@media(max-width:880px){
  .expert-kop{grid-template-columns:1fr}
  .expert-foto{transform:none}
}
@media(max-width:640px){
  .expert-stappen{grid-template-columns:1fr;gap:16px}
  .expert-stappen li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px}
  .expert-stappen .nr{grid-row:1 / span 2}
  .expert-stappen h3{margin:4px 0 2px}
}

/* Nieuwskaart: volle foto, tekst eroverheen, pijl rechtsonder */
.nk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
.nk{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;max-width:100%;aspect-ratio:4/3;min-height:260px;padding:0;overflow:clip;border-radius:var(--r);box-shadow:var(--sh);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.nk-beeld{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.nk-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
/* tekst direct op de foto, onderaan een neutrale schaduw die met de tekst meegroeit */
.nk-tekst{width:100%;min-width:0;padding:64px 76px 22px 22px;border-radius:0 0 var(--r) var(--r);background:linear-gradient(to top,rgba(0,0,0,.84) 0,rgba(0,0,0,.72) calc(100% - 64px),rgba(0,0,0,0) 100%)}
.nk-los .nk-tekst{padding-right:22px}
.nk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.nk-cat{padding:3px 10px;border-radius:999px;background:var(--amber);color:var(--green-deep);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.nk-datum{color:var(--paper);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.nk h3{min-height:2.36em;margin:8px 0 0;color:var(--paper);font-size:clamp(18px,1.7vw,23px);font-weight:700;line-height:1.18;letter-spacing:-.02em;overflow-wrap:break-word}
.nk h3 a{color:inherit}
.nk-vlak{position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.nk h3 a:focus-visible{outline:none}
.nk:has(h3 a:focus-visible){outline:3px solid var(--green);outline-offset:3px}
/* de kaartschaduw is een drop-shadow en volgt dus de echte vorm, inclusief het gat rond de pijl; een box-shadow liep als rechthoek langs het gat */
.nk:not(.nk-los){box-shadow:none;filter:drop-shadow(0 2px 7px rgba(8,39,26,.08));transition:transform .28s var(--ease),filter .28s var(--ease)}
/* de pijl zit in een uitsnede van de hoek: een gouden rondje met een rand in de paginakleur en een dunne boog erom */
.nk-pijl{position:absolute;right:8px;bottom:8px;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--amber);color:var(--green-deep);transition:background .25s var(--ease)}
/* de ruimte om de pijl is een echte uitsnede: de foto en de tekstlaag worden daar doorzichtig, dus de pagina schijnt erdoor en er loopt geen rand of schaduw van de kaart doorheen */
.nk:not(.nk-los) .nk-beeld,.nk:not(.nk-los) .nk-tekst{-webkit-mask:radial-gradient(circle at calc(100% - 36px) calc(100% - 36px),transparent 45.5px,#000 46px);mask:radial-gradient(circle at calc(100% - 36px) calc(100% - 36px),transparent 45.5px,#000 46px)}
/* schaduwboog: de foto wordt rond de uitsnede donker en loopt naar buiten uit, zodat de knop los lijkt */
.nk:not(.nk-los) .nk-beeld::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(100% - 36px) calc(100% - 36px),rgba(0,0,0,.65) 46px,rgba(0,0,0,.35) 70px,transparent 120px);pointer-events:none}
.nk-pijl svg{transition:transform .3s var(--ease)}
.nk:has(h3 a:focus-visible) .nk-pijl{background:var(--paper)}
.nk:has(h3 a:focus-visible) .nk-pijl svg{transform:rotate(-45deg)}
@media(hover:hover){
  .nk:hover{transform:translateY(-6px);box-shadow:var(--sh-h)}
  .nk:not(.nk-los):hover{box-shadow:none;filter:drop-shadow(0 20px 22px rgba(8,39,26,.18))}
  .nk:hover .nk-beeld img{transform:scale(1.04)}
  .nk:hover .nk-pijl{background:var(--paper)}
  .nk:hover .nk-pijl svg{transform:rotate(-45deg)}
}
.nk-grid.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.nk-grid.drie h3{font-size:clamp(17px,1.4vw,19px)}
@media(max-width:1020px){.nk-grid.drie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.nk-grid,.nk-grid.drie{grid-template-columns:minmax(0,1fr)}}
.blk.nieuws-lijst{padding-top:clamp(8px,1.2vw,16px)}
.nk-meer{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px)}
.nk-meer[hidden]{display:none}

/* Homepage-slider met de nieuwskaarten */
.nk-kop-rechts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px 20px}
.nk-nav{display:flex;gap:8px}
.nk-nav-knop{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--green);border-radius:50%;background:none;color:var(--green);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)}
.nk-nav-knop:disabled{opacity:.3;cursor:default}
@media(hover:hover){.nk-nav-knop:not(:disabled):hover{background:var(--green);color:var(--on-green)}}
.nk-slider{--g:clamp(14px,2vw,24px);--ruim:clamp(18px,3vw,40px);display:flex;gap:var(--g);margin:calc(-1 * var(--ruim) + 10px) calc(-1 * var(--ruim)) calc(-1 * var(--ruim));padding:calc(var(--ruim) - 10px) var(--ruim) var(--ruim);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ruim);scrollbar-width:none}
.nk-slider::-webkit-scrollbar{display:none}
.nk-slider .nk{flex:0 0 calc((100% - 2 * var(--ruim) - 2 * var(--g)) / 2.25);scroll-snap-align:start}
@media(max-width:820px){.nk-kop-rechts{justify-content:flex-start}}
@media(max-width:720px){
  .nk-nav{display:none}
  .nk-slider{--g:12px}
  .nk-slider .nk{flex-basis:80%}
}

/* Gastpagina en contact: het hele formulier boven de vouw. Daarom breed, met de
   velden in twee kolommen, en op een telefoon direct onder de kop. */
.page-hero.gast-hero{padding-block:clamp(20px,2.8vw,40px)}
.gast-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(660px,60%));gap:clamp(24px,4vw,56px);align-items:start}
.gast-hero h1{font-size:clamp(32px,4vw,56px)}
.gast-hero .ev-form-kaart{position:static;order:0;scroll-margin-top:100px}
.gast-hero .contact-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:clamp(18px,2.2vw,28px);border-radius:var(--r)}
.gast-hero .contact-form>*{grid-column:1/-1;min-width:0}
.gast-hero .contact-form>div:has(#ev-datum),.gast-hero .contact-form>div:has(#ev-naam),.gast-hero .contact-form>div:has(#ev-mail),.gast-hero .contact-form>div:has(#ev-bedrijf),.gast-hero .contact-form>div:has(#ev-als),.gast-hero .contact-form>div:has(#ev-via){grid-column:auto}
.gast-hero .contact-form>.btn{grid-column:1;justify-self:start}
.gast-hero .contact-form>.btn+.form-sub{grid-column:2;align-self:center}
.gast-hero .contact-form label{margin-bottom:4px}
.gast-hero .contact-form .rij{gap:12px 14px}
.gast-hero .contact-form textarea{min-height:92px}
.gast-hero .contact-form .form-kop{margin:0}
.gast-feiten{list-style:none;display:grid;gap:14px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid rgba(8,39,26,.14)}
.gast-feiten li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px}
.gast-feiten b{color:var(--groen);font-weight:600}
.gast-feiten span{color:var(--groen)}
.gast-feiten .tlink{display:table;margin-top:4px}
.gast-foto{display:none}
.gast-hero #ev-via+.form-sub{display:none}
.gast-wie-link{text-align:right}
.ci-persoon .wz-bol{flex:none;width:56px;margin:0;--bol:var(--goud)}
.contact-gegevens{margin-top:24px;padding-top:20px;border-top:1px solid rgba(8,39,26,.14)}
.contact-gegevens .ci>.ico{margin-inline:6px}
.contact-gegevens .tlink{display:inline-block;margin-top:4px;font-size:.95rem}
@media(max-width:960px){
  .gast-hero-in{grid-template-columns:1fr;row-gap:12px}
  .gast-hero-tekst{display:contents}
  .gast-hero-tekst>.crumb,.gast-hero-tekst>h1{order:-1;margin-bottom:0}
  .gast-hero .contact-form,.gast-hero .ev-form-kaart{order:0}
  .gast-hero-tekst>.intro,.gast-feiten,.contact-gegevens{order:1;margin-top:0}
}
@media(max-width:820px){.gast-wie-link{text-align:left}}
@media(max-width:560px){
  .page-hero.gast-hero{padding-inline:12px;padding-block:12px 18px}
  .gast-hero-tekst>*{padding-inline:6px}
  .gast-hero-tekst>.crumb{display:none}
  .gast-hero h1{font-size:clamp(25px,7.2vw,28px)}
  .gast-hero .contact-form{gap:8px 10px;padding:14px 12px}
  .gast-hero .contact-form>div:first-of-type .form-sub{display:none}
  .gast-hero .contact-form input:not([type=checkbox]),.gast-hero .contact-form select{min-height:44px;padding-block:8px;padding-inline:12px}
  .gast-hero .contact-form textarea{min-height:76px;padding:8px 12px}
  .gast-hero .contact-form label{font-size:.9rem;margin-bottom:2px}
  .gast-hero .contact-form .consent{font-size:.8rem;line-height:1.35}
  .gast-hero .contact-form .rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  .gast-hero .contact-form>div:has(#ev-datum),.gast-hero .contact-form>div:has(#ev-via){grid-column:1/-1}
  .gast-hero .contact-form>.btn{grid-column:1/-1;justify-self:stretch;justify-content:center;padding-block:12px}
  .gast-hero .contact-form>.btn+.form-sub{display:none}
}
@media(min-width:961px) and (min-height:840px){
  .gast-foto{display:block;width:min(100%,300px);margin-top:28px;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh);transform:rotate(-2deg)}
  .gast-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
}

/* Wat je bij ons vindt: drie feiten als groot getal in een gouden bol met kringen */
.vindt{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin:0;padding:0}
.vindt-tegel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(300px,27vw,370px);padding:clamp(22px,2.4vw,32px);overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.vindt-tegel .label{margin:0}
.vindt-tegel h3{margin:auto 0 8px;font-size:clamp(22px,1.9vw,27px);overflow-wrap:normal}
.vindt-tegel>p:last-child{color:var(--muted)}
.vindt-getal{--maat:clamp(132px,11.5vw,166px);position:absolute;z-index:-1;top:calc(var(--maat) * -.14);right:calc(var(--maat) * -.14);display:grid;place-items:center;width:var(--maat);aspect-ratio:1;padding:18% 18% 0 0;border-radius:50%;background:var(--bol,var(--goud));color:var(--groen);font-size:calc(var(--maat) * .42);line-height:1;letter-spacing:-.04em;transition:transform .35s var(--ease)}
.vindt-getal::before,.vindt-getal::after{content:"";position:absolute;inset:-26px;border:1px solid rgba(8,39,26,.12);border-radius:50%;transition:transform .45s var(--ease);pointer-events:none}
.vindt-getal::after{inset:-54px;border-color:rgba(8,39,26,.07)}
.vindt-tegel:nth-child(2){--bol:var(--zand)}
@media(hover:hover){
  .vindt-tegel:hover .vindt-getal{transform:scale(1.05)}
  .vindt-tegel:hover .vindt-getal::before{transform:scale(1.06)}
  .vindt-tegel:hover .vindt-getal::after{transform:scale(1.1)}
}
@media(max-width:1020px){
  .vindt{grid-template-columns:1fr}
  .vindt-tegel{min-height:220px}
  .vindt-getal{--maat:136px}
}
@media(max-width:380px){.vindt-getal{--maat:108px}}

@media(prefers-reduced-motion:reduce){
  .och-stap,.och-beeld img,.och-plus,.och.is-actief .och-uitleg,.expert-foto,.nk,.nk-beeld img,.nk-pijl,.nk-pijl svg,.menu-sub,.menu-pijl svg,.vindt-getal,.vindt-getal::before,.vindt-getal::after{transition:none}
}

/* Waarom-kaarten: de hele kaart is de link (stretched link op de kop), met een kleine CTA onderaan */
.card-link{display:flex;flex-direction:column}
.card-link h3 a{color:inherit}
.card-link h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.card-link .card-cta{margin-top:auto;padding-top:16px;font-weight:600;font-size:.95rem;color:var(--green-deep);display:inline-flex;gap:8px;align-items:center}
.card-link .card-cta .a{display:inline-block;transition:transform .25s var(--ease)}
.card-link:focus-within{outline:2px solid var(--green);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.card-link:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}.card-link:hover .card-cta{color:var(--amber-text)}.card-link:hover .card-cta .a{transform:translateX(4px)}}
@media (max-width:640px){.cards3 .card-link .card-cta{grid-column:2}}

/* Kennisartikel: inhoudsopgave links die meescrolt (patroon van het Anthropic-blog), tekst rechts.
   Onder 1000px blijft het de uitklapbare lijst boven de tekst. */
.art-deel a svg{display:block;flex:none}
.art-deel a{justify-content:center;min-width:44px;padding:0 12px}
@media(min-width:1000px){
  .art-layout.met-toc{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,680px);grid-template-areas:"toc body" "toc deel";gap:0 clamp(40px,6vw,96px);justify-content:center;align-items:start}
  .art-layout.met-toc .art-toc{grid-area:toc;position:sticky;top:104px;align-self:start;max-width:none;margin:clamp(30px,4vw,50px) 0 0;background:none;border:0;border-radius:0;max-height:calc(100vh - 128px);overflow:auto}
  .art-layout.met-toc .art-toc summary{min-height:0;padding:0 0 10px;pointer-events:none;cursor:default;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .art-layout.met-toc .art-toc summary::after{display:none}
  .art-layout.met-toc .art-toc ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
  .art-layout.met-toc .art-toc li a{border-top:0;padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:.95rem;line-height:1.35;font-weight:500;color:var(--muted)}
  .art-layout.met-toc .art-toc li a:hover{color:var(--green-deep)}
  .art-layout.met-toc .art-toc li a.actief{color:var(--green-deep);font-weight:700;border-left-color:var(--amber)}
  .art-layout.met-toc .art-body{grid-area:body;margin-left:0;margin-right:0;max-width:none}
  .art-layout.met-toc .art-deel{grid-area:deel;margin-left:0;margin-right:0;max-width:none}
}