/* ==========================================================================
   Hervormde wijkgemeente Drievliet-Oostendam — rondzes.nl
   Eén stylesheet, geen build-stap. Bovenaan staan de ontwerptokens: pas je die
   aan, dan verandert de hele site mee.

   De kleur komt uit het kruis in het logo: een rustig blauwgrijs, op wit, met
   lichtblauwe banden om de secties uit elkaar te houden. Geen sierrand, geen
   schaduw — de foto's van de twee gebouwen moeten het beeld dragen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Ondergrond — wit, met een lichtblauwe band om secties te scheiden */
  --papier:      #ffffff;
  --papier-diep: #f0f5f7;
  --kaart:       #ffffff;
  --rand:        #dde5e9;
  --rand-zacht:  #e8eef1;

  /* Tekst — een donkerblauwe zwart in plaats van puur zwart */
  --inkt:        #1c2b33;
  --inkt-zacht:  #4b5c65;
  --inkt-licht:  #78888f;

  /* Het blauwgrijs uit het kruis in het logo (#5e8595), verdiept tot het op
     wit als tekstkleur genoeg contrast heeft. */
  --primair:       #3d6475;
  --primair-diep:  #2b4a58;
  --primair-licht: #6f96a6;
  --primair-waas:  #e8eff2;

  /* Het diepe nachtblauw van de voet en het contactblok. */
  --blauw-diep:  #223844;

  --oker:      #8a6a1f;
  --oker-waas: #f8f1de;

  --terracotta: #b0503c;

  /* Tekstkleur op een gevuld blauw vlak. */
  --op-primair: #ffffff;

  /* Typografie — bewust geen webfonts: niets van buiten laden. Eén schreefloze
     stapel voor alles; de koppen onderscheiden zich door gewicht, niet door een
     tweede lettertype. */
  --schrift-kop:   "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-tekst: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --maat-xs:  0.875rem;
  --maat-s:   1rem;
  --maat-m:   1.0625rem;
  --maat-l:   1.1875rem;
  --maat-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.45rem);
  --maat-2xl: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
  --maat-3xl: clamp(2.3rem, 1.5rem + 3.6vw, 3.9rem);

  /* Ruimte en vorm */
  --ruimte:     clamp(1rem, 0.7rem + 1.3vw, 1.6rem);
  --sectie:     clamp(3.5rem, 2.2rem + 4.5vw, 6rem);
  --breed:      1180px;
  --smal:       720px;
  --rond:       4px;
  --rond-klein: 4px;
  --rond-groot: 6px;

  --schaduw:      0 1px 2px rgb(28 43 51 / 0.05);
  --schaduw-hoog: 0 10px 30px -12px rgb(28 43 51 / 0.25);

  --soepel: 160ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --papier:      #141b1f;
    --papier-diep: #1a232a;
    --kaart:       #1c262c;
    --rand:        #2f3d45;
    --rand-zacht:  #27333a;

    --inkt:        #eaf0f3;
    --inkt-zacht:  #b3c1c8;
    --inkt-licht:  #8697a0;

    --primair:       #8fb6c7;
    --primair-diep:  #b3d2df;
    --primair-licht: #6d94a6;
    --primair-waas:  #1f2c33;

    --blauw-diep:  #101a1f;

    --oker:      #d9b35e;
    --oker-waas: #2a2618;

    --terracotta: #e08a71;

    --op-primair: #10181c;

    --schaduw:      0 1px 2px rgb(0 0 0 / 0.35);
    --schaduw-hoog: 0 10px 30px -12px rgb(0 0 0 / 0.6);
  }
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--schrift-tekst);
  font-size: var(--maat-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-kop);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin: 0 0 0.5em;
  color: var(--inkt);
}

h1 { font-size: var(--maat-3xl); }
h2 { font-size: var(--maat-2xl); }
h3 { font-size: var(--maat-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--maat-l); letter-spacing: -0.01em; }

p, ul, ol, dl, table, figure { margin: 0 0 1.15em; }
p { text-wrap: pretty; }
:is(p, li):last-child { margin-bottom: 0; }

a {
  color: var(--primair);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
a:hover { color: var(--primair-diep); text-decoration-color: currentColor; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--rand); margin: var(--ruimte) 0; }

blockquote {
  margin: 0 0 1.15em;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid var(--primair-licht);
  font-family: var(--schrift-kop);
  font-style: italic;
  font-size: var(--maat-l);
  color: var(--inkt-zacht);
}

:focus-visible {
  outline: 3px solid var(--primair-licht);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--primair-waas); color: var(--inkt); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Hulpklassen
   -------------------------------------------------------------------------- */

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: 0.5rem; top: -100%;
  z-index: 100; padding: 0.7rem 1.1rem;
  background: var(--primair); color: var(--op-primair);
  border-radius: var(--rond-klein); font-weight: 600;
  transition: top var(--soepel);
}
.overslaan:focus { top: 0.5rem; color: var(--op-primair); }

.omhulsel {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
}
.omhulsel--smal { width: min(100% - 2 * var(--ruimte), var(--smal)); }

.sectie { padding-block: var(--sectie); }
.sectie--waas { background: var(--papier-diep); }
.sectie--blauw { background: var(--primair-waas); }

/* De kop van een sectie is breed genoeg om de titel op één regel te houden; de
   toelichting eronder blijft smaller, want lange regels lezen slecht. */
.sectie__kop { max-width: 34rem; margin-bottom: clamp(1.8rem, 1rem + 2.4vw, 3rem); }
.sectie__kop > p { color: var(--inkt-zacht); font-size: var(--maat-l); max-width: 30rem; }

/* Klein opschrift boven een kop: zegt waar je in de pagina bent. */
.bovenkop {
  display: block;
  font-family: var(--schrift-tekst);
  font-size: var(--maat-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primair);
  margin-bottom: 0.7rem;
}

.lead {
  font-size: var(--maat-l);
  color: var(--inkt-zacht);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Knoppen
   -------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--primair);
  border-radius: var(--rond-klein);
  background: var(--primair);
  color: var(--op-primair);
  font: inherit;
  font-weight: 600;
  font-size: var(--maat-s);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--soepel), border-color var(--soepel), color var(--soepel);
}
.knop:hover { background: var(--primair-diep); border-color: var(--primair-diep); color: var(--op-primair); }

.knop--rand {
  background: transparent;
  border-color: var(--primair);
  color: var(--primair);
}
.knop--rand:hover { background: var(--primair-waas); border-color: var(--primair-diep); color: var(--primair-diep); }

/* Op een donker of gekleurd vlak */
.knop--licht { background: #fff; border-color: #fff; color: var(--blauw-diep); }
.knop--licht:hover { background: var(--papier-diep); border-color: var(--papier-diep); color: var(--blauw-diep); }
.knop--licht + .knop--licht { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.6); }
.knop--licht + .knop--licht:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; color: #fff; }

.knop--klein { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: var(--maat-xs); }
.knop--breed { width: 100%; }

.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Klein "live"-bolletje in knoppen en kaarten */
.live {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
  flex: none;
}

/* --------------------------------------------------------------------------
   5. Kop en menu
   -------------------------------------------------------------------------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--soepel);
}
.kop.is-geplakt { border-bottom-color: var(--rand); }

.kop__binnen {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
}

/* Het logo draagt de naam van beide kerkgebouwen al in zichzelf; daarom staat
   er geen tekst naast, alleen een verborgen naam voor schermlezers. */
.merk { display: flex; align-items: center; margin-right: auto; }
.merk__teken { width: auto; height: 2.8rem; flex: none; }

@media (prefers-color-scheme: dark) {
  /* Het logo heeft donkergrijze letters op transparant. Op de donkere kop zou
     "Ichthus Immanuël" daardoor wegvallen; dit haalt het geheel naar licht. */
  .merk__teken { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
}

.menu { display: flex; align-items: center; gap: 1.25rem; }
.menu__lijst { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }

.menu__link {
  display: block;
  position: relative;
  padding: 0.5rem 0.8rem;
  color: var(--inkt);
  font-size: var(--maat-s);
  font-weight: 500;
  text-decoration: none;
}
.menu__link::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.2rem;
  height: 2px;
  background: var(--primair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--soepel);
}
.menu__link:hover { color: var(--primair-diep); }
.menu__link:hover::after, .menu__link.is-actief::after { transform: scaleX(1); }
.menu__link.is-actief { color: var(--primair); font-weight: 600; }

.kop__knop {
  display: none;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--inkt);
  cursor: pointer;
}
.kop__streepjes,
.kop__streepjes::before,
.kop__streepjes::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  margin-inline: auto;
  transition: transform var(--soepel), opacity var(--soepel);
}
.kop__streepjes { position: relative; }
.kop__streepjes::before, .kop__streepjes::after { content: ""; position: absolute; left: 0; }
.kop__streepjes::before { top: -6px; }
.kop__streepjes::after { top: 6px; }

[aria-expanded="true"] .kop__streepjes { background: transparent; }
[aria-expanded="true"] .kop__streepjes::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .kop__streepjes::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 62rem) {
  .kop__knop { display: grid; place-items: center; }

  .menu {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem var(--ruimte) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schaduw-hoog);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--soepel), transform var(--soepel), visibility var(--soepel);
  }
  .menu.is-open { transform: none; opacity: 1; visibility: visible; }

  .menu__lijst { flex-direction: column; gap: 0; }
  .menu__link { padding: 0.9rem 0.25rem; font-size: var(--maat-l); border-bottom: 1px solid var(--rand-zacht); }
  .menu__link::after { display: none; }
  .menu__cta { margin-top: 0.75rem; font-size: var(--maat-s); }
}

/* --------------------------------------------------------------------------
   6. Hero en paginakop
   -------------------------------------------------------------------------- */

/* De homepage opent met tekst naast een foto van de kerk — licht en open,
   zonder donkere laag over de foto heen. */
.hero { background: var(--papier); }

.hero__binnen {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.hero__tekstblok { display: grid; gap: 1.25rem; justify-items: start; }
/* Smal gehouden: de openingszin hoort over drie korte regels te vallen, niet
   over twee lange — dat leest als een begroeting in plaats van als een alinea. */
.hero__titel { font-size: var(--maat-3xl); max-width: 13ch; margin: 0; }
.hero__titel em { font-style: italic; color: var(--primair); }
.hero__tekst { font-size: var(--maat-l); max-width: 50ch; color: var(--inkt-zacht); margin: 0; }
.hero .bovenkop { margin: 0; }
.hero .knoppen { margin-top: 0.5rem; }

.hero__beeld {
  margin: 0;
  position: relative;
}
.hero__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 45% 50%;
  border: 1px solid var(--rand);
  border-radius: var(--rond);
}
.hero__beeld figcaption {
  margin-top: 0.6rem;
  font-size: var(--maat-xs);
  color: var(--inkt-licht);
}

/* De balk met de vaste tijden, direct onder de opening */
.zondag {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.zondag__vak {
  padding: 1.15rem 1.35rem;
  border-right: 1px solid var(--rand-zacht);
}
.zondag__vak:last-child { border-right: 0; }
.zondag__label {
  display: block;
  font-size: var(--maat-xs);
  color: var(--inkt-zacht);
}
.zondag__waarde {
  display: block;
  font-family: var(--schrift-kop);
  font-size: var(--maat-l);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--inkt);
}
.zondag__vak--live a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; text-decoration: none; margin-top: 0.3rem;
}
.zondag__vak--live a:hover { text-decoration: underline; }
@media (max-width: 42rem) {
  .zondag__vak { border-right: 0; border-bottom: 1px solid var(--rand-zacht); }
  .zondag__vak:last-child { border-bottom: 0; }
}

/* Kop van de binnenpagina's: een rustige zandkleurige band. De foto die de
   pagina's meegeven wordt hier niet getoond; de band draagt de titel. */
.paginakop {
  background: var(--papier-diep);
  border-bottom: 1px solid var(--rand);
}
.paginakop__foto { display: none; }
.paginakop__binnen {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.paginakop h1 { margin-bottom: 0.35em; max-width: 22ch; }
.paginakop p { color: var(--inkt-zacht); font-size: var(--maat-l); max-width: 58ch; margin: 0; }
.paginakop .bovenkop { color: var(--primair); font-size: var(--maat-xs); margin-bottom: 0.8rem; }

/* Kruimelpad */
.kruimels { font-size: var(--maat-xs); color: var(--inkt-licht); margin-bottom: 1.25rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.kruimels li + li::before { content: "›"; margin-right: 0.4rem; }
.kruimels a { color: var(--inkt-zacht); }

/* Sprongmenu binnen een lange pagina. De vier onderwerpen van de oude site
   staan nu als secties onder elkaar; dit is het rijtje waarmee je er direct
   naartoe springt. */
.sprongen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; padding: 0; list-style: none; }
.sprongen a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--inkt);
  font-size: var(--maat-xs);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--soepel), color var(--soepel);
}
.sprongen a:hover { border-color: var(--primair); color: var(--primair); }

/* --------------------------------------------------------------------------
   7. Kaarten en rasters
   -------------------------------------------------------------------------- */

.raster { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
/* 19rem is net breed genoeg dat er op de ruimste maat drie naast elkaar staan
   en geen vier: vier kolommen maakt de regels te kort om prettig te lezen. */
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  padding: clamp(1.25rem, 0.95rem + 1vw, 1.85rem);
}
.kaart h3 { margin-bottom: 0.4em; }
.kaart p { color: var(--inkt-zacht); font-size: var(--maat-s); }

/* Uitgelichte kaart: de naam van het gebouw als kopregel, met een lijn eronder. */
.kaart--uitgelicht { background: var(--kaart); }
.kaart--uitgelicht h3 {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--rand-zacht);
}

.kaart__teken {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--primair-waas);
  color: var(--primair);
  margin-bottom: 0.9rem;
}
.kaart__teken svg { width: 1.3rem; height: 1.3rem; }

/* Berichten op de homepage: een lijn erboven in plaats van een kader. Zo blijft
   de pagina rustig, ook als er drie berichten naast elkaar staan. */
.bericht {
  border-top: 2px solid var(--inkt);
  padding-top: 1.1rem;
}
.bericht h3 { font-size: var(--maat-xl); }
.bericht p { color: var(--inkt-zacht); }

/* Vier korte antwoorden op "wat staat me te wachten" — zelfde lijn erboven als
   de berichten, met een lijnicoontje erbij. */
.punten {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}
.punt { border-top: 2px solid var(--inkt); padding-top: 1.1rem; }
.punt__teken { color: var(--inkt); margin-bottom: 0.7rem; }
.punt__teken svg { width: 1.5rem; height: 1.5rem; }
.punt h3 { font-size: var(--maat-l); margin-bottom: 0.45em; }
.punt p { color: var(--inkt-zacht); font-size: var(--maat-s); }
.punt a { font-size: var(--maat-s); }

/* De twee kerkgebouwen: foto naast adres en twee knoppen. */
.kerkkaart {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 1.25rem;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  padding: 1.15rem;
}
.kerkkaart img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
  border-radius: var(--rond-klein);
}
.kerkkaart__plaats {
  display: block;
  font-size: var(--maat-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primair);
  margin-bottom: 0.3rem;
}
.kerkkaart h3 { margin-bottom: 0.5rem; }
.kerkkaart__adres { font-style: normal; color: var(--inkt-zacht); font-size: var(--maat-s); }
.kerkkaart .knoppen { flex-direction: column; align-items: start; margin-top: 1.1rem; }

@media (max-width: 44rem) {
  .kerkkaart { grid-template-columns: 1fr; }
  .kerkkaart img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Rijtje uitzendingen: per gebouw de twee manieren om mee te kijken. */
.streams { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rand); }
.streams li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--rand);
}
.streams__naam {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--inkt);
  margin-right: auto;
}
.streams__naam .live { color: var(--primair); }
.streams a { font-weight: 600; font-size: var(--maat-s); }

/* Donker blok met één duidelijke vervolgstap. */
.contactblok {
  background: var(--blauw-diep);
  color: rgb(255 255 255 / 0.85);
  border-radius: var(--rond);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  text-align: center;
}
.contactblok h2 { color: #fff; font-size: var(--maat-xl); }
.contactblok p { max-width: 42ch; margin-inline: auto; font-size: var(--maat-s); }
.contactblok .knoppen { justify-content: center; margin-top: 1.5rem; }

/* De verwijzingen naar de ledenomgeving: praktisch, maar geen hoofdzaak. Ze
   staan daarom als bandje net boven de voet, op elke pagina. */
.ledenbalk {
  border-top: 1px solid var(--rand);
  background: var(--papier);
}
.ledenbalk__binnen {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  padding-block: 1.75rem;
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
}
@media (max-width: 44rem) {
  .ledenbalk__binnen { grid-template-columns: 1fr; }
}
.ledenbalk__kop {
  font-size: var(--maat-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0;
}
.ledenbalk__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--maat-s);
}

/* Twee kolommen: tekst naast beeld */
.duo {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.duo--omgekeerd > :first-child { order: 2; }
@media (max-width: 48rem) {
  .duo--omgekeerd > :first-child { order: 0; }
}

.beeld {
  margin: 0;
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--papier-diep);
}
.beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beeld figcaption { padding: 0.7rem 0.1rem 0; font-size: var(--maat-xs); color: var(--inkt-licht); background: var(--papier); }
.sectie--waas .beeld figcaption { background: var(--papier-diep); }
.beeld--vrij img { aspect-ratio: auto; }

/* Opsomming met vinkjes */
.vinkjes { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.vinkjes li { position: relative; padding-left: 1.8rem; }
.vinkjes li::before {
  content: "";
  position: absolute; left: 0; top: 0.4em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--primair-waas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%233d6475' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* --------------------------------------------------------------------------
   8. Tabellen
   -------------------------------------------------------------------------- */

.tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--maat-s);
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  overflow: hidden;
}
.tabel th, .tabel td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--rand-zacht); }
.tabel thead th {
  background: var(--papier-diep);
  color: var(--inkt-zacht);
  font-size: var(--maat-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.tabel tbody td:first-child { font-weight: 600; }
.tabel tbody tr:last-child :is(td, th) { border-bottom: 0; }
.tabel caption { caption-side: bottom; padding-top: 0.7rem; font-size: var(--maat-xs); color: var(--inkt-zacht); text-align: left; }

/* Op smalle schermen wordt elke rij een kaartje met labels ervoor */
@media (max-width: 46rem) {
  .tabel--stapel { border: 0; background: none; }
  .tabel--stapel, .tabel--stapel tbody, .tabel--stapel tr, .tabel--stapel td { display: block; width: 100%; }
  .tabel--stapel thead { display: none; }
  .tabel--stapel tr {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    margin-bottom: 0.75rem;
    padding: 0.3rem 0;
    overflow: hidden;
  }
  .tabel--stapel td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.5rem 1rem;
  }
  .tabel--stapel td::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--inkt-zacht);
    flex: none;
  }
  .tabel--stapel td:first-child {
    font-family: var(--schrift-kop);
    font-size: var(--maat-l);
    font-weight: 700;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--rand-zacht);
    margin-bottom: 0.3rem;
  }
  .tabel--stapel td:first-child::before { content: none; }
}

/* --------------------------------------------------------------------------
   9. Meldingen
   -------------------------------------------------------------------------- */

.melding {
  padding: 1rem 1.2rem;
  border-radius: var(--rond);
  border: 1px solid var(--rand);
  background: var(--papier-diep);
  color: var(--inkt);
  font-size: var(--maat-s);
  margin-bottom: 1.25rem;
}
.sectie--waas .melding { background: var(--kaart); }
.melding--let-op { border-color: color-mix(in srgb, var(--oker) 35%, transparent); background: var(--oker-waas); }
.melding p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Uitklappers
   -------------------------------------------------------------------------- */

.uitklap {
  border: 1px solid var(--rand);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.uitklap > summary {
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: var(--maat-s);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--primair);
  border-bottom: 2px solid var(--primair);
  rotate: 45deg;
  flex: none;
  transition: rotate var(--soepel);
}
.uitklap[open] > summary::after { rotate: -135deg; }
.uitklap[open] > summary { color: var(--primair-diep); }
.uitklap > summary:hover { background: var(--papier-diep); }
.uitklap__inhoud { padding: 0 1.2rem 1.2rem; font-size: var(--maat-s); color: var(--inkt-zacht); }

/* --------------------------------------------------------------------------
   11. Voet
   -------------------------------------------------------------------------- */

.voet {
  background: var(--blauw-diep);
  color: rgb(255 255 255 / 0.8);
  margin-top: 0;
  font-size: var(--maat-s);
}
@media (prefers-color-scheme: dark) {
  .voet { border-top: 1px solid var(--rand); }
}

.voet__binnen {
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.voet__blok--merk { grid-column: span 2; }
@media (max-width: 46rem) { .voet__blok--merk { grid-column: auto; } }

.voet__naam { font-family: var(--schrift-kop); font-size: var(--maat-l); font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.voet__regel { max-width: 40ch; }
.voet__kop { font-family: var(--schrift-tekst); font-size: var(--maat-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9db7c3; margin-bottom: 0.8rem; }
.voet__lijst { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.voet__adres { font-style: normal; }
.voet a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.35); }
.voet a:hover { color: #fff; text-decoration-color: #fff; }

.voet__onder {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  width: min(100% - 2 * var(--ruimte), var(--breed));
  margin-inline: auto;
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--maat-xs);
  color: rgb(255 255 255 / 0.65);
}
.voet__onder p { margin: 0; }

/* --------------------------------------------------------------------------
   12. Printen
   -------------------------------------------------------------------------- */

@media print {
  .kop, .voet, .ledenbalk, .contactblok, .overslaan, .sprongen, .hero__beeld { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .paginakop, .hero { color: #000; background: none; border: 0; }
  .paginakop h1, .paginakop p, .hero__titel, .hero__tekst { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .sectie { padding-block: 1rem; }
}