@import url('../fonts/fonts.css');

/* ---------- Instellingen ----------
   Lettertype en kleuren staan op één plek. Kleuren zijn afgeleid van het groen in het beeldmerk. */
:root{
  --font-woordmerk:'Spectral',Georgia,'Times New Roman',serif;
  --font-tekst:'Spectral',Georgia,'Times New Roman',serif;

  --groen-donker:#16461A;   /* donkergroen uit het beeldmerk */
  --groen:#2C892C;          /* middengroen uit het beeldmerk */
  --groen-licht:#96C896;    /* lichtgroen uit het beeldmerk */
  --groen-zacht:#E7EEE4;    /* zachte tint voor vlakken */
  --papier:#F7F6F1;         /* achtergrond, warm wit */
  --papier-2:#EEEDE5;
  --inkt:#1C221C;           /* tekst, bijna zwart */
  --inkt-zacht:#4B544B;
  --lijn:#D6D8CE;

  --kolom:40rem;
  --breed:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--font-tekst);font-size:1.125rem;line-height:1.7;font-weight:400}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--groen-donker);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--groen)}
:focus-visible{outline:2px solid var(--groen);outline-offset:3px}
h1,h2,h3{font-weight:500;line-height:1.2;color:var(--groen-donker);margin:0}
h1{font-size:clamp(2.1rem,4.5vw,3.2rem);letter-spacing:-.005em}
h2{font-size:clamp(1.45rem,2.6vw,1.8rem);margin:2.6rem 0 .8rem}
h3{font-size:1.25rem}
p{margin:0 0 1.1rem}
.label{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--groen)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}

/* ---------- Woordmerk ---------- */
.woordmerk{font-family:var(--font-woordmerk);font-weight:500;color:#000;line-height:1.3;letter-spacing:0;text-decoration:none;display:block}
.woordmerk .kk{font-size:.72em;font-weight:600}

/* ---------- Kop ---------- */
.kop{background:var(--papier);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20}
.kop-binnen{max-width:var(--breed);margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.merk{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.merk img{width:70px;height:auto}
.merk .woordmerk{font-size:1.05rem}
.menu-knop{display:none;background:none;border:1px solid var(--lijn);border-radius:2px;font:inherit;font-size:.9rem;padding:.35rem .8rem;color:var(--inkt);cursor:pointer}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:flex-end}
.nav a{text-decoration:none;color:var(--inkt);font-size:.98rem;padding:.3rem 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--groen-donker);border-bottom-color:var(--groen-licht)}
.nav a[aria-current="page"]{color:var(--groen-donker);border-bottom-color:var(--groen)}

@media (max-width:980px){
  .menu-knop{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--lijn)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.5rem 1.5rem 1rem}
  .nav li{border-top:1px solid var(--lijn)}
  .nav a{display:block;padding:.75rem 0;border:0}
  .merk img{width:56px}
  .merk .woordmerk{font-size:.92rem}
}

/* ---------- Home: beeld bovenaan ---------- */
.held{position:relative;height:min(82vh,760px);min-height:420px;overflow:hidden;background:#3b3a2c}
.held video,.held img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,22,12,.62) 0%,rgba(12,22,12,.15) 45%,rgba(12,22,12,0) 70%)}
.held-tekst{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:var(--breed);margin:0 auto;padding:0 1.5rem 3.2rem;color:#fff}
.held blockquote{margin:0;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.15;font-weight:500;max-width:18ch}
.held cite{display:block;margin-top:.9rem;font-style:normal;font-size:1rem;letter-spacing:.04em;opacity:.92}
.pauze{position:absolute;right:1.2rem;bottom:1.2rem;z-index:3;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:2px;font:inherit;font-size:.8rem;padding:.3rem .7rem;cursor:pointer}

/* ---------- Paginakop ---------- */
.paginakop{max-width:var(--breed);margin:0 auto;padding:4.5rem 1.5rem 1rem}
.paginakop .label{display:block;margin-bottom:.9rem}
.paginakop .lead{max-width:var(--kolom);font-size:1.3rem;line-height:1.6;color:var(--inkt);margin-top:1.4rem}

/* ---------- Inhoud ---------- */
.inhoud{max-width:var(--breed);margin:0 auto;padding:1rem 1.5rem 5rem}
.tekst{max-width:var(--kolom)}
.tekst > h2:first-child{margin-top:1rem}
.blok{display:grid;grid-template-columns:minmax(0,var(--kolom)) minmax(0,1fr);gap:4rem;align-items:start;margin-top:1rem}
.blok + .blok{margin-top:2rem}
.blok.omgekeerd{grid-template-columns:minmax(0,1fr) minmax(0,var(--kolom))}
.blok.omgekeerd > .tekst{order:2}
.blok figure{margin:2.6rem 0 0}
@media (max-width:900px){
  .blok,.blok.omgekeerd{grid-template-columns:1fr;gap:1.5rem}
  .blok.omgekeerd > .tekst{order:0}
  .blok figure{margin-top:.5rem}
}
figure{margin:0}
figure img,figure video{width:100%;background:var(--papier-2)}
figcaption{font-size:.88rem;color:var(--inkt-zacht);margin-top:.55rem;line-height:1.5}
.staand{max-width:340px}
.staand video{aspect-ratio:9/16;object-fit:cover}
.breedbeeld{max-width:var(--breed);margin:3rem auto;padding:0 1.5rem}
.breedbeeld img{width:100%;height:auto}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- Citaat ---------- */
.citaat{margin:2.6rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--groen)}
.citaat p{font-size:clamp(1.35rem,2.4vw,1.65rem);line-height:1.35;color:var(--groen-donker);font-style:italic;margin:0}
.citaat cite{display:block;margin-top:.6rem;font-style:normal;font-size:.95rem;color:var(--inkt-zacht)}

/* ---------- Home: verder lezen ---------- */
.verder{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--lijn)}
.verder li{border-bottom:1px solid var(--lijn)}
.verder a{display:grid;grid-template-columns:13rem 1fr auto;gap:1.5rem;align-items:baseline;padding:1.15rem 0;text-decoration:none;color:var(--inkt)}
.verder strong{font-weight:500;font-size:1.25rem;color:var(--groen-donker)}
.verder span{color:var(--inkt-zacht)}
.verder a::after{content:"→";color:var(--groen)}
.verder a:hover strong{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (max-width:700px){.verder a{grid-template-columns:1fr auto;gap:.2rem 1rem}.verder span{grid-column:1}.verder a::after{grid-row:1;grid-column:2}}
.drie{display:flex;gap:.8rem 2.2rem;flex-wrap:wrap;margin:2rem 0 0;padding:0;list-style:none;font-size:1.35rem;color:var(--groen-donker)}
.drie li::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--groen);margin-right:.7rem;vertical-align:.2em}

/* ---------- Projecten ---------- */
.project{border-top:1px solid var(--lijn);padding-top:2.2rem;margin-top:3rem}
.project .label{display:block}
.project h2{margin-top:.6rem}
.project .ondertitel{font-size:1.2rem;color:var(--inkt-zacht);font-style:italic;margin:.3rem 0 1.2rem}

/* ---------- Mensen ---------- */
.mensen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem 1.8rem;margin-top:2rem}
@media (max-width:1100px){.mensen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.mensen{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1rem}}
.persoon{text-decoration:none;color:var(--inkt);display:block}
.persoon img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:opacity .2s}
.persoon:hover img{opacity:.92}
.persoon h2{font-size:1.3rem;margin:1rem 0 .15rem}
.persoon .rol{font-size:.95rem;color:var(--groen);margin:0 0 .5rem}
.persoon p{font-size:1rem;line-height:1.55;color:var(--inkt-zacht)}
.persoon .meer{font-size:.95rem;color:var(--groen-donker);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.profiel{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,var(--kolom));gap:4rem;align-items:start}
.profiel-beeld{position:sticky;top:7rem}
.profiel-beeld img{aspect-ratio:4/5;object-fit:cover;width:100%}
.profiel .typering{font-size:1rem;color:var(--inkt-zacht);margin:.6rem 0 0;line-height:1.5}
@media (max-width:900px){.profiel{grid-template-columns:1fr;gap:2rem}.profiel-beeld{position:static;max-width:22rem}}
.vragen{margin:3rem 0 0;padding:1.8rem 1.8rem .6rem;background:var(--groen-zacht)}
.vragen dt{font-weight:600;color:var(--groen-donker);font-size:1rem}
.vragen dd{margin:.2rem 0 1.2rem;font-style:italic}
.terug{display:inline-block;margin-top:2.5rem}
.clips{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;max-width:30rem}
.clips video{aspect-ratio:9/16;object-fit:cover;width:100%}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4rem;align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:2.5rem}}
address{font-style:normal;line-height:1.8}
.formulier label{display:block;font-size:.95rem;font-weight:500;margin:1.1rem 0 .3rem}
.formulier .optioneel{font-weight:400;color:var(--inkt-zacht)}
.formulier input,.formulier textarea{width:100%;font:inherit;font-size:1rem;padding:.65rem .75rem;border:1px solid #BFC3B6;border-radius:2px;background:#fff;color:var(--inkt)}
.formulier input:focus,.formulier textarea:focus{outline:2px solid var(--groen-licht);border-color:var(--groen)}
.formulier textarea{min-height:9rem;resize:vertical}
.formulier .privacy{font-size:.9rem;color:var(--inkt-zacht);margin-top:1rem}
.formulier .honing{position:absolute;left:-9999px}
.knop{display:inline-block;margin-top:1.2rem;background:var(--groen-donker);color:#fff;border:0;border-radius:2px;font:inherit;font-size:1rem;padding:.7rem 1.6rem;cursor:pointer;text-decoration:none}
.knop:hover{background:var(--groen);color:#fff}

/* ---------- Voet ---------- */
.voet{background:var(--papier-2);border-top:1px solid var(--lijn);margin-top:2rem}
.voet-binnen{max-width:var(--breed);margin:0 auto;padding:3rem 1.5rem 2.2rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;font-size:.95rem;line-height:1.7}
.voet .woordmerk{font-size:1.1rem;margin-bottom:.8rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet a{color:var(--inkt);text-decoration:none}
.voet a:hover{color:var(--groen-donker);text-decoration:underline}
.voet .klein{grid-column:1/-1;border-top:1px solid var(--lijn);padding-top:1.2rem;font-size:.85rem;color:var(--inkt-zacht);display:flex;gap:1.5rem;flex-wrap:wrap}
@media (max-width:760px){.voet-binnen{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:700px){.pauze{top:1rem;bottom:auto;right:1rem}}

/* ---------- Hero op de andere pagina's: lager, met de paginatitel ---------- */
.paginaheld{height:min(56vh,520px);min-height:320px}
.paginaheld .held-tekst{padding-bottom:2.6rem}
.paginaheld .label{color:#CFE6CF;display:block;margin-bottom:.6rem}
.paginaheld h1{color:#fff;max-width:20ch}
.paginaheld + .paginakop{padding-top:3rem}
.paginaheld + .paginakop .lead{margin-top:0}
.paginaheld img[src*="groepsfoto"]{object-position:50% 18%}