/* Barcodehammer - stijl voor de website.
   Een bestand voor alle pagina's. Kleuren komen uit het app-icoon
   (assets/icon/barcodehammer-logo-V2.svg): het verloop #00897B -> #003C34 met
   de scanlijn in koraal #FF8A65.

   Er wordt niets van buiten geladen: geen lettertype van Google, geen CDN,
   geen telstatistiek. De site die belooft dat de app zelf geen verbinding
   legt, hoort dat zelf ook niet te doen.

   Alle pagina's hangen hieraan, in alle drie de talen. Het oude style.css is
   weg. Zie README.md in deze map. */

/* ---------- Kleuren en maten ---------- */

:root {
  --groen-900: #003c34;
  --groen-800: #00544a;
  --groen-700: #00695c;
  --groen-600: #007a6b;
  --groen-500: #00897b;
  --groen-300: #4db6ac;
  --koraal: #ff8a65;
  --koraal-tekst: #b4441f;

  --bg: #ffffff;
  --bg-zacht: #f3f8f7;
  --vlak: #ffffff;
  --rand: #dae7e5;
  --rand-sterk: #bed3d0;
  --tekst: #0f1f1d;
  --tekst-zacht: #4c6360;
  --link: var(--groen-700);
  --schaduw: 0 1px 2px rgba(0, 40, 35, 0.05), 0 8px 24px rgba(0, 40, 35, 0.06);
  --schaduw-diep: 0 2px 4px rgba(0, 40, 35, 0.06), 0 18px 40px rgba(0, 40, 35, 0.1);

  --maxw: 68rem;   /* de brede band: kop, voet, rasters */
  --prose: 44rem;  /* lopende tekst: nooit breder, anders leest het niet */
  --radius: 14px;
  --radius-klein: 9px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1614;
    --bg-zacht: #0f201d;
    --vlak: #112420;
    --rand: #21403a;
    --rand-sterk: #2d554d;
    --tekst: #e6f0ee;
    --tekst-zacht: #9db4b0;
    --link: #5fd6c2;
    --koraal-tekst: #ffab8f;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --schaduw-diep: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- Grondslag ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--groen-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Overslaan naar de inhoud. Zichtbaar zodra hij de aandacht krijgt; daarvoor
   staat hij boven het scherm en niet op display:none - dat laatste haalt hem
   ook uit de volgorde van de toetsenbordbediening. */
.overslaan {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--groen-700);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  text-decoration: none;
  transition: top 0.15s;
}

.overslaan:focus { top: 0; }

/* Wel voorgelezen, niet getoond. */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Kopbalk ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rand);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.merk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--tekst);
  text-decoration: none;
  flex-shrink: 0;
}

.merk img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

nav.hoofd {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-wrap: wrap;
}

nav.hoofd a {
  color: var(--tekst-zacht);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-klein);
  white-space: nowrap;
}

nav.hoofd a:hover { color: var(--tekst); background: var(--bg-zacht); }

nav.hoofd a[aria-current="page"] {
  color: var(--groen-700);
  background: color-mix(in srgb, var(--groen-500) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  nav.hoofd a[aria-current="page"] { color: var(--groen-300); }
}

/* De taalkiezer. Een <details> en geen menu met javascript: hij werkt met het
   toetsenbord, hij werkt zonder script, en dicht kost hij een regel. */
.talen {
  position: relative;
  flex-shrink: 0;
}

.talen > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.talen > summary::-webkit-details-marker { display: none; }
.talen > summary:hover { color: var(--tekst); border-color: var(--rand-sterk); }

.talen ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw-diep);
  min-width: 10rem;
}

.talen li { margin: 0; }

.talen ul a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--tekst);
  font-size: 0.92rem;
}

.talen ul a:hover { background: var(--bg-zacht); }
.talen ul [aria-current="true"] { font-weight: 700; color: var(--groen-700); }

/* Op een smal scherm schuift de navigatie onder de merknaam en mag hij
   horizontaal rollen. Geen uitklapmenu: vijf links passen op een rij die
   opzij schuift, en dat is een beweging die iedereen kent. */
@media (max-width: 56rem) {
  header.site .wrap {
    flex-wrap: wrap;
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
    gap: 0.5rem;
  }

  nav.hoofd {
    order: 3;
    width: 100%;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 1.25rem 0.3rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  nav.hoofd::-webkit-scrollbar { display: none; }
  .talen { margin-left: auto; }
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop.primair {
  background: var(--groen-700);
  color: #fff;
  box-shadow: var(--schaduw);
}

.knop.primair:hover { background: var(--groen-800); box-shadow: var(--schaduw-diep); }

.knop.rand {
  background: transparent;
  color: var(--groen-700);
  border-color: var(--rand-sterk);
}

.knop.rand:hover { background: var(--bg-zacht); border-color: var(--groen-500); }

@media (prefers-color-scheme: dark) {
  .knop.rand { color: var(--groen-300); }
}

/* Op een donkere ondergrond, zoals de kop van de startpagina. */
.op-donker .knop.primair { background: #fff; color: var(--groen-900); }
.op-donker .knop.primair:hover { background: #eafcf8; }

.op-donker .knop.rand {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.op-donker .knop.rand:hover { background: rgba(255, 255, 255, 0.12); }

/* De winkelknop. Grijs en zonder link zolang de vermelding niet openbaar is.
   Omzetten naar een echte knop staat beschreven in README.md in deze map. */
.knop.winkel {
  background: var(--bg-zacht);
  color: var(--tekst-zacht);
  border-color: var(--rand);
  cursor: default;
  padding: 0.7rem 1.3rem;
  text-align: left;
  line-height: 1.25;
}

.knop.winkel:hover { transform: none; }

.op-donker .knop.winkel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
}

.knop.winkel .klein {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.75rem 0 0;
}

/* ---------- Kop van de startpagina ---------- */

.hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255, 138, 101, 0.28), transparent 55%),
    linear-gradient(155deg, var(--groen-500) 0%, var(--groen-900) 100%);
  color: #fff;
  padding: 4.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

/* De scanlijn uit het icoon, als afsluiting onder het kopvlak. Stond eerst
   halverwege, maar liep daar dwars door de onderkop heen. Puur versiering, dus
   aria-hidden in de html; hier alleen de vorm. */
.hero .scanlijn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--koraal), transparent);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.hero .onderkop {
  margin: 1.1rem 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
}

.oogmerk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}

/* Drie korte beloftes onder de knoppen. */
.beloftes {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.beloftes li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.beloftes svg { flex-shrink: 0; color: var(--koraal); }

/* ---------- Kop van de andere pagina's ---------- */

.paginakop {
  background: var(--bg-zacht);
  border-bottom: 1px solid var(--rand);
  padding: 2.75rem 0 2.5rem;
}

.paginakop h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--groen-800);
}

@media (prefers-color-scheme: dark) {
  .paginakop h1 { color: var(--groen-300); }
}

.paginakop .onderkop {
  margin: 0.85rem 0 0;
  font-size: 1.1rem;
  color: var(--tekst-zacht);
  max-width: 60ch;
}

/* Broodkruimels: waar je bent, en de weg terug. */
.kruimels {
  font-size: 0.88rem;
  color: var(--tekst-zacht);
  margin: 0 0 1rem;
}

.kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.kruimels li { margin: 0; display: flex; gap: 0.4rem; align-items: center; }
.kruimels li + li::before { content: "›"; opacity: 0.55; }
.kruimels a { color: var(--tekst-zacht); }

/* ---------- Inhoud ---------- */

main { display: block; }

section.band { padding: 3.5rem 0; }
section.band.zacht { background: var(--bg-zacht); border-block: 1px solid var(--rand); }

.sectiekop { max-width: var(--prose); margin: 0 0 2rem; }

.sectiekop h2 { margin-top: 0; }

.sectiekop p {
  color: var(--tekst-zacht);
  font-size: 1.05rem;
  margin-bottom: 0;
}

h2 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 2.75rem 0 0.85rem;
  color: var(--groen-800);
}

h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 2rem 0 0.6rem;
  color: var(--groen-800);
}

@media (prefers-color-scheme: dark) {
  h2, h3 { color: var(--groen-300); }
}

/* Lopende tekst blijft smal genoeg om te lezen, maar begint op dezelfde lijn
   als het logo in de kopbalk en de kolommen in de voet.
   .prose stond eerst als tweede klasse op .wrap zelf. Die combinatie versmalde
   het hele blok en centreerde het daarna, waardoor de tekst een stuk verder
   naar rechts begon dan alles eromheen. Nu houdt .wrap zijn volle breedte en
   krijgen alleen de tekstelementen erbinnen een leesbreedte. */
.wrap.prose { max-width: var(--maxw); }

.wrap.prose > * { max-width: var(--prose); }

/* Wat juist wél de volle breedte mag hebben: tabellen zijn breder dan een
   tekstregel, en de kaartjes onderaan staan naast elkaar. */
.wrap.prose > .tabel-omhulsel,
.wrap.prose > .verderop,
.wrap.prose > .raster,
.wrap.prose > .prijsraster { max-width: none; }

.prose > p, .prose > ul, .prose > ol { margin-block: 0 1.1rem; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.45rem; }

.lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--tekst-zacht);
}

.datum {
  color: var(--tekst-zacht);
  font-size: 0.9rem;
}

code {
  background: var(--bg-zacht);
  border: 1px solid var(--rand);
  padding: 0.08rem 0.35rem;
  border-radius: 5px;
  font-size: 0.88em;
}

/* ---------- Kaarten en rasters ---------- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
}

.raster.twee { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.kaart h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
}

.kaart p {
  margin: 0;
  color: var(--tekst-zacht);
  font-size: 0.97rem;
}

.kaart p + p { margin-top: 0.7rem; }

/* Een kaart die naar een pagina wijst. De hele kaart is klikbaar doordat de
   link in de kop wordt uitgerekt; de tekst blijft gewoon te selecteren. */
.kaart.link { position: relative; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.kaart.link:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw); transform: translateY(-2px); }
.kaart.link h3 a { text-decoration: none; color: inherit; }
.kaart.link h3 a::after { content: ""; position: absolute; inset: 0; }
.kaart.link .verder {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--link);
}

.pictogram {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
  background: color-mix(in srgb, var(--groen-500) 13%, transparent);
  color: var(--groen-700);
}

@media (prefers-color-scheme: dark) {
  .pictogram { color: var(--groen-300); }
}

.pictogram.accent {
  background: color-mix(in srgb, var(--koraal) 20%, transparent);
  color: var(--koraal-tekst);
}

/* ---------- Uitgelicht blok ---------- */

.uitgelicht {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (max-width: 52rem) {
  .uitgelicht { grid-template-columns: 1fr; gap: 1.5rem; }
}

.uitgelicht h2 { margin-top: 0; }
.uitgelicht p { color: var(--tekst-zacht); }

/* Het slotvlak: een gestileerd slot in plaats van een schermafdruk. Zolang er
   geen afdrukken op de site staan, draagt dit vlak het beeld. */
.vlak-visueel {
  background: linear-gradient(155deg, var(--groen-600), var(--groen-900));
  border-radius: var(--radius);
  padding: 2.5rem;
  color: #fff;
  min-height: 15rem;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: var(--schaduw-diep);
}

.vlak-visueel p { color: rgba(255, 255, 255, 0.85); margin: 0.75rem 0 0; font-size: 0.97rem; }
.vlak-visueel strong { font-size: 1.15rem; }

/* ---------- Meldingen ---------- */

.kader {
  border: 1px solid var(--rand);
  border-left: 4px solid var(--groen-500);
  background: var(--bg-zacht);
  border-radius: var(--radius-klein);
  padding: 1.1rem 1.3rem;
  margin: 1.75rem 0;
}

.kader p:first-child { margin-top: 0; }
.kader p:last-child { margin-bottom: 0; }

.kader.let-op { border-left-color: var(--koraal); }

.kader .kop {
  font-weight: 700;
  color: var(--groen-800);
  display: block;
  margin-bottom: 0.35rem;
}

@media (prefers-color-scheme: dark) {
  .kader .kop { color: var(--groen-300); }
}

/* ---------- Tabellen ---------- */

.tabel-omhulsel {
  overflow-x: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin: 1.5rem 0;
  background: var(--vlak);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

thead th {
  background: var(--bg-zacht);
  color: var(--groen-800);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  thead th { color: var(--groen-300); }
}

tbody th { font-weight: 600; }

.vergelijk th:first-child { min-width: 18rem; }

.vergelijk th + th,
.vergelijk td + td {
  text-align: center;
  width: 8.5rem;
}

.vergelijk thead th + th { text-align: center; }

/* Het vinkje zegt het voor wie kleur ziet; het aria-label voor wie het laat
   voorlezen. */
.ja { color: var(--groen-600); font-weight: 700; }
.nee { color: var(--tekst-zacht); }

@media (prefers-color-scheme: dark) {
  .ja { color: #5fd6c2; }
}

.merkje {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--groen-500) 15%, transparent);
  color: var(--groen-800);
  vertical-align: 0.1em;
}

@media (prefers-color-scheme: dark) {
  .merkje { color: var(--groen-300); }
}

/* ---------- Prijskaarten ---------- */

.prijsraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.prijskaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.prijskaart.uitgelicht-rand {
  border-color: var(--groen-500);
  box-shadow: var(--schaduw);
  position: relative;
}

.prijskaart h3 { margin: 0; font-size: 1.25rem; }

.prijs {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0.15rem;
  color: var(--tekst);
}

.prijs .bij { font-size: 0.95rem; font-weight: 600; color: var(--tekst-zacht); }

.prijskaart ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.prijskaart li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.97rem;
  margin-bottom: 0.6rem;
}

.prijskaart li svg { flex-shrink: 0; margin-top: 0.28rem; color: var(--groen-600); }

@media (prefers-color-scheme: dark) {
  .prijskaart li svg { color: #5fd6c2; }
}

/* ---------- Uitklappers (vragen, hoofdstukken) ---------- */

.vouw {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--vlak);
  margin-bottom: 0.6rem;
}

.vouw > summary {
  cursor: pointer;
  padding: 0.95rem 1.15rem;
  font-weight: 650;
  list-style: none;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.vouw > summary::-webkit-details-marker { display: none; }

.vouw > summary::after {
  content: "";
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--tekst-zacht);
  border-bottom: 2px solid var(--tekst-zacht);
  transform: rotate(45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.vouw[open] > summary::after { transform: rotate(-135deg); }
.vouw[open] > summary { border-bottom: 1px solid var(--rand); }

.vouw .inhoud { padding: 1.05rem 1.15rem; }
.vouw .inhoud > :first-child { margin-top: 0; }
.vouw .inhoud > :last-child { margin-bottom: 0; }

/* ---------- Lees verder ---------- */

.verderop {
  border-top: 1px solid var(--rand);
  margin-top: 3.5rem;
  padding-top: 2rem;
}

.verderop h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------- Slotoproep ---------- */

.oproep {
  background: linear-gradient(150deg, var(--groen-600), var(--groen-900));
  color: #fff;
  border-radius: var(--radius);
  padding: 2.75rem 2rem;
  text-align: center;
  margin: 3.5rem 0 0;
}

.oproep h2 { color: #fff; margin: 0 0 0.6rem; }
.oproep p { color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin: 0 auto; }
.oproep .knoprij { justify-content: center; }

/* ---------- Voet ---------- */

footer.site {
  border-top: 1px solid var(--rand);
  background: var(--bg-zacht);
  padding: 3rem 0 2.5rem;
  margin-top: 4rem;
  font-size: 0.95rem;
}

.voetraster {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 52rem) {
  .voetraster { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

@media (max-width: 30rem) {
  .voetraster { grid-template-columns: 1fr; }
}

.voetraster h2 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
  margin: 0 0 0.85rem;
}

.voetraster ul { list-style: none; margin: 0; padding: 0; }
.voetraster li { margin-bottom: 0.5rem; }
.voetraster a { text-decoration: none; color: var(--tekst); }
.voetraster a:hover { text-decoration: underline; }

.voetmerk p { color: var(--tekst-zacht); margin: 0.85rem 0 0; max-width: 32ch; }

.voetregel {
  border-top: 1px solid var(--rand);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  color: var(--tekst-zacht);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.9rem;
}

.voetregel p { margin: 0; }

/* ---------- Afdrukken ---------- */

@media print {
  header.site, footer.site, .oproep, .verderop, .knoprij, .overslaan { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .hero, .paginakop { background: none; color: #000; padding: 0 0 1rem; }
  .hero h1, .paginakop h1 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .vouw { border: 0; }
  .vouw .inhoud { display: block !important; }
}