/* Dojo Nieuws — sinds 2026-07-23 de canonieke stijl.
   Geport uit het Claude Design-ontwerp "Dojo Nieuws overzicht/artikel":
   beige grond, witte kaarten met zachte schaduw, geen rode masthead en geen
   ticker. */

:root { --zand:#EEEBE4; --zandlicht:#F4F1EB; --beige:#EEEBE4; --wit:#fff; --inkt:#272624; --kop:#666666; --tekst:#595959;
  --rood:#b22a26; --roodfel:#A80807; --grijs:#999999; --lijn:#D5D5D5;
  --schaduw:0 4px 12px rgba(0,0,0,.10); --ronding:12px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--zand); color:var(--tekst);
  font-family:'Roboto',Arial,Helvetica,sans-serif; font-weight:300; }
a { color:var(--rood); }
a:hover { color:var(--roodfel); }
.binnen { max-width:1100px; margin:0 auto; padding:0 32px; }
.binnen.smal { max-width:800px; }
.previewstrip { background:#434343; color:var(--zand); text-align:center; padding:8px 16px;
  font-weight:700; font-size:12px; letter-spacing:.08em; }

/* --- hoofdnavigatie: identiek aan de rest van de site (overgenomen uit
   style.css, zodat het menu niet verspringt tussen nieuws en de andere
   pagina's). Bewust hier gedupliceerd i.p.v. de volledige style.css laden,
   om de artikel-typografie niet te raken. Wijzigt de site-nav, dan hier mee
   bijwerken. --- */
nav { position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(238,235,228,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(39,38,36,.1); box-shadow:0 2px 8px rgba(39,38,36,.08); }
nav .container { max-width:1200px; margin:0 auto; padding:1rem 2rem;
  display:flex; align-items:center; justify-content:space-between; }
.nav-logo { flex-shrink:0; z-index:1; }
.nav-logo img { height:60px; width:auto; max-width:200px; }
.nav-toggle { display:none; flex-direction:column; gap:4px; background:none;
  border:none; cursor:pointer; padding:.5rem; }
.nav-toggle span { width:24px; height:2px; background-color:var(--inkt);
  transition:all .3s ease; }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-6px); }
.nav-links { display:flex; list-style:none; gap:2rem; align-items:center; margin:0; padding:0; }
.nav-links li { position:relative; }
.nav-links a { position:relative; font-family:'Roboto',sans-serif; font-size:.95rem;
  font-weight:400; letter-spacing:.01em; color:var(--inkt); text-decoration:none;
  transition:color .3s ease; }
.nav-links a:not(.nav-cta):hover { color:var(--rood); }
.nav-links a.active { font-weight:700; }
.nav-links a.active::after { content:''; position:absolute; bottom:-14px; right:4px;
  width:24px; height:24px; background-image:url('/images/stempel-menu.webp');
  background-size:contain; background-repeat:no-repeat; opacity:.9; pointer-events:none; }
/* Let op de selector: `.nav-links a` hierboven zet een kleur en is specifieker
   dan een kale `.nav-cta`. Zonder `.nav-links a` ervoor wint het inkt-zwart en
   krijg je donkere tekst op de rode knop. */
.nav-links a.nav-cta { display:inline-block; padding:.5rem 1.2rem; font-family:'Bebas Neue',sans-serif;
  font-size:1rem; font-weight:400; border-radius:8px; border:none; cursor:pointer;
  text-align:center; background-color:var(--rood); color:var(--beige); text-transform:uppercase;
  letter-spacing:.05em; line-height:1.3; text-decoration:none; transition:all .3s ease; }
.nav-links a.nav-cta:hover { opacity:.9; transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(178,42,38,.3); color:var(--beige); }
/* Vaste balk overlapt de bovenkant: spacer schuift het magazine eronder weg.
   Werkt voor voorpagina én artikelpagina, en op live én staging (de
   STAGING-banner staat in de flow ervoor). */
.nav-spacer { height:92px; }
@media (max-width:768px){
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; top:60px; left:0; right:0; z-index:999;
    background:var(--beige); flex-direction:column; padding:2rem; gap:1rem;
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
    border-bottom:1px solid rgba(39,38,36,.1); }
  .nav-links.active { transform:translateY(0); opacity:1; pointer-events:auto; }
}

/* --- paginatitel --- */
.rtitel { max-width:1100px; margin:0 auto; padding:36px 32px 8px; text-align:center; }
.rtitel .woordmerk { display:flex; align-items:center; justify-content:center; gap:24px; }
.rtitel .woord { font-family:'Bebas Neue',sans-serif; font-size:64px; letter-spacing:3px;
  color:var(--kop); line-height:1; }
.rtitel img.yinyang { width:58px; height:58px; border-radius:50%; }
.rtitel .motto { font-family:'Caveat',cursive; font-size:26px; color:var(--rood); }
@media (max-width:640px){ .rtitel .woord { font-size:40px; } .rtitel .woordmerk { gap:14px; }
  .rtitel img.yinyang { width:38px; height:38px; } }

/* --- filters: subtiel knopje op mottohoogte, uitklapbaar paneel --- */
.rmottorij { position:relative; display:flex; align-items:center; justify-content:center;
  margin-top:6px; min-height:34px; }
.rfilterknop { position:absolute; right:0; display:inline-flex; align-items:center; gap:7px;
  font-family:'Roboto',sans-serif; font-weight:400; font-size:13px; color:var(--grijs);
  background:none; border:1px solid var(--lijn); border-radius:100px; padding:6px 14px;
  cursor:pointer; }
.rfilterknop:hover { color:var(--rood); border-color:var(--rood); }
.rfilterknop .pijl { display:inline-block; font-size:10px; transition:transform .15s; }
.rfilterknop.open { color:var(--rood); border-color:var(--rood); }
.rfilterknop.open .pijl { transform:rotate(180deg); }
@media (max-width:760px){ .rmottorij { flex-direction:column; gap:10px; }
  .rfilterknop { position:static; } }
.themapaneel { display:none; background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--ronding); box-shadow:var(--schaduw); padding:20px 22px;
  margin:16px auto 0; max-width:860px; text-align:left; }
.themapaneel.open { display:block; }
.rfiltergroep + .rfiltergroep { margin-top:16px; padding-top:16px; border-top:1px solid var(--lijn); }
.rfilterkop { font-weight:400; font-size:11px; letter-spacing:2px; color:var(--rood);
  text-transform:uppercase; margin-bottom:10px; }
.rfilterrij { display:flex; flex-wrap:wrap; gap:9px; }
.themavink { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--lijn); border-radius:100px; padding:6px 14px; background:var(--zand); }
.themavink:hover { border-color:var(--rood); }
.themavink input { display:none; }
.themavink .naam { font-weight:300; font-size:13px; color:var(--tekst); }
.themavink .bol { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--inkt);
  background:var(--wit); flex:none; }
.themavink input:checked + .bol { background:var(--rood); }
.themavink input:not(:checked) ~ span { opacity:.4; }
.rfilterleeg { text-align:center; font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-size:16px; color:var(--grijs); padding:24px 0; }

/* --- beeldkader: één regel voor elk artikelbeeld (2026-07-30) --------------
   Elk artikelbeeld staat in hetzelfde kader: zandgrond, één dunne lijn eromheen
   en een vaste 4:3. Zonder die grond loopt een doorzichtige illustratie weg in
   het wit van de kaart, en bij delen op Facebook of LinkedIn wordt het
   alfakanaal weggegooid en op grijs platgeslagen.
   `cover` en niet `contain`: de beelden worden zelf op 4:3 gebakken (zand
   buiten de figuren, wit binnen de contouren), dus er valt niets af te snijden
   en illustratie, schilderij en screendump gedragen zich identiek.
   Het kader is recht; de kaart eromheen houdt zijn eigen ronding. */
.artikelkader { aspect-ratio:4 / 3; background:var(--zand);
  border:1px solid var(--lijn); overflow:hidden; }
.artikelkader img { width:100%; height:100%; object-fit:cover; display:block; }

/* --- uitgelicht (grote kaarten) --- */
.ruitgelicht { padding-top:32px; }
.rlead { display:grid; grid-template-columns:1fr 1.2fr; background:var(--wit);
  border-radius:var(--ronding); box-shadow:var(--schaduw); overflow:hidden;
  text-decoration:none; margin-bottom:24px; }
.rlead:hover { opacity:.92; }
@media (max-width:760px){ .rlead { grid-template-columns:1fr; } }
/* Het beeldvak ís het kader (zie .artikelkader hierboven). `align-self:start`
   houdt de 4:3 overeind: een grid-cel rekt standaard mee met de hoogste kolom,
   en die rek wint het anders van de ratio. */
.rlead .beeldvak { align-self:start; }
.rlead .tekstvak { padding:40px 44px; display:flex; flex-direction:column;
  justify-content:center; gap:12px; }
@media (max-width:640px){ .rlead .tekstvak { padding:28px 24px; } }
.rlabel { font-weight:400; font-size:12px; letter-spacing:2px; color:var(--rood);
  text-transform:uppercase; }
.rlead .rtitelgroot { font-family:'Bebas Neue',sans-serif; font-size:38px; letter-spacing:1px;
  color:var(--kop); text-transform:uppercase; line-height:1.1; }
.rlead p { font-weight:300; font-size:16px; line-height:1.65; color:var(--tekst); }
.rmeta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rmeta span.datum { font-weight:300; font-size:13px; color:var(--grijs); white-space:nowrap; }

/* --- herkomst-stip, met uitleg bij hover --- */
.rstip { position:relative; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--inkt); background:var(--wit); flex-shrink:0; display:inline-block; }
.rstip.gedeeltelijk-ai { background:linear-gradient(90deg, var(--rood) 50%, #fff 50%); }
.rstip.volledig-ai { background:var(--rood); }
/* Alleen stippen mét uitleg krijgen een tooltip (die in het filterpaneel niet). */
.rstip[data-uitleg]::after { content:attr(data-uitleg); position:absolute;
  bottom:calc(100% + 10px); right:-4px;
  width:230px; background:var(--inkt); color:var(--zand); font-family:'Roboto',sans-serif;
  font-weight:300; font-size:12.5px; line-height:1.5; letter-spacing:0; text-transform:none;
  text-align:left; padding:10px 12px; border-radius:8px; box-shadow:var(--schaduw);
  opacity:0; visibility:hidden; transition:opacity .15s; pointer-events:none; z-index:20; }
.rstip[data-uitleg]::before { content:""; position:absolute; bottom:calc(100% + 4px); right:2px;
  border:6px solid transparent; border-top-color:var(--inkt);
  opacity:0; visibility:hidden; transition:opacity .15s; pointer-events:none; z-index:20; }
.rstip[data-uitleg]:hover::after, .rstip[data-uitleg]:focus::after,
.rstip[data-uitleg]:hover::before, .rstip[data-uitleg]:focus::before {
  opacity:1; visibility:visible; }
/* In de artikelvoet staat het taartje links: tooltip dan naar rechts uitklappen. */
.rartikelvoet .rstip[data-uitleg]::after { right:auto; left:-4px; }
.rartikelvoet .rstip[data-uitleg]::before { right:auto; left:2px; }

/* --- yin/yang blok --- */
.ryinyang { padding-top:48px; }
.rspreuk { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:24px;
  line-height:30px; color:var(--rood); text-align:center; }
.rspreukbron { font-weight:400; font-size:11px; letter-spacing:2px; color:var(--grijs);
  padding-top:4px; text-align:center; }
.rduo { display:grid; grid-template-columns:1fr 96px 1fr; align-items:stretch; margin-top:16px; }
@media (max-width:760px){ .rduo { grid-template-columns:1fr; gap:16px; } }
.rduokaart { background:var(--wit); border-radius:var(--ronding); box-shadow:var(--schaduw);
  padding:32px 36px; display:flex; flex-direction:column; gap:12px; text-decoration:none; }
.rduokaart:hover { opacity:.92; }
.rduokaart .rduotitel { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px;
  color:var(--kop); text-transform:uppercase; line-height:1.2; }
.rduokaart p { font-weight:300; font-size:15px; line-height:1.6; color:var(--tekst); flex:1; }
.rduokaart.donker { background:var(--inkt); }
.rduokaart.donker .rduotitel { color:#fff; }
.rduokaart.donker p { color:var(--lijn); }
.rduomidden { display:flex; align-items:center; justify-content:center; }
.rduomidden img { width:84px; height:84px; border-radius:50%; }
.rverder { text-align:right; }
.rverder span, .rverder a { font-weight:300; font-size:14px; color:var(--rood);
  text-decoration:underline; white-space:nowrap; }
.rduokaart.donker .rverder span { color:#fff; }

/* --- sectiekop met streep --- */
.rsectie { border-top:1px solid var(--inkt); display:flex; justify-content:space-between;
  align-items:baseline; gap:16px; padding-top:12px; margin-bottom:20px; }
.rsectie h2 { font-family:'Bebas Neue',sans-serif; font-weight:500; font-size:24px;
  letter-spacing:2px; color:var(--kop); text-transform:uppercase; }
.rsectie .terzijde { font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:16px; color:var(--grijs); white-space:nowrap; text-decoration:none; }

/* --- artikelgrid --- */
.ralle { padding-top:48px; padding-bottom:64px; }
.rgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:960px){ .rgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .rgrid { grid-template-columns:1fr; } }
.rkaart { background:var(--wit); border:1px solid var(--lijn); border-radius:var(--ronding);
  box-shadow:var(--schaduw); padding:26px 28px; display:flex; flex-direction:column;
  gap:10px; text-decoration:none; }
.rkaart:hover { opacity:.9; }
.rkaart .rkaarttitel { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px;
  color:var(--kop); text-transform:uppercase; line-height:1.2; }
.rkaart p { font-weight:300; font-size:14px; line-height:1.6; color:var(--tekst); flex:1; }
.rkaart .rmeta span.leesverder { font-weight:300; font-size:13px; color:var(--rood);
  text-decoration:underline; white-space:nowrap; }

/* --- artikelpagina --- */
.rartikel { padding-top:32px; }
.rterug { display:inline-flex; align-items:center; gap:10px;
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:16px;
  color:var(--rood); text-decoration:none; margin-bottom:20px; }
.rterug img { width:26px; height:26px; border-radius:50%; }
.rterug:hover { color:var(--roodfel); }
/* Zelfde kader als de kaarten op de voorpagina */
.rartikelkaart { background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--ronding); box-shadow:var(--schaduw); padding:40px 44px 34px; }
@media (max-width:640px){ .rartikelkaart { padding:26px 22px 24px; } }
.rartikelkop { text-align:center; }
.rartikelkop h1 { font-family:'Bebas Neue',sans-serif; font-weight:500; font-size:46px;
  letter-spacing:1px; margin:10px 0 6px; color:var(--kop); text-transform:uppercase;
  line-height:1.15; }
@media (max-width:640px){ .rartikelkop h1 { font-size:34px; } }
.rartikelkop .ronderkop { font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:20px; color:var(--rood); }
.rartikelkop .rregel { font-weight:300; font-size:13px; color:var(--grijs); margin-top:10px; }
/* Het beeld vult de hele leeskolom (was 420px in een kolom van ruim 700px, en
   dat oogde als een postzegel op een groot vel). Sinds 2026-07-30 in hetzelfde
   kader als de uitgelicht-kaarten: zandgrond, dunne lijn, 4:3, recht. */
.rartikelbeeld { text-align:center; margin-top:28px; }
.rartikelbeeld .bijschrift { font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:13px; color:var(--grijs); margin-top:8px; }
.rinhoud { font-weight:300; font-size:17px; line-height:1.75; color:var(--kop); margin-top:32px; }
.rinhoud p { margin:0 0 18px; }
.rinhoud strong { font-weight:700; }
.rinhoud a { color:var(--rood); }
.rinhoud h2 { font-family:'Bebas Neue',sans-serif; font-weight:500; font-size:26px;
  letter-spacing:1px; color:var(--kop); text-transform:uppercase; margin:30px 0 12px; }
.rinhoud blockquote { font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:24px; line-height:30px; color:var(--rood); margin:26px 0; }
.rinhoud pre { background:var(--zand); border:1px solid var(--lijn); border-radius:8px;
  padding:16px 18px; font-family:'Roboto',Arial,sans-serif; font-size:16px; color:#2563EB;
  font-weight:400; line-height:1.6; white-space:pre-wrap; margin:0 0 10px; }
.rinhoud figure.inline-beeld { margin:26px 0; }
.rinhoud figure.inline-beeld img { width:100%; height:auto; display:block; border-radius:8px; }
.rinhoud figure.inline-beeld figcaption { font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-size:13px; color:var(--grijs); margin-top:8px; }
.rinhoud img.inline-beeld-klein { max-width:100%; height:auto; }
.rinhoud .promptacties { margin:0 0 22px; text-align:right; }
.rinhoud .kopieerprompt { font-family:'Roboto',sans-serif; font-weight:400; font-size:12px;
  letter-spacing:.04em; color:var(--rood); background:none; border:1px solid var(--rood);
  border-radius:6px; padding:6px 12px; cursor:pointer; }
.rinhoud .kopieerprompt:hover { background:rgba(178,42,38,.06); }
.rartikelvoet { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--lijn); padding-top:16px; margin-top:26px; }
.rartikelvoet .label { font-weight:300; font-size:13px; color:var(--grijs); }

/* --- deelknop met menu --- */
.rdeelvak { margin-left:auto; position:relative; }
.rdeel { display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:none; border:1px solid var(--rood); border-radius:8px;
  cursor:pointer; padding:0; }
.rdeel:hover { background:rgba(178,42,38,.06); }
.rdeelmenu { display:none; position:absolute; right:0; bottom:calc(100% + 10px); z-index:30;
  min-width:212px; background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--ronding); box-shadow:var(--schaduw); padding:6px; }
.rdeelmenu.open { display:block; }
.rdeelmenu a, .rdeelmenu button { display:flex; align-items:center; gap:10px; width:100%;
  font-family:'Roboto',sans-serif; font-weight:300; font-size:14px; color:var(--tekst);
  background:none; border:none; border-radius:8px; padding:9px 12px; cursor:pointer;
  text-align:left; text-decoration:none; }
.rdeelmenu a:hover, .rdeelmenu button:hover { background:var(--zand); color:var(--rood); }
.rdeelmenu .scheiding { height:1px; background:var(--lijn); margin:5px 8px; }
.rleesook { padding-top:48px; padding-bottom:40px; }
.rgrid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .rgrid2 { grid-template-columns:1fr; } }

/* --- voet --- */
.rvoet { text-align:center; padding:0 32px 40px; }
.rvoet img.sensei { width:130px; }
.rvoet .totziens { padding-top:8px; font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-size:16px; color:var(--tekst); }
.rvoet p { font-weight:300; font-size:12px; color:var(--kop); margin:20px 0 0; }
.rvoet p a { color:var(--tekst); }

/* ── Cookiebanner (meetstraat fase 1, 2026-07-29) ─────────────────────────
   Overgenomen uit style.css, want de nieuws-sectie laadt die stylesheet niet.
   Eigen kleurwaarden waar nieuws.css de variabele niet kent: --zwartgrijs,
   --spacing-* en --font-heading bestaan hier niet. De .container-regel is
   scoped op de banner zelf; nav .container hierboven is een andere. */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:#272624; color:var(--beige); padding:1.5rem;
  box-shadow:0 -4px 12px rgba(0,0,0,.2);
  transform:translateY(100%); transition:transform .4s ease; }
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner .container { max-width:1200px; margin:0 auto; padding:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; }
.cookie-banner p { margin:0; font-size:.9rem; line-height:1.6; flex:1;
  min-width:250px; color:var(--beige); }
.cookie-banner p a { color:var(--beige); text-decoration:underline; }
.cookie-banner p a:hover { color:var(--beige); }
.cookie-buttons { display:flex; gap:.75rem; flex-shrink:0; }
.cookie-buttons button { font-family:'Bebas Neue',sans-serif; font-size:.9rem;
  padding:.5rem 1.2rem; border-radius:8px; border:none; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em; transition:opacity .3s ease; }
.cookie-buttons button:hover { opacity:.85; }
.cookie-accept { background:var(--rood); color:var(--beige); }
.cookie-decline { background:transparent; border:1px solid var(--beige) !important;
  color:var(--beige); }