/* ==========================================================================
   Herman Ontruimingen: styles.css
   Eén stylesheet voor de hele site. Geen frameworks, geen build-stap.

   Inhoud
   01  Lettertypes (zelf gehost)
   02  Design tokens: licht (standaard) en donker
   03  Basis & reset
   04  Typografie
   05  Layout-primitieven (container, secties, grids)
   06  Toegankelijkheid: skip-link, focus, selectie
   07  Header & navigatie
   08  Knoppen & links
   09  Hero
   10  Homepage: zekerheden, zo werkt het, prijsband, werkgebied
   11  Kaarten (diensten, regio's)
   12  Stappen (werkwijze)
   13  HET PROTOCOL: het signatuurelement
   14  Rustige secties (hergebruik, aanspreekpunt, regio's)
   14b Dienstpagina's: vinkjes, kruisjes, tips, andere diensten
   15  CTA-band
   16  Formulieren
   16b Contactpagina en het formulier in drie stappen
   17  FAQ (details/summary)
   18  Footer
   19  Vaste mobiele balk
   20  Beweging: reveal, hover, reduced motion
   21  Callouts en kleine hulpklassen
   22  Foto's
   23  Huisstijl: warm en menselijk (terracotta en zand)
   24  Checklist en afdrukken
   ========================================================================== */


/* 01: Lettertypes ------------------------------------------------------- */
/* Fraunces = de koppen: zacht, warm, rond. Nunito Sans = de lopende tekst:
   open en goed leesbaar, ook groot. Zelf gehost (OFL), geen italics. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2");
}


/* 02: Design tokens ----------------------------------------------------- */

:root {
  /* Kleur: licht (standaard). Alle tekstparen geverifieerd op WCAG AA. */
  --canvas: #F7EFE6;
  --surface: #FFFCF8;
  --surface-2: #F1E4D4;
  --ink: #33231C;
  --muted: #6B574A;
  --line: #E6D5C2;
  --primary: #A3472B;
  --primary-hover: #863A22;
  --primary-fg: #FFFFFF;
  --hero-veil: color-mix(in srgb, var(--canvas) 72%, transparent);  /* canvas, doorschijnend: gelijkmatige waas over de hero-foto */
  --hero-offset: 64px;   /* hoogte van de header op breed scherm */
  --hero-bg: #F3DCCB;        /* zachte terracotta achter de homepage-titel */
  --vlak: #ECC9B0;           /* warm vlak achter foto's (decoratief) */
  --accent: #D9A441;          /* oker: enkel decoratief, nooit lopende tekst */
  --band-bg: #8E3D25;         /* prijsband: diepe terracotta */
  --band-fg: #FFF8F1;
  --photo-filter: none;

  /* Schaduw: één zachte schaduw, enkel op het protocol en op kaart-hover. */
  --shadow: 0 1px 2px rgba(51, 35, 28, 0.06), 0 12px 32px rgba(51, 35, 28, 0.10);

  /* Typografie */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spatiëring: 4-basis */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --radius: 14px;
  --radius-lg: 26px;
  --container: 1120px;
  --measure: 66ch;

  color-scheme: light;
}

/* De site heeft enkel een licht thema (keuze van Maxim, v31). */


/* 03: Basis & reset ------------------------------------------------------ */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;            /* 18px basis */
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-sm {
  width: 20px;
  height: 20px;
}


/* 04: Typografie --------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  hyphens: manual;
}

h1 { font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.25rem); }  /* 30-52px */
h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); } /* 26-34px */
h3 { font-size: 1.25rem; }                                   /* 20px */

p,
ul,
ol {
  margin: 0 0 var(--s-4);
  max-inline-size: var(--measure);
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

.lede {
  font-size: 1.3125rem;
  line-height: 1.55;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 1rem;               /* 16px: de ondergrens, nergens kleiner */
}

.nowrap {
  white-space: nowrap;
}

.eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}

strong { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}


/* 05: Layout-primitieven -------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section {
  padding-block: var(--s-7);      /* 48px mobiel */
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--s-9);    /* 96px desktop */
  }
}

.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  margin-bottom: var(--s-6);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.center {
  text-align: center;
}

.center p,
.center ul,
.center ol {
  margin-inline: auto;
}


/* 06: Toegankelijkheid ---------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--primary);
  color: var(--primary-fg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--s-4);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--primary);
  color: var(--primary-fg);
}

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


/* 07: Header & navigatie --------------------------------------------------- */

/* De header blijft bovenaan staan bij het scrollen. scroll-padding-top zorgt
   dat ankers (zoals de skip-link naar #main) niet onder de header vallen. */
html {
  scroll-padding-top: 88px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  min-height: 72px;
  padding-block: var(--s-3);
}

/* Logo (v47): dak op de H + naam op twee regels, als SVG. De hoogte bepaalt
   alles; de breedte volgt vanzelf (verhouding 175 x 48). */
.brand {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
}

.brand img {
  display: block;
  width: auto;
  height: 48px;
}

.header-utils {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}

.site-nav {
  flex: 1 1 100%;
}

.lang-switch {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.lang-switch:hover {
  color: var(--primary);
  background: var(--surface-2);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.header-phone {
  display: none;
}

@media (min-width: 900px) {
  .header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    min-height: 44px;
  }
  .header-phone:hover {
    background: var(--surface-2);
  }
}

/* Navigatie met uitklapblokken.
   Zonder JS: het menu staat altijd open onder de merknaam; een uitklapblok
   opent bij aanwijzen of zodra de focus erin komt (Tab). De hoofdlinks
   (Diensten, Werkwijze, ...) gaan altijd naar een overzichtspagina.
   Met JS: het pijltje naast een hoofdlink opent en sluit het blok
   (aria-expanded). Onder 1200px zit alles achter de menuknop. */

.site-header .container {
  max-width: 1280px;
}

.nav-list,
.sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  padding-block: var(--s-2);
}

.nav-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 180ms ease-out;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 7px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-out;
}

.nav-link:hover,
.nav-item[data-current] > .nav-link {
  color: var(--primary);
}

.nav-link:hover::after,
.nav-item[data-current] > .nav-link::after {
  transform: scaleX(1);
}

.sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--s-3));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.sub-toggle:hover {
  color: var(--primary);
}

.sub-toggle .icon {
  transition: transform 180ms ease-out;
}

.sub-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

html:not(.js) .sub-toggle {
  display: none;
}

/* Het uitklapblok */
.sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 18rem;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
}

.sub a:hover {
  background: var(--surface-2);
  color: var(--primary);
}

.sub a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

.nav-item.is-open > .sub,
html:not(.js) .has-sub:focus-within > .sub {
  display: block;
}

/* "Prijs aanvragen": in de header op breed scherm, onderaan het menupaneel op gsm. */
.site-header .header-cta,
.nav-cta {
  display: none;
}

.nav-toggle {
  display: none;
}

/* Onder 1200px: menuknop. Het volledige menu past daar niet op één regel. */
@media (max-width: 1199.98px) {
  html.js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }

  html.js .site-nav {
    display: none;
  }

  /* Het menu opent als paneel over de pagina: niets eronder schuift op. */
  html.js .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    background: var(--surface);
    border-block: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: var(--s-2) var(--s-5) var(--s-5);
  }

  html.js .site-nav.is-open .nav-list {
    display: block;
    padding: 0;
  }

  html.js .site-nav.is-open .nav-item {
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  html.js .site-nav.is-open .nav-link {
    flex: 1;
    padding-inline: 0;
    font-size: 1.125rem;
  }

  html.js .site-nav.is-open .nav-link::after {
    left: 0;
    right: auto;
    width: 1.5em;
    bottom: 6px;
  }

  html.js .site-nav.is-open .sub-toggle {
    margin-left: 0;
    border: 1px solid var(--line);
  }

  html.js .site-nav.is-open .sub {
    position: static;
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 0 var(--s-3) var(--s-4);
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  html.js .site-nav.is-open .sub a {
    font-size: 1.0625rem;
    padding-inline: var(--s-3);
  }

  html.js .site-nav.is-open .nav-cta {
    display: block;
    border-bottom: 0;
    padding-top: var(--s-5);
  }

  html.js .site-nav.is-open .nav-cta .btn {
    width: 100%;
  }

  /* Tablet en smal laptopvenster (v46): het menu als smaller paneel rechts
     onder de menuknop, niet over de volle breedte (anders werd "Prijs
     aanvragen" een balk over het hele scherm). */
  @media (min-width: 640px) {
    html.js .site-nav.is-open {
      left: auto;
      right: var(--s-5);
      width: 420px;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
  }

  /* Gsm: header op één regel. Hij blijft staan, maar krimpt tot een smalle
     balk zodra u naar beneden scrolt (main.js zet .is-compact). In de smalle
     balk blijven Herman Ontruimingen, EN en het menu; de themaknop valt weg. */
  html {
    scroll-padding-top: 64px;
  }

  .header-inner {
    min-height: 64px;
    padding-block: var(--s-2);
    column-gap: var(--s-2);
    transition: min-height 180ms ease-out, padding 180ms ease-out;
  }

  .brand img {
    height: 44px;  /* 160px breed: past vanaf 320px op één regel met EN en menu */
    transition: height 180ms ease-out;
  }

  .site-header.is-compact .header-inner {
    min-height: 48px;
    padding-block: 2px;
  }

  .site-header.is-compact .brand img {
    height: 36px;
  }


  .site-header.is-compact .nav-toggle {
    border-color: transparent;
  }

  .header-utils {
    gap: 0;
  }
}

/* Menuknop: hamburger wordt een kruisje zolang het menu open staat. */
.nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Breed scherm: alles op één regel, uitklapblokken openen ook bij aanwijzen.
   Ook hier krimpt de header bij het scrollen; de themaknop valt dan weg. */
@media (min-width: 1200px) {
  .header-inner {
    flex-wrap: nowrap;
    min-height: 64px;
    padding-block: var(--s-2);
    gap: var(--s-5);
    transition: min-height 180ms ease-out, padding 180ms ease-out;
  }
  .brand {
    order: 0;
    flex: none;
  }
  .brand img {
    height: 48px;
    transition: height 180ms ease-out;
  }
  .site-nav {
    order: 1;
    flex: 1 1 auto;
  }
  .header-utils {
    order: 2;
    flex: none;
  }
  .nav-list {
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
  }
  .nav-link {
    padding-inline: var(--s-2);
    white-space: nowrap;
  }
  .nav-link::after {
    left: var(--s-2);
    right: var(--s-2);
    bottom: 6px;
  }
  .sub-toggle {
    margin-left: calc(-1 * var(--s-3));
  }
  .site-header .header-cta {
    display: inline-flex;
    margin-left: var(--s-2);
    white-space: nowrap;
  }
  .site-header.is-compact .header-inner {
    min-height: 48px;
    padding-block: 2px;
  }
  .site-header.is-compact .brand img {
    height: 38px;
  }
}

@media (min-width: 1200px) and (hover: hover) {
  .has-sub:hover > .sub {
    display: block;
  }
}

/* Werkgebied: negen links, op breed scherm in twee kolommen. */
@media (min-width: 1200px) {
  .nav-item.is-open > #sub-werkgebied,
  html:not(.js) .has-sub:focus-within > #sub-werkgebied {
    display: grid;
  }
  #sub-werkgebied {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 22rem;
  }
  #sub-werkgebied li:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-1);
  }
}

@media (min-width: 1200px) and (hover: hover) {
  .has-sub:hover > #sub-werkgebied {
    display: grid;
  }
}

/* Vanaf 1440px mag de header breder (v45): "Herman Ontruimingen" is langer
   dan de oude naam, en zonder extra plaats sprongen de pijltjes van het menu
   naar een tweede regel zodra het volledige nummer verschijnt. */
@media (min-width: 1440px) {
  .site-header .container {
    max-width: 1600px;
  }
}

/* Tussen 1200 en 1440px is er geen plaats voor het volledige nummer:
   dan enkel het telefoonicoon (het nummer blijft voorgelezen). */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .header-phone-nr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header-phone {
    justify-content: center;
    min-width: 44px;
    padding-inline: var(--s-2);
  }
}


/* 07b: Broodkruimels (gemaakt door tools/sync.mjs uit de JSON-LD) ---------- */

.crumbs {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  margin: 0;
  padding: var(--s-2) 0;
  list-style: none;
  font-size: 1rem;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--line);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--primary);
}

.crumbs [aria-current="page"] {
  color: var(--ink);
}


/* 08: Knoppen & links ------------------------------------------------------ */

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-hover);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-fg);
}

.btn:active {
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
}

.btn-secondary:hover {
  background: var(--surface-2);
  color: var(--primary-hover);
}

.text-link {
  font-weight: 600;
}

.text-link::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform 220ms ease-out;
}

/* Op gsm staan de knoppen onder elkaar, allemaal even breed. */
@media (max-width: 639.98px) {
  .hero-actions .btn,
  .form .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}


/* 09: Hero ------------------------------------------------------------------ */

.hero {
  padding-block: var(--s-6) var(--s-7);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--s-9);
  }
}

.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s-8);
  }
}

.hero .eyebrow {
  margin-bottom: var(--s-4);
}

.hero h1 {
  max-inline-size: 20ch;
  margin-bottom: var(--s-5);
}

.hero .lede {
  max-inline-size: 52ch;
  margin-bottom: var(--s-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.hero-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
  font-size: 1rem;
  color: var(--muted);
}

.hero-quiet a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--muted);
  font-weight: 600;
}

.hero-quiet a:hover {
  color: var(--primary);
}


/* 10: Homepage: zekerheden, zo werkt het, prijsband, werkgebied ----------- */

/* Vier zekerheden, als rustige rij onder de hero. */
.trust {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: var(--s-5);
}

.trust-row {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .trust-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.trust-row li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.trust-row .icon {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--primary);
}

.trust-row p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.trust-row strong {
  display: block;
  font-weight: 600;
}

.trust-row span {
  color: var(--muted);
}

/* Zo werkt het: vier stappen, op breed scherm naast elkaar met een lijn. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  counter-reset: flow;
  display: grid;
  gap: var(--s-6) var(--s-5);
}

@media (min-width: 640px) {
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.flow li {
  position: relative;
  counter-increment: flow;
}

.flow li::before {
  content: counter(flow);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-4);
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 60px;
    right: calc(-1 * var(--s-5) + 16px);
    height: 1px;
    background: var(--line);
  }
}

.flow h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--s-2);
}

.flow p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.section-more {
  margin: var(--s-6) 0 0;
}

/* Prijsband: diepgroen vlak, de belangrijkste oproep van de homepage. */
.price-band {
  background: var(--band-bg);
  color: var(--band-fg);
}

.price-band :is(h2, p, .eyebrow) {
  color: var(--band-fg);
}

.price-band :focus-visible {
  outline-color: var(--band-fg);
}

.price-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 960px) {
  .price-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s-8);
  }
}

.price-note {
  font-size: 1rem;
}

.price-band .btn {
  margin-top: var(--s-2);
  background: var(--band-fg);
  border-color: var(--band-fg);
  color: var(--band-bg);
}

.price-band .btn:hover {
  background: var(--canvas);
  border-color: var(--canvas);
  color: var(--primary-hover);
}

.price-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  counter-reset: price;
  display: grid;
  gap: var(--s-5);
}

.price-steps li {
  counter-increment: price;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
}

.price-steps li::before {
  content: counter(price);
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--band-fg);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.price-steps strong {
  font-weight: 600;
  padding-top: 8px;
}

.price-steps span {
  font-size: 1rem;
}

/* Werkgebied: tekst en steden links, beeld rechts. */
.region-split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 960px) {
  .region-split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s-8);
  }
}

.city-grid {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s-2);
}

.city-grid li > * {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.city-grid .icon {
  color: var(--primary);
}

.city-grid a:hover,
.city-grid a[aria-current="page"] {
  border-color: var(--primary);
  color: var(--primary);
}

/* Kaart van West-Vlaanderen (inline SVG uit partials/kaart.*.html).
   Elk arrondissement is een link naar zijn stadspagina. */
.wv-map {
  margin: 0;
  max-width: 560px;
}

.wv-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wv-arr path {
  fill: var(--surface-2);
  stroke: var(--muted);
  stroke-width: 1.25;
  stroke-linejoin: round;
  transition: fill 180ms ease-out;
}

.wv-labels {
  pointer-events: none;
}

.wv-label circle {
  fill: var(--primary);
}

.wv-label text {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--surface-2);
  stroke-width: 6px;
  stroke-linejoin: round;
}

a.wv-arr:hover path,
a.wv-arr:focus-visible path {
  fill: color-mix(in srgb, var(--primary) 22%, var(--surface-2));
}

a.wv-arr:focus-visible {
  outline: none;
}

a.wv-arr:focus-visible path {
  stroke: var(--primary);
  stroke-width: 3;
}

.wv-arr.is-active path {
  fill: color-mix(in srgb, var(--primary) 34%, var(--surface-2));
  stroke: var(--primary);
}

.wv-label.is-active circle {
  r: 9px;
}


/* Reviews op de homepage (gevuld door render.php, enkel echte reviews). */
.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .review-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review-sterren {
  margin: 0;
  color: var(--accent);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}

.review blockquote {
  margin: 0;
}

.review blockquote p {
  margin: 0;
}

.review-wie {
  margin: auto 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}


/* 11: Kaarten ----------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  transition: box-shadow 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}

.card:hover {
  border-color: var(--primary);
}

.card .icon {
  color: var(--primary);
}

.card :is(h2, h3) {
  margin: 0;
  font-size: 1.25rem;
}

.card :is(h2, h3) a {
  color: inherit;
  text-decoration: none;
}

/* De hele kaart klikbaar via de titel, zonder de tekst onselecteerbaar te maken. */
.card :is(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.card-more {
  margin-top: auto;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

.card-more::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 220ms ease-out;
}



/* 12: Stappen (werkwijze) -------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  max-inline-size: none;
  counter-reset: step;
  display: grid;
  gap: var(--s-4);
}

.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  margin-bottom: var(--s-3);
}

.steps :is(h2, h3) {
  font-size: 1.125rem;
  margin-bottom: var(--s-2);
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* Volledige werkwijze (verticaal, 5 stappen) op werkwijze.html */
.steps-vertical {
  grid-template-columns: 1fr;
  max-inline-size: 70ch;
}


/* 13: HET PROTOCOL: het signatuurelement ------------------------------------------ */
/* Een kaart die eruitziet als een opgesteld document: wit blad, haarlijn,
   messing regel bovenaan, seriffe nummering, ondertekening. Hier: en alleen
   hier: mag de site even de aandacht vragen. */

.protocol {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-6) var(--s-5);
  max-inline-size: 70ch;
}

@media (max-width: 639.98px) {
  .protocol {
    padding: var(--s-5) var(--s-4);
  }
  .protocol ol li {
    padding-left: 40px;
  }
  .protocol ol li::before {
    font-size: 1.625rem;
    top: -0.1em;
  }
}

@media (min-width: 640px) {
  .protocol {
    padding: var(--s-7) var(--s-7) var(--s-6);
  }
}

.protocol .eyebrow {
  color: var(--muted);
  margin-bottom: var(--s-5);
}

.protocol ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: protocol;
  max-inline-size: none;
}

.protocol ol li {
  counter-increment: protocol;
  position: relative;
  padding-left: 56px;
  margin-bottom: var(--s-5);
}

.protocol ol li:last-child {
  margin-bottom: 0;
}

.protocol ol li::before {
  content: counter(protocol) ".";
  position: absolute;
  left: 0;
  top: -0.2em;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.protocol ol strong {
  display: block;
  margin-bottom: var(--s-1);
}

.protocol ol p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.protocol-sign {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--accent);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--ink);
}

.protocol-note {
  margin-top: var(--s-4);
  font-size: 1rem;
}


/* 14: Rustige secties ---------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 899.98px) {
  .split {
    gap: var(--s-5);
  }
}

.split > div > h2:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
  }
}

.region-links {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.region-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: border-color 180ms ease-out, color 180ms ease-out;
}

.region-links a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.region-links .icon {
  color: var(--primary);
}


/* Contactgegevens (contactpagina): icoon, raakdoel minstens 44px. */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list a,
.contact-list span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
}

.contact-list a {
  font-weight: 600;
}

.contact-list span {
  color: var(--muted);
}

.contact-list .icon {
  color: var(--primary);
}


/* 14b: Dienstpagina's: vinkjes, kruisjes, tips, andere diensten ------------- */

/* Twee lijsten naast elkaar: wat inbegrepen is, wat we niet doen. */
.lists-split {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .lists-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8);
  }
}

.lists-split h2 {
  margin-bottom: var(--s-5);
}

.checklist,
.crosslist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-3);
}

.checklist li,
.crosslist li {
  position: relative;
  padding-left: 40px;
}

/* Vinkje: groen bolletje met een witte haak, getekend met randen. */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
}

.checklist li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 8px;
  height: 13px;
  border: solid var(--primary-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Kruisje: grijze ring met een kruis, rustiger dan het vinkje. */
.crosslist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

.crosslist li::after {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 1.25rem;
  color: var(--muted);
}

.list-note {
  margin: var(--s-5) 0 0;
  font-size: 1rem;
  color: var(--muted);
}

.list-note strong {
  color: var(--ink);
}

/* Drie praktische tips */
.tips {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .tips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.tips li {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}

.tips h3 {
  font-size: 1.1875rem;
  margin-bottom: var(--s-2);
}

.tips p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.link-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Andere diensten: drie kaarten zonder foto, de hele kaart klikbaar. */
.mini-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .mini-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
}


/* 15: CTA-band -------------------------------------------------------------------------- */

.cta-band {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.cta-band .hero-actions {
  justify-content: center;
  margin-bottom: 0;
}


/* 16: Formulieren ------------------------------------------------------------------------- */

.form {
  max-inline-size: 60ch;
}

.field {
  margin-bottom: var(--s-5);
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.field .hint {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: var(--s-1);
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 180ms ease-out;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--muted);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

/* Uploadveld voor de foto's. Gestippelde rand, zodat het meteen leest als
   "hier mag u iets toevoegen" en niet als een gewoon invulveld. */

input[type="file"] {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

input[type="file"]:hover {
  border-color: var(--muted);
}

input[type="file"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

input[type="file"]::file-selector-button {
  margin-inline-end: var(--s-3);
  min-height: 36px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--line);
}

.file-status {
  font-size: 1rem;
  color: var(--muted);
  margin-top: var(--s-2);
}

.file-status.is-error {
  color: var(--primary);
  font-weight: 600;
}

.field-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.field-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 4px 0 0;
  accent-color: var(--primary);
  flex: none;
}

.field-consent label {
  font-weight: 400;
  font-size: 1rem;
  margin: 0;
}



/* 16b: Contactpagina en het formulier in drie stappen -------------------------
   Zonder JavaScript staan de drie stappen gewoon onder elkaar, met één
   verzendknop onderaan. Met JavaScript (main.js, sectie 10) ziet u één stap
   tegelijk, met een voortgangsbalk en de knoppen Vorige en Volgende. */

.hero-compact {
  padding-block: var(--s-7) var(--s-6);
}

.hero-compact .lede {
  max-inline-size: 60ch;
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  gap: var(--s-7);
  align-items: start;
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--s-8);
  }
}

.contact-aside h2 {
  font-size: 1.375rem;
}

.wizard {
  max-inline-size: none;
}

.wizard-step {
  margin: 0 0 var(--s-6);
  padding: var(--s-5);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (min-width: 640px) {
  .wizard-step {
    padding: var(--s-6);
  }
}

.wizard-step[hidden] {
  display: none;
}

.wizard-legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-5);
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.wizard-legend + * {
  clear: both;
}

.wizard-legend:focus {
  outline: none;
}

.wizard-nr {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Voortgang: drie bolletjes met een lijn ertussen. */
.wizard-progress {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  max-inline-size: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  counter-reset: none;
}

.wizard-progress li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 1rem;
  color: var(--muted);
}

.wizard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-weight: 600;
}

.wizard-progress li.is-current {
  color: var(--ink);
  font-weight: 600;
}

.wizard-progress li.is-current .wizard-num,
.wizard-progress li.is-done .wizard-num {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

@media (max-width: 559.98px) {
  /* Op een smalle gsm enkel de bolletjes, de naam van de stap staat in de titel. */
  .wizard-progress li {
    font-size: 0;
  }
  .wizard-progress .wizard-num {
    font-size: 1rem;
  }
}

/* Keuzes als grote, aanklikbare kaarten. */
.choices {
  margin: 0 0 var(--s-5);
  padding: 0;
  border: 0;
  min-width: 0;
}

.choices legend {
  padding: 0;
  margin-bottom: var(--s-2);
  font-weight: 600;
}

.choices legend .hint {
  display: inline;
  margin-left: var(--s-1);
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: var(--s-2);
}

.choices .choice {
  position: relative;
  display: flex;
  margin: 0;
  font-weight: 400;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-4);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.choices .choice:hover {
  border-color: var(--muted);
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
}

.choices .choice:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-weight: 600;
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.wizard-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.wizard-nav[hidden] {
  display: none;
}

.wizard-nav [data-next],
.wizard-nav [type="submit"] {
  margin-left: auto;
}

/* Adres: postcode (kort) met de gemeente eronder, straat en huisnummer naast
   elkaar op breed scherm. */
.adres-rij {
  display: grid;
  gap: 0 var(--s-4);
}

@media (min-width: 560px) {
  .adres-rij {
    grid-template-columns: minmax(0, 1fr) 9rem;
  }
  .adres-rij .field-postcode {
    grid-column: 1 / -1;
  }
  .field-postcode input {
    max-width: 12rem;
  }
}

/* Telefoon: land en nummer naast elkaar. */
.tel-rij {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-2);
}

@media (max-width: 420px) {
  .tel-rij {
    grid-template-columns: 1fr;
  }
}

.field [data-gemeente].is-ok {
  color: var(--ink);
  font-weight: 700;
}

.field [data-gemeente].is-fout,
.email-tip {
  color: var(--primary);
  font-weight: 700;
}

.email-tip {
  margin: var(--s-2) 0 0;
  font-size: 1rem;
}

.knop-tekst {
  min-height: 44px;
  padding: var(--s-2) var(--s-1);
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Gekozen foto's als kleine voorbeelden, elk met een knop om te verwijderen. */
.foto-lijst {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-2);
}

.foto-lijst[hidden] {
  display: none;
}

.foto-lijst li {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.foto-lijst img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-lijst .foto-naam {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--s-2);
  font-size: 1rem;
  color: var(--muted);
  text-align: center;
  word-break: break-all;
}

.foto-weg {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.foto-weg:hover {
  color: var(--primary);
}


/* 17: FAQ ------------------------------------------------------------------------------------ */

.faq-list {
  max-inline-size: 70ch;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list details:first-of-type {
  border-top: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) var(--s-1);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease-out;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 180ms ease-out;
  margin-right: var(--s-2);
}

.faq-list details[open] summary {
  color: var(--primary);
}

.faq-list details[open] summary::after {
  transform: rotate(225deg);
  border-color: var(--primary);
}

.faq-list summary:hover {
  color: var(--primary);
}

.faq-list .faq-answer {
  padding: 0 var(--s-1) var(--s-5);
}

.faq-list .faq-answer p:last-child {
  margin-bottom: 0;
}


/* 18: Footer ------------------------------------------------------------------------------------ */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-6);
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: var(--s-2);
}

.site-footer .footer-cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-4);
  margin-top: var(--s-2);
}

.site-footer a,
.site-footer .link-btn {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer .link-btn:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Knop die eruitziet als een tekstlink (voor "Cookievoorkeuren" in de footer). */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.footer-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: var(--s-3);
}

.footer-legal {
  color: var(--muted);
}

.footer-legal li {
  margin-bottom: var(--s-1);
}

/* Links onderaan: raakdoel minstens 44px, zodat u op gsm niet naast tikt. */
.footer-bottom a,
.footer-bottom .link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-1);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
}

/* Gsm (v47): footer compacter. Minder witruimte, adres en KBO/BTW elk op één
   regel, steden in drie kolommen, Diensten en Contact krapper onder elkaar.
   Tekst blijft 16px; elke link blijft minstens 28px hoog met ruimte ertussen. */
@media (max-width: 639.98px) {
  .site-footer {
    padding-block: var(--s-5) var(--s-3);
  }

  .footer-grid {
    gap: var(--s-4);
    margin-bottom: var(--s-4);
  }

  .site-footer h2 {
    margin-bottom: var(--s-1);
  }

  .site-footer li {
    margin-bottom: 0;
  }

  .site-footer li a {
    display: inline-block;
    padding-block: 3px;
  }

  .footer-brand {
    font-size: 1.125rem;
    margin-bottom: var(--s-1);
  }

  .footer-legal {
    line-height: 1.5;
  }

  .footer-legal li {
    margin-bottom: 0;
  }

  .footer-legal li:nth-child(1),
  .footer-legal li:nth-child(3) {
    display: inline;
  }

  .footer-legal li:nth-child(1)::after,
  .footer-legal li:nth-child(3)::after {
    content: ", ";
  }

  .footer-legal li:nth-child(2),
  .footer-legal li:nth-child(4) {
    display: inline;
  }

  .footer-legal li:nth-child(2)::after,
  .footer-legal li:nth-child(4)::after {
    content: "\A";
    white-space: pre;
  }

  .site-footer .footer-cities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-2);
    margin-top: 0;
  }

  .footer-bottom {
    padding-top: var(--s-2);
    gap: 0 var(--s-4);
    font-size: 1rem;
  }

  .footer-bottom p {
    margin: 0;
  }
}


/* 19: Vaste mobiele balk ---------------------------------------------------------------------------- */
/* Onder 900px: twee knoppen onderaan: bellen en plaatsbezoek aanvragen. */

.mobile-bar {
  display: none;
}

@media (max-width: 899.98px) {
  body {
    padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 44px 44px 1fr;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }

  /* v47: slanker. Knoppen blijven 44px hoog (raakdoel), tekst 16px. */
  .mobile-bar .btn {
    min-height: 44px;
    padding-block: 0;
    padding-inline: var(--s-3);
    font-size: 1rem;
    white-space: nowrap;
  }

  .mobile-bar .bar-icon .icon {
    width: 20px;
    height: 20px;
  }

  .mobile-bar .bar-icon {
    width: 44px;
    padding-inline: 0;
  }

  /* Met JavaScript verschijnt de balk pas als de bovenste sectie uit beeld is;
     zonder JavaScript staat hij er altijd. */
  html.js .mobile-bar {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 240ms ease-out, visibility 0s linear 240ms;
  }

  html.js .mobile-bar.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 240ms ease-out, visibility 0s linear 0s;
  }
}

.bar-short { display: none; }

@media (max-width: 359.98px) {
  .bar-long { display: none; }
  .bar-short { display: inline; }
}

.site-footer .wa-float,
.site-footer .wa-float:hover {
  color: var(--primary-fg);
  text-decoration: none;
}

/* 19b: Zwevende WhatsApp-knop. Alleen op desktop; op mobiel zit WhatsApp in de vaste balk. */

.wa-float {
  display: none;
}

@media (min-width: 900px) {
  .wa-float {
    display: inline-flex;
    position: fixed;
    inset-inline-end: var(--s-5);
    inset-block-end: var(--s-5);
    z-index: 60;
    box-shadow: var(--shadow);
  }

  /* Met JavaScript verschijnt de knop pas als de bovenste sectie uit beeld is,
     net zoals de contactbalk op gsm. Zonder JavaScript staat hij er altijd. */
  html.js .wa-float {
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;
    transition: opacity 240ms ease-out, transform 240ms ease-out, visibility 0s linear 240ms;
  }

  html.js .wa-float.is-shown {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 240ms ease-out, transform 240ms ease-out, visibility 0s linear 0s;
  }
}


/* 20: Beweging ---------------------------------------------------------------------------------------- */
/* Het bewegingsbudget: één zachte reveal bij het scrollen (eenmalig), zachte
   hover-overgangen, vloeiend ankerscrollen en een rustige paginaovergang
   bij het klikken in het menu. Alles valt weg bij prefers-reduced-motion. */

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Opliften bij aanwijzen: enkel met een muis, nooit op touch. Tijdens de lift
   vult een onzichtbare strook onder het element de vrijgekomen ruimte op, zodat
   een stilstaande cursor aan de onderrand het element niet laat trillen. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  .card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
  }

  .region-links a {
    position: relative;
    transition: border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
  }

  .region-links a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  .btn:hover::before,
  .card:hover::before,
  .region-links a:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
  }

  .card:hover .card-more::after,
  .text-link:hover::after {
    transform: translateX(4px);
  }
}

/* Paginaovergang tussen de html-pagina's (View Transitions API, puur CSS).
   Header en mobiele balk blijven staan; de inhoud vloeit over. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.mobile-bar {
  view-transition-name: mobile-bar;
}


.wa-float {
  view-transition-name: wa-float;
}

::view-transition-old(root) {
  animation: vt-out 120ms ease-in both;
}

::view-transition-new(root) {
  animation: vt-in 220ms ease-out both;
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Browsers zonder View Transitions krijgen een korte fade van de inhoud. */
@supports not (view-transition-name: root) {
  html.js main {
    animation: vt-in 220ms ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  html.js main {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html.js .mobile-bar,
  html.js .mobile-bar.is-shown,
  html.js .wa-float,
  html.js .wa-float.is-shown,
  .header-inner,
  .brand img {
    transition: none;
  }
}


/* 21: Callouts ------------------------------------------------------------------------------------ */

.callout {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  font-size: 1rem;
  max-inline-size: var(--measure);
}


/* 21: Kleine hulpklassen --------------------------------------------------- */

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }


/* 22: Foto's ------------------------------------------------------------------ */
/* Sfeerfoto's zonder mensen, puur decoratief (alt=""). Vaste beeldverhouding
   via width/height, zodat er niets verspringt tijdens het laden. */

.ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
}

/* Homepage: foto over de volle breedte.
   Mobiel: foto bovenaan, tekst eronder.
   Breed scherm: foto als achtergrond over het hele scherm. Links vervaagt ze
   naar de achtergrondkleur, zodat de tekst leesbaar blijft zonder kader. */
.hero-photo {
  position: relative;
  isolation: isolate;
  padding-top: 0;
}

.hero-media {
  aspect-ratio: 16 / 9;
  max-height: 40vh;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--s-5);
  background: var(--surface-2);
}

.hero .h1-line {
  display: block;
  text-wrap: balance;
}

.hero-photo h1 {
  max-inline-size: none;
  margin-bottom: var(--s-6);
}

@media (min-width: 640px) {
  .hero-media {
    max-height: 56vh;
    margin-bottom: var(--s-6);
  }
  /* Knoppen onder elkaar, even breed als de langste. */
  .hero-photo .hero-actions {
    display: grid;
    justify-content: start;
  }
}

@media (min-width: 960px) {
  .hero-photo {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--hero-offset));
    min-height: calc(100svh - var(--hero-offset));
    padding-block: var(--s-9);
  }
  .hero-photo > .container {
    width: 100%;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
  }
  .hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-veil);
  }
  /* Op de foto krijgt alle tekst de volle inktkleur, voor voldoende contrast. */
  .hero-photo .eyebrow,
  .hero-photo .hero-quiet,
  .hero-photo .hero-quiet a {
    color: var(--ink);
  }
  .hero-photo .btn-secondary {
    background: var(--canvas);
  }
  .hero-photo .btn-secondary:hover {
    background: var(--surface-2);
  }
  .hero-photo .hero-grid {
    grid-template-columns: minmax(0, 540px);
  }
  .hero-photo .hero-quiet {
    margin-bottom: 0;
  }
}

/* Subpagina's: foto naast de titel (op mobiel eronder). */
.hero-side {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.hero-side.is-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.hero-side.desktop-only {
  display: none;
}

@media (min-width: 960px) {
  .hero-side.desktop-only {
    display: block;
  }
}

/* Foto in een rustige sectie (split) en brede band. */
.photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.photo.is-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.photo-wide {
  aspect-ratio: 21 / 9;
  margin-top: var(--s-6);
}

@media (max-width: 639px) {
  .photo-wide {
    aspect-ratio: 3 / 2;
  }
}

/* Kaarten met foto: de foto loopt tot tegen de rand van de kaart. */
.card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--surface-2);
}


/* 23: Huisstijl: warm en menselijk (terracotta en zand) ----------------------
   Rondere vormen, knoppen als pil, foto's in een afgeronde lijst met een warm
   vlak erachter, en een homepage-bovenkant op een zachte terracotta
   achtergrond met de foto rechts (op gsm erboven). Kleuren enkel via tokens. */

.brand-2 {
  color: var(--primary);
}

.eyebrow {
  color: var(--primary);
  letter-spacing: 0.1em;
}

h1, h2, h3 {
  letter-spacing: -0.01em;
}

.btn {
  border-radius: 999px;
  padding-inline: var(--s-6);
}

.lang-switch,
.icon-btn,
.nav-toggle,
.sub-toggle,
.nav-link,
.sub a {
  border-radius: 999px;
}

.sub {
  border-radius: var(--radius);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="file"],
select,
textarea {
  border-radius: 12px;
}

/* Kaarten: warm wit, zachte schaduw, licht omhoog bij aanwijzen. */
.card {
  border-radius: var(--radius-lg);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.card-photo .card-media {
  border-radius: calc(var(--radius-lg) - 8px);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-3px);
  }
}

.tips li,
.flow li,
.wizard-step,
.review,
.callout,
.city-grid li > *,
.choices .choice,
.trust-row li {
  border-radius: var(--radius);
}

/* Foto's: afgeronde lijst met een warm vlak dat er schuin achter uitsteekt. */
.hero-side,
.photo,
.region-photo {
  border-radius: var(--radius-lg);
  box-shadow: 14px 14px 0 0 var(--vlak);
}

/* Zekerheden: het icoon in een warm rondje. */
.trust-row .icon {
  box-sizing: content-box;
  padding: 10px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--surface-2);
}

/* Stappen en voortgang in terracotta. */
.flow li::before,
.wizard-num {
  border-color: var(--primary);
}

/* --- Homepage-bovenkant ---------------------------------------------------- */

.hero-photo {
  background: var(--hero-bg);
  padding-top: var(--s-5);
  padding-bottom: var(--s-8);
}

.hero-photo::before {
  display: none;
}

.hero-photo .hero-media {
  width: auto;
  max-height: none;
  aspect-ratio: 5 / 4;
  margin: 0 var(--s-5) var(--s-6);
  border-radius: var(--radius-lg);
  box-shadow: 14px 14px 0 0 var(--vlak);
}

@media (min-width: 960px) {
  .hero-photo {
    min-height: 0;
    padding-block: var(--s-9);
  }
  .hero-photo .hero-media {
    position: absolute;
    inset: auto;
    top: 50%;
    right: max(var(--s-5), calc((100vw - var(--container)) / 2 + var(--s-5)));
    z-index: 0;
    width: min(520px, 42vw);
    margin: 0;
    aspect-ratio: 5 / 4;
    transform: translateY(-50%);
  }
  .hero-photo .hero-grid {
    grid-template-columns: minmax(0, min(560px, 48vw));
  }
  .hero-photo .btn-secondary {
    background: var(--surface);
  }
}

/* Prijsband: afgeronde onderkant, zodat ze als een warm vlak leest. */
.price-band {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cta-band {
  background: var(--hero-bg);
}


/* 24: Checklist (na een overlijden) en afdrukken ----------------------------
   Grote vakjes om af te vinken. Met JavaScript onthoudt de browser de vinkjes
   op dit toestel en toont een teller; zonder JavaScript kan u gewoon vinken. */

.checklijst {
  max-width: 820px;
}

.checklijst-kop {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.checklijst-kop[hidden] {
  display: none;
}

.checklijst-teller {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
}

.checklijst-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.checklijst-bewaard {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.checklijst-groep + .checklijst-groep {
  margin-top: var(--s-7);
}

.checklijst-groep ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  display: grid;
  gap: var(--s-3);
}

.checklijst-groep label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.checklijst-groep label:hover {
  border-color: var(--primary);
}

.checklijst-groep input[type="checkbox"] {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

.checklijst-groep strong {
  display: block;
  margin-bottom: var(--s-1);
}

.checklijst-groep span {
  color: var(--muted);
}

.checklijst-groep strong {
  color: var(--ink);
}

.checklijst-groep label:has(input:checked) {
  background: var(--surface-2);
}

.checklijst-groep label:has(input:checked) strong {
  text-decoration: line-through;
  text-decoration-color: var(--primary);
}

/* Afdrukken: enkel de inhoud, zonder menu, knoppen en voettekst. */
@media print {
  .site-header,
  .site-footer,
  .mobile-bar,
  .wa-float,
  .crumbs,
  .cta-band,
  .hero-actions,
  .hero-side,
  .checklijst-knoppen,
  .checklijst-bewaard {
    display: none !important;
  }
  body {
    background: var(--surface);
    color: var(--ink);
  }
  .section,
  .hero {
    padding-block: 12px;
    background: none;
  }
  .checklijst-groep label {
    break-inside: avoid;
    border-color: var(--muted);
  }
}