/* Automatisch samengesteld door gereedschap/huisstijl-naar-wordpress.py.
   Niet met de hand aanpassen — wijzig de bestanden in site/src/styles/. */

/* ─── tokens.css ─── */
/* ═══════════════════════════════════════════════════════════
   HUISSTIJL — Hervormde Gemeente Westerhaar
   Eén bron van waarheid. De stijlgids beschrijft wat hier staat.
   Wijzig hier, en het verandert overal.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Merkkleuren — vlakken en accenten */
  --salie:        #769584;
  --salie-zacht:  #E8EDEA;
  --amber:        #EAA838;
  --amber-zacht:  #FBF3E0;
  --lei:          #33424C;
  --lei-zacht:    #E5E8EA;

  /* Tekstveilige varianten — WCAG AA op lichte ondergrond */
  --salie-tekst:  #4C6656;   /* 5.62:1 op ecru */
  --amber-tekst:  #8F620E;   /* 4.79:1 op ecru */

  /* Neutrale basis */
  --wit:        #FFFFFF;
  --achter:     #F4F2EE;
  --zand:       #E8EAE4;
  --lijn:       #DDD6CB;
  --lijn-zacht: #E7E1D8;
  --tekst:      #1E2B33;     /* 12.97:1 op ecru */
  --sub:        #6B6259;     /* 5.34:1 op ecru */

  /* Ruimte */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;   --s8:4rem;
  --s9:6rem;   --s10:8rem;

  /* Radius */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px; --r-vol:999px;

  /* Elevatie — gelaagd en warm getint */
  --e1: 0 1px 2px rgba(30,43,51,.04), 0 2px 6px rgba(30,43,51,.04);
  --e2: 0 2px 4px rgba(30,43,51,.04), 0 8px 20px rgba(30,43,51,.07);
  --e3: 0 4px 8px rgba(30,43,51,.05), 0 16px 40px rgba(30,43,51,.11);

  /* Beweging */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-uit:  cubic-bezier(.16, 1, .3, 1);
  --ease-veer: cubic-bezier(.34, 1.4, .64, 1);

  /* Layout
     --breed  overzichtspagina's: roosters, kaarten en lijsten naast elkaar
     --smal   leespagina's: houdt de regel op ongeveer 65 tekens, wat prettiger
              leest en meetelt bij een gemeente met veel oudere lezers */
  --breed: 1240px;
  --smal: 720px;
  /* Eén rechterlijn voor lopende tekst én tabellen op de informatiepagina's.
     Ruimer dan een leesmaat voor lange teksten, want dit zijn naslagpagina's
     met korte alinea's — maar niet zo breed dat een regel onleesbaar wordt. */
  --lees: 48rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Alle donkere paginakoppen zijn even hoog, ook die van de startpagina. */
  --kop-hoogte: clamp(17rem, 25vw, 19rem);
  /* Zo gekozen dat de tekst midden in de band staat en op elke pagina
     op precies dezelfde regel begint. */
  --kop-marge: clamp(2rem, 3.6vw, 2.9rem);

  /* Typografie */
  --font-kop:   'Fraunces', Georgia, serif;
  --font-tekst: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ─── basis.css ─── */
/* ═══ RESET & BASIS ═══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* Grotere basismaat — de gemeente telt veel oudere lezers.
   Alle rem-waarden schalen hierin mee. */
html {
  font-size:clamp(17px, 16px + .25vw, 19px);
  scroll-behavior:smooth; scroll-padding-top:6rem; -webkit-text-size-adjust:100%;
}
body {
  font-family:var(--font-tekst);
  background:var(--achter);
  color:var(--tekst);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg, video { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:.18em; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* E-mailadressen zijn lange ononderbroken strings. Zonder dit lopen ze
   buiten hun kader — zeker in smalle kaarten. */
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap:anywhere; max-width:100%; }
:focus-visible { outline:2px solid var(--salie-tekst); outline-offset:3px; border-radius:var(--r-s); }
::selection { background:var(--salie-zacht); color:var(--tekst); }

h1,h2,h3,h4 { font-family:var(--font-kop); font-weight:700; line-height:1.15; letter-spacing:-.022em; text-wrap:balance; }
h1 { font-size:clamp(2.1rem, 4.6vw, 3.3rem); font-variation-settings:'opsz' 120; line-height:1.06; letter-spacing:-.028em; }
h2 { font-size:clamp(1.7rem, 3.6vw, 2.4rem); font-variation-settings:'opsz' 80; }
h3 { font-size:clamp(1.1rem, 2vw, 1.3rem); font-weight:600; }
p { text-wrap:pretty; }

.skip {
  position:absolute; left:var(--s4); top:-100px; z-index:200;
  background:var(--tekst); color:#fff; padding:var(--s3) var(--s5);
  border-radius:var(--r-m); font-size:.85rem; font-weight:600;
  text-decoration:none; transition:top var(--dur-2) var(--ease-uit);
}
.skip:focus { top:var(--s4); }

/* Onzichtbaar mikpunt voor verwijzingen naar een sectie verderop.
   scroll-margin houdt rekening met de vastgezette kopbalk. */
.anker { display:block; height:0; scroll-margin-top:6rem; }

.visueel-verborgen {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ═══ LAYOUT ═══ */
.wrap { max-width:var(--breed); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-smal { max-width:var(--smal); margin-inline:auto; padding-inline:var(--gutter); }
.sectie { padding-block:clamp(2.25rem, 4.5vw, var(--s8)); }
/* Voor een sectie die direct op de vorige aansluit en geen eigen kop heeft:
   twee volle sectiemarges op elkaar geeft een gat. */
.sectie-aansluitend { padding-block:clamp(1.5rem, 3vw, var(--s6)); }
.sectie-lijn { position:relative; }
.sectie-lijn::before {
  content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:linear-gradient(90deg, var(--lijn), transparent 70%);
}

/* ═══ TYPOGRAFISCHE HULPKLASSEN ═══ */
.eyebrow {
  font-size:0.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sub); display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem;
}
.eyebrow::after {
  content:''; height:1px; flex:1; max-width:110px; background:var(--lijn);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--dur-4) var(--ease-uit) 200ms;
}
.is-zichtbaar .eyebrow::after, .eyebrow.is-zichtbaar::after { transform:scaleX(1); }
.lead { font-size:1.02rem; font-weight:300; color:var(--sub); line-height:1.85; max-width:58ch; }
.label { font-size:0.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); }

/* ═══ KNOPPEN ═══ */
.knop {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.25rem; border-radius:var(--r-vol);
  font-size:.85rem; font-weight:600; text-decoration:none;
  transition:transform var(--dur-2) var(--ease-veer), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.knop:hover { transform:translateY(-2px); }
.knop-vol { background:var(--salie); color:#fff; box-shadow:var(--e1); }
.knop-vol:hover { background:var(--salie-tekst); box-shadow:var(--e2); }
.knop-licht { background:#fff; color:var(--tekst); border:1px solid var(--lijn); }
.knop-licht:hover { border-color:var(--salie); box-shadow:var(--e2); }
.knop-op-donker { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.knop-op-donker:hover { background:rgba(255,255,255,.18); }
.knop-pijl { transition:transform var(--dur-2) var(--ease-uit); }
.knop:hover .knop-pijl { transform:translateX(3px); }

/* ═══ KAART ═══ */
.kaart {
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  box-shadow:var(--e1);
  transition:transform var(--dur-3) var(--ease-uit), box-shadow var(--dur-3) var(--ease-uit), border-color var(--dur-3) var(--ease);
}
a.kaart, .kaart-klikbaar { text-decoration:none; display:block; }
a.kaart:hover, .kaart-klikbaar:hover { transform:translateY(-3px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--salie) 40%, var(--lijn)); }

/* ═══ GRAIN ═══ */
.grain { position:relative; isolation:isolate; }
.grain::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ ONTHULLING BIJ SCROLL ═══ */
[data-reveal] {
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-4) var(--ease-uit), transform var(--dur-4) var(--ease-uit);
  transition-delay:calc(var(--i, 0) * 70ms);
}
[data-reveal].is-zichtbaar { opacity:1; transform:none; }

/* ═══ PROZA — vrije tekst uit het CMS ═══ */
/* De pagina mag zo breed zijn als de rest van de site; alleen de lopende tekst
   blijft op leesbreedte. Tabellen en lijsten gebruiken de ruimte wél. */
.proza { max-width:none; }
.proza > p,
.proza > h2,
.proza > h3,
.proza > ul,
.proza > ol,
.proza > blockquote { max-width:var(--lees); }
.proza table { width:100%; max-width:var(--lees); }
.proza > * + * { margin-top:1.1em; }
.proza h2 { margin-top:2em; font-size:clamp(1.35rem,2.6vw,1.7rem); }
.proza h3 { margin-top:1.7em; }
.proza ul, .proza ol { padding-left:1.3em; }
.proza li + li { margin-top:.35em; }
.proza a { color:var(--salie-tekst); font-weight:500; }
.proza blockquote {
  border-left:3px solid var(--salie); padding:.2rem 0 .2rem 1.2rem;
  font-family:var(--font-kop); font-size:1.1rem; line-height:1.6; color:var(--tekst);
}
.proza code {
  font-family:ui-monospace, Menlo, monospace; font-size:.86em;
  background:var(--zand); padding:.12rem .35rem; border-radius:var(--r-s);
}
.proza table { width:100%; border-collapse:collapse; font-size:.9rem; }
.proza th { text-align:left; font-size:0.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); padding:.5rem 0; border-bottom:1px solid var(--lijn); }
.proza td { padding:.55rem 0; border-bottom:1px solid var(--lijn-zacht); vertical-align:top; }
.proza-scroll { overflow-x:auto; }

/* ═══ MINDER BEWEGING ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .eyebrow::after { transform:scaleX(1) !important; }
}

/* ═══ PRINT ═══ */
@media print {
  .kop-balk, .voortgang, .geen-print { display:none !important; }
  body { background:#fff; font-size:11pt; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .kaart, .sectie { break-inside:avoid; }
}

/* ─── components/DienstRij.astro ─── */
.dienst {
    display: grid; grid-template-columns: 78px 1fr auto; gap: var(--s4);
    align-items: center;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--lijn-zacht);
    text-decoration: none;
    transition: background var(--dur-2) var(--ease), padding-inline var(--dur-3) var(--ease-uit),
                opacity var(--dur-3) var(--ease);
  }
  .dienst:last-child { border-bottom: 0; }
  .dienst:hover, .dienst:focus-visible {
    background: var(--achter);
    padding-inline: var(--s3);
    margin-inline: calc(var(--s3) * -1);
  }

  .dienst-datum time {
    display: flex; flex-direction: column; align-items: center;
    background: var(--wit); border: 1px solid var(--lijn);
    border-radius: var(--r-m); padding: .5rem .3rem;
    transition: border-color var(--dur-3) var(--ease), background var(--dur-3) var(--ease),
                color var(--dur-3) var(--ease);
  }
  .dienst[data-eerst] .dienst-datum time {
    background: var(--salie); border-color: var(--salie); color: #fff;
  }
  .dienst[data-bezig] .dienst-datum time {
    background: var(--amber); border-color: var(--amber); color: var(--tekst);
  }
  .dienst-dag {
    font-family: var(--font-kop); font-size: 1.4rem; font-weight: 700;
    line-height: 1; letter-spacing: -.02em;
  }
  .dienst-maand {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; margin-top: .18rem; opacity: .75;
  }

  .dienst-body { padding-block: .2rem; }
  .dienst-kop { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
  .dienst-tijd { font-weight: 700; font-size: .95rem; }
  .dienst-merk {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--amber-zacht); color: var(--amber-tekst);
    padding: .18rem .5rem; border-radius: var(--r-vol);
  }
  .dienst-thema {
    font-family: var(--font-kop); font-size: 1.02rem; font-weight: 600;
    letter-spacing: -.012em; margin-top: .2rem;
  }
  .dienst-vg { font-size: 0.92rem; color: var(--sub); margin-top: .1rem; }

  /* De drie tijdgebonden labels — standaard verborgen, de browser toont er één */
  .dienst-merk-nu, .dienst-merk-bezig, .dienst-merk-geweest { display: none; }
  .dienst[data-eerst] .dienst-merk-nu {
    display: inline; background: var(--salie-zacht); color: var(--salie-tekst);
  }
  .dienst[data-bezig] .dienst-merk-bezig { display: inline; }
  .dienst[data-geweest] .dienst-merk-geweest {
    display: inline; background: transparent; color: var(--sub); border: 1px solid var(--lijn);
  }

  /* Diensten die zijn geweest blijven staan, maar treden op de achtergrond */
  .dienst[data-geweest] { opacity: .55; }
  .dienst[data-geweest]:hover { opacity: .85; }
  .dienst[data-geweest] .dienst-agenda { display: none; }

  /* Agenda-knop — verschijnt bij hover, altijd zichtbaar op aanraakschermen */
  .dienst-agenda {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--salie-tekst);
    border: 1px solid var(--lijn); border-radius: var(--r-vol);
    padding: .35rem .7rem;
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-uit),
                border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  }
  .dienst:hover .dienst-agenda,
  .dienst:focus-visible .dienst-agenda {
    opacity: 1; transform: none; border-color: var(--salie); background: var(--wit);
  }

  @media (hover: none), (max-width: 700px) {
    .dienst-agenda { opacity: 1; transform: none; padding: .4rem; }
    .dienst-agenda-tekst { display: none; }
  }
  @media (max-width: 480px) {
    .dienst { grid-template-columns: 66px 1fr auto; gap: .7rem; }
  }

/* ─── components/Groepsfoto.astro ─── */
.groepsfoto { margin: 0 0 var(--s6); }
  .groepsfoto-vlak { position: relative; line-height: 0; }
  .groepsfoto-vlak img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-l); border: 1px solid var(--lijn); box-shadow: var(--e2);
  }

  .punten { position: absolute; inset: 0; }
  .punt {
    position: absolute; transform: translate(-50%, -50%);
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 2px solid transparent; background: transparent;
    padding: 0; cursor: pointer;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  }
  .punt:hover, .punt:focus-visible, .punt[data-aan] {
    border-color: #fff; background: rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 2px rgba(30, 43, 51, .35);
  }
  .punt-label {
    position: absolute; left: 50%; bottom: calc(100% + .5rem);
    transform: translateX(-50%) translateY(4px);
    background: var(--tekst); color: #fff;
    font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    padding: .4rem .7rem; border-radius: var(--r-m);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-uit);
  }
  .punt-label::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--tekst);
  }
  .punt:hover .punt-label,
  .punt:focus-visible .punt-label,
  .punt[data-aan] .punt-label { opacity: 1; transform: translateX(-50%) translateY(0); }

  figcaption {
    font-size: 0.88rem; color: var(--sub); margin-top: .7rem; line-height: 1.6;
    display: flex; align-items: center; gap: .5rem;
  }
  figcaption::before { content: ''; width: 14px; height: 1px; background: var(--salie); flex-shrink: 0; }

  /* Voor wie geen muis gebruikt of liever gewoon een lijst leest */
  .namenlijst { margin-top: var(--s4); }
  .namenlijst summary {
    cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--salie-tekst);
    padding: .4rem 0;
  }
  .namenlijst ul {
    list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
    margin-top: .6rem; padding: 0;
  }
  .namenlijst li {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vol);
    padding: .3rem .8rem; font-size: 0.92rem; cursor: default;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  }
  .namenlijst li:hover { border-color: var(--salie); background: var(--salie-zacht); }
  .namenlijst-afwezig {
    font-size: 0.92rem; color: var(--sub); line-height: 1.7; margin-top: .8rem;
    padding-top: .7rem; border-top: 1px solid var(--lijn-zacht);
  }
  .namenlijst-afwezig span {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }

  /* Hulpmiddel om de posities aan te wijzen */
  .markeer-hulp {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 120;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-m);
    padding: var(--s4); width: min(320px, calc(100vw - 2rem)); line-height: 1.5;
    box-shadow: var(--e3);
  }
  .markeer-knoppen { display: flex; gap: .35rem; flex-wrap: wrap; }
  .markeer-hulp p { font-size: 0.85rem; margin-bottom: .5rem; }
  .markeer-hulp input {
    width: 100%; font-size: 0.95rem; padding: .5rem .6rem; margin-bottom: .5rem;
    border: 2px solid var(--lijn); border-radius: var(--r-s);
  }
  .markeer-hulp input:enabled { border-color: var(--amber); background: var(--amber-zacht); }
  .markeer-hulp input:disabled { opacity: .5; }
  .markeer-hulp textarea {
    width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem;
    border: 1px solid var(--lijn); border-radius: var(--r-s); padding: .4rem;
    resize: vertical;
  }
  .markeer-hulp button {
    margin-top: .5rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; border: 1px solid var(--lijn); border-radius: var(--r-vol);
    padding: .35rem .8rem;
  }
  .markeer-hulp button:hover { border-color: var(--salie); background: var(--salie-zacht); }
  .groepsfoto-vlak[data-markeren] img { cursor: crosshair; }

  @media (max-width: 700px) {
    .punt { width: 2rem; height: 2rem; }
    .punt-label { font-size: 0.78rem; }

  }

/* ─── components/Kopbalk.astro ─── */
.kop-balk {
    position: sticky; top: 0; z-index: 100;
    background: rgba(30, 43, 51, .92);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: background var(--dur-3) var(--ease);
  }
  .kop-balk[data-klein] { background: rgba(30, 43, 51, .97); }

  .kop-inner { display: flex; align-items: center; gap: var(--s4); }

  .merk {
    display: flex; align-items: center; gap: .65rem;
    text-decoration: none; color: #fff;
    padding: .85rem 0; margin-right: auto;
    transition: padding var(--dur-3) var(--ease);
  }
  .kop-balk[data-klein] .merk { padding: .6rem 0; }
  .merk-tekst { display: flex; flex-direction: column; line-height: 1.15; }
  .merk-tekst strong {
    font-family: var(--font-kop); font-weight: 600;
    font-size: .95rem; letter-spacing: -.015em;
  }
  .merk-tekst span {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5);
    white-space: nowrap;
  }

  .hoofdnav { display: flex; gap: .1rem; }
  .hoofdnav a {
    position: relative;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    font-size: 0.78rem; font-weight: 600;
    padding: 1.35rem .58rem; white-space: nowrap;
    transition: color var(--dur-2) var(--ease), padding var(--dur-3) var(--ease);
  }
  .kop-balk[data-klein] .hoofdnav a { padding-block: 1.05rem; }
  .hoofdnav a::after {
    content: ''; position: absolute; left: .58rem; right: .58rem; bottom: 0;
    height: 2px; background: var(--amber); border-radius: 2px;
    transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform var(--dur-3) var(--ease-uit);
  }
  .hoofdnav a:hover { color: #fff; }
  .hoofdnav a:hover::after { transform: scaleX(.5); }
  .hoofdnav a[aria-current='page'] { color: #fff; }
  .hoofdnav a[aria-current='page']::after { transform: scaleX(1); }

  .menu-knop { display: none; padding: 1rem .25rem; }
  .menu-streep {
    display: block; position: relative;
    width: 22px; height: 2px; border-radius: 2px; background: #fff;
    transition: background var(--dur-2) var(--ease);
  }
  .menu-streep::before, .menu-streep::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px;
    border-radius: 2px; background: #fff;
    transition: transform var(--dur-3) var(--ease-uit);
  }
  .menu-streep::before { top: -7px; }
  .menu-streep::after { top: 7px; }
  .menu-knop[aria-expanded='true'] .menu-streep { background: transparent; }
  .menu-knop[aria-expanded='true'] .menu-streep::before { transform: translateY(7px) rotate(45deg); }
  .menu-knop[aria-expanded='true'] .menu-streep::after { transform: translateY(-7px) rotate(-45deg); }

  .mobiel-menu {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: var(--s2) var(--gutter) var(--s4);
  }
  .mobiel-menu nav { display: flex; flex-direction: column; }
  .mobiel-menu a {
    color: rgba(255, 255, 255, .78); text-decoration: none;
    font-size: .95rem; font-weight: 500;
    padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .mobiel-menu a[aria-current='page'] { color: var(--amber); }
  .mobiel-menu a:last-child { border-bottom: 0; }

  /* Met acht items past de balk tot ongeveer 1080 px; daaronder het menu. */
  @media (max-width: 1080px) {
    .hoofdnav { display: none; }
    .menu-knop { display: block; }
  }

/* ─── components/PaginaKop.astro ─── */
.pkop { background: var(--tekst); position: relative; overflow: hidden; isolation: isolate; }
  .pkop-mesh {
    position: absolute; inset: -30%; z-index: 0;
    background:
      radial-gradient(38% 52% at 80% 8%, rgba(118,149,132,.28), transparent 68%),
      radial-gradient(30% 40% at 8% 96%, rgba(234,168,56,.12), transparent 66%);
    animation: pkopdrift 34s var(--ease) infinite alternate;
  }
  @keyframes pkopdrift {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  }
  .pkop-inner {
    position: relative; z-index: 1;
    min-height: var(--kop-hoogte);
    padding-block: var(--kop-marge) var(--s5);
    display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, var(--s7));
    align-content: start; align-items: start;
  }
  /* Met inhoud rechts krijgt de kop dezelfde tweekoloms-opbouw als de startpagina;
     zonder blijft het één kolom en houden we het donkere vlak lager. */
  .pkop-inner:has(.pkop-zij) { grid-template-columns: 1.25fr .75fr; }
  .pkop-tekst { min-width: 0; }
  .pkop-zij { min-width: 0; }
  @media (max-width: 860px) {
    .pkop-inner:has(.pkop-zij) { grid-template-columns: 1fr; }
  }
  .pkop-eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--salie); margin-bottom: var(--s4);
  }
  .pkop h1 { color: #fff; max-width: 20ch; }
  .pkop-intro {
    color: rgba(255,255,255,.82); font-weight: 300; font-size: 1.02rem;
    line-height: 1.85; max-width: 58ch; margin-top: var(--s5);
  }
  @media (prefers-reduced-motion: reduce) { .pkop-mesh { animation: none !important; } }

/* ─── components/PersoonKaart.astro ─── */
.persoon {
    padding: var(--s5);
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s4); align-items: start;
  }

  .persoon-beeld {
    width: 56px; height: 56px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    background: var(--salie-zacht);
    display: grid; place-items: center;
    border: 1px solid var(--lijn);
  }
  .persoon-beeld img { width: 100%; height: 100%; object-fit: cover; }
  .persoon-initialen {
    font-family: var(--font-kop); font-size: 1.05rem; font-weight: 700;
    color: var(--salie-tekst); letter-spacing: -.01em; line-height: 1;
  }

  .persoon-tekst { min-width: 0; }
  .persoon-rol {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--salie-tekst); display: block; margin-bottom: .3rem;
  }
  .persoon-naam { font-size: 1.1rem; font-weight: 600; margin-bottom: .45rem; }
  .persoon-links { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .persoon-links a {
    font-size: 0.92rem; color: var(--sub); text-decoration: none;
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
  }
  .persoon-links a:hover { color: var(--salie-tekst); text-decoration: underline; }
  .persoon-extra { font-size: 0.9rem; color: var(--sub); font-variant-numeric: tabular-nums; }
  .persoon[hidden] { display: none; }

/* ─── components/Voettekst.astro ─── */
.voet {
    background: var(--tekst);
    color: rgba(255, 255, 255, .72);
    margin-top: var(--s7);
  }
  .voet-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s6);
    padding-block: clamp(2.5rem, 6vw, var(--s8));
    position: relative; z-index: 1;
  }
  .voet-h {
    font-family: var(--font-kop); font-size: 1.05rem; color: #fff;
    font-weight: 600; margin-bottom: .5rem; letter-spacing: -.015em;
  }
  .voet-p { font-size: .82rem; line-height: 1.85; font-weight: 300; }
  .voet-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .42); display: block; margin-bottom: .7rem;
  }
  .voet-strip {
    display: flex; height: 7px; border-radius: var(--r-vol);
    overflow: hidden; margin-top: .9rem; max-width: 170px;
  }
  .voet-strip div { flex: 1; }
  .voet-nav { display: flex; flex-direction: column; gap: .3rem; }
  .voet-nav a, .voet-link, .voet-p a {
    font-size: .82rem; color: rgba(255, 255, 255, .72);
    text-decoration: none; width: fit-content;
    transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-uit);
  }
  .voet-nav a:hover, .voet-link:hover, .voet-p a:hover { color: #fff; transform: translateX(3px); }
  .voet-link { display: inline-block; margin-top: .7rem; font-weight: 600; color: var(--amber) !important; }
  .voet-onder {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: 1.1rem; font-size: 0.78rem; color: rgba(255, 255, 255, .45);
    display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
    position: relative; z-index: 1;
  }

/* ─── pages/404.astro ─── */
.knoprij { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ─── pages/activiteiten/[...slug].astro ─── */
.opzet { display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 5vw, var(--s7)); align-items: start; }
  .zijkant { display: grid; gap: var(--s4); position: sticky; top: 6rem; }
  .blok { padding: var(--s5); }
  .blok-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sub); display: block; margin-bottom: var(--s4);
    padding-bottom: .6rem; border-bottom: 1px solid var(--lijn-zacht);
  }
  .feit { display: flex; justify-content: space-between; gap: var(--s4); padding: .4rem 0; }
  .feit span { font-size: .8rem; color: var(--sub); flex-shrink: 0; }
  .feit strong { font-size: .84rem; font-weight: 600; text-align: right; }
  .contact { padding: .45rem 0; display: flex; flex-direction: column; min-width: 0; }
  .contact + .contact { border-top: 1px solid var(--lijn-zacht); }
  .contact strong { font-size: .88rem; font-weight: 600; }
  .contact a { font-size: .82rem; color: var(--salie-tekst); text-decoration: none; }
  .contact a:hover { text-decoration: underline; }

  @media (max-width: 860px) {
    .opzet { grid-template-columns: 1fr; }
    .zijkant { position: static; }
  }

/* ─── pages/activiteiten/index.astro ─── */
.groep + .groep { margin-top: var(--s7); }
  .groep-kop {
    font-size: 1.15rem; font-weight: 600; color: var(--sub);
    margin-bottom: var(--s4); display: flex; align-items: center; gap: var(--s4);
  }
  .groep-kop::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }
  .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
  .act { padding: var(--s5); display: flex; flex-direction: column; }
  .act-titel { margin-bottom: .45rem; }
  .act-sub { font-size: .88rem; color: var(--sub); line-height: 1.75; flex: 1; }
  .act-voet {
    display: flex; flex-wrap: wrap; gap: .3rem .8rem;
    margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--lijn-zacht);
    font-size: 0.78rem; color: var(--sub); font-weight: 600;
  }

/* ─── pages/anbi.astro ─── */
.kop-feiten { display: grid; gap: var(--s4); }
  .kop-feiten span {
    display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .1rem;
  }
  .kop-feiten strong {
    font-size: 1.05rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
  }

  .proza th {
    text-align: left; font-weight: 600; color: var(--tekst);
    font-size: 0.95rem; text-transform: none; letter-spacing: 0;
    padding-right: var(--s5); white-space: nowrap;
    border-bottom: 1px solid var(--lijn-zacht);
  }
  .rekeningen { margin-top: var(--s8); max-width: var(--lees); }
  .rekeningen-kop { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .4rem; }
  .rekeningen-uitleg { font-size: 1rem; color: var(--sub); margin-bottom: var(--s5); max-width: var(--lees); }
  .rekening-rij { padding: var(--s4) 0; border-bottom: 1px solid var(--lijn-zacht); }
  .rekening-rij:first-of-type { border-top: 2px solid var(--tekst); }
  .rekening-kop {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap;
  }
  .rekening-naam { font-size: 1.05rem; font-weight: 600; }
  .rekening-iban {
    font-size: 1.05rem; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap;
  }
  .rekening-waarvoor { font-size: 0.95rem; color: var(--sub); line-height: 1.6; margin-top: .15rem; }
  .rekening-houder { font-size: 0.88rem; color: var(--sub); margin-top: .1rem; }

  .documenten { margin-top: var(--s8); max-width: var(--lees); }
  .documenten-kop { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: var(--s5); }
  .doc-groep + .doc-groep { margin-top: var(--s5); }
  .doc-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sub); display: block; margin-bottom: .6rem;
  }
  .download {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem var(--s5); text-decoration: none; font-size: 1rem; font-weight: 500;
    margin-bottom: .5rem;
  }
  .download-icoon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--salie-zacht); color: var(--salie-tekst);
    display: grid; place-items: center; font-weight: 700;
    transition: transform var(--dur-2) var(--ease-veer);
  }
  .download:hover .download-icoon { transform: translateY(2px); }
  .download-type {
    margin-left: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: .08em;
    color: var(--sub); flex-shrink: 0;
  }

/* ─── pages/contact.astro ─── */
.kop-feiten { display: grid; gap: var(--s4); }
  .kop-feiten span {
    display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .2rem;
  }
  .kop-feiten strong { font-size: 1rem; font-weight: 500; color: #fff; line-height: 1.6; }
  .kop-feiten a { color: #fff; text-decoration: none; }
  .kop-feiten a:hover { text-decoration: underline; }

  .boven { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
  .adresblok { padding: var(--s5); display: flex; flex-direction: column; }
  .blok-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sub); display: block; margin-bottom: var(--s4);
    padding-bottom: .6rem; border-bottom: 1px solid var(--lijn-zacht);
  }
  address { font-style: normal; font-size: .92rem; line-height: 1.8; }
  .tel { margin: .6rem 0 var(--s5); }
  .tel a { color: var(--salie-tekst); font-weight: 600; text-decoration: none; }
  .adresblok .knop { margin-top: auto; align-self: flex-start; }
  .tijdrij { display: flex; justify-content: space-between; gap: var(--s4); padding: .4rem 0; }
  .tijdrij span { font-size: .85rem; color: var(--sub); }
  .tijdrij strong { font-family: var(--font-kop); font-size: 1rem; font-weight: 600; }
  .klein { font-size: .82rem; color: var(--sub); line-height: 1.7; margin: .8rem 0 var(--s5); }

  .personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s5); }
  .persoon { padding: var(--s5); }
  .persoon-rol {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--salie-tekst); display: block; margin-bottom: .4rem;
  }
  .persoon-naam { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
  .persoon-links { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
  .persoon-links a { font-size: .82rem; color: var(--sub); text-decoration: none; max-width: 100%; }
  .persoon-links a:hover { color: var(--salie-tekst); text-decoration: underline; }

  .zoek { margin-top: var(--s5); max-width: 30rem; }
  .zoek-veld {
    display: flex; align-items: center; gap: .6rem;
    background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--r-m);
    padding: .1rem .9rem;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .zoek-veld:focus-within { border-color: var(--salie); box-shadow: var(--e2); }
  .zoek-veld svg { color: var(--sub); flex-shrink: 0; }
  .zoek-veld input {
    flex: 1; border: 0; outline: 0; background: none;
    font: inherit; font-size: 1.02rem; padding: .75rem 0; min-width: 0;
  }
  .zoek-veld input::-webkit-search-cancel-button { display: none; }
  .zoek-veld button {
    font-size: 1.3rem; line-height: 1; color: var(--sub); padding: .2rem .3rem;
  }
  .zoek-veld button:hover { color: var(--tekst); }
  .zoek-uitslag { font-size: 0.92rem; color: var(--sub); margin-top: .6rem; min-height: 1.5em; }
  .zoek-uitslag b { color: var(--tekst); }

  .overig { margin-top: var(--s5); border-top: 2px solid var(--lijn); }
  .overig-rij {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto;
    gap: var(--s4); align-items: baseline;
    padding: .85rem 0; border-bottom: 1px solid var(--lijn-zacht);
  }
  .overig-functie { font-weight: 600; font-size: 1rem; }
  .overig-naam { color: var(--sub); font-size: 0.95rem; }
  .overig-contact { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: right; }
  .overig-contact a { font-size: 0.92rem; color: var(--salie-tekst); text-decoration: none; }
  .overig-contact a:hover { text-decoration: underline; }
  .overig-iban { font-size: 0.88rem; color: var(--sub); font-variant-numeric: tabular-nums; }
  @media (max-width: 760px) {
    .overig-rij { grid-template-columns: 1fr; gap: .15rem; }
    .overig-contact { align-items: flex-start; text-align: left; margin-top: .3rem; }
  }

  .wijken { display: grid; gap: .5rem; margin-top: var(--s5); }
  .wijk[hidden] { display: none; }
  .wijk-treffer { background: var(--amber-zacht); padding: 0 .15rem; border-radius: 2px; }
  .wijk { overflow: hidden; }
  .wijk summary {
    display: flex; align-items: center; gap: var(--s4);
    padding: .9rem var(--s5); cursor: pointer; list-style: none;
  }
  .wijk summary::-webkit-details-marker { display: none; }
  .wijk-nr {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--salie-zacht); color: var(--salie-tekst);
    padding: .2rem .55rem; border-radius: var(--r-vol); flex-shrink: 0;
  }
  .wijk-naam { font-weight: 600; font-size: .92rem; flex: 1; }
  .wijk-chevron { color: var(--sub); transition: transform var(--dur-2) var(--ease-uit); }
  .wijk[open] .wijk-chevron { transform: rotate(180deg); }
  .wijk-inhoud { padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--lijn-zacht); padding-top: var(--s4); }
  .wijk-straten { font-size: .84rem; color: var(--sub); line-height: 1.75; margin-bottom: .7rem; }

/* ─── pages/diensten.astro ─── */
.kop-tijden { display: grid; gap: var(--s4); }
  .kop-tijd {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-m); padding: .8rem 1.2rem; color: #fff;
  }
  .kop-tijd span {
    display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .15rem;
  }
  .kop-tijd strong { font-family: var(--font-kop); font-size: 1.35rem; font-weight: 600; }

  .kolom-kop {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6);
  }
  .kolom-kop .lead { margin-top: .5rem; }

  .maand + .maand { margin-top: var(--s6); }
  .maand-kop {
    font-family: var(--font-tekst); font-size: 0.85rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sub);
    margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s4);
  }
  .maand-kop::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }

  .dienstenlijst { padding: var(--s2) var(--s5); }
  .leeg { padding: var(--s5); color: var(--sub); }
  .knoprij { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: var(--s5); }

  .vragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }
  .vraag { padding: var(--s5) var(--s6); }
  .vraag-v { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
  .vraag-a { font-size: 1rem; color: var(--sub); line-height: 1.75; }
  .vraag-a p + p { margin-top: .7rem; }
  .vraag-a a { color: var(--salie-tekst); font-weight: 600; }

/* ─── pages/index.astro ─── */
/* ─── HERO ─── */
  .hero { position: relative; overflow: hidden; background: var(--tekst); isolation: isolate; }
  .hero-mesh {
    position: absolute; inset: -25%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(36% 44% at 76% 16%, rgba(118,149,132,.32), transparent 68%),
      radial-gradient(32% 38% at 12% 84%, rgba(234,168,56,.15), transparent 66%),
      radial-gradient(46% 52% at 50% 110%, rgba(51,66,76,.5), transparent 70%);
    animation: drift 36s var(--ease) infinite alternate;
  }
  @keyframes drift {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.07); }
  }
  .hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.25fr .75fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: start;
    min-height: var(--kop-hoogte); padding-block: var(--kop-marge) var(--s5);
  }
  /* Zelfde maten als .pkop-eyebrow, zodat de kop op elke pagina op dezelfde regel begint */
  .hero-eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--salie); margin-bottom: var(--s4);
  }
  .hero-tekst h1 { color: #fff; margin-bottom: var(--s3); max-width: 24ch; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
  .hero-p {
    font-size: 1rem; font-weight: 300; color: rgba(255,255,255,.86);
    line-height: 1.7; max-width: 56ch; margin-bottom: var(--s4);
  }
  .hero-knoppen { display: flex; gap: .7rem; flex-wrap: wrap; }
  .hero-beeld { margin: 0; }
  .hero-beeld img {
    width: 100%; aspect-ratio: 3/2; object-fit: cover;
    max-height: calc(var(--kop-hoogte) - 4rem);
    border-radius: var(--r-l); border: 1px solid rgba(255,255,255,.16);
  }

  /* ─── Gedeelde sectiekop ─── */
  .kolom-kop {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6);
  }
  .kolom-kop .lead { margin-top: .5rem; }

  .vaste-tijden { display: flex; gap: var(--s6); }
  .vaste-tijd { display: flex; flex-direction: column; gap: .1rem; }
  .vaste-tijd-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sub);
  }
  .vaste-tijd strong {
    font-family: var(--font-kop); font-size: 1.6rem; font-weight: 700;
    letter-spacing: -.025em; line-height: 1.1;
  }

  .dienstenlijst { padding: var(--s2) var(--s5); }
  .leeg { padding: var(--s5); color: var(--sub); }
  .knoprij { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: var(--s5); }
  .agenda-hint {
    font-size: .95rem; color: var(--sub); margin-top: var(--s4);
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  }
  .agenda-hint a { color: var(--salie-tekst); font-weight: 600; }

  /* ─── Kernwaarden ─── */
  .waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .waarde { padding-top: var(--s4); border-top: 2px solid var(--lijn); }
  .waarde-dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: .8rem; }
  .waarde-naam { font-size: 1.4rem; margin-bottom: .1rem; }
  .waarde-sub { font-size: .95rem; color: var(--sub); }
  .waarden-citaat {
    font-family: var(--font-kop); font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.6; letter-spacing: -.015em; max-width: 62ch;
    margin: clamp(2rem, 5vw, var(--s7)) 0 .6rem;
  }

  /* ─── Meditatie ─── */
  .meditatie { background: var(--tekst); border-radius: var(--r-xl); overflow: hidden; position: relative; isolation: isolate; }
  .meditatie-mesh {
    position: absolute; inset: -30%; z-index: 0;
    background: radial-gradient(40% 60% at 82% 12%, rgba(118,149,132,.26), transparent 70%);
    animation: drift 30s var(--ease) infinite alternate;
  }
  /* Tekst links, beeld rechts. Onder de 900px komt het beeld bovenaan te staan,
     want een liggende foto naast een smalle kolom wordt een streepje. */
  .meditatie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: stretch; }
  .meditatie-inner { position: relative; z-index: 1; padding: clamp(1.8rem, 5vw, 3.2rem); max-width: 64ch; }

  .meditatie-beeld {
    position: relative; z-index: 1;
    margin: 0; grid-column: 2; grid-row: 1;
    align-self: stretch;
  }
  .meditatie-beeld img {
    width: 100%; height: 100%; min-height: 16rem;
    object-fit: cover; object-position: 62% center;
    display: block;
    /* De foto is al zwart-wit; dit haalt hem alleen iets naar de donkere
       ondergrond toe zodat hij niet als los vlak oplicht. */
    opacity: .92;
  }
  .meditatie-beeld figcaption {
    position: absolute; right: .7rem; bottom: .55rem;
    font-size: .68rem; letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }

  @media (max-width: 900px) {
    .meditatie { grid-template-columns: 1fr; }
    .meditatie-beeld { grid-column: 1; grid-row: 1; }
    .meditatie-beeld img { min-height: 13rem; max-height: 17rem; }
    .meditatie-inner { grid-row: 2; }
  }
  .meditatie-label {
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--amber); margin-bottom: var(--s4);
  }
  .meditatie-h { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .8rem; }
  .meditatie-p { color: rgba(255,255,255,.84); font-weight: 300; font-size: 1.08rem; line-height: 1.8; margin-bottom: var(--s5); }
  .meditatie-voet { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
  .meditatie-auteur { font-size: .9rem; color: rgba(255,255,255,.6); }

  /* ─── Overige berichten ─── */
  .nieuwsrij {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s4); margin-top: var(--s5);
  }
  .bericht {
    display: flex; flex-direction: column; gap: .2rem;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-l);
    padding: var(--s5); text-decoration: none; box-shadow: var(--e1);
    transition: transform var(--dur-3) var(--ease-uit), box-shadow var(--dur-3) var(--ease-uit), border-color var(--dur-3) var(--ease);
  }
  .bericht:hover {
    transform: translateY(-3px); box-shadow: var(--e3);
    border-color: color-mix(in srgb, var(--salie) 40%, var(--lijn));
  }
  .bericht-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
  .bericht-soort {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--salie-zacht); color: var(--salie-tekst);
    padding: .15rem .5rem; border-radius: var(--r-vol);
  }
  .bericht-meta time { font-size: 0.85rem; color: var(--sub); }
  .bericht-titel {
    font-family: var(--font-kop); font-size: 1.15rem; font-weight: 600;
    letter-spacing: -.012em; line-height: 1.3;
  }
  .bericht-sub { font-size: 0.95rem; color: var(--sub); line-height: 1.65; }
  .bericht-alle { justify-content: center; border-style: dashed; box-shadow: none; }
  .bericht-pijl {
    color: var(--salie-tekst); font-size: 1.2rem; margin-top: .4rem;
    transition: transform var(--dur-2) var(--ease-uit);
  }
  .bericht-alle:hover .bericht-pijl { transform: translateX(4px); }

  /* ─── Activiteiten ─── */
  .raster-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
  .raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); }
  .act-kaart { padding: var(--s5); display: flex; flex-direction: column; }
  .act-doel {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--salie-tekst); margin-bottom: .7rem;
  }
  .act-titel { margin-bottom: .4rem; }
  .act-sub { font-size: .98rem; color: var(--sub); line-height: 1.7; flex: 1; }
  .act-ritme {
    font-size: .85rem; color: var(--sub); font-weight: 600;
    margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--lijn-zacht);
  }

  /* ─── Waar ─── */
  .praktisch { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, var(--s7)); align-items: center; }

  /* ─── Geven ─── */
  .geven {
    display: grid; grid-template-columns: 1fr .9fr;
    gap: clamp(1.5rem, 4vw, var(--s7)); align-items: start;
  }
  .geven-tekst .lead { margin-top: .6rem; }
  .geven-manieren { display: grid; gap: var(--s4); }
  .manier {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-l);
    border-left: 3px solid var(--amber);
    padding: var(--s5);
  }
  .manier-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--amber-tekst); display: block; margin-bottom: .3rem;
  }
  .manier-naam {
    font-family: var(--font-kop); font-size: 1.25rem; font-weight: 700;
    letter-spacing: -.015em; display: block;
  }
  .manier-link {
    text-decoration: none; display: block;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease-uit);
  }
  .manier-link:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--amber); }
  .manier-uitleg { font-size: 0.95rem; color: var(--sub); line-height: 1.7; margin-top: .4rem; }
  @media (max-width: 860px) {
    .geven { grid-template-columns: 1fr; }
  }

  /* ─── Uitleg ─── */
  .vraag { padding: var(--s5) var(--s6); }
  .vraag-v { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
  .vraag-a { font-size: 1rem; color: var(--sub); line-height: 1.75; }
  .vraag-a p + p { margin-top: .7rem; }
  .vraag-a a { color: var(--salie-tekst); font-weight: 600; }

  /* ─── Responsief ─── */
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-beeld { order: -1; }
    .hero-beeld img { aspect-ratio: 16/9; }
    }
  @media (max-width: 640px) {
    .waarden { grid-template-columns: 1fr; gap: var(--s4); }
    .vaste-tijden { gap: var(--s5); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-mesh, .meditatie-mesh { animation: none !important; }
  }

/* ─── pages/kerkenwinkeltje.astro ─── */
.kop-feiten { display: grid; gap: var(--s4); }
  .kop-feiten span {
    display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .2rem;
  }
  .kop-feiten strong { font-size: 1rem; font-weight: 500; color: #fff; line-height: 1.6; }

  .beeld { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .hoofdfoto { margin: 0; }
  .hoofdfoto img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    border-radius: var(--r-l); border: 1px solid var(--lijn); box-shadow: var(--e2);
  }
  .hoofdfoto figcaption {
    font-size: 0.95rem; color: var(--sub); line-height: 1.65; margin-top: .7rem; max-width: 34ch;
  }
  .hoofdfoto figcaption strong { color: var(--tekst); font-weight: 600; }

  .galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .foto { margin: 0; }
  .foto img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    border-radius: var(--r-l); border: 1px solid var(--lijn); box-shadow: var(--e1);
  }
  .galerij-bijschrift {
    font-size: 0.9rem; color: var(--sub); margin-top: .8rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .galerij-bijschrift::before { content: ''; width: 14px; height: 1px; background: var(--salie); flex-shrink: 0; }

  .kolom-kop { margin-bottom: var(--s6); }
  .kolom-kop .lead { margin-top: .5rem; }

  .kasten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); }
  .kast img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-l); border: 1px solid var(--lijn); box-shadow: var(--e1);
  }
  .kast-tekst { margin-top: var(--s4); }
  .kast-kerk { font-size: 1.05rem; font-weight: 600; }
  .kast-adres { font-size: 0.95rem; color: var(--sub); margin-top: .1rem; }
  .kast-contact { font-size: 0.95rem; color: var(--sub); margin-top: .4rem; }
  .kast-contact a { color: var(--salie-tekst); font-weight: 600; text-decoration: none; }
  .kast-contact a:hover { text-decoration: underline; }


  .verder {
    margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--lijn);
    font-size: 1rem; color: var(--sub); line-height: 1.75;
  }
  .verder a { color: var(--salie-tekst); font-weight: 600; }

  @media (max-width: 900px) {
    .beeld { grid-template-columns: 1fr; }
    .hoofdfoto img { aspect-ratio: 4/3; }
    .hoofdfoto figcaption { max-width: none; }
  }

/* ─── pages/nieuws/[...slug].astro ─── */
.bkop { background: var(--tekst); position: relative; overflow: hidden; isolation: isolate; }
  .bkop-mesh {
    position: absolute; inset: -30%; z-index: 0;
    background: radial-gradient(40% 55% at 78% 10%, rgba(118,149,132,.26), transparent 70%);
  }
  .bkop-inner {
    position: relative; z-index: 1;
    min-height: var(--kop-hoogte); padding-block: var(--kop-marge) var(--s5);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .bkop-soort {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--amber); margin-bottom: var(--s4);
  }
  .bkop h1 { color: #fff; max-width: 22ch; }
  .bkop-meta {
    display: flex; gap: .8rem; flex-wrap: wrap; margin-top: var(--s5);
    font-size: .82rem; color: rgba(255,255,255,.6);
  }
  .bkop-meta span { font-weight: 600; color: rgba(255,255,255,.8); }
  .inhoud { font-size: 1.02rem; }
  .terug { margin-top: var(--s6); }

/* ─── pages/nieuws/index.astro ─── */
.lijst { display: grid; gap: var(--s4); max-width: 780px; }
  .bericht { padding: var(--s5) var(--s6); }
  .bericht-meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
  .bericht-soort {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: var(--salie-zacht); color: var(--salie-tekst);
    padding: .18rem .5rem; border-radius: var(--r-vol);
  }
  .bericht-meta time { font-size: 0.78rem; color: var(--sub); }
  .bericht-titel { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: .4rem; }
  .bericht-sub { font-size: .92rem; color: var(--sub); line-height: 1.75; }
  .bericht-auteur { font-size: .78rem; color: var(--sub); font-weight: 600; margin-top: .7rem; }
  .leeg { padding: var(--s5); color: var(--sub); }

/* ─── pages/over-ons.astro ─── */
.doorverwijs {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-xl);
    padding: clamp(1.5rem, 4vw, var(--s7)); text-decoration: none; box-shadow: var(--e1);
    transition: transform var(--dur-3) var(--ease-uit), box-shadow var(--dur-3) var(--ease-uit), border-color var(--dur-3) var(--ease);
  }
  .doorverwijs:hover {
    transform: translateY(-3px); box-shadow: var(--e3);
    border-color: color-mix(in srgb, var(--salie) 45%, var(--lijn));
  }
  .doorverwijs .lead { margin-top: .5rem; }
  .doorverwijs-pijl {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: var(--salie-zacht); color: var(--salie-tekst);
    display: grid; place-items: center; font-size: 1.2rem;
    transition: transform var(--dur-3) var(--ease-veer), background var(--dur-3) var(--ease);
  }
  .doorverwijs:hover .doorverwijs-pijl { transform: translateX(5px); background: var(--salie); color: #fff; }

  /* Het citaat staat alleen in zijn sectie — zonder dit stapelen twee
     volle sectiemarges op elkaar en valt er een gat vóór de kerkenraad. */
  .sectie-citaat { padding-bottom: clamp(1.25rem, 2.5vw, var(--s5)); }
  #kerkenraad { padding-top: clamp(2rem, 4vw, var(--s7)); }

  .citaat {
    font-family: var(--font-kop); font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    line-height: 1.6; letter-spacing: -.015em; max-width: 62ch;
    border-left: 3px solid var(--salie); padding-left: clamp(1rem, 3vw, 1.8rem);
  }

  .kolom-kop { margin-bottom: var(--s5); }
  .kolom-kop .lead { margin-top: .5rem; }

  .raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); margin-top: var(--s5); }

  .persoon { padding: var(--s5); }
  .persoon-rol {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--salie-tekst); display: block; margin-bottom: .4rem;
  }
  .persoon-naam { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
  .persoon-links { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
  .persoon-links a { font-size: 0.92rem; color: var(--sub); text-decoration: none; max-width: 100%; }
  .persoon-links a:hover { color: var(--salie-tekst); text-decoration: underline; }

  .verdieping { margin-top: var(--s6); }
  .verdieping-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sub); display: block; margin-bottom: .7rem;
  }
  .verdieping-rij {
    display: flex; align-items: center; gap: var(--s4);
    padding: .85rem 0; text-decoration: none;
    border-bottom: 1px solid var(--lijn-zacht);
    transition: padding-left var(--dur-3) var(--ease-uit), background var(--dur-2) var(--ease);
  }
  .verdieping-rij:hover { background: var(--zand); padding-left: var(--s4); }
  .verdieping-titel { font-size: 1.02rem; font-weight: 600; }
  .verdieping-doc {
    margin-left: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--amber-tekst);
    background: var(--amber-zacht); padding: .18rem .55rem; border-radius: var(--r-vol);
  }
  .verdieping-pijl {
    color: var(--salie-tekst); font-size: 1.2rem; flex-shrink: 0; margin-left: auto;
    transition: transform var(--dur-2) var(--ease-uit);
  }
  .verdieping-doc + .verdieping-pijl { margin-left: 0; }
  .verdieping-rij:hover .verdieping-pijl { transform: translateX(4px); }

  .werkwijze { display: grid; margin: var(--s5) 0 var(--s6); max-width: 62ch; }
  .werkwijze > div {
    display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s4);
    padding: .7rem 0; border-bottom: 1px solid var(--lijn-zacht);
  }
  .werkwijze > div:first-child { border-top: 1px solid var(--lijn-zacht); }
  .werkwijze dt {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sub); padding-top: .15rem;
  }
  .werkwijze dd { font-size: 0.98rem; line-height: 1.6; }
  @media (max-width: 560px) {
    .werkwijze > div { grid-template-columns: 1fr; gap: .15rem; }
  }

  .ambten { display: grid; gap: var(--s5); margin-top: var(--s6); }
  .ambt { padding-top: var(--s4); border-top: 2px solid var(--lijn); }
  .ambt-kop { display: flex; align-items: baseline; gap: .7rem; }
  .ambt-kop h3 { font-size: 1.15rem; font-weight: 600; }
  .ambt-aantal {
    font-size: 0.78rem; font-weight: 700; color: var(--sub);
    background: var(--zand); border-radius: var(--r-vol); padding: .1rem .5rem;
  }
  .ambt-acties { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s3); }
  .ambt-link {
    font-size: 0.92rem; font-weight: 600; color: var(--salie-tekst); text-decoration: none;
  }
  .ambt-link:hover { text-decoration: underline; }
  .ambt-mail {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: 0.88rem; font-weight: 600; text-decoration: none;
    color: var(--amber-tekst); background: var(--amber-zacht);
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
    border-radius: var(--r-vol); padding: .3rem .8rem;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .ambt-mail:hover { background: color-mix(in srgb, var(--amber) 28%, #fff); border-color: var(--amber); }
  .naam-wijk {
    font-size: 0.78rem; font-weight: 700; color: var(--salie-tekst);
    background: var(--salie-zacht); border-radius: var(--r-vol);
    padding: .05rem .45rem; margin-right: .1rem;
  }
  .namen { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--s4); }
  .naam-pil {
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vol);
    padding: .35rem .9rem; font-size: 0.92rem; font-weight: 500;
    display: inline-flex; align-items: baseline; gap: .45rem;
  }
  .naam-rol {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--salie-tekst);
  }
  .knoprij { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: var(--s5); }

  /* Veelgezocht */

  /* Groepen met pagina's */

  /* Afsluiter */
  .afsluiter { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: end; }
  .afsluiter-knoppen { display: flex; gap: .7rem; flex-wrap: wrap; }
  @media (max-width: 820px) {
    .afsluiter { grid-template-columns: 1fr; align-items: start; }
  }

/* ─── pages/pagina/[...slug].astro ─── */
.downloads { margin-top: var(--s7); display: grid; gap: .6rem; }
  .downloads-label {
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sub); margin-bottom: .2rem;
  }
  .download {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem var(--s5); text-decoration: none; font-size: .9rem; font-weight: 500;
  }
  .download-icoon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--salie-zacht); color: var(--salie-tekst);
    display: grid; place-items: center; font-weight: 700;
    transition: transform var(--dur-2) var(--ease-veer);
  }
  .download:hover .download-icoon { transform: translateY(2px); }

/* ─── pages/praktisch.astro ─── */
.onderwerpen { display: grid; border-top: 2px solid var(--tekst); }
  .onderwerp {
    display: flex; align-items: center; gap: var(--s4);
    padding: 1.05rem 0; text-decoration: none;
    border-bottom: 1px solid var(--lijn-zacht);
    transition: padding-left var(--dur-3) var(--ease-uit), background var(--dur-2) var(--ease);
  }
  .onderwerp:hover { background: var(--zand); padding-left: var(--s4); }
  .onderwerp-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .onderwerp-titel { font-size: 1.1rem; font-weight: 600; }
  .onderwerp-vraag { font-size: 0.98rem; color: var(--sub); }
  .onderwerp-doc {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--amber-tekst); background: var(--amber-zacht);
    padding: .18rem .55rem; border-radius: var(--r-vol);
  }
  .onderwerp-pijl {
    color: var(--salie-tekst); font-size: 1.2rem; flex-shrink: 0; margin-left: auto;
    transition: transform var(--dur-2) var(--ease-uit);
  }
  .onderwerp-doc + .onderwerp-pijl { margin-left: 0; }
  .onderwerp:hover .onderwerp-pijl { transform: translateX(4px); }

  .afsluiter {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s6);
    align-items: end; margin-top: clamp(2rem, 5vw, var(--s7));
  }
  .afsluiter-knoppen { display: flex; gap: .7rem; flex-wrap: wrap; }
  @media (max-width: 820px) { .afsluiter { grid-template-columns: 1fr; align-items: start; } }