/* ==========================================================================
   RINGOVATE - Design system
   Implements chapter 3 (design system) and chapter 4 (button/component
   library) of the technical specification. All values are taken literally
   from the spec; do not introduce off-scale values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens  (spec 3.1 colours, 3.2 type, 3.3 grid/spacing/radius/shadow)
   -------------------------------------------------------------------------- */
:root {
  /* Colour - spec 3.1 */
  --c-antraciet:    #2B2E33;
  --c-zand:         #C9A876;
  --c-warmwit:      #F5F2EC;
  --c-terracotta:   #B5502A;
  --c-mosgroen:     #4B5A45;
  --c-wit:          #FFFFFF;
  --c-tekstgrijs:   #6B6F76;
  --c-lijngrijs:    #D8D3C9;

  /* Derived states - spec 4.1 */
  --c-terracotta-hover: #99411F;
  --c-mosgroen-hover:   #3C4838;
  --c-whatsapp:         #25D366;

  /* Type - spec 3.2.
     De var(...) met fallback laat toe dat Next.js de fonts zelf host en hier
     injecteert. Wordt die variabele niet gezet, dan valt het terug op de naam
     van het font zoals het via Google Fonts geladen wordt. Zo werkt dit
     bestand ongewijzigd in beide opzetten. */
  --font-display: var(--font-fraunces, 'Fraunces'), Georgia, 'Times New Roman', serif;
  --font-body:    var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Spacing - 8px scale, spec 3.3 */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-6:  48px;
  --s-8:  64px;
  --s-12: 96px;

  /* Layout - spec 3.3 */
  --container-max: 1280px;
  --gutter: 24px;

  /* Radius - spec 3.3 */
  --r-input: 4px;
  --r-card:  8px;
  --r-pill:  999px;

  /* Elevation - spec 3.3 */
  --shadow-card: 0px 8px 24px rgba(43, 46, 51, 0.08);
  --shadow-card-hover: 0px 12px 32px rgba(43, 46, 51, 0.12);
  --shadow-cta: 0px 6px 16px rgba(181, 80, 42, 0.35);
  --shadow-header: 0px 2px 16px rgba(43, 46, 51, 0.08);

  /* Motion - spec 3.6 */
  --t-fast: 150ms;
  --t-mid:  300ms;
  --t-slow: 450ms;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Header height. Bewust één vaste hoogte: een krimpende header maakte de
     balk breder bovenaan, waardoor de CTA rechts tegen de schermrand kwam. */
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
}

body {
  margin: 0;
  background: var(--c-warmwit);
  color: var(--c-antraciet);
  font-family: var(--font-body);
  font-size: 15px;          /* mobile - spec 3.2 */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  body { font-size: 16px; }   /* desktop - spec 3.2 */
}

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

a { color: var(--c-terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Links on warm-white only reach 4.53:1, so spec 3.1 requires >=500 weight */
p a, li a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

button { font: inherit; color: inherit; }

/* Visible focus for keyboard users - spec 9.7 */
:focus-visible {
  outline: 3px solid var(--c-terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-zand); color: var(--c-antraciet); }

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

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--c-antraciet); color: var(--c-wit);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-card);
  font-weight: 600; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-2); text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Typography  (spec 3.2)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-antraciet);
  margin: 0 0 var(--s-3);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.01em;
}

h1, .h1 { font-weight: 600; font-size: 32px; line-height: 1.15; }
h2, .h2 { font-weight: 600; font-size: 26px; line-height: 1.2; }
h3, .h3 { font-weight: 500; font-size: 20px; line-height: 1.3; }

@media (min-width: 1024px) {
  h1, .h1 { font-size: 48px; }
  h2, .h2 { font-size: 32px; }
  h3, .h3 { font-size: 22px; }
}

p { margin: 0 0 var(--s-3); max-width: 68ch; }

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-antraciet);
}
@media (min-width: 1024px) { .lead { font-size: 19px; } }

.meta {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-tekstgrijs);
}

.eyebrow {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  margin: 0 0 var(--s-2);
  display: block;
}

blockquote, .quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 1024px) { blockquote, .quote { font-size: 20px; } }

/* --------------------------------------------------------------------------
   4. Layout  (spec 3.3)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--s-3);           /* 24px side margin on mobile */
}
@media (min-width: 1024px) {
  .container { padding-inline: 5%; }    /* 5% side margin on desktop */
}

.section { padding-block: var(--s-8); } /* 64px mobile */
@media (min-width: 1024px) {
  .section { padding-block: var(--s-12); }  /* 96px desktop */
}
.section--tight { padding-block: var(--s-6); }
@media (min-width: 1024px) { .section--tight { padding-block: var(--s-8); } }

.section--warmwit  { background: var(--c-warmwit); }
.section--wit      { background: var(--c-wit); }
.section--antraciet{ background: var(--c-antraciet); color: var(--c-warmwit); }
.section--mosgroen { background: var(--c-mosgroen); color: var(--c-wit); }
.section--terracotta{ background: var(--c-terracotta); color: var(--c-wit); }

.section--antraciet h1, .section--antraciet h2, .section--antraciet h3,
.section--mosgroen h1, .section--mosgroen h2, .section--mosgroen h3,
.section--terracotta h1, .section--terracotta h2, .section--terracotta h3 { color: var(--c-wit); }

.section--antraciet .meta, .section--mosgroen .meta, .section--terracotta .meta {
  color: rgba(245, 242, 236, 0.75);
}
.section--antraciet .eyebrow { color: var(--c-zand); }
.section--mosgroen .eyebrow, .section--terracotta .eyebrow { color: rgba(255,255,255,0.85); }

/* 12 / 8 / 4 column grid - spec 3.3 */
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, 1fr); } }

/* Common spans.
   Mobiel-eerst: standaard nemen deze blokken de volle breedte, zodat ze op een
   telefoon onder elkaar komen. Zonder deze basisregel valt elk blok terug op
   één kolom van het 4-kolomsraster en staan twee tekstkolommen naast elkaar,
   met onleesbaar smalle kolommen tot gevolg. */
.col-full,
.col-half,
.col-third,
.col-quarter { grid-column: 1 / -1; }

@media (min-width: 768px)  { .col-half { grid-column: span 4; } }
@media (min-width: 1024px) { .col-half { grid-column: span 6; } }
@media (min-width: 768px)  { .col-third { grid-column: span 4; } }
@media (min-width: 1024px) { .col-third { grid-column: span 4; } }
@media (min-width: 768px)  { .col-quarter { grid-column: span 4; } }
@media (min-width: 1024px) { .col-quarter { grid-column: span 3; } }

/* Simple auto-fit card rows */
.cards {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }

.section-head { max-width: 44rem; margin-bottom: var(--s-6); }
.section-head p:last-child { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-top: var(--s-3); }
.divider { height: 1px; background: var(--c-lijngrijs); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons & interaction library  (spec chapter 4)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn.is-loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* 4.1 Primary CTA */
.btn-primary {
  background: var(--c-terracotta);
  color: var(--c-wit);          /* 5.07:1 - spec 3.1 */
  border-color: var(--c-terracotta);
}
.btn-primary:hover {
  background: var(--c-terracotta-hover);
  border-color: var(--c-terracotta-hover);
  color: var(--c-wit);
  box-shadow: var(--shadow-cta);
}

/* 4.2 Secondary */
.btn-secondary {
  background: transparent;
  color: var(--c-antraciet);
  border-color: var(--c-antraciet);
}
.btn-secondary:hover {
  background: var(--c-antraciet);
  color: var(--c-wit);
}
/* On dark backgrounds - spec 4.2.
   De hero hoort hier uitdrukkelijk bij: daar staat de knop op een donkere foto,
   waar antracietgrijze tekst en rand vrijwel onleesbaar zijn. */
.hero .btn-secondary,
.on-dark .btn-secondary,
.section--antraciet .btn-secondary,
.section--mosgroen .btn-secondary,
.section--terracotta .btn-secondary {
  color: var(--c-warmwit);
  border-color: var(--c-warmwit);
}
/* Iets steviger rand plus een lichte schaduw, zodat de knop ook op een lichte
   plek in de foto blijft afsteken. */
.hero .btn-secondary {
  border-width: 2px;
  background: rgba(43, 46, 51, 0.28);
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(43, 46, 51, 0.45);
}
.hero .btn-secondary:hover,
.on-dark .btn-secondary:hover,
.section--antraciet .btn-secondary:hover,
.section--mosgroen .btn-secondary:hover,
.section--terracotta .btn-secondary:hover {
  background: var(--c-warmwit);
  color: var(--c-antraciet);
  text-shadow: none;
}
/* Primary CTA sitting on terracotta needs to invert to stay visible */
.section--terracotta .btn-primary {
  background: var(--c-wit);
  color: var(--c-terracotta);
  border-color: var(--c-wit);
}
.section--terracotta .btn-primary:hover {
  background: var(--c-warmwit);
  color: var(--c-terracotta-hover);
  border-color: var(--c-warmwit);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.btn-block { display: flex; width: 100%; }

/* 4.3 "Meer info" arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-terracotta);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.link-arrow span { transition: transform 200ms var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover span { transform: translateX(4px); }

/* 4.4 / 4.5 / 4.11 - click-to-call, mail, address */
.btn-call, .btn-mail, .btn-address {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 500;
  color: var(--c-antraciet);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  line-height: 1.3;
}
.btn-call svg    { color: var(--c-terracotta); }
.btn-mail svg    { color: var(--c-mosgroen); }   /* spec 4.5 */
.btn-address svg { color: var(--c-terracotta); }
.btn-call svg, .btn-mail svg, .btn-address svg { width: 20px; height: 20px; flex: none; }

.btn-call:hover, .btn-mail:hover, .btn-address:hover {
  background: rgba(201, 168, 118, 0.2);   /* warm zand 20% - spec 4.4 */
  text-decoration: none;
}

/* Pill variant used in the sticky header - spec 4.4 */
.btn-call--pill { border-color: var(--c-zand); }

.on-dark .btn-call, .on-dark .btn-mail, .on-dark .btn-address,
.site-footer .btn-call, .site-footer .btn-mail, .site-footer .btn-address {
  color: var(--c-warmwit);
}
.site-footer .btn-call svg { color: var(--c-zand); }
.site-footer .btn-mail svg { color: var(--c-zand); }
.site-footer .btn-address svg { color: var(--c-zand); }

/* 4.6 WhatsApp floating action button */
.btn-whatsapp-fab {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 90;                 /* below header (100), above content */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-whatsapp);
  color: var(--c-wit);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-whatsapp-fab svg { width: 30px; height: 30px; }
.btn-whatsapp-fab:hover { transform: scale(1.06); text-decoration: none; }
.btn-whatsapp-fab::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: wa-pulse 6s ease-out infinite;   /* every 6s - spec 4.6 */
}
@keyframes wa-pulse {
  0%       { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  12%      { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* Hidden while the contact form is in view - spec 4.6 */
.btn-whatsapp-fab.is-hidden {
  opacity: 0; visibility: hidden; transform: scale(0.8);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}

/* 4.12 Back to top - bottom LEFT so it never collides with WhatsApp */
.btn-to-top {
  position: fixed;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-antraciet);
  color: var(--c-wit);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid), background-color var(--t-fast) var(--ease);
}
.btn-to-top svg { width: 20px; height: 20px; }
.btn-to-top.is-visible { opacity: 1; visibility: visible; }
.btn-to-top:hover { background: var(--c-terracotta); }

/* 4.9 Filter pills */
.filter-pills {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.filter-pills::-webkit-scrollbar { height: 4px; }
.filter-pills::-webkit-scrollbar-thumb { background: var(--c-lijngrijs); border-radius: var(--r-pill); }

.pill {
  flex: none;
  background: transparent;
  border: 1.5px solid var(--c-lijngrijs);
  color: var(--c-antraciet);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pill:hover { border-color: var(--c-terracotta); }
.pill.is-active {
  background: var(--c-antraciet);
  border-color: var(--c-antraciet);
  color: var(--c-wit);
}

/* --------------------------------------------------------------------------
   6. Header  (spec 4.7)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-warmwit);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: box-shadow var(--t-mid) var(--ease);
}
/* Alleen de schaduw verandert bij scrollen, de hoogte blijft gelijk. */
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }

/* De volledige navigatie verschijnt pas als er echt plaats voor is; daaronder
   neemt het hamburgermenu het over, zodat niets tegen de schermrand duwt. */
.site-nav { display: none; }
@media (min-width: 1200px) {
  .site-nav { display: flex; align-items: center; gap: var(--s-2); }
}
.site-nav a {
  color: var(--c-antraciet);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}
.site-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-terracotta);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--c-terracotta); }

.header-actions { display: flex; align-items: center; gap: var(--s-1); flex: none; }
/* Het nummer zelf komt er pas bij als de balk breed genoeg is; daaronder blijft
   het telefoonicoon staan en is bellen nog steeds één tik. */
.header-actions .btn-call span { display: none; }
@media (min-width: 1360px) { .header-actions .btn-call span { display: inline; } }
.header-actions .btn-primary { display: none; }
@media (min-width: 768px) { .header-actions .btn-primary { display: inline-flex; } }

/* Mobile menu */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1.5px solid var(--c-lijngrijs);
  border-radius: var(--r-pill); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1200px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-warmwit);
  z-index: 99;
  padding: var(--s-3);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-lijngrijs);
  color: var(--c-antraciet);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--c-terracotta); }
.mobile-nav .btn { margin-top: var(--s-3); }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--c-antraciet);
  color: var(--c-warmwit);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(43,46,51,0.55) 0%,
              rgba(43,46,51,0.62) 45%,
              rgba(43,46,51,0.82) 100%);
}
.hero__inner {
  position: relative;
  padding-block: var(--s-12) var(--s-8);
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .hero__inner { min-height: 82vh; padding-block: var(--s-12); }
}
.hero__content { max-width: 44rem; }
.hero h1 { color: var(--c-wit); margin-bottom: var(--s-3); }
.hero .lead { color: rgba(245, 242, 236, 0.92); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* Compact hero for interior pages */
.hero--page .hero__inner { min-height: 46vh; padding-block: var(--s-8); }
@media (min-width: 1024px) { .hero--page .hero__inner { min-height: 52vh; } }

.breadcrumb { font-size: 13px; margin-bottom: var(--s-2); color: rgba(245,242,236,0.8); }
.breadcrumb a { color: rgba(245,242,236,0.8); font-weight: 500; text-decoration: none; }
.breadcrumb a:hover { color: var(--c-wit); text-decoration: underline; }
.breadcrumb span { opacity: 0.6; margin-inline: 6px; }

/* --------------------------------------------------------------------------
   8. Cards & media
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-wit);
  border: 1px solid var(--c-lijngrijs);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.card__body { padding: var(--s-3); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: var(--s-1); }
.card__body p { font-size: 15px; color: var(--c-tekstgrijs); margin-bottom: var(--s-3); }
.card__body .link-arrow { margin-top: auto; }

/* Fixed ratio media boxes keep the mixed portrait/landscape source photos
   reading as one consistent set - spec 3.5 */
.ratio { position: relative; display: block; overflow: hidden; background: var(--c-lijngrijs); }
.ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--3x2  { aspect-ratio: 3 / 2; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--1x1  { aspect-ratio: 1 / 1; }
.ratio--3x4  { aspect-ratio: 3 / 4; }

/* Hover zoom + overlay - spec 3.6 */
.media-link { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); }
.media-link img { transition: transform var(--t-mid) var(--ease); }
.media-link:hover img { transform: scale(1.04); }
.media-link__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-3);
  background: linear-gradient(180deg, rgba(43,46,51,0) 40%, rgba(43,46,51,0.85) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.media-link:hover .media-link__overlay,
.media-link:focus-visible .media-link__overlay { opacity: 1; }
.media-link__overlay strong {
  color: var(--c-warmwit);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
}
.media-link__overlay span { color: rgba(245,242,236,0.8); font-size: 13px; margin-top: 4px; }

/* Touch devices have no hover, so keep the label permanently readable */
@media (hover: none) {
  .media-link__overlay { opacity: 1; }
}

.badge {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--c-zand); color: var(--c-antraciet);   /* 6.06:1 - spec 3.1 */
}
.badge--groen { background: var(--c-mosgroen); color: var(--c-wit); }  /* 7.37:1 */
.badge--terracotta { background: var(--c-terracotta); color: var(--c-wit); }

/* --------------------------------------------------------------------------
   9. Trust bar, values, steps  (spec 7.1)
   -------------------------------------------------------------------------- */
.trustbar { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .trustbar { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); }
.trust-item svg { width: 32px; height: 32px; color: var(--c-antraciet); stroke-width: 1.5; }
.trust-item strong { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
@media (min-width: 1024px) { .trust-item strong { font-size: 28px; } }
.trust-item span { font-size: 13px; color: var(--c-tekstgrijs); font-weight: 500; }

/* Service / value icon in a 56px circle - spec 3.4 */
.icon-circle {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  background: var(--c-zand);
  color: var(--c-antraciet);
  display: flex; align-items: center; justify-content: center;
}
.icon-circle svg { width: 26px; height: 26px; stroke-width: 1.5; }
.icon-circle--wit { background: var(--c-warmwit); }
.icon-circle--groen { background: var(--c-mosgroen); color: var(--c-wit); }

.value-item { display: flex; gap: var(--s-2); align-items: flex-start; }
.value-item h3 { font-size: 18px; margin-bottom: 4px; }
.value-item p { font-size: 15px; color: var(--c-tekstgrijs); margin: 0; }

/* Steps timeline */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
@media (min-width: 768px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); } }
.step { position: relative; padding-top: var(--s-4); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-terracotta); color: var(--c-wit);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.step { padding-left: 0; padding-top: 56px; }
.step h3 { font-size: 18px; margin-bottom: var(--s-1); }
.step p { font-size: 15px; color: var(--c-tekstgrijs); margin: 0; }
.section--antraciet .step p, .section--mosgroen .step p { color: rgba(245,242,236,0.8); }
/* Connecting line between steps on desktop */
@media (min-width: 1024px) {
  .step::after {
    content: '';
    position: absolute; top: 20px; left: 48px; right: calc(-1 * var(--s-3) + 8px);
    height: 1.5px; background: var(--c-lijngrijs);
  }
  .step:last-child::after { display: none; }
  .section--antraciet .step::after { background: rgba(245,242,236,0.25); }
}

/* --------------------------------------------------------------------------
   10. Reviews  (spec 6.3 / 7.8)
   -------------------------------------------------------------------------- */
.review {
  background: var(--c-wit);
  border: 1px solid var(--c-lijngrijs);
  border-radius: var(--r-card);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.stars { display: flex; gap: 2px; color: var(--c-zand); }
.stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.review blockquote { color: var(--c-antraciet); flex: 1; }
.review__who { font-size: 13px; color: var(--c-tekstgrijs); font-weight: 500; }
.review__who strong { color: var(--c-antraciet); font-weight: 600; display: block; font-size: 15px; }

/* --------------------------------------------------------------------------
   11. Before/after slider  (spec 4.10)
   -------------------------------------------------------------------------- */
.before-after {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  background: var(--c-lijngrijs);
  aspect-ratio: 4 / 3;
}
.before-after img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Deze laag moet de volledige widget beslaan: clip-path rekent met de border-box
   van dit element, en een inline element van 0x0 zou de na-foto volledig
   wegknippen (waardoor je enkel de voor-foto ziet). */
.before-after__after {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: inset(0 0 0 var(--split, 50%));
}
.before-after__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px; background: var(--c-warmwit);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.before-after__grip {
  position: absolute; top: 50%; left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-terracotta); color: var(--c-wit);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.before-after__grip svg { width: 22px; height: 22px; }
.before-after input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.before-after input[type="range"]:focus-visible ~ .before-after__grip {
  outline: 3px solid var(--c-wit);
  outline-offset: 3px;
}
.before-after__label {
  position: absolute; bottom: var(--s-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(43,46,51,0.75); color: var(--c-warmwit);
  padding: 5px 12px; border-radius: var(--r-pill);
  pointer-events: none;
}
.before-after__label--voor { left: var(--s-2); }
.before-after__label--na   { right: var(--s-2); }

/* --------------------------------------------------------------------------
   12. Forms  (spec 8.1)
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); container-type: inline-size; }
/* Naam en telefoon komen alleen naast elkaar als het formulier zelf breed
   genoeg is. Op tablet staat het in een halve kolom, waar twee velden van
   ongeveer 160px te krap zouden worden om comfortabel in te typen. */
@container (min-width: 30rem) {
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--c-antraciet); }
.field .req { color: var(--c-terracotta); }
.field .hint { font-size: 13px; color: var(--c-tekstgrijs); }

.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 16px;              /* >=16px stops iOS zooming on focus */
  line-height: 1.5;
  color: var(--c-antraciet);
  background: var(--c-wit);
  border: 1.5px solid var(--c-lijngrijs);
  border-radius: var(--r-input);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-tekstgrijs); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 3px rgba(181, 80, 42, 0.15);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232B2E33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 42px;
}

.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #B3261E;
  background: #FDF6F5;
}
.field__error {
  font-size: 13px; font-weight: 500; color: #B3261E;
  display: none; align-items: center; gap: 6px;
}
.field.has-error .field__error { display: flex; }

/* Honeypot - spec 9.4 */
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form__status { border-radius: var(--r-card); padding: var(--s-3); display: none; }
.form__status.is-visible { display: block; }
.form__status--ok    { background: #EDF3EC; border: 1px solid var(--c-mosgroen); }
.form__status--error { background: #FDF0EC; border: 1px solid var(--c-terracotta); }
.form__status h3 { margin-bottom: var(--s-1); }
.form__status p:last-child { margin-bottom: 0; }

.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--c-wit);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   13. Footer  (spec 7.1 section 9)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-antraciet);
  color: var(--c-warmwit);
  padding-block: var(--s-8) var(--s-4);
}
.site-footer h3 { color: var(--c-wit); font-size: 18px; margin-bottom: var(--s-2); }
.site-footer a { color: var(--c-warmwit); }
.site-footer p { color: rgba(245, 242, 236, 0.8); font-size: 15px; }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-4); } }
.footer-logo img { height: 44px; width: auto; margin-bottom: var(--s-3); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.footer-links a { font-size: 15px; text-decoration: none; color: rgba(245,242,236,0.85); }
.footer-links a:hover { color: var(--c-wit); text-decoration: underline; }
.footer-contact { display: grid; gap: 4px; justify-items: start; margin-left: -14px; }
/* Kaart met toestemming.
   De Google Maps-iframe wordt pas ingeladen nadat de bezoeker daarop klikt.
   Zolang dat niet gebeurt, vertrekt er geen enkel verzoek naar Google en
   worden er dus ook geen cookies gezet. */
.map-embed {
  --map-h: 200px;
  position: relative;
  height: var(--map-h);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-warmwit);
  border: 1px solid var(--c-lijngrijs);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-embed__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: var(--s-3);
}
.map-embed__intro svg { width: 26px; height: 26px; color: var(--c-terracotta); }
.map-embed__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--c-antraciet);
}
.map-embed__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-tekstgrijs);
  max-width: 42ch;
}
.map-embed .btn { padding: 10px 20px; margin-top: 4px; }

/* In de donkere footer moet de placeholder leesbaar blijven */
.site-footer .map-embed {
  background: rgba(245, 242, 236, 0.06);
  border-color: rgba(245, 242, 236, 0.2);
}
.site-footer .map-embed__title { color: var(--c-wit); }
.site-footer .map-embed__note  { color: rgba(245, 242, 236, 0.75); }
.site-footer .map-embed__intro svg { color: var(--c-zand); }

.footer-map { filter: grayscale(1) contrast(0.9); }
.footer-map iframe { filter: grayscale(1) contrast(0.9); }
.footer-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245, 242, 236, 0.15);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  font-size: 13px; color: rgba(245, 242, 236, 0.6);
}
.footer-bottom a { color: rgba(245, 242, 236, 0.6); text-decoration: none; }
.footer-bottom a:hover { color: var(--c-warmwit); text-decoration: underline; }

/* Mobile quick-action bar - spec 4.4 */
.quick-actions {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--c-antraciet);
  border-top: 1px solid rgba(245,242,236,0.15);
}
@media (min-width: 768px) { .quick-actions { display: none; } }
.quick-actions a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-1);
  padding: 14px 8px;
  color: var(--c-warmwit);
  font-weight: 600; font-size: 14px; letter-spacing: 0.2px;
  text-decoration: none;
}
.quick-actions a svg { width: 18px; height: 18px; }
.quick-actions a + a { border-left: 1px solid rgba(245,242,236,0.15); background: var(--c-terracotta); }
/* Keep the floating buttons clear of the bar on mobile */
@media (max-width: 767px) {
  .btn-whatsapp-fab, .btn-to-top { bottom: calc(52px + var(--s-2)); }
  body { padding-bottom: 52px; }
}

/* --------------------------------------------------------------------------
   14. Scroll reveal  (spec 3.6)
   -------------------------------------------------------------------------- */
.reveal {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* Content is only hidden once JS has actually armed the reveal logic. If the
   script fails to load, or the IntersectionObserver never fires, nothing is
   ever hidden - the page just renders without the entrance animation. */
.js-reveal .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal:not(.is-visible) { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.flow > * + * { margin-top: var(--s-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.list-check { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-1); }
.list-check li { display: flex; gap: var(--s-1); align-items: flex-start; font-size: 15px; }
.list-check li::before {
  content: '';
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  background: currentColor;
  color: var(--c-terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--antraciet .list-check li::before,
.section--mosgroen .list-check li::before { color: var(--c-zand); }

/* Aanbod-tabel: term links, uitleg rechts. Leest een pak rustiger dan een
   opsomming waarin titel en uitleg op dezelfde regel aan elkaar plakken. */
/* De tabel staat vaak in een halve kolom. Een media query kijkt naar het
   venster en niet naar die kolom, waardoor op een tablet twee kolommen
   ontstonden met nauwelijks 148px voor de uitleg. Een container query meet de
   werkelijke ruimte, dus splitst de tabel alleen wanneer dat past. Browsers
   zonder ondersteuning houden de gestapelde weergave, wat altijd leesbaar is. */
.offer-list {
  margin: 0 0 var(--s-3);
  padding: 0;
  container-type: inline-size;
}
.offer-list > div {
  display: grid;
  gap: 4px var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-lijngrijs);
  align-items: baseline;
}
.offer-list > div:last-child { border-bottom: 1px solid var(--c-lijngrijs); }
@container (min-width: 26rem) {
  .offer-list > div { grid-template-columns: minmax(10rem, 32%) 1fr; }
}
.offer-list dt {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  font-size: 16px;
  color: var(--c-antraciet);
  line-height: 1.4;
  /* Lange samenstellingen ("Onderhoudsvriendelijke") passen niet in de smalle
     linkerkolom en zouden anders over de tekst rechts heen lopen. Een zacht
     afbreekstreepje (­) in de tekst bepaalt waar de breuk het mooist valt;
     deze regels vangen alles op wat daar niet in voorzien is. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.offer-list dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px; height: 18px;
  background: var(--c-terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.offer-list dd {
  margin: 0;
  padding-left: 28px;
  font-size: 15px;
  color: var(--c-tekstgrijs);
  line-height: 1.55;
}
@container (min-width: 26rem) {
  .offer-list dd { padding-left: 0; }
}
.section--antraciet .offer-list > div,
.section--mosgroen .offer-list > div { border-color: rgba(245, 242, 236, 0.2); }
.section--antraciet .offer-list dt,
.section--mosgroen .offer-list dt { color: var(--c-wit); }
.section--antraciet .offer-list dt::before,
.section--mosgroen .offer-list dt::before { background: var(--c-zand); }
.section--antraciet .offer-list dd,
.section--mosgroen .offer-list dd { color: rgba(245, 242, 236, 0.8); }

/* Gallery grid used on project pages */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
.gallery img { border-radius: var(--r-card); }

/* Two-column feature block (image + text) */
.feature { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .feature--reverse .feature__media { order: 2; }
}
.feature__media img { border-radius: var(--r-card); }
.feature__body p:last-child { margin-bottom: 0; }

/* Project meta table */
.spec-list { display: grid; gap: 0; margin: 0 0 var(--s-3); padding: 0; }
.spec-list div {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: 10px 0; border-bottom: 1px solid var(--c-lijngrijs);
  font-size: 15px;
}
.spec-list dt { color: var(--c-tekstgrijs); }
.spec-list dd { margin: 0; font-weight: 600; text-align: right; }

/* Placeholder-content marker - visible in dev, see README */
[data-placeholder] { position: relative; }

/* --------------------------------------------------------------------------
   16. Cookiebanner
   Staat standaard uit, zie components/CookieBanner.jsx.
   -------------------------------------------------------------------------- */
.cookiebanner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;                 /* boven de zwevende knoppen en de snelbalk */
  background: var(--c-antraciet);
  color: var(--c-warmwit);
  border-top: 3px solid var(--c-terracotta);
  box-shadow: 0 -8px 32px rgba(43, 46, 51, 0.28);
  padding: var(--s-3);
  animation: cookiebanner-in 350ms var(--ease) both;
}
@keyframes cookiebanner-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookiebanner { animation: none; }
}

.cookiebanner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}
@media (min-width: 900px) {
  .cookiebanner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding-inline: 5%;
  }
}

.cookiebanner__tekst h2 {
  color: var(--c-wit);
  font-size: 18px;
  margin-bottom: 6px;
}
.cookiebanner__tekst p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 242, 236, 0.85);
  max-width: 70ch;
}
.cookiebanner__tekst a { color: var(--c-zand); font-weight: 600; }

.cookiebanner__knoppen {
  display: flex;
  gap: var(--s-2);
  flex: none;
  width: 100%;
}
.cookiebanner__knoppen .btn { flex: 1; }
@media (min-width: 900px) {
  .cookiebanner__knoppen { width: auto; }
  .cookiebanner__knoppen .btn { flex: none; }
}
/* Op donkere achtergrond moet de weigerknop leesbaar blijven */
.cookiebanner .btn-secondary {
  color: var(--c-warmwit);
  border-color: var(--c-warmwit);
}
.cookiebanner .btn-secondary:hover {
  background: var(--c-warmwit);
  color: var(--c-antraciet);
}

/* Zolang de banner staat, mogen de zwevende knoppen er niet achter verdwijnen */
body:has(.cookiebanner) .btn-whatsapp-fab,
body:has(.cookiebanner) .btn-to-top { bottom: calc(var(--s-3) + 150px); }
@media (min-width: 900px) {
  body:has(.cookiebanner) .btn-whatsapp-fab,
  body:has(.cookiebanner) .btn-to-top { bottom: calc(var(--s-3) + 96px); }
}

/* --------------------------------------------------------------------------
   17. Foutpagina (404)
   -------------------------------------------------------------------------- */
.errorpage {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.errorpage__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  color: var(--c-zand);
  display: block;
  margin-bottom: var(--s-2);
}
@media (min-width: 1024px) { .errorpage__code { font-size: 88px; } }

/* Eenvoudige tekstpagina's zoals de privacyverklaring */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--s-6); }
.prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-1); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s-3); }
.prose li { margin-bottom: 6px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-3);
  font-size: 15px;
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--c-lijngrijs);
  vertical-align: top;
}
.prose th { font-weight: 600; width: 34%; }

/* Blok dat aangeeft dat er nog iets ingevuld moet worden */
.todo-note {
  background: #FDF6EC;
  border: 1px solid var(--c-zand);
  border-radius: var(--r-card);
  padding: var(--s-3);
  margin: 0 0 var(--s-4);
}
.todo-note p:last-child { margin-bottom: 0; }
.todo-note strong { color: var(--c-antraciet); }