/* Codex publieke homepage — bordeaux/goud huisstijl (hoofdstuk 22.4), tijdlijn-richting.
   Zelfstandige stylesheet; login/signup gebruiken styles.css. */
:root{
  --bordeaux:#6B2144; --bordeaux-bright:#8C2D5A; --bordeaux-deep:#6B2144;
  --gold:#8C2D5A; --gold-soft:#EDDFE6; --cream:#FFFFFF; --paper:#F6EDF1;
  --ink:#231B1F; --muted:#6B5A61; --line:#E4DADF;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;color:var(--ink);text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux-bright);}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);display:inline-block;}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:8px;padding:14px 26px;font-family:var(--sans);font-size:.98rem;font-weight:650;cursor:pointer;background:var(--bordeaux-bright);color:#fff;transition:background .15s,transform .15s;}
.btn:hover{background:var(--bordeaux-deep);transform:translateY(-1px);}
.btn-gold{background:var(--gold);color:#FFFFFF;}
.btn-gold:hover{background:#6B2144;}
.btn-ghost{background:transparent;color:var(--bordeaux-deep);font-weight:650;padding:14px 6px;}
.btn-sm{padding:10px 18px;font-size:.9rem;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px;}

/* Header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:.04em;color:var(--bordeaux-deep);display:inline-flex;align-items:center;}
.brand b{color:var(--gold);font-weight:700;}
.hdr .brand img{height:52px;width:52px;display:block;}
/* Wordmark codex.care — "codex" in inkt, ".care" in petrol (spec §11.1) */
.wm{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;line-height:1;}
.wm .wm-word{font-family:var(--serif);font-weight:700;letter-spacing:.01em;color:var(--ink);display:inline-flex;align-items:baseline;line-height:1;}
.wm .wm-care{color:var(--bordeaux-bright);}
.wm .wm-tag{font-family:var(--serif);font-style:italic;font-size:.34em;color:var(--bordeaux-bright);margin-top:.45em;}
.hdr .brand.wm{font-size:1.9rem;}
.foot-brand.wm{font-size:1.7rem;margin-bottom:12px;}
/* Embleem als groot icoon in de hero */
.hero-emblem{width:150px;height:150px;display:block;margin:0 0 22px;filter:drop-shadow(0 16px 26px rgba(78,30,34,.28));}
@media (max-width:760px){.hero-emblem{width:112px;height:112px;margin-bottom:16px;}}
.hoe-video{max-width:960px;margin:28px auto 8px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;}
.hoe-video iframe{width:100%;height:100%;border:0;display:block;}
.nav-links a.active{color:var(--bordeaux-bright);font-weight:700;}
/* Merkbetekenis onder de menubalk */
.brandline{text-align:center;padding:11px 16px 7px;background:var(--cream);font-family:var(--serif);font-size:1.1rem;letter-spacing:.03em;color:var(--bordeaux-deep);}
.brandline b{color:var(--gold);font-weight:700;}

/* Nieuws / blog */
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 22px;}
.prijs-grid-ai{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;align-items:stretch;max-width:960px;margin-inline:auto;}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:26px;}
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(22,41,43,.05);transition:transform .15s,box-shadow .15s;}
.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(78,30,34,.45);}
.pc-img{aspect-ratio:16/9;overflow:hidden;background:var(--cream);}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pc-noimg{display:grid;place-items:center;}
.pc-noimg img{width:74px;height:74px;object-fit:contain;}
.pc-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1;}
.pc-date{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.02em;}
.post-card h2,.post-card h3{font-family:var(--serif);font-size:1.25rem;color:var(--bordeaux-deep);margin:2px 0;}
.post-card p{color:var(--ink);font-size:.95rem;margin:0;flex:1;}
.pc-more{color:var(--bordeaux-bright);font-weight:650;font-size:.9rem;margin-top:8px;}

/* Artikel */
.post-back{display:inline-block;color:var(--bordeaux-bright);font-weight:600;text-decoration:none;margin-bottom:18px;}
.post-title{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.7rem);color:var(--bordeaux-deep);margin:.1em 0;line-height:1.15;}
.post-author{color:var(--muted);font-size:.9rem;margin:.2em 0 0;}
.post-hero{margin:22px 0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;}
.post-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.post-lead{font-size:1.15rem;color:var(--ink);font-weight:500;line-height:1.55;margin:6px 0 18px;}
.post-body{font-size:1.05rem;line-height:1.7;color:var(--ink);}
.post-body p{margin:0 0 1.1em;}
.post-cta{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 2.3fr;gap:40px;align-items:start;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.contact-details{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px;}
.contact-details li{display:flex;flex-direction:column;gap:2px;}
.contact-details .cd-lb{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.contact-details a{color:var(--bordeaux-deep);text-decoration:none;font-weight:600;}
.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 1px 3px rgba(22,41,43,.05);}
.contact-card .field{margin-bottom:14px;}
.contact-card label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;}
.contact-card input,.contact-card textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.98rem;background:#fff;}
.form-note{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-weight:600;font-size:.92rem;}
.form-note.ok{background:var(--green-soft,#E3EFE1);color:#2f5b2e;border:1px solid #b9d6b6;}
.form-note.err{background:#F7E4E1;color:#8f2e22;border:1px solid #e2b3ab;}
.foot-brand{margin-bottom:6px;}
.foot-brand img{height:76px;width:76px;display:block;}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink);}
.nav-links a:hover{color:var(--bordeaux-bright);}
.langflags{display:flex;align-items:center;gap:8px;}
.flag{display:inline-flex;align-items:center;text-decoration:none;opacity:.55;transition:opacity .15s,transform .15s;border-radius:3px;}
.flag:hover{opacity:1;transform:translateY(-1px);}
.flag.active{opacity:1;box-shadow:0 0 0 2px var(--gold);}
.flagimg{width:26px;height:17px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18);}
.flagcode{display:inline-block;min-width:24px;text-align:center;font-size:.7rem;font-weight:700;color:var(--ink);padding:3px 5px;border-radius:4px;background:rgba(0,0,0,.06);}
/* Taalvlaggen als eigen rij onder het merkvenster. Op desktop centreren en
   afbreken over meerdere regels; op smalle schermen horizontaal scrollen zodat veel talen
   de layout nooit breken. */
.langbrand{text-align:center;font-family:"Iowan Old Style",Palatino,Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--bordeaux-deep,#6B2144);background:var(--cream);padding:9px 16px 0;letter-spacing:.02em;}
/* Gerelateerde artikelen onder een blogpost (interne linkstructuur, SEO) */
.post-related{margin-top:34px;padding:18px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px;}
.post-related h2{margin:0 0 10px;color:var(--bordeaux-deep);}
.post-related ul{margin:0 0 10px;padding-left:20px;}
.post-related li{margin:4px 0;}
.post-related a{color:var(--bordeaux-deep);font-weight:600;}
.langbar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;padding:5px 16px 9px;background:var(--cream);border-bottom:1px solid var(--line);}
@media (max-width:640px){
  .langbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 12px 8px;scrollbar-width:thin;}
  .langbar .flag{flex:0 0 auto;}
}

/* Hero */
.hero{padding:72px 0 64px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.6rem,5vw,4rem);color:var(--bordeaux-deep);margin:20px 0 0;letter-spacing:-.01em;}
.hero h1 .g{color:var(--gold);font-style:italic;}
.lead{font-size:1.12rem;color:#4a3f38;max-width:34rem;margin:22px 0 30px;}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.trust-inline{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:.82rem;font-weight:600;color:var(--muted);}
.trust-inline span{display:inline-flex;align-items:center;gap:7px;}
.ic{width:16px;height:16px;color:var(--gold);flex:none;}

/* Timeline card */
.tl-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -30px rgba(78,30,34,.5);padding:26px;position:relative;}
.tl-card .head{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.badge-moments{position:absolute;top:-20px;right:-14px;width:66px;height:66px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;text-align:center;line-height:1;box-shadow:0 8px 20px -6px rgba(184,134,47,.7);}
.badge-moments b{font-family:var(--serif);font-size:1.5rem;display:block;}
.badge-moments span{font-size:.5rem;font-weight:700;letter-spacing:.1em;}
.tl{display:flex;flex-direction:column;gap:14px;}
.tl-item{display:flex;gap:14px;}
.tl-dot{flex:none;width:14px;height:14px;border-radius:4px;border:2px solid var(--gold);background:var(--paper);margin-top:6px;}
.tl-item.done .tl-dot{background:var(--gold);}
.tl-body{flex:1;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.tl-body .k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.tl-body .t{font-family:var(--serif);font-size:1.06rem;color:var(--ink);margin:2px 0;}
.tl-body .m{font-size:.82rem;color:var(--muted);}
.pill{display:inline-block;margin-top:8px;background:var(--gold-soft);color:#6b5012;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;}

/* Trust strip */
.strip{background:var(--bordeaux-deep);color:#EBD9CF;}
.strip .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.strip span{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600;}
.strip .ic{color:var(--gold);}

/* Sections */
.section{padding:88px 0;}
.center{text-align:center;}
.section h2{font-size:clamp(1.9rem,3.3vw,2.7rem);color:var(--bordeaux-deep);margin-top:10px;}
.section .sub{color:var(--muted);max-width:38rem;margin:14px auto 0;font-size:1.02rem;}
.center .eyebrow{justify-content:center;}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;text-align:start;}
.step{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;position:relative;box-shadow:0 1px 3px rgba(22,41,43,.05);}
.step .num{position:absolute;top:22px;right:24px;font-family:var(--serif);font-size:1.7rem;color:var(--line);font-weight:700;}
.step .si{width:44px;height:44px;border-radius:12px;background:var(--cream);display:grid;place-items:center;color:var(--bordeaux-bright);margin-bottom:18px;}
.step h3{font-size:1.22rem;margin-bottom:8px;}
.step p{color:var(--muted);font-size:.95rem;}

/* Moments (bordeaux) */
.moments{background:var(--bordeaux);color:#F3E4DA;}
.moments h2{color:#fff;}
.moments .sub{color:#E4C7BC;}
.moments .eyebrow{color:var(--gold);}
.moments .eyebrow::before{background:var(--gold);}
.m-list{max-width:860px;margin:46px auto 0;display:flex;flex-direction:column;gap:14px;text-align:start;}
.m-row{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px 22px;}
.m-row .mi{flex:none;color:var(--gold);width:24px;height:24px;margin-top:2px;}
.m-row h3{color:#fff;font-size:1.16rem;margin-bottom:4px;}
.m-row p{color:#E4C7BC;font-size:.92rem;}

/* Testimonial */
.quote{text-align:center;padding:96px 0;}
.quote .mark{font-family:var(--serif);color:var(--gold);font-size:2.4rem;line-height:0;}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--bordeaux-deep);max-width:40rem;margin:26px auto 20px;line-height:1.4;}
.quote cite{font-style:normal;font-weight:700;color:var(--muted);font-size:.9rem;letter-spacing:.02em;}

/* CTA */
.cta-wrap{padding-bottom:96px;}
.cta{background:linear-gradient(135deg,var(--bordeaux-bright),var(--bordeaux-deep));color:#fff;border-radius:22px;text-align:center;padding:66px 28px;}
.cta h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);}
.cta p{color:#EBD3C8;margin:12px 0 26px;}

/* Footer */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:56px 0 40px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;}
.foot .brand{margin-bottom:12px;}
.foot p{color:var(--muted);font-size:.9rem;max-width:22rem;}
.foot h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bordeaux-bright);margin:0 0 14px;}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.foot ul a{color:var(--ink);font-size:.92rem;}
.foot ul a:hover{color:var(--bordeaux-bright);}
.foot-bar{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.85rem;}

@media(max-width:900px){
  .hero{padding:48px 0 40px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .badge-moments{right:8px;}
  .section{padding:64px 0;}
  .steps{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  /* Op een smal scherm verdween het hele menu: alleen de knoppen bleven staan, en op
     elke pagina behalve de homepage kwam je zo nergens meer. Nu klapt het menu open
     met de knop hieronder. */
  .hdr .nav-burger{display:inline-flex;}
  .hdr .nav-links{display:none;}
  .hdr.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    width:100%;padding:10px 0 6px;border-top:1px solid var(--line,#E7DDCF);}
  .hdr.open .nav-links a,.hdr.open .nav-links form{width:100%;}
  .hdr.open .nav-links a{padding:9px 4px;}
  .hdr .wrap.nav{flex-wrap:wrap;}
  .nav-right{width:100%;}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;}.btn:hover{transform:none;}}

/* ================= "Hoe werkt het"-pagina ================= */
.hiw-hero{text-align:center;padding:56px 0 26px;}
.hiw-hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);color:var(--bordeaux-deep);margin:.1em 0;line-height:1.12;text-wrap:balance;}
.hiw-hero .sub{font-size:1.15rem;color:var(--ink);max-width:42ch;margin:16px auto 24px;}
.hiw-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hiw-video{max-width:760px;margin:36px auto 0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 34px 80px -34px rgba(78,30,34,.55);}
.hiw-video iframe{width:100%;height:100%;border:0;display:block;}

.hiw-steps{display:flex;flex-direction:column;gap:60px;padding:64px 0 20px;}
.hiw-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.hiw-step:nth-child(even) .hiw-art{order:2;}
.hiw-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--bordeaux-deep);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.15rem;margin-bottom:14px;}
.hiw-step h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);color:var(--bordeaux-deep);margin:0 0 .3em;line-height:1.2;}
.hiw-step p{font-size:1.08rem;color:var(--ink);max-width:44ch;margin:0;}
.hiw-art{display:flex;justify-content:center;}

/* mockup-kit: mini "systeemschermen" in huisstijl */
.mock{width:100%;max-width:370px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 64px -34px rgba(78,30,34,.5);overflow:hidden;}
.mock-top{background:var(--bordeaux-deep);color:#FFFFFF;padding:11px 15px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:9px;}
.mock-top .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);flex:none;}
.mock-body{padding:16px;display:flex;flex-direction:column;gap:11px;}
.mline{height:9px;border-radius:6px;background:var(--cream);}
.mline.sh{width:64px;}
.minput{border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--muted);font-size:.85rem;background:#fff;}
.mbtn{align-self:flex-start;background:var(--bordeaux-bright);color:#fff;border-radius:8px;padding:9px 16px;font-weight:650;font-size:.85rem;}
.mbtn.gold{background:var(--gold);color:#FFFFFF;}
.mbtn.wide{align-self:stretch;text-align:center;}
.mseg{display:flex;gap:6px;}
.mseg span{flex:1;text-align:center;border:1.5px solid var(--line);border-radius:8px;padding:7px 3px;font-size:.7rem;font-weight:650;color:var(--muted);}
.mseg span.on{background:var(--bordeaux-deep);border-color:var(--bordeaux-deep);color:#fff;}
.mrow{display:flex;align-items:center;gap:10px;}
.mopt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-size:.85rem;color:var(--ink);}
.mopt.on{border-color:var(--bordeaux-deep);background:#fbf3ee;}
.mradio{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);flex:none;}
.mopt.on .mradio{border-color:var(--bordeaux-deep);background:radial-gradient(circle,var(--bordeaux-deep) 42%,transparent 46%);}
.mav{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;color:var(--bordeaux-deep);font-weight:700;flex:none;font-size:.9rem;}
.mav.b{background:var(--bordeaux-deep);color:#fff;}
.mname{font-size:.9rem;color:var(--ink);font-weight:600;}
.mchip{display:inline-block;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--gold-soft);color:#7a5a12;}
.mchip.green{background:#DDEDD9;color:#3f7a3f;}
.mcheck{width:32px;height:32px;border-radius:50%;background:#DDEDD9;color:#3f7a3f;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;}
.menv-lg{width:74px;height:auto;margin:4px auto 2px;display:block;color:var(--gold);}
.mtitle{font-family:var(--serif);color:var(--bordeaux-deep);font-weight:700;font-size:1.02rem;}

.hiw-band{background:var(--bordeaux-deep);color:#FFFFFF;border-radius:20px;padding:46px 30px;text-align:center;margin:26px 0;}
.hiw-band h2{font-family:var(--serif);color:#fff;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 8px;text-wrap:balance;}
.hiw-band p{color:#E7D3C8;margin:0 0 22px;max-width:46ch;margin-left:auto;margin-right:auto;}
.hiw-fine{color:var(--muted);font-size:.85rem;margin-top:14px;}

@media(max-width:760px){
  .hiw-step{grid-template-columns:1fr;gap:20px;}
  .hiw-step:nth-child(even) .hiw-art{order:0;}
  .hiw-art{order:-1;}
  .hiw-steps{gap:52px;}
}
/* compacte "meer"-kaarten + FAQ op de Wat-is-Codex-pagina */
.miniftrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:24px 0;}
.miniftr{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;box-shadow:0 16px 40px -30px rgba(78,30,34,.4);}
.miniftr .ic{font-size:1.6rem;line-height:1;}
.miniftr h3{font-family:var(--serif);color:var(--bordeaux-deep);font-size:1.12rem;margin:9px 0 4px;}
.miniftr p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.55;}
.faq-wrap{max-width:720px;margin:0 auto;}
.faq-q{border-top:1px solid var(--line);padding:16px 0;}
.faq-q:last-child{border-bottom:1px solid var(--line);}
.faq-q h3{font-family:var(--serif);color:var(--bordeaux-deep);font-size:1.12rem;margin:0 0 5px;}
.faq-q p{color:var(--muted);margin:0;line-height:1.6;}
.hiw-caption{text-align:center;color:var(--muted);font-size:.9rem;margin:12px 0 0;}
.center-h2{text-align:center;font-family:var(--serif);color:var(--bordeaux-deep);font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.25em 0 0;line-height:1.15;}
/* Feature-kaartenraster (Wat-is-Codex — bewust anders dan de stappen op hoe-het-werkt) */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin:26px 0;}
.feat-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;box-shadow:0 20px 52px -36px rgba(78,30,34,.45);display:flex;flex-direction:column;}
.feat-card .fc-art{display:flex;justify-content:center;margin-bottom:16px;}
.feat-card .fc-art .mock{max-width:300px;box-shadow:0 14px 36px -26px rgba(78,30,34,.5);}
.feat-card .eyebrow{margin-bottom:4px;}
.feat-card h2{font-family:var(--serif);color:var(--bordeaux-deep);font-size:1.32rem;margin:4px 0 7px;line-height:1.2;}
.feat-card p{color:var(--ink);font-size:1rem;margin:0;line-height:1.6;}
/* Codex-avatar met de merknaam op de borst (gecentreerd) */
.avatar-wrap{position:relative;display:inline-block;line-height:0;}
.avatar-wrap img{width:180px;max-width:100%;height:auto;display:block;}
.avatar-name{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:700;font-size:.6rem;letter-spacing:.18em;color:var(--bordeaux-deep);text-shadow:0 1px 1px rgba(255,255,255,.65);pointer-events:none;}

/* Features-dropdown in de navigatie */
.nav-dd{position:relative;display:inline-block}
.nav-dd>a .nav-caret{font-size:.7em;opacity:.6;margin-left:2px}
.nav-dd-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;z-index:80}
.nav-dd-menu a{display:block;white-space:nowrap;padding:10px 18px;background:#fff;color:var(--ink);text-decoration:none;font-size:.95rem}
.nav-dd-menu a:first-child{border-radius:12px 12px 0 0;padding-top:14px}
.nav-dd-menu a:last-child{border-radius:0 0 12px 12px;padding-bottom:14px}
.nav-dd-menu a:hover{background:var(--cream)}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:block}
.nav-dd-menu{filter:drop-shadow(0 14px 30px rgba(78,30,34,.22))}
@media (max-width:900px){.nav-dd-menu{position:static;transform:none;display:none;padding-top:0}.nav-dd:hover .nav-dd-menu{display:none}}

/* iOS zoomt automatisch (en blijvend) in op invoervelden kleiner dan 16px —
   op mobiel dus altijd minstens 16px (contact- en partnerformulier). */
@media (max-width: 780px) {
  input, select, textarea { font-size: 16px !important; }
}

.prijstegel{display:flex;flex-direction:column;gap:6px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(22,41,43,.05);padding:18px 14px;}
.prijstegel.is-goud{border-color:var(--gold);}
.prijstegel .pt-titel{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bordeaux-bright);}
.prijstegel .pt-prijs{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--bordeaux-bright);}
.prijstegel .pt-per{font-size:.8rem;font-weight:400;color:var(--muted);}
.prijstegel .pt-note{font-size:.82rem;color:var(--muted);}
.prijs-kop2{font-family:var(--serif);color:var(--bordeaux-deep);font-size:1.5rem;margin:34px 0 6px;text-align:center;}
.prijs-kop3{font-family:var(--serif);color:var(--bordeaux-deep);font-size:1.2rem;margin:26px 0 4px;text-align:center;}

.prijstegel-wrap{display:flex;flex-direction:column;height:100%;}
.prijstegel-wrap > .prijstegel{flex:1;}
.prijs-balk{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:16px 16px 0 0;background:#4B7A4A;color:#fff;}
.prijs-balk + .prijstegel{border-radius:0 0 16px 16px;border-color:#4B7A4A;}
.prijstegel.is-actief .pt-prijs{color:#4B7A4A;}

/* ==========================================================================
   Mockup-laag (spec §11 / mockup-homepage.html): trekt alle sitePage-pagina's
   naar hetzelfde ontwerp als de homepage. Overschrijft bewust de oudere regels
   hierboven via de cascade — wit papier, petrol accent, strakke 3px-hoeken,
   serif-koppen, banden met tint, en de mockup-footer.
   ========================================================================== */
/* --ink-faint stond op #7B8C8D en haalt op de lichte veldkleur #F6EDF1 maar 3,2 : 1 --
   onder de grens van 4,5. Het is de kleur van de regel onder de zoekbalk op de startpagina,
   dus van de tekst die vertelt hoeveel ziektes er in opbouw zijn. #8A7B82 haalt daar 6,01.
   Gemeten met axessia-app/lib/contrast.js, gevonden door onze eigen scanner (20-08-2026). */
:root{ --field:#F6EDF1; --field-deep:#EDDFE6; --edge:#E4DADF; --accent:#8C2D5A; --accent-ink:#6B2144; --ink-soft:#5B4E54; --ink-faint:#8A7B82; }
body{ background:#FFFFFF; color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; }
h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.2; }
.section h2, .hiw-hero h1, .post-title{ color:var(--ink); }
a{ color:var(--accent-ink); }
/* Een link in een tekstblok moet ook zonder kleur te herkennen zijn (WCAG 1.4.1). Zonder
   onderstreping ziet wie kleurenblind is niet waar in een alinea de link zit -- 229 keer op
   70 paginas. Knoppen, navigatie en kaarten houden hun eigen stijl: daar draagt de vorm het al. */
p a:not(.btn):not(.kaart), li a:not(.btn):not(.kaart){ text-decoration:underline; text-underline-offset:2px; }

/* Header en wordmark: merk links, payoff ernaast (mockup .brand/.payoff) */
.hdr{ background:#FFFFFF; border-bottom:1px solid var(--edge); backdrop-filter:none; }
.hdr .brand.wm{ font-size:30px; }
.wm{ flex-direction:row; align-items:baseline; gap:12px; }
.wm .wm-word{ color:var(--ink); letter-spacing:-0.015em; }
.wm .wm-care{ color:var(--accent); }
.wm .wm-tag{ font-style:normal; font-family:var(--sans); font-size:14px; color:var(--ink-soft); border-left:1px solid var(--edge); padding-left:12px; margin-top:0; }
.nav-links a{ color:var(--ink-soft); font-size:15px; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); border-bottom:1px solid var(--accent); font-weight:400; }
.brandline{ display:none; }
.langbar{ background:#FFFFFF; }

/* Knoppen: petrol vlak, 3px hoeken, geen zweefeffect */
.btn{ background:var(--accent); border:1px solid var(--accent); border-radius:3px; color:#fff; font-weight:400; padding:9px 18px; transition:filter .15s; }
.btn:hover{ background:var(--accent); transform:none; filter:brightness(1.08); }
.btn-gold{ background:var(--accent); color:#fff; }
.btn-gold:hover{ background:var(--accent); filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--accent-ink); border:1px solid var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* Banden: heropagina's op tint met accentlijn, secties wisselend wit */
.hiw-hero{ background:var(--field); border-bottom:1px solid var(--edge); padding:64px 0 44px; }
.section{ border-top:1px solid var(--edge); padding:58px 0; }
.section:nth-of-type(3n){ background:var(--field); border-top:2px solid var(--accent); }
.eyebrow{ color:var(--accent-ink); letter-spacing:0.09em; }
.eyebrow::before{ background:var(--accent); height:3px; width:26px; }
.sub{ color:var(--ink-soft); }

/* Kaarten en blokken: platte randen in plaats van schaduwen */
.card, .faq-q, .post-card, .prijs-kaart, .feature-card{ border:1px solid var(--edge); border-radius:3px; box-shadow:none; background:var(--field); }
.faq-q h3{ color:var(--accent-ink); }

/* Footer: mockup-stijl — tint2 met petrol lijn erboven */
.foot{ background:var(--field-deep); border-top:3px solid var(--accent); color:var(--ink-soft); font-size:14px; }
.foot h4{ color:var(--accent-ink); text-transform:uppercase; letter-spacing:0.07em; font-size:13px; font-family:var(--sans); }
.foot a{ color:var(--ink-soft); }
.foot a:hover{ color:var(--ink); text-decoration:underline; }
.foot-brand.wm .wm-tag{ border-left-color:rgba(22,41,43,.15); }
.foot-bar{ border-top:1px solid var(--edge); color:var(--ink-soft); }

/* Kopbalk-correctie: de oude .nav (vaste hoogte, baseline) botste met de
   mockup-laag — items sprongen verticaal en wikkelden over elkaar heen. */
.hdr .nav{ height:auto; min-height:64px; padding-block:12px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hdr .brand.wm{ font-size:24px; flex:none; }
.wm{ align-items:baseline; }
.nav-links{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-left:auto; }
.nav-links a{ padding:2px 0; line-height:1.4; border-bottom:1px solid transparent; }
.nav-links a.active{ border-bottom-color:var(--accent); color:var(--ink); }
.hdr .btn{ padding:7px 14px; font-size:14px; }
.nav-dd-menu{ background:#FFFFFF; border:1px solid var(--edge); border-radius:3px; box-shadow:0 8px 24px rgba(22,41,43,.10); }
.nav-dd-menu a{ color:var(--ink-soft); }
.nav-dd-menu a:hover{ background:var(--field); color:var(--ink); border-bottom-color:transparent; }
@media (max-width:1200px){ .hdr .wm .wm-tag{ display:none; } }

/* Menu duidelijker (Erik, 10-08): petrol linkkleur, dikker lettertype, duidelijke
   hover- en actief-staat — het grijs viel weg tegen het wit. */
.nav-links a{ color:var(--accent-ink); font-weight:600; font-size:15px; padding:6px 10px; border-radius:3px; border-bottom:2px solid transparent; }
.nav-links a:hover{ background:var(--field); color:var(--accent-ink); border-bottom-color:var(--accent); }
.nav-links a.active{ background:var(--field); color:var(--ink); border-bottom-color:var(--accent); }
.nav-dd > a{ color:var(--accent-ink); }
.nav-links a.btn{ color:#fff; border-bottom:1px solid var(--accent); font-weight:400; }
/* De knoppen in de bovenbalk stonden op --accent-ink (#6B2144) tegen een balk van --accent
   (#8C2D5A): 1,38 : 1. Dat is niet slecht leesbaar maar praktisch onzichtbaar, voor iedereen.
   Wit haalt 4,75 op diezelfde balk. */
.nav-links a.btn-ghost{ color:#fff; }
.nav-links a.btn-sm{ color:#fff; }

/* Bewijslabels (spec §7.2): gekleurde etiketten op behandel-/voedingstabs. */
:root{ --ev-proven:#1F5F43; --ev-studied:#3F8F5F; --ev-exper:#F2C879; --ev-unprov:#D9D2C6; --ev-against:#E6E2DB; }
.ev-label{ display:inline-block; padding:3px 12px; border-radius:3px; color:#fff; font-size:0.82rem; font-weight:600; letter-spacing:.03em; }
.ev-bewezen{ background:var(--ev-proven); } .ev-onderzocht{ background:var(--ev-studied); }
.ev-experimenteel{ background:var(--ev-exper); } .ev-onbewezen{ background:var(--ev-unprov); }
.ev-afgeraden{ background:var(--ev-against); }

/* Ziekte-tabmenu (Erik, 10-08): eigen kleurbalk in tint 2 — duidelijk anders
   dan het witte hoofdmenu; actieve tab in vol petrol met witte letters. */
.ziekte-tabs{ display:flex; gap:2px; flex-wrap:wrap; margin:18px 0 10px; background:var(--field-deep); border:1px solid var(--edge); border-radius:3px; padding:5px; }
.ziekte-tabs a{ padding:8px 13px; text-decoration:none; font-size:0.92rem; font-weight:600; color:var(--accent-ink); border-radius:3px; border-bottom:none; }
.ziekte-tabs a:hover{ background:#FFFFFF; color:var(--accent-ink); }
.ziekte-tabs a.actief{ background:var(--accent); color:#FFFFFF; }

/* Uitleg-tooltip op bewijslabels (Erik, 10-08): i-cirkeltje, definitie bij hover/focus. */
.ev-label{ position:relative; }
.ev-info{ display:inline-grid; place-items:center; width:15px; height:15px; margin-left:7px; border-radius:50%; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.75); font-size:10px; font-family:Georgia,serif; font-style:italic; cursor:help; vertical-align:1px; }
.ev-tip{ display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:30; width:290px; background:var(--ink); color:#fff; padding:10px 14px; border-radius:3px; font-weight:400; font-style:normal; font-size:0.85rem; line-height:1.55; letter-spacing:0; box-shadow:0 10px 28px rgba(22,41,43,.25); }
.ev-info:hover .ev-tip, .ev-info:focus .ev-tip{ display:block; }

/* Subtabbladen (bijv. Voeding → Diëten): lichter dan de hoofdtabs, ingesprongen. */
.ziekte-subtabs{ display:flex; gap:2px; flex-wrap:wrap; margin:-4px 0 12px 12px; }
.ziekte-subtabs a{ padding:6px 12px; text-decoration:none; font-size:0.88rem; font-weight:600; color:var(--accent-ink); border:1px solid var(--edge); border-radius:3px; background:#FFFFFF; }
.ziekte-subtabs a:hover{ background:var(--field); }
.ziekte-subtabs a.actief{ background:var(--field-deep); border-color:var(--accent); }

/* Publicatielijst: uitleg in gewone taal boven de link, met bewaar-hartje. */
.bronlijst{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.bronlijst li{ border-left:3px solid var(--edge); padding-left:14px; font-size:0.93rem; line-height:1.65; }
.bronlijst li:hover{ border-left-color:var(--accent); }
.bron-uitleg{ margin:0 0 3px; color:var(--ink); font-size:1rem; }
.fav-hart{ background:none; border:none; cursor:pointer; font-size:1.15rem; line-height:1; color:var(--ink-faint); padding:2px 4px; text-decoration:none; vertical-align:-1px; }
.fav-hart:hover{ color:var(--ev-against); }
.fav-hart.aan{ color:var(--ev-against); }
.fav-notitie{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.fav-notitie input{ flex:1 1 260px; font:inherit; font-size:0.9rem; padding:7px 10px; border:1px solid var(--edge); border-radius:3px; background:#FFFFFF; color:var(--ink); }
.fav-notitie input:focus{ border-color:var(--accent); outline:none; }
.fav-notitie-tekst{ margin:6px 0 0; font-size:0.9rem; color:var(--accent-ink); font-style:italic; }

/* Onderzoek in begrijpelijke taal (Erik, 11-08). De knop staat onder de publicatie en
   niet ernaast: naast de titel wordt het bij vijftig regels een muur van knoppen.
   Bestaat de uitleg al, dan is hij gevuld — dat is de belangrijkste toestand, want die
   kost de lezer niets. Bestaat hij nog niet, dan is hij een omlijning met de prijs erop. */
.uitleg-regel{ margin-top:7px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.uitleg-regel:empty{ display:none; }
.uitleg-vorm{ display:inline; }
.uitleg-knop{ display:inline-block; font:inherit; font-size:0.85rem; font-weight:600; text-decoration:none;
  padding:5px 11px; border-radius:3px; border:1px solid var(--accent); color:var(--accent-ink);
  background:#FFFFFF; cursor:pointer; }
.uitleg-knop:hover{ background:var(--field); }
/* Al gemaakt = gevuld en zonder prijs: die knop kost niemand iets, en dat mag je zien. */
.uitleg-knop.uitleg-klaar{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.uitleg-knop.uitleg-klaar:hover{ filter:brightness(1.08); }
.uitleg-prijs{ font-weight:400; opacity:.75; margin-left:4px; }
/* Bij klik wordt er meteen gekocht en geschreven, en dat duurt tien tot zestig seconden.
   Zonder deze melding zit iemand naar een stilstaande pagina te kijken en klikt hij nog
   een keer. Het formulier krijgt bij verzenden de klasse "bezig". */
.uitleg-bezig{ display:none; font-size:0.85rem; color:var(--accent-ink); font-style:italic; }
.uitleg-vorm.bezig .uitleg-knop, .uitleg-vorm.bezig .uitleg-maak{ opacity:.5; pointer-events:none; }
.uitleg-vorm.bezig .uitleg-bezig{ display:inline-block; margin-left:8px; }
/* De ⓘ naast de knop. Twee dingen die hier misgingen en het waard zijn om te onthouden:
   het uitlegvakje hangt met position:absolute aan zijn dichtstbijzijnde geplaatste
   voorouder, en die was er niet — bij de bewijslabels is dat .ev-label. Zonder eigen
   position:relative sprong het vakje naar de hoek van de pagina. En hij was te licht om
   op te vallen: een ⓘ die je moet zoeken, wordt niet gelezen. */
.uitleg-info{ position:relative; background:var(--accent); border:1px solid var(--accent);
  color:#FFFFFF; font-weight:700; font-style:normal; font-family:inherit; font-size:11px;
  width:17px; height:17px; margin-left:6px; vertical-align:0; }
.uitleg-info:hover, .uitleg-info:focus{ filter:brightness(1.15); outline:none; }
/* Het vakje klapt naar BOVEN open. Onder de knop staat de volgende publicatie, en daar
   legde het uitlegvakje zich overheen; boven de knop is het de tekst die je net las. */
.uitleg-info .ev-tip{ top:auto; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); }
/* Bij een smal scherm zou het gecentreerde vakje links buiten beeld vallen. */
@media (max-width:520px){
  .uitleg-info .ev-tip{ left:auto; right:-6px; transform:none; width:min(290px,calc(100vw - 40px)); }
}

/* De uitlegpagina zelf. */
.uitleg-origineel{ font-size:0.92rem; font-style:italic; color:var(--ink-faint); }
.uitleg-ziektes{ font-size:0.92rem; margin:8px 0 0; }
.uitleg-body h2{ font-size:1.15rem; margin:28px 0 10px; }
.uitleg-bron{ margin:26px 0 0; font-size:0.95rem; }
.uitleg-voet{ margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line,#E7DDCF);
  font-size:0.88rem; color:var(--ink-faint); line-height:1.6; }
.uitleg-aanbod{ background:var(--cream); border:none; margin-bottom:18px; }
.uitleg-aanbod h2{ font-size:1.15rem; margin:0 0 8px; }
.uitleg-maak{ margin-top:6px; }
.uitleg-tussenkop{ font-size:1.25rem; margin:34px 0 4px; padding-top:22px; border-top:1px solid var(--line,#E7DDCF); }
.uitleg-goedkoper{ margin:8px 0 0; font-size:0.88rem; color:var(--ink-faint); }
.uitleg-geenvolledig{ margin:18px 0 0; font-size:0.9rem; color:var(--ink-faint); font-style:italic; }
.uitleg-waarom{ margin:12px 0 0; font-size:0.9rem; color:var(--accent-ink); line-height:1.65; }
.uitleg-melding{ background:var(--field); border:none; margin-bottom:16px; }
.uitleg-melding p{ margin:0; font-size:0.95rem; }


/* Ingelogd in het sitemenu: tegoed zichtbaar, zodat je nooit hoeft te zoeken
   hoeveel je nog hebt staan voor sms-meldingen. */
.nav-links .nav-tegoed { font-weight: 600; white-space: nowrap; }
.nav-links form button { font: inherit; cursor: pointer; }


/* Menuknop voor smalle schermen. Op een breed scherm is hij overbodig: daar staan de
   links gewoon naast elkaar. */
.nav-burger{display:none;background:none;border:1px solid var(--line,#E7DDCF);border-radius:8px;
  padding:7px 12px;font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;margin-left:auto;}
.nav-burger:hover{background:var(--field,#F6EDF1);}


/* Verwante ziektes onder een ziektepagina: een logische volgende stap voor de lezer,
   en de samenhang die van 104 losse pagina's een naslagwerk maakt. */
.verwant{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line,#E7DDCF); }
.verwant ul{ margin:0; padding:0; list-style:none; columns:2; column-gap:32px; line-height:2; }
@media(max-width:640px){ .verwant ul{ columns:1; } }


/* Uitklapper onder een publicatielijst: alle regels staan in de pagina, maar je krijgt
   ze pas te zien als je erom vraagt. Zo blijft een lijst van honderd studies leesbaar. */
.meer-bronnen{ margin-top:14px; }
.meer-bronnen > summary{ cursor:pointer; font-weight:600; color:var(--accent-ink,#6B2144);
  padding:10px 14px; background:var(--field,#F6EDF1); border-radius:8px; list-style:none; }
.meer-bronnen > summary::-webkit-details-marker{ display:none; }
.meer-bronnen > summary::before{ content:"▸ "; }
.meer-bronnen[open] > summary::before{ content:"▾ "; }
.meer-bronnen > summary:hover{ text-decoration:underline; }


/* Bladeren door een lange publicatielijst. */
.bladeren{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0 0;
  padding-top:14px; border-top:1px solid var(--line,#E7DDCF); }


/* "Houd mij op de hoogte" bij een ziekte: een rustig kader dat opvalt zonder te
   schreeuwen, met het vinkje en de uitleg naast elkaar. */
.volgblok{ margin:16px 0 4px; padding:14px 16px; background:var(--field,#F6EDF1);
  border:1px solid var(--line,#E7DDCF); border-radius:12px; }
.volgvink{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.volgvink input[type=checkbox]{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--accent,#6B2144); }
.volglijst{ list-style:none; padding:0; margin:0; }
.volglijst li{ display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--line,#E7DDCF); flex-wrap:wrap; }


/* De studiezoeker: filterbalk en de feiten per studie. */
.studiefilter{ display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin:16px 0 0;
  padding:14px 16px; background:var(--field,#F6EDF1); border-radius:12px; }
.studiefilter .field{ margin:0; }
.studiefilter label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:4px; }
.studiefilter select, .studiefilter input{ padding:8px 10px; border:1px solid var(--line,#E7DDCF);
  border-radius:8px; font:inherit; min-width:150px; background:#fff; }
.studie-feiten{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; font-size:.86rem; }
.studie-tag{ display:inline-block; padding:2px 9px; border-radius:999px; background:var(--field,#F6EDF1);
  border:1px solid var(--line,#E7DDCF); font-size:.82rem; }
/* Alleen "werft deelnemers" krijgt de volle kleur: dat is het enige label waarbij je je
   nú kunt aanmelden. "Opent binnenkort" en "alleen op uitnodiging" zijn het vermelden
   waard, maar mogen niet dezelfde belofte doen. */
.studie-tag.werft{ background:#6B2144; border-color:#6B2144; color:#fff; font-weight:600; }
.studie-tag.binnenkort{ background:#FFF6E5; border-color:#E8C98A; color:#7A5A16; }
.studie-tag.uitnodiging{ background:#F2F0FA; border-color:#CFC8E8; color:#4B3F7A; }
.bronlijst.studies > li{ padding-bottom:14px; }


/* "Je was hier gebleven" en de uitgebreide bladerbalk. */
.verderlezen{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 0;
  padding:12px 14px; background:var(--field,#F6EDF1); border:1px solid var(--accent,#6B2144); border-radius:12px; }
.verderlezen-uitleg{ font-size:.84rem; flex-basis:100%; }
.bladeren{ flex-direction:column; align-items:stretch; gap:10px; }
.bl-knoppen{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bl-nummers{ display:inline-flex; gap:4px; align-items:center; }
.bl-nummers a, .bl-nu{ display:inline-block; min-width:34px; text-align:center; padding:6px 8px;
  border:1px solid var(--line,#E7DDCF); border-radius:8px; text-decoration:none; }
.bl-nummers a:hover{ background:var(--field,#F6EDF1); }
.bl-nu{ background:var(--accent,#6B2144); border-color:var(--accent,#6B2144); color:#fff; font-weight:700; }
.bl-spring{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.9rem; }
.bl-spring input{ width:88px; padding:7px 9px; border:1px solid var(--line,#E7DDCF); border-radius:8px; font:inherit; }

/* De weegschaal bij publicaties (Erik, 10-08): wát voor soort onderzoek zit hieronder?
   Kleinere etiketten dan de bewijslabels bij behandelwijzen, want ze staan in een lijst
   van vijftig — maar met hetzelfde i-cirkeltje, zodat de lezer één taal leert. */
.bw-label{ position:relative; display:inline-block; margin:0 0 5px; padding:2px 9px; border-radius:3px; color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.bw-sterk{ background:var(--ev-proven); }
.bw-gewoon{ background:var(--ev-studied); }
.bw-vroeg{ background:var(--ev-exper); }
.bw-zwak{ background:var(--ev-unprov); }
.bw-ingetrokken{ background:var(--ev-against); }
/* Een ingetrokken publicatie mag niet wegvallen tussen de rest: een streep ernaast en
   een doorgehaalde titel, zodat je hem herkent zonder het etiket te lezen. */
.bron-ingetrokken{ border-left:3px solid var(--ev-against); padding-left:12px; }
.bron-ingetrokken > a{ text-decoration:line-through; }

/* Filterbalk bij publicaties en studies (Erik, 10-08): bij duizenden publicaties is
   bladeren geen zoeken. Op een telefoon vallen de velden onder elkaar. */
.pubfilter{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; background:var(--field-deep,#F6EDF1); border:1px solid var(--edge,#DDE7E6); border-radius:3px; padding:12px 14px; margin:0 0 14px; }
.pf-veld{ display:flex; flex-direction:column; gap:3px; font-size:0.82rem; font-weight:600; color:var(--accent-ink); }
.pf-veld select, .pf-veld input{ font:inherit; font-weight:400; font-size:0.92rem; padding:6px 9px; border:1px solid var(--edge,#DDE7E6); border-radius:3px; background:#FFFFFF; color:var(--ink); min-width:170px; }
.pf-zoek{ flex:1 1 240px; }
.pf-zoek input{ width:100%; }
.pf-vink{ display:flex; align-items:center; gap:7px; font-size:0.9rem; padding-bottom:7px; }
.pf-knoppen{ display:flex; gap:8px; padding-bottom:1px; }
@media (max-width:640px){
  .pubfilter{ flex-direction:column; align-items:stretch; }
  .pf-veld select, .pf-veld input{ min-width:0; width:100%; }
}

/* Expertisecentra en gespecialiseerde artsen (Erik, 10-08): een genummerde ranglijst,
   want de volgorde is de inhoud. Op een telefoon valt het nummer boven de regel. */
.ex-lijst{ list-style:none; margin:0; padding:0; counter-reset:none; }
.ex-rij{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--edge); }
.ex-rij:first-child{ border-top:1px solid var(--edge); }
.ex-nr{ flex:0 0 30px; font-family:Georgia,serif; font-size:1.1rem; font-weight:700; color:var(--accent-ink); text-align:end; line-height:1.5; font-variant-numeric:tabular-nums; }
.ex-tekst{ flex:1 1 auto; display:flex; flex-direction:column; gap:1px; min-width:0; }
.ex-tekst .muted{ font-size:0.9rem; }
.ex-cijfers{ font-size:0.85rem; color:var(--ink-soft); }
.ex-bron{ flex:0 0 auto; font-size:0.82rem; white-space:nowrap; align-self:center; }
@media (max-width:560px){
  .ex-rij{ flex-wrap:wrap; gap:4px 10px; }
  .ex-bron{ align-self:flex-start; margin-left:42px; }
}

/* Door de EU aangewezen expertisenetwerk (ERN). Bewust anders dan onze eigen lijst:
   dit is een erkenning van buiten, geen telling van ons. */
.ern-kader{ display:flex; gap:14px; align-items:flex-start; background:var(--field,#F6EDF1); border:1px solid var(--accent,#8C2D5A); border-left-width:4px; border-radius:3px; padding:14px 16px; margin:18px 0; }
.ern-vlag{ flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent,#8C2D5A); color:#FFFFFF; font-size:15px; }
@media (max-width:520px){ .ern-kader{ flex-direction:column; gap:8px; } }
.ern-leden{ margin:10px 0 0; }
.ern-leden > summary{ cursor:pointer; font-size:0.92rem; padding:6px 0; }
.ern-namen{ margin:8px 0 0 18px; padding:0; font-size:0.9rem; line-height:1.6; columns:2; column-gap:26px; }
@media (max-width:640px){ .ern-namen{ columns:1; } }

/* ---------- AI-assistent (Erik, 11-08) ---------- */
.ai-aanbod{ background:var(--cream); border:none; }
.ai-aanbod h2{ font-size:1.1rem; margin:0 0 8px; }
.ai-lijst{ margin:0; padding-left:20px; line-height:1.7; }
.ai-lijst li{ margin-bottom:8px; }
.ai-privacy{ margin:14px 0 0; padding:10px 14px; background:var(--field); border-radius:3px; font-size:.92rem; }
.ai-prijzen{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ai-prijzen form{ margin:0; }
.ai-prijs{ font-weight:400; opacity:.8; margin-left:5px; }

.ai-tabs{ display:flex; gap:2px; flex-wrap:wrap; margin-bottom:16px; }
.ai-tab{ font:inherit; font-size:.92rem; font-weight:600; padding:8px 14px; cursor:pointer;
  border:1px solid var(--edge); border-radius:3px; background:#FFFFFF; color:var(--accent-ink); }
.ai-tab:hover{ background:var(--field); }
.ai-tab.actief{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }

.ai-form{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.ai-form textarea{ width:100%; font:inherit; font-size:1rem; padding:11px 13px; border:1px solid var(--edge);
  border-radius:3px; background:#FFFFFF; color:var(--ink); resize:vertical; }
.ai-form textarea:focus{ border-color:var(--accent); outline:none; }

.ai-gesprek{ display:flex; flex-direction:column; gap:18px; margin-bottom:18px; }
.ai-gesprek:empty{ display:none; }
.ai-jij{ background:var(--field); border-radius:3px; padding:10px 14px; }
.ai-jij strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); margin-bottom:3px; }
.ai-jij p{ margin:0; }
.ai-antwoord{ border-left:3px solid var(--accent); padding-left:16px; }
.ai-antwoord > p{ margin:0 0 12px; line-height:1.7; }
.ai-fout{ border-left-color:var(--edge); color:var(--ink-faint); }
.ai-bezig{ font-style:italic; color:var(--ink-faint); font-size:.92rem; }

/* De bronnen dragen de hele belofte: elk antwoord laat zien waar het vandaan komt.
   Wat juist NIET past staat er bewust net zo prominent bij — dat is voor een lezer
   vaak waardevoller dan nog een treffer. */
.ai-bronnen{ margin:0 0 14px; }
.ai-bronnen h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-ink); margin:0 0 8px; }
.ai-bronnen ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ai-bronnen li{ border-left:3px solid var(--edge); padding-left:12px; font-size:.93rem; line-height:1.6; }
.ai-niet li{ border-left-style:dashed; color:var(--ink-faint); }
.ai-waarom{ margin:3px 0 0; font-size:.9rem; }
.ai-links{ margin:4px 0 0; font-size:.85rem; }
.ai-werft{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 7px; border-radius:2px; background:var(--accent); color:#FFFFFF; vertical-align:1px; }
.ai-artsvragen{ background:var(--cream); border-radius:3px; padding:12px 16px; margin-top:4px; }
.ai-artsvragen h3{ font-size:.95rem; margin:0 0 6px; }
.ai-artsvragen ul{ margin:0; padding-left:20px; line-height:1.65; font-size:.93rem; }
.ai-vervolg{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ai-suggestie{ font:inherit; font-size:.85rem; padding:6px 12px; cursor:pointer; text-align:start;
  border:1px solid var(--edge); border-radius:14px; background:#FFFFFF; color:var(--accent-ink); }
.ai-suggestie:hover{ background:var(--field); border-color:var(--accent); }
.ai-voet{ margin-top:26px; padding-top:14px; border-top:1px solid var(--line,#E7DDCF); font-size:.85rem; line-height:1.6; }

/* ---------- De Codex-assistent als robot, rechtsonder op elke pagina ----------
   Alleen zichtbaar voor wie de assistent heeft aangezet. Rechtsonder: dat is de plek
   waar mensen een hulpknop verwachten. */
#codex-assist{ position:fixed; right:22px; bottom:22px; z-index:200; }
#codex-assist [hidden]{ display:none !important; }
.pa-fab{ border:none; background:none; cursor:pointer; padding:0; width:96px;
  filter:drop-shadow(0 8px 18px rgba(22,41,43,.32)); transition:transform .15s; }
.pa-fab img{ width:96px; height:auto; display:block; }
.pa-fab:hover{ transform:translateY(-3px) scale(1.03); }
.pa-panel{ position:absolute; bottom:108px; right:0; width:360px; max-width:calc(100vw - 44px);
  background:#FFFFFF; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(22,41,43,.5); display:flex; flex-direction:column; overflow:hidden; }
.pa-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--bordeaux-deep); color:#FFFFFF; }
.pa-head-av{ width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:var(--bordeaux-bright); }
.pa-head-t{ flex:1; } .pa-head-t strong{ font-family:var(--serif); }
.pa-sub{ font-size:.74rem; opacity:.8; }
.pa-close{ background:rgba(255,255,255,.16); border:none; color:#fff; width:30px; height:30px;
  border-radius:8px; cursor:pointer; font-size:.95rem; }
.pa-close:hover{ background:rgba(255,255,255,.28); }
.pa-msgs{ flex:1; overflow-y:auto; max-height:52vh; min-height:170px; padding:14px;
  display:flex; flex-direction:column; gap:10px; background:var(--paper); }
.pa-msg{ max-width:92%; padding:9px 13px; border-radius:12px; font-size:.9rem; line-height:1.5; }
.pa-msg.bot{ background:#FFFFFF; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; }
.pa-msg.user{ background:var(--bordeaux-bright); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
/* De bronnen zijn het punt van de hele assistent: elk antwoord laat zien waar het
   vandaan komt. Ook in het kleine venster horen ze er dus bij te staan. */
.pa-bron{ display:flex; flex-direction:column; gap:5px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
.pa-bron a{ font-size:.84rem; font-weight:600; color:var(--bordeaux-bright); line-height:1.35; }
.pa-bron a:hover{ text-decoration:underline; }
.pa-werft{ display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  padding:1px 6px; border-radius:2px; background:var(--bordeaux-bright); color:#fff; }
.pa-meer{ margin-top:8px; font-size:.84rem; font-weight:600; }
.pa-meer a{ color:var(--bordeaux-bright); }
.pa-input{ display:flex; align-items:center; gap:8px; padding:10px; border-top:1px solid var(--line); background:#FFFFFF; }
.pa-input input{ flex:1; border:1px solid var(--line); border-radius:18px; padding:9px 14px; font:inherit; font-size:.9rem; }
.pa-input input:focus{ border-color:var(--bordeaux-bright); outline:none; }
.pa-send{ flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  font-size:1rem; background:var(--bordeaux-bright); color:#fff; }
.pa-voet{ padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); font-size:.84rem; }
.pa-voet a{ color:var(--bordeaux-bright); font-weight:600; }
/* Op een smal scherm neemt de robot te veel plek in; daar wordt hij kleiner. */
@media (max-width:560px){
  #codex-assist{ right:12px; bottom:12px; }
  .pa-fab, .pa-fab img{ width:68px; }
  .pa-panel{ bottom:80px; width:calc(100vw - 24px); }
}

/* Teruglezen: de lijst met bewaarde overzichten. */
.rap-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.rap-regel{ border-left:3px solid var(--edge,#E4DADF); padding-left:14px; }
.rap-regel a{ font-weight:600; color:var(--bordeaux-bright); line-height:1.5; }
.rap-regel a:hover{ text-decoration:underline; }
.rap-regel .muted{ display:block; font-size:.84rem; margin-top:2px; }
.ai-meer{ margin-top:12px; font-size:.9rem; font-weight:600; }
.rap-regel{ position:relative; padding-right:96px; }
.rap-weg{ position:absolute; right:0; top:0; margin:0; }
.rap-weg button{ font:inherit; font-size:.8rem; padding:3px 9px; cursor:pointer; border-radius:3px;
  border:1px solid var(--line); background:#FFFFFF; color:var(--muted); }
.rap-weg button:hover{ border-color:var(--bordeaux-bright); color:var(--bordeaux-bright); }

/* ---------- Wereldkaart bij expertisecentra en artsen (Erik, 11-08) ----------
   De kaart is een SVG in de pagina zelf: geen kaartendienst, geen tegels, geen externe
   verbinding. Wie over zijn eigen ziekte leest hoort niet stilletjes bij een derde
   partij te worden aangemeld. */
.kaart{ margin:18px 0 22px; }
.kaart-kop{ font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--bordeaux-bright); margin:0 0 8px; }
.kaart-vlak{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.kaart-svg{ display:block; width:100%; height:auto; }
.kaart-land{ fill:#DCE7E6; stroke:#FFFFFF; stroke-width:.6; }
/* De stip is het enige rood op de hele site: hier moet je oog naartoe. */
.kaart-stip{ fill:#C4322F; fill-opacity:.78; stroke:#FFFFFF; stroke-width:1; transition:fill-opacity .12s; }
/* Een onzichtbare cirkel eromheen: een stip van vier pixels raak je op een telefoon
   nooit met je duim. Aanwijzen mag ruim; tekenen doen we klein. */
.kaart-raak{ fill:transparent; }
.kaart-punt{ cursor:pointer; }
.kaart-punt:hover .kaart-stip, .kaart-punt:focus .kaart-stip, .kaart-punt.aan .kaart-stip{ fill-opacity:1; }
.kaart-punt.aan .kaart-stip{ stroke:#231B1F; stroke-width:1.6; }
.kaart-punt:focus{ outline:none; }
.kaart-punt:focus-visible .kaart-stip{ stroke:#231B1F; stroke-width:2; }
.kaart-info{ position:absolute; left:12px; bottom:12px; right:12px; max-width:420px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:3px; padding:10px 13px;
  font-size:.86rem; line-height:1.5; box-shadow:0 10px 28px -12px rgba(22,41,43,.45); }
.kaart-info strong{ display:block; margin-bottom:3px; color:var(--bordeaux-deep); }
.kaart-meer{ color:var(--muted); font-style:italic; }
.kaart-voet{ margin:8px 0 0; font-size:.84rem; color:var(--muted); line-height:1.55; }
.kaart-leeg{ margin:14px 0; font-size:.9rem; color:var(--muted); font-style:italic; }
@media (max-width:560px){
  .kaart-info{ left:8px; right:8px; bottom:8px; font-size:.82rem; padding:8px 10px; }
}

/* Zoomen en slepen op de kaart (Erik, 11-08). Knoppen zijn hier niet optioneel: een
   flink deel van de bezoekers is ziek, moe of op leeftijd, en "ctrl ingedrukt houden
   en scrollen" is voor hen geen bediening. */
.kaart-svg{ touch-action:none; cursor:grab; }
.kaart-svg.sleept{ cursor:grabbing; }
.kaart-knoppen{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.kaart-knop{ font:inherit; font-size:1.1rem; font-weight:700; line-height:1; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer; color:var(--bordeaux-deep);
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 2px 6px -2px rgba(22,41,43,.3); }
.kaart-knop:hover{ background:#FFFFFF; border-color:var(--bordeaux-bright); }
.kaart-terug{ width:auto; height:auto; padding:6px 11px; font-size:.8rem; font-weight:600; white-space:nowrap; }
.kaart-punt{ cursor:pointer; }

/* "Dit staat in je account" boven een gekochte uitleg. Groen en kort: het is een
   bevestiging, geen mededeling waar je doorheen moet lezen. */
.uitleg-bewaard{ margin:0 0 14px; padding:10px 14px; border-radius:3px;
  background:var(--field); border-left:3px solid var(--accent, #8C2D5A);
  font-size:.92rem; line-height:1.55; text-align:start; }
.uitleg-bewaard strong{ display:block; }
.uitleg-bewaard a{ color:var(--bordeaux-bright); font-weight:600; }
.hiw-hero .post-back{ display:inline-block; margin-bottom:12px; }

/* ---------- Medisch woordenboek ---------- */
/* Het gemarkeerde woord moet te zien zijn zonder de zin op te breken: geen knopvorm,
   geen kleurvlak, alleen een stippellijn eronder. De lezer die het woord kent, leest
   erover heen; wie het niet kent, ziet dat er iets te halen valt. */
/* `font:inherit` en `vertical-align:baseline` doen hier het werk: daardoor neemt de knop
   exact evenveel ruimte in als het woord dat er stond, en verspringt er niets wanneer de
   markering ná het laden gebeurt. Gemeten op een artikel van 28 alinea's met veertig
   gemarkeerde woorden: nul verschuiving (CLS 0,000), en de pagina bleef even hoog.
   `display:inline` staat er voor de netheid, maar Chrome houdt een knop hoe dan ook op
   inline-block — dat maakt voor de opbouw van de regel niets uit. */
.wb-w{ display:inline; font:inherit; color:inherit; background:none; border:0; padding:0;
  margin:0; border-bottom:1px dotted var(--gold); cursor:help; vertical-align:baseline; }
.wb-w:hover, .wb-w:focus-visible{ background:rgba(18,128,127,.09); border-bottom-style:solid; }
.wb-w[aria-expanded="true"]{ background:rgba(18,128,127,.16); border-bottom-style:solid; }
.wb-pop{ position:absolute; z-index:60; width:min(320px, calc(100vw - 24px));
  background:var(--ink); color:#fff; border-radius:4px; padding:13px 34px 13px 15px;
  box-shadow:0 12px 34px rgba(22,41,43,.3); font-size:.9rem; line-height:1.55; }
.wb-pop strong{ display:block; margin-bottom:4px; font-size:.95rem; }
.wb-pop p{ margin:0 0 8px; }
.wb-pop .wb-meer{ color:#fff; text-decoration:underline; font-size:.85rem; }
.wb-pop .wb-x{ position:absolute; top:5px; right:7px; background:none; border:0; color:#fff;
  font-size:1.15rem; line-height:1; cursor:pointer; padding:3px 5px; opacity:.75; }
.wb-pop .wb-x:hover{ opacity:1; }
.wb-abc{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 26px; }
.wb-abc a{ display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 7px;
  background:var(--field); border-radius:3px; font-weight:600; text-decoration:none; }
.wb-abc a:hover{ background:var(--brand); color:#fff; }
.wb-letter{ margin:26px 0 8px; font-size:1.3rem; color:var(--brand); }
.wb-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:2px 18px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.wb-lijst li{ margin:0; }
.wb-lijst a{ display:block; padding:3px 0; }

/* ---------- Cijfers bij een ziekte: sterfte en overleving ---------- */
/* De kleuren van de staven zitten in de SVG zelf (lib/grafiek.js) en niet hier: ze
   dragen betekenis, en een `fill` die op een niet-bestaande variabele uitkomt tekent
   stilletjes niets. Dat gebeurde in de eerste versie — de lijn was onzichtbaar. */
.gr-blok{ margin:38px 0 0; padding:26px 26px 24px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; }
.gr-kop{ margin:0; font-size:1.4rem; }
.gr-fig{ margin:22px 0 0; padding:18px 16px 14px; background:var(--cream);
  border-radius:12px; box-shadow:0 1px 3px rgba(22,41,43,.05); }
.gr-titel{ font-family:var(--serif); font-weight:600; font-size:1.05rem; margin:0 0 10px;
  color:var(--ink); }
.gr-svg{ width:100%; height:auto; display:block; overflow:visible; }
.gr-raster{ stroke:var(--line); stroke-width:1; }
.gr-basis{ stroke:#B9CBC9; stroke-width:1.5; }
.gr-staaf{ transition:opacity .15s; }
.gr-staaf:hover{ opacity:.82; }
.gr-aslabel{ font-family:var(--sans); font-size:12.5px; fill:var(--muted); }
.gr-waarde{ font-family:var(--sans); font-size:13px; font-weight:700; fill:var(--bordeaux-deep); }
.gr-bron{ margin:10px 0 0; font-size:0.82rem; color:var(--muted); line-height:1.55; }
.gr-bron a{ color:var(--gold); }
.gr-tabel{ margin:10px 0 0; font-size:0.85rem; }
.gr-tabel summary{ cursor:pointer; color:var(--gold); font-weight:600; }
.gr-tabel table{ margin:8px 0 0; border-collapse:collapse; }
.gr-tabel th{ text-align:start; font-weight:500; padding:3px 20px 3px 0; color:var(--muted); }
.gr-tabel td{ padding:3px 0; font-variant-numeric:tabular-nums; }
/* Wat er staat als de cijfers niet bestaan. Bewust rustig: dit is geen foutmelding
   maar informatie — het verklaart waarom de buurpagina wél een grafiek heeft. */
.gr-leeg{ margin:22px 0 0; padding:16px 18px; background:var(--cream);
  border-left:3px solid var(--gold-soft); border-radius:8px; }
.gr-leeg strong{ display:block; margin-bottom:4px; color:var(--ink); }
.gr-leeg p{ margin:0; font-size:0.92rem; color:var(--muted); line-height:1.6; }
.gr-waarschuwing{ margin:22px 0 0; font-size:0.9rem; line-height:1.6; color:var(--muted); }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:640px){
  .gr-blok{ padding:18px 14px; }
  .gr-fig{ padding:14px 10px 10px; }
  .gr-aslabel{ font-size:15px; }
  .gr-waarde{ font-size:15px; }
}


/* ---------- Forum ---------- */
/* Toon: dit is de enige plek op Codex waar geen gemeten feiten staan maar mensen aan het
   woord zijn. Dat mag je zien — zachter, meer lucht, minder tabelachtig — zonder dat het
   een andere website wordt. Vandaar dezelfde petrol en hetzelfde papier, maar rondere
   hoeken en meer ruimte tussen de berichten. */

/* Het tabblad staat rechts, los van de gemeten tabbladen ernaast. */
.ziekte-tabs .tab-forum{ margin-left:auto; font-weight:600; }

/* --- Overzicht van gesprekken --- */
.forum-lijst{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.forum-lijst > li{
  background:var(--cream,#fff); border:1px solid var(--line,#E4DADF); border-radius:14px;
  padding:16px 18px; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.forum-lijst > li:hover{ border-color:var(--gold,#8C2D5A); box-shadow:0 2px 10px rgba(22,41,43,.07); transform:translateY(-1px); }
.forum-titel{ display:block; font-weight:650; font-size:1.06rem; line-height:1.35; color:var(--ink,#231B1F); text-decoration:none; }
.forum-titel:hover{ color:var(--gold,#8C2D5A); }
.forum-meta{ display:block; margin-top:6px; color:var(--muted,#6B5A61); font-size:.85rem; }
.forum-meta .punt{ opacity:.5; margin:0 .45em; }
.forum-slot{
  display:inline-flex; align-items:center; gap:4px; font-size:.76rem; font-weight:600;
  background:var(--paper,#F6EDF1); color:var(--muted,#6B5A61);
  border:1px solid var(--line,#E4DADF); border-radius:999px; padding:1px 9px; margin-left:8px;
  vertical-align:middle;
}

/* Leeg forum: uitnodigend in plaats van kaal. */
.forum-leeg{ text-align:center; padding:34px 22px; background:var(--paper,#F6EDF1);
  border:1px dashed var(--line,#E4DADF); border-radius:16px; margin-top:22px; }
.forum-leeg .groot{ font-size:2rem; line-height:1; margin-bottom:10px; }

/* --- Een gesprek --- */
.forum-draad{ margin-top:24px; display:grid; gap:14px; }
.forum-bericht{
  background:var(--cream,#fff); border:1px solid var(--line,#E4DADF);
  border-radius:14px; padding:18px 20px;
}
/* Het openingsbericht draagt het gesprek; dat mag je zien zonder dat het schreeuwt. */
.forum-bericht.opening{ background:var(--paper,#F6EDF1); border-color:var(--gold-soft,#EDDFE6); }
.forum-kop{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.forum-avatar{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:var(--gold-soft,#EDDFE6); color:var(--gold,#8C2D5A);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}
.forum-naam{ font-weight:650; color:var(--ink,#231B1F); }
.forum-wanneer{ color:var(--muted,#6B5A61); font-size:.83rem; }
.forum-bericht p{ margin:0 0 .8em; line-height:1.65; }
.forum-bericht p:last-of-type{ margin-bottom:0; }
.forum-melden{ margin:12px 0 0; }
.forum-melden .btn-link{
  background:none; border:0; padding:0; color:var(--muted,#6B5A61);
  font:inherit; font-size:.8rem; text-decoration:underline; cursor:pointer; opacity:.75;
}
.forum-melden .btn-link:hover{ opacity:1; color:var(--ink,#231B1F); }

/* --- Schrijven --- */
.forum-nieuw{ margin-top:22px; }
.forum-nieuw summary{
  cursor:pointer; font-weight:650; list-style:none;
  display:flex; align-items:center; gap:8px;
}
.forum-nieuw summary::-webkit-details-marker{ display:none; }
.forum-nieuw summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:var(--gold,#8C2D5A); color:#fff;
  font-weight:700; line-height:1; flex:0 0 24px;
}
.forum-nieuw[open] summary::before{ content:"–"; }
.forum-keuze{ border:1px solid var(--line,#E4DADF); border-radius:12px; padding:14px 16px; margin:4px 0 14px; }
.forum-keuze legend{ padding:0 8px; font-size:.9rem; font-weight:600; color:var(--muted,#6B5A61); }
.forum-keuze label{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; line-height:1.5; }
.forum-keuze label + label{ border-top:1px solid var(--line,#E4DADF); }
.forum-keuze input[type=radio]{ margin-top:.28em; flex:0 0 auto; }

/* Meldingen boven een pagina: rood bij afgekeurd, goud bij "we kijken ernaar". */
.forum-melding{ border-radius:12px; padding:14px 18px; margin:18px 0; line-height:1.6; }
.forum-melding.af{ background:#FDF1F0; border:1px solid #F0C6C2; }
.forum-melding.wacht{ background:var(--gold-soft,#EDDFE6); border:1px solid var(--gold,#8C2D5A); }
.forum-melding strong{ display:block; margin-bottom:4px; }

/* Bladeren */
.forum-bladeren{ display:flex; gap:6px; margin-top:26px; flex-wrap:wrap; }
.forum-bladeren a, .forum-bladeren span{
  min-width:36px; text-align:center; padding:6px 10px; border-radius:9px;
  border:1px solid var(--line,#E4DADF); text-decoration:none; color:var(--ink,#231B1F);
}
.forum-bladeren .actief{ background:var(--gold,#8C2D5A); border-color:var(--gold,#8C2D5A); color:#fff; font-weight:650; }

/* De voetregel met de medische grens: aanwezig, niet dominant. */
.forum-voet{
  margin-top:30px; padding:14px 18px; border-left:3px solid var(--gold-soft,#EDDFE6);
  color:var(--muted,#6B5A61); font-size:.87rem; line-height:1.6;
}

@media (max-width:600px){
  .ziekte-tabs .tab-forum{ margin-left:0; }
  .forum-bericht{ padding:15px 16px; }
  .forum-lijst > li{ padding:14px 15px; }
}

/* De twee stappen vóór het eerste bericht (toestemming, schuilnaam). Compact gehouden:
   ze stonden eerst als volle kaarten bovenaan de pagina en overheersten het forum voor
   iemand die alleen wilde lezen. */
.forum-stap{ font-size:.9rem; color:var(--muted,#6B5A61); line-height:1.55; margin:4px 0 12px; }
.forum-akkoord{ list-style:none; padding:0; margin:0 0 14px; border:1px solid var(--line,#E4DADF); border-radius:12px; }
.forum-akkoord > li + li{ border-top:1px solid var(--line,#E4DADF); }
.forum-akkoord label{ display:flex; gap:10px; align-items:flex-start; padding:11px 14px;
  font-size:.92rem; line-height:1.5; cursor:pointer; }
.forum-akkoord input[type=checkbox]{ margin-top:.25em; flex:0 0 auto; }
.forum-fijndruk{ font-size:.82rem; color:var(--muted,#6B5A61); margin-left:10px; }

/* Alles binnen "Een gesprek beginnen" springt in tot onder de tekst van de knop, niet
   onder het ronde plusje. Het stond strak tegen de rand van de kaart, en dan lijkt het
   formulier los te hangen van de knop waar het bij hoort. 32px = het bolletje (24) plus
   de tussenruimte (8). */
.forum-nieuw > *:not(summary){ padding-left:32px; }
.forum-nieuw > summary{ margin-bottom:14px; }
.forum-nieuw .forum-kort{ max-width:22rem; }

@media (max-width:600px){
  /* Op een telefoon is die inspringing zonde van de breedte. */
  .forum-nieuw > *:not(summary){ padding-left:0; }
  .forum-nieuw .forum-kort{ max-width:none; }
}

/* Formuliervelden op het forum. `.field` bestaat alleen in het beheerdeel, niet op de
   publieke site — daar liep het label naast het invoervak en zweefde het tekstvak
   ergens rechts. Dezelfde vormgeving als het contactformulier, dat het wél goed doet. */
.forum-nieuw .field, .forum-nieuw .forum-veld{ margin-bottom:16px; }
.forum-nieuw label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--ink,#231B1F); }
.forum-nieuw input[type=text], .forum-nieuw input:not([type]), .forum-nieuw textarea{
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1px solid var(--line,#E4DADF); border-radius:8px;
  font-family:inherit; font-size:.98rem; line-height:1.55; background:#fff; color:var(--ink,#231B1F);
}
.forum-nieuw textarea{ resize:vertical; min-height:9rem; }
.forum-nieuw input:focus, .forum-nieuw textarea:focus{ border-color:var(--gold,#8C2D5A); }
/* De keuzevakjes staan al in een eigen kader; daar hoort het label-blokgedrag niet. */
.forum-nieuw .forum-keuze label, .forum-nieuw .forum-akkoord label{
  display:flex; font-weight:400; font-size:.92rem; margin-bottom:0;
}
.forum-nieuw .forum-keuze input, .forum-nieuw .forum-akkoord input{ width:auto; }

/* Melding dat de berichten machinevertaald zijn. Zichtbaar genoeg om te lezen, rustig
   genoeg om niet af te leiden van waar het om gaat: de verhalen eronder. */
.forum-vertaald{
  background:var(--paper,#F6EDF1); border:1px solid var(--line,#E4DADF);
  border-radius:12px; padding:12px 16px; margin:18px 0;
  font-size:.88rem; line-height:1.6; color:var(--muted,#6B5A61);
}
.forum-vertaald strong{ color:var(--ink,#231B1F); }
.forum-vertaald a{ white-space:nowrap; }

/* Vlag bij een gesprek: in welke taal is het geschreven. Voor de titel, zodat het oog
   hem meeneemt bij het langslopen van de lijst in plaats van erop te moeten zoeken. */
.forum-taal{ display:inline-flex; vertical-align:baseline; margin-right:8px; }
.forum-taal .flagimg{ width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(22,41,43,.12); }
.forum-taal .flagcode{ font-size:.7rem; font-weight:700; letter-spacing:.03em;
  background:var(--paper,#F6EDF1); border:1px solid var(--line,#E4DADF);
  border-radius:4px; padding:1px 5px; color:var(--muted,#6B5A61); }
h1.post-title .forum-taal .flagimg{ width:28px; height:20px; }

/* De basistaalvlag is een knop in een formulier (zie flagsHtml); dit maakt hem weer een vlag. */
.langbar .flagform{display:contents}
.langbar button.flag{border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit}
.langpick .flagform{display:contents}
.langpick button.flag{border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit}