/* ==== Albert Sans, zelf gehost (SIL Open Font License) ==== */
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-400-normal.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/albert-sans-500-normal.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/albert-sans-700-normal.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-400-italic.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/albert-sans-700-italic.woff2") format("woff2")}

:root{
  /* ==== ECHTE MERKKLEUREN (uit dbvp.nl global-styles) ==== */
  --base:#F3F1EB;        /* creme, hoofdachtergrond (base) */
  --white:#FFFFFF;       /* contrast-light */
  --ink:#000000;         /* contrast-dark, zwarte koppen/tekst */
  --text:#565D5F;        /* primary, grijze tekst/knoppen/links */
  --text-2:#4C4F50;      /* mono-2, donkerder grijs */
  --brown:#9D7052;       /* mono-1, warm bruin voor koppen */
  --panel-1:#E1DED7;     /* mono-3, lichte warme sectieband */
  --panel-2:#E3DDD8;     /* mono-4, lichte warme sectieband */
  --grey-hover:#70797C;  /* primary-hover */
  --muted:#7C7C7C;       /* datums in recent denken */
  --title-grey:#444444;  /* posttitels */

  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --content:1400px;
  --pad-x:clamp(20px,4vw,40px);
  --band-y:clamp(30px,6vw,60px);
  --gap:clamp(20px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--font);
  font-size:clamp(14px,.875rem + ((100vw - 320px)*.006),20px);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--brown);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(40px,2.5rem + ((100vw - 320px)*.022),64px)}
h2{font-size:clamp(25px,1.56rem + ((100vw - 320px)*.016),42px)}
h3{font-size:clamp(22px,1.38rem + ((100vw - 320px)*.013),36px)}
h4{font-size:clamp(18px,1.125rem + ((100vw - 320px)*.002),20px)}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
em{font-style:italic}
img{max-width:100%;height:auto;display:block}

/* ==== banden (schermbreed) met binnenmaat ==== */
.band{width:100%}
.band--white{background:var(--white)}
.band--base{background:var(--base)}
.band--panel1{background:var(--panel-1)}
.band--panel2{background:var(--panel-2)}
.inner{max-width:var(--content);margin-inline:auto;padding:var(--band-y) var(--pad-x)}
.measure{max-width:none}

/* ==== herhaald DBVP-woordmerk boven secties ==== */
.brandmark{text-align:center;margin-bottom:clamp(16px,3vw,28px)}
.brandmark img{width:clamp(150px,20vw,200px);margin-inline:auto}
.brandmark .fallback{display:inline-block;font-weight:700;letter-spacing:.22em;color:var(--brown);font-size:1.5rem}

/* ==== HERO (schermbrede fotoband) ==== */
.hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;justify-content:center;
  background-size:cover;background-position:50% 50%;color:var(--white);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,24,.35),rgba(20,22,24,.18) 40%,rgba(20,22,24,.45));z-index:0}
.hero__in{position:relative;z-index:1;max-width:var(--content);margin-inline:auto;padding:clamp(60px,10vw,120px) var(--pad-x);width:100%}
.hero h1{color:var(--white);font-weight:700;margin-bottom:.2em}
.hero .sub{font-size:clamp(24px,1.5rem + ((100vw - 320px)*.009),32px);font-weight:700;margin:0}
.movements{margin-top:clamp(28px,6vw,72px)}
.movements ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.movements li{color:var(--white)}
@media(max-width:781px){.movements ul{grid-template-columns:1fr 1fr;gap:.6rem}}

/* ==== NAVIGATIE (gecentreerde balk onder hero) ==== */
.nav{background:var(--base);border-bottom:1px solid var(--panel-1)}
.nav__in{max-width:var(--content);margin-inline:auto;padding:.9rem var(--pad-x);display:flex;justify-content:center;align-items:center;position:relative}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(20px,4vw,56px);align-items:center;flex-wrap:wrap;justify-content:center}
.nav a{color:var(--ink);font-size:clamp(16px,1rem,18px)}
.nav a:hover{text-decoration:none;color:var(--brown)}
.nav .has-sub{position:relative}
.nav .has-sub::before{content:"";position:absolute;left:0;top:100%;width:100%;height:16px}
.nav .submenu{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--panel-1);
  min-width:230px;padding:.4rem;opacity:0;visibility:hidden;transition:opacity .15s;z-index:20;box-shadow:0 14px 34px -22px rgba(0,0,0,.4)}
.nav .has-sub:hover .submenu,.nav .has-sub:focus-within .submenu{opacity:1;visibility:visible}
.nav .submenu li{display:block}
.nav .submenu a{display:block;padding:.5rem .7rem;font-size:16px}
.nav .submenu a:hover{background:var(--panel-2)}
.nav .lang{display:flex;gap:.5rem;position:absolute;right:var(--pad-x)}
.nav .lang a{color:var(--text);font-size:14px}
.nav .lang a.on{color:var(--ink);font-weight:700}
.nav__toggle{display:none;position:absolute;left:var(--pad-x);background:none;border:0;color:var(--ink);cursor:pointer;padding:.4rem}
@media(max-width:781px){
  .nav__toggle{display:inline-flex}
  .nav ul{display:none;flex-direction:column;width:100%;gap:.2rem}
  .nav.open ul{display:flex}
  .nav .submenu{position:static;transform:none;opacity:1;visibility:visible;border:0;box-shadow:none;padding:.2rem 0 .4rem 1rem;min-width:0}
  .nav .lang{position:static;justify-content:center;margin-top:.6rem}
}

/* ==== prozablok / kolommen ==== */
.lead{color:var(--text)}
h2.section-title,h3.section-title{text-align:left;margin-bottom:clamp(20px,3vw,32px)}
.cols{display:flex;flex-wrap:wrap;gap:var(--gap)}
.cols>*{flex:1 1 0;min-width:min(100%,280px)}
.col-pad{padding:clamp(20px,4vw,40px)}
.col--white{background:var(--white)}
.col--base{background:var(--base)}
.col--p1{background:var(--panel-1)}
.col--p2{background:var(--panel-2)}
.block-title{font-weight:700;color:var(--brown);margin-bottom:.4em;display:block}

/* intro portret + tekst */
.intro-grid{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start}
.intro-portrait{flex:0 0 250px;max-width:250px;margin-inline:auto}
.intro-portrait figcaption{text-align:center;margin-top:.8rem}
.intro-portrait .role{color:var(--brown);font-weight:400;font-size:1.25rem;margin:.4rem 0 .2rem}
.intro-portrait .contact{color:var(--text);text-align:center;margin:0}
.intro-body{flex:1 1 320px}
.intro-body .first{color:var(--ink)}

/* citaten = grijze kaarten, witte tekst */
.quotes{display:flex;flex-wrap:wrap;gap:var(--gap)}
.quote{flex:1 1 260px;color:var(--white);padding:clamp(20px,4vw,40px)}
.quote--1{background:var(--text-2)}
.quote--2{background:var(--text)}
.quote--3{background:var(--grey-hover)}
.quote p{margin:0 0 .8em}
.quote cite{font-style:italic;display:block}

/* situaties = witte kaart met warme lijstblokken */
.card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.card h2{color:var(--brown)}
.cases-row{display:flex;flex-wrap:wrap;gap:var(--gap);margin-top:1rem}
.case{flex:1 1 300px}
.case .sector{font-style:italic;color:var(--text);margin-bottom:.5rem}
.case ul{list-style:none;margin:0;padding:clamp(16px,3vw,24px);background:var(--panel-1);font-size:clamp(15px,1rem,16px)}
.case.alt ul{background:var(--panel-2)}
.case li{margin-bottom:.7rem}
.case li:last-child{margin-bottom:0}

/* recent denken */
.denken{display:flex;flex-wrap:wrap;gap:var(--gap)}
.denken__intro{flex:1 1 30%;background:var(--panel-1);padding:clamp(20px,4vw,40px)}
.denken__intro strong{color:var(--text)}
.denken__list{flex:1 1 60%;background:var(--panel-2);padding:clamp(20px,4vw,40px)}
.postlist{list-style:none;margin:0;padding:0}
.postitem{margin-bottom:1rem}
.postitem a{display:flex;gap:12px;align-items:center}
.postitem a:hover{text-decoration:none}
.postitem .thumb{width:45px;height:45px;flex:0 0 45px;border-radius:3px;background:var(--panel-1);object-fit:cover}
.postitem .meta{font-size:14px;color:var(--muted)}
.postitem .ptitle{font-size:16px;color:var(--title-grey)}

/* uates */
.uates-head{color:var(--brown)}
.uates-cols{display:flex;flex-wrap:wrap;gap:var(--gap)}
.uates-cols>div{flex:1 1 280px;padding:clamp(20px,4vw,40px)}
.uates-cols .u1{background:var(--white);color:var(--text)}
.uates-cols .u2{background:var(--white);text-align:center}
.uates-cols .u2 .cap{color:var(--grey-hover);margin-top:1rem}
.uates-cols .u3{background:var(--text);color:var(--white)}

/* knop */
.btn{display:inline-block;background:var(--text);color:var(--white);border:0;border-radius:100px;
  padding:calc(.667em + 2px) calc(1.333em + 2px);font-weight:700;font-family:var(--font);cursor:pointer}
.btn:hover{background:var(--grey-hover);color:var(--white);text-decoration:none}

/* footer */
.foot-cta{background:var(--panel-1)}
.foot-cover{position:relative;background-size:cover;background-position:50% 50%;color:var(--white);overflow:hidden}
.foot-cover::before{content:"";position:absolute;inset:0;background:rgba(20,22,24,.5);z-index:0}
.foot-cover .inner{position:relative;z-index:1}
.foot-cols{display:flex;flex-wrap:wrap;gap:var(--gap)}
.foot-cols>div{flex:1 1 260px}
.foot-cols h2{color:var(--white)}
.foot-cols a{color:var(--white);text-decoration:underline}
.foot-nav ul{list-style:none;margin:0;padding:0;line-height:2}
.foot-logo{text-align:center;margin:clamp(30px,6vw,60px) 0}
.foot-logo img{width:clamp(180px,24vw,260px);margin-inline:auto;filter:brightness(0) invert(1)}
.foot-move ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
@media(max-width:781px){.foot-move ul{grid-template-columns:1fr 1fr}}
.copyright{text-align:center;margin-top:clamp(24px,5vw,60px)}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

/* ==== per-pagina hero (binnenpagina's) ==== */
.hero--page{min-height:min(52vh,460px)}
.hero--page .hero__in{padding-block:clamp(48px,8vw,90px)}
.hero--page h1{color:var(--white)}

/* ==== categorieën, tags en filterbalk ==== */
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.chip{font-family:var(--font);font-size:14px;border:1px solid var(--panel-1);background:var(--white);color:var(--text);border-radius:100px;padding:.4em .95em;cursor:pointer;line-height:1;transition:all .15s}
.chip:hover{border-color:var(--brown);color:var(--brown)}
.chip.is-on{background:var(--text);color:var(--white);border-color:var(--text)}
.chip--tag{color:var(--grey-hover)}
.taxrow{margin:.6rem 0 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.tax{display:inline-block;font-size:13px;color:var(--muted);border:1px solid var(--panel-1);border-radius:100px;padding:.25em .7em;line-height:1.3}
.tax--cat{color:var(--brown);border-color:var(--panel-2)}
a.tax:hover{border-color:var(--brown);color:var(--brown);text-decoration:none}
.postitem .tax{margin-top:.5rem}

/* ==== gescheiden taal- en onderwerpfilter ==== */
.filters{margin:1.5rem 0}
.filtergroup{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 .55rem}
.filtergroup .flabel{font-size:13px;color:var(--muted);min-width:82px}
.chip--lang{border-color:var(--brown);color:var(--brown)}
.chip--lang.is-on{background:var(--brown);border-color:var(--brown);color:var(--white)}
.tax--lang{color:var(--brown);border-color:var(--panel-2);font-weight:500}