/* ==========================================================================
   Powered by Gér, Designsysteem
   Premium, rustig, warm. Bordeaux · oudroze · off-white · zand · goud.
   ========================================================================== */

/* Fonts (lokaal gehost, met unicode-range subsets) staan in /fonts/local-fonts.css,
   die vóór dit bestand wordt geladen in de head. Fraunces = koppen, Mulish = body. */

:root {
  /* Kleuren: koele, schone neutralen (wit + Apple-grijs) met bordeaux/goud accenten */
  --bordeaux: #6d1a2d;
  --bordeaux-donker: #501320;
  --bordeaux-licht: #8a2a40;
  --oudroze: #d8a7a7;
  --oudroze-licht: #f3e4e2;
  --offwhite: #f5f5f7;         /* Apple-grijs: rustige basis onder witte kaarten */
  --zand: #e8e8ed;             /* iets dieper grijs: randen + rustige secties */
  --zand-donker: #d2d2d7;      /* stevigere rand (Apple) */
  /* Goud: rijker/goud-er dan v1 */
  --goud: #c39b34;
  --goud-licht: #e6cd80;
  --goud-diep: #8a6a22;        /* kleine goud-tekst/kickers */
  --goud-tekst: #8a6a22;       /* alias voor bestaande templates */
  --inkt: #362826;
  --inkt-zacht: #6e6e73;       /* koel secundair grijs (Apple) */
  --wit: #ffffff;

  /* Typografie */
  --font-kop: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Mulish', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  /* Maat & ritme */
  --maat: 1140px;
  --maat-smal: 720px;
  --radius: 14px;
  --schaduw: 0 2px 24px rgba(0, 0, 0, 0.06);
  --schaduw-zwaar: 0 12px 48px rgba(0, 0, 0, 0.12);
  --schaduw-knop: 0 8px 22px rgba(80, 19, 32, 0.22);
  --goud-ring: 0 0 0 3px rgba(195, 155, 52, 0.4);
  /* Gouden CTA-gradient: dezelfde horizontale richting als voorheen, maar nu van
     goud naar dieper goud in plaats van naar licht. Vervangt de volledig witte
     CTA's (hero, paginakoppen, cta-band). De tekst blijft donker bordeaux: die
     staat leesbaar op het goud, ook op het diepere deel. */
  --cta-goud: linear-gradient(95deg, var(--goud), var(--goud-diep));
  --cta-goud-schaduw: 0 8px 24px rgba(138, 106, 34, 0.34);
  --cta-goud-ring: 0 0 0 3px rgba(255, 255, 255, 0.9);
  --overgang: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Hoogte van de minimale vragenlijst-header. De sticky voortgangsbalk hangt
     hieraan, zodat header-hoogte en sticky-offset nooit uit elkaar lopen. */
  --vl-header-h: 84px;
}
@media (max-width: 620px) { :root { --vl-header-h: 68px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Vangrail: nooit horizontaal scrollen op smalle schermen. clip behoudt sticky header. */
body { overflow-x: clip; }
.pagina-hero h1 { overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--inkt);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--bordeaux);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  overflow-wrap: break-word; /* lange woorden (bijv. kennismakingsgesprek) breken i.p.v. de pagina verbreden */
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); }
/* Mobiel: koppen kleiner zodat lange woorden binnen het scherm passen (geen horizontaal scrollen). */
@media (max-width: 720px) {
  h1 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
}

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--bordeaux); }

/* Zichtbare, warme focus-ring op alle interactieve elementen (toegankelijkheid). */
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 2px;
}

/* ---- Layout ---- */
.wrap { max-width: var(--maat); margin: 0 auto; padding: 0 24px; }
.wrap-smal { max-width: var(--maat-smal); margin: 0 auto; padding: 0 24px; }
.sectie { padding: clamp(64px, 10vw, 110px) 0; }
/* Editorial ritme: varieer de verticale ruimte per sectie. */
.sectie-compact { padding: clamp(48px, 7vw, 78px) 0; }
.sectie-ruim { padding: clamp(84px, 13vw, 148px) 0; }
.sectie-zand { background: var(--zand); }
.sectie-roze { background: var(--oudroze-licht); }
.sectie-wit { background: var(--wit); }
.sectie-bordeaux {
  background:
    radial-gradient(1200px 480px at 82% -10%, rgba(195, 155, 52, 0.16), transparent 60%),
    var(--bordeaux);
  color: var(--offwhite);
}
.sectie-bordeaux h2, .sectie-bordeaux h3 { color: var(--offwhite); }

.kicker {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goud-diep);
  display: block;
  margin-bottom: 14px;
}

.intro-tekst { font-size: 1.25rem; color: var(--inkt-zacht); }

/* Korte gouden ornament-streep, als rustig editorial accent. */
.ornament {
  display: block;
  width: 56px;
  height: 2px;
  border: none;
  background: linear-gradient(90deg, var(--goud), var(--goud-licht));
  border-radius: 999px;
  margin: 0 0 26px;
}
.ornament.midden { margin-left: auto; margin-right: auto; }
/* Hairline goud-scheiding tussen secties. */
.scheiding-goud { border-top: 1px solid rgba(195, 155, 52, 0.28); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Knoppen ---- */
.knop, .knop-secundair, .knop-op-donker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang), box-shadow var(--overgang);
  text-align: center;
  min-height: 48px;
}
.knop {
  background: var(--bordeaux);
  color: var(--wit);
}
.knop:hover { background: var(--bordeaux-licht); transform: translateY(-1px); box-shadow: var(--schaduw-knop); }
.knop-secundair {
  background: transparent;
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
.knop-secundair:hover { background: var(--bordeaux); color: var(--wit); transform: translateY(-1px); }
.knop-goud { background: var(--goud); color: var(--wit); }
.knop-goud:hover { background: var(--goud-licht); transform: translateY(-1px); box-shadow: var(--schaduw-knop); }
/* Gouden CTA-variant voor de hero en bordeaux/donkere secties (voorheen wit). */
.knop-op-donker {
  background: var(--cta-goud);
  color: var(--bordeaux-donker);
  box-shadow: var(--cta-goud-schaduw);
}
.knop-op-donker:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(138, 106, 34, 0.42); }
/* Zichtbare, warme gouden focus-ring op alle knoppen. */
.knop:focus-visible, .knop-secundair:focus-visible, .knop-goud:focus-visible {
  outline: none;
  box-shadow: var(--goud-ring);
}
/* De gouden CTA's zijn zelf goud, dus daar een witte ring (zichtbaar op goud). */
.knop-op-donker:focus-visible {
  outline: none;
  box-shadow: var(--cta-goud-ring), var(--cta-goud-schaduw);
}
button.knop, button.knop-secundair, button.knop-op-donker { font-family: var(--font-body); }

/* ---- Header ---- */
/* Rustige, symmetrische header: menuknop links, prominent logo (met de merknaam
   erin) gecentreerd in het midden, CTA rechts. Drie-koloms grid houdt het logo
   exact gecentreerd, ongeacht de breedte van menu en CTA. */
.site-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--zand);
}
.site-header .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 96px;
}
.header-links { justify-self: start; }
/* Logo als twee losse varianten naast elkaar: villa-icoon + wordmerk "Powered by Gér".
   Zo zijn beide groter en beter leesbaar dan het gestapelde volledige logo. */
.logo { justify-self: center; display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { display: block; width: auto; }
.logo-icoon { height: 52px; }
.logo-tekst-img { height: 34px; }
.header-rechts { justify-self: end; display: flex; align-items: center; gap: 16px; }

/* Compacte CTA in de header */
.knop-header { padding: 11px 22px; font-size: 0.95rem; min-height: 44px; }

/* Menuknop met streepjes + woord "Menu" */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  padding: 9px 18px;
  min-height: 44px;
  border: 1px solid var(--zand-donker);
  border-radius: 999px;
  background: var(--wit);
  transition: border-color var(--overgang), background var(--overgang);
}
.nav-toggle-label:hover { border-color: var(--goud); }
.nav-toggle-woord { font-size: 0.95rem; letter-spacing: 0.04em; color: var(--bordeaux); font-weight: 500; }
.nav-toggle-streepjes { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 20px; height: 14px; }
.nav-toggle-streepjes span { display: block; height: 2px; width: 100%; background: var(--bordeaux); border-radius: 2px; transition: transform var(--overgang), opacity var(--overgang); }
.nav-toggle:focus-visible ~ .header-links .nav-toggle-label { outline: none; border-color: var(--bordeaux); box-shadow: var(--goud-ring); }

/* Streepjes worden een kruisje als het menu open is */
.nav-toggle:checked ~ .header-links .nav-toggle-streepjes span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .header-links .nav-toggle-streepjes span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .header-links .nav-toggle-streepjes span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Het menupaneel: verborgen tot de menuknop wordt aangeklikt. Opent links, onder de menuknop. */
.hoofdnav {
  position: absolute;
  top: calc(100% + 10px);
  left: 24px;
  width: min(320px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 14px;
  background: var(--offwhite);
  border: 1px solid var(--zand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zwaar);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--overgang), transform var(--overgang), visibility var(--overgang);
}
.nav-toggle:checked ~ .hoofdnav { opacity: 1; visibility: visible; transform: none; }
.hoofdnav a {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--inkt);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 9px;
  transition: color var(--overgang), background var(--overgang);
}
.hoofdnav a:hover, .hoofdnav a.actief { color: var(--bordeaux); background: var(--oudroze-licht); }
.hoofdnav .hoofdnav-cta { margin-top: 10px; text-align: center; color: var(--wit); background: var(--bordeaux); }
.hoofdnav .hoofdnav-cta:hover { background: var(--bordeaux-licht); color: var(--wit); }

/* Op smallere schermen: geen losse CTA in de balk (rustiger), die staat in het menu.
   Het logo blijft gecentreerd; de rechterkolom is dan leeg. */
@media (max-width: 620px) {
  .site-header .wrap { min-height: 78px; gap: 8px; }
  .logo { gap: 10px; }
  .logo-icoon { height: 38px; }
  .logo-tekst-img { height: 25px; }
  .knop-header { display: none; }
  .nav-toggle-label { padding: 9px 13px; gap: 8px; }
  .hoofdnav { left: 20px; right: 20px; width: auto; }
}
/* Heel smalle schermen: alleen het hamburger-icoon (het woord "Menu" verbergen)
   zodat het logo met beide varianten ruim in het midden past. */
@media (max-width: 420px) {
  .nav-toggle-woord { display: none; }
}
@media (min-width: 621px) {
  .hoofdnav-cta { display: none; }
}

/* ---- Minimale header voor de vragenlijst ----
   Geen navigatie of CTA's: de invuller blijft gefocust op de vragenlijst.
   Alleen het logo (gecentreerd) en een klein, subtiel pijltje terug. */
.vl-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--zand);
}
.vl-header-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--vl-header-h);
}
.vl-terug {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--inkt-zacht);
  text-decoration: none;
  border-radius: 8px;
  transition: color var(--overgang), transform var(--overgang);
}
.vl-terug:hover, .vl-terug:focus-visible { color: var(--bordeaux); }
.vl-terug:hover .vl-terug-pijl { transform: translateX(-2px); }
.vl-terug-pijl { transition: transform var(--overgang); }
.vl-header-vulling { justify-self: end; }

@media (max-width: 620px) {
  .vl-header-wrap { gap: 8px; }
  .vl-terug-woord { display: none; }
}

/* ---- Hero (full-bleed achtergrondfoto met tekst eroverheen) ---- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 820px);
  padding: clamp(72px, 11vw, 120px) 0;
  background-color: var(--bordeaux-donker);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Warme leesbaarheids-overlay: dieper aan de linkerkant, transparant naar rechts. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(54, 15, 25, 0.66) 0%, rgba(54, 15, 25, 0.42) 42%, rgba(54, 15, 25, 0.05) 100%),
    linear-gradient(0deg, rgba(54, 15, 25, 0.28), rgba(54, 15, 25, 0) 40%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; width: 100%; }
.hero-inhoud { max-width: 640px; min-width: 0; color: var(--wit); }
.hero-inhoud .kicker { color: var(--goud-licht); margin-bottom: 18px; }
.hero-inhoud h1 { color: var(--wit); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
/* Hero-koppen iets ingetogener cappen zodat lange woorden (kennismakingsgesprek)
   op desktop netjes op een regel passen zonder afbreekstreepje. */
.hero-inhoud h1, .hero-home h1 { font-size: clamp(1.9rem, 4.7vw, 3.4rem); }
.hero-inhoud p, .hero-inhoud .intro-tekst { color: var(--oudroze-licht); }
.hero-inhoud p.intro-tekst { margin: 22px 0 34px; }
.hero-vertrouwen {
  margin-top: 26px;
  font-size: 0.98rem;
  color: rgba(255, 253, 251, 0.82);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-vertrouwen .sterren { color: var(--goud-licht); }
@media (max-width: 700px) {
  .hero { min-height: min(88vh, 700px); text-align: center; }
  .hero-inhoud { margin-inline: auto; max-width: 100%; }
  .hero-vertrouwen { justify-content: center; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(54, 15, 25, 0.5) 0%, rgba(54, 15, 25, 0.62) 100%);
  }
}

/* ---- Subpagina-hero (kleiner, zelfde principe) ---- */
.pagina-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(56vh, 480px);
  padding: clamp(56px, 9vw, 96px) 0;
  background-color: var(--bordeaux-donker);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.pagina-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(54, 15, 25, 0.68) 0%, rgba(54, 15, 25, 0.42) 55%, rgba(54, 15, 25, 0.12) 100%),
    linear-gradient(0deg, rgba(54, 15, 25, 0.3), rgba(54, 15, 25, 0) 45%);
  pointer-events: none;
}
.pagina-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.pagina-hero-inhoud { max-width: 680px; color: var(--wit); }
.pagina-hero-inhoud .kicker { color: var(--goud-licht); }
.pagina-hero-inhoud h1 { color: var(--wit); }
.pagina-hero-inhoud p { color: var(--oudroze-licht); margin-top: 14px; }
@media (max-width: 700px) {
  .pagina-hero { text-align: center; }
  .pagina-hero-inhoud { margin-inline: auto; }
  .pagina-hero::before {
    background: linear-gradient(180deg, rgba(54, 15, 25, 0.52) 0%, rgba(54, 15, 25, 0.64) 100%);
  }
}

/* ---- Kaarten ---- */
.kaart {
  background: var(--wit);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--schaduw);
  border: 1px solid rgba(216, 200, 176, 0.55);
  transition: box-shadow var(--overgang), transform var(--overgang), border-color var(--overgang);
}
a.kaart:hover, .kaart-hover:hover {
  box-shadow: var(--schaduw-zwaar);
  transform: translateY(-2px);
  border-color: rgba(195, 155, 52, 0.4);
}
.kaart h3 { margin-bottom: 12px; }
.kaart-icoon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--oudroze-licht);
  color: var(--bordeaux);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4rem;
  border: 1px solid rgba(195, 155, 52, 0.28);
}
.kaart-icoon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ---- Stappen (klantreis) ---- */
.stappen { list-style: none; counter-reset: stap; max-width: var(--maat-smal); margin: 0 auto; }
.stap {
  counter-increment: stap;
  position: relative;
  padding: 0 0 42px 76px;
}
.stap::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--wit);
  font-family: var(--font-kop);
  font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--bordeaux), 0 0 0 5px rgba(195, 155, 52, 0.28);
}
.stap::after {
  content: '';
  position: absolute; left: 25px; top: 58px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(195, 155, 52, 0.55), rgba(216, 200, 176, 0.5));
}
.stap:last-child::after { display: none; }
.stap h3 { margin-bottom: 8px; }

/* ---- Reviews ---- */
.review-kaart { display: flex; flex-direction: column; gap: 16px; }
.sterren { color: var(--goud); font-size: 1.1rem; letter-spacing: 3px; }
.review-tekst { font-family: var(--font-kop); font-size: 1.3rem; font-style: italic; line-height: 1.5; color: var(--inkt); }
.review-naam { font-weight: 400; color: var(--inkt-zacht); }
.review-naam strong { color: var(--bordeaux); font-weight: 500; }

/* ---- FAQ ---- */
.faq-item {
  background: var(--wit);
  border-radius: var(--radius);
  border: 1px solid var(--zand);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 22px 56px 22px 26px;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--bordeaux);
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(195, 155, 52, 0.55); border-radius: var(--radius); }
.faq-item summary:hover { color: var(--bordeaux-licht); }
.faq-item summary::after {
  content: '+';
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--goud);
  transition: transform var(--overgang);
}
.faq-item[open] summary::after { content: '–'; }
.faq-item .faq-antwoord { padding: 0 26px 24px; color: var(--inkt-zacht); }

/* ---- Formulieren ---- */
.veld { margin-bottom: 22px; }
.veld label { display: block; font-weight: 400; margin-bottom: 8px; color: var(--inkt); }
.veld input[type="text"], .veld input[type="email"], .veld input[type="tel"],
.veld input[type="date"], .veld input[type="number"], .veld input[type="password"],
.veld select, .veld textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  padding: 14px 18px;
  border: 1px solid var(--zand-donker);
  border-radius: 10px;
  background: var(--wit);
  color: var(--inkt);
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(109, 26, 45, 0.12);
}
.veld-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--inkt-zacht); }
.veld-check input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--bordeaux); flex-shrink: 0; }
.veld-fout { color: #a4262c; font-size: 0.95rem; margin-top: 6px; }
.formulier-melding {
  background: var(--oudroze-licht);
  border: 1px solid var(--oudroze);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---- CTA-band ---- */
.cta-band {
  position: relative;
  background:
    radial-gradient(900px 380px at 50% -30%, rgba(195, 155, 52, 0.22), transparent 62%),
    var(--bordeaux);
  color: var(--offwhite);
  text-align: center;
  padding: clamp(64px, 9vw, 100px) 0;
  overflow: hidden;
}
.cta-band .kicker { color: var(--goud-licht); }
.cta-band h2 { color: var(--offwhite); margin-bottom: 14px; }
.cta-band p { color: var(--oudroze-licht); max-width: 560px; margin: 0 auto 30px; }
.cta-band .ornament { margin-left: auto; margin-right: auto; margin-bottom: 22px; }
.cta-band .knop { background: var(--cta-goud); color: var(--bordeaux-donker); box-shadow: var(--cta-goud-schaduw); }
.cta-band .knop:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(138, 106, 34, 0.42); }
.cta-band .knop:focus-visible { outline: none; box-shadow: var(--cta-goud-ring), var(--cta-goud-schaduw); }

/* ---- Footer ---- */
.site-footer {
  background: var(--inkt);
  color: #cfc4bc;
  padding: clamp(56px, 8vw, 78px) 0 32px;
  font-size: 0.98rem;
  border-top: 3px solid var(--goud-diep);
}
.site-footer h4 {
  color: var(--offwhite);
  font-size: 1.2rem;
  margin-bottom: 18px;
  padding-bottom: 12px;
  position: relative;
}
.site-footer h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: linear-gradient(90deg, var(--goud), var(--goud-licht));
  border-radius: 999px;
}
.site-footer a { color: #cfc4bc; text-decoration: none; transition: color var(--overgang); }
.site-footer a:hover { color: var(--oudroze); }
.site-footer a:focus-visible { outline: 2px solid var(--goud-licht); outline-offset: 2px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-onder {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: #9b8c80;
}

/* ---- WhatsApp-knop ---- */
.whatsapp-knop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--schaduw-zwaar);
  transition: transform var(--overgang);
}
.whatsapp-knop:hover { transform: scale(1.06); }
.whatsapp-knop svg { width: 32px; height: 32px; fill: #fff; }
@media (max-width: 720px) {
  .whatsapp-knop { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .whatsapp-knop svg { width: 27px; height: 27px; }
}

/* ---- Cookiebanner ---- */
.cookiebanner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 70;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-zwaar);
  padding: 22px 26px;
  max-width: 520px;
  margin: 0 auto;
  display: none;
}
.cookiebanner.zichtbaar { display: block; }
.cookiebanner p { font-size: 0.95rem; color: var(--inkt-zacht); margin-bottom: 16px; }
.cookiebanner .knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.cookiebanner .knop, .cookiebanner .knop-secundair { padding: 10px 22px; font-size: 0.95rem; }

/* ---- Blog ---- */
.blog-kaart { overflow: hidden; padding: 0; display: flex; flex-direction: column; text-decoration: none; }
.blog-kaart img { height: 220px; object-fit: cover; width: 100%; }
.blog-kaart .blog-inhoud { padding: 26px 28px 30px; }
.blog-categorie { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goud-tekst); }
.blog-kaart h3 { margin: 10px 0 10px; }
.blog-datum { font-size: 0.9rem; color: var(--inkt-zacht); }
.artikel img { border-radius: var(--radius); margin: 24px 0; }
.artikel h2, .artikel h3 { margin: 1.4em 0 0.5em; }

/* ---- Subtiele fade-in ---- */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms ease; }
.fade-in.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; } }

/* ---- Betaal-/vragenlijstpagina's ---- */
.smal-kaart { max-width: 560px; margin: 0 auto; }
.voortgang { height: 8px; background: var(--zand); border-radius: 999px; overflow: hidden; margin: 18px 0 32px; }
.voortgang > span { display: block; height: 100%; background: linear-gradient(90deg, var(--goud), var(--bordeaux)); border-radius: 999px; transition: width 300ms ease; }

/* ---- Tabellen (publiek, bv. prijzen) ---- */
.tabel-scroll { overflow-x: auto; }
table.netjes { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: var(--radius); overflow: hidden; }
table.netjes th, table.netjes td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--zand); }
table.netjes th { font-weight: 500; color: var(--bordeaux); background: var(--oudroze-licht); }

/* ---- Hulpjes ---- */
.tekst-midden { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 12px; }
.mb-2 { margin-bottom: 24px; }
.mb-3 { margin-bottom: 40px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.goud { color: var(--goud); }
.klein { font-size: 0.92rem; color: var(--inkt-zacht); }

/* --- module: payments (checkout + vragenlijst) --- */
.voortgang-vast {
  position: sticky;
  /* Blijft precies onder de sticky vragenlijst-header plakken. De 1px overlap
     voorkomt een kier waar content doorheen zou schuiven. Volgt automatisch de
     header-hoogte (--vl-header-h), ook op mobiel. */
  top: calc(var(--vl-header-h) - 1px);
  z-index: 5;
  background: var(--offwhite);
  padding: 12px 0 10px;
}
.autosave-status { transition: color 300ms ease; }
.autosave-status.opgeslagen { color: #2e7d4f; }

/* Vragenlijst-wizard: intro-scherm, stappen en navigatie */
.wizard-intro-kaart { margin-top: 8px; }
.wizard-start { margin-top: 20px; }
.wizard-voortgang-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wizard-voortgang .voortgang { margin: 12px 0 0; }
.wizard-stap-tel { text-transform: uppercase; letter-spacing: 0.12em; color: var(--goud-diep); font-weight: 600; margin: 4px 0 4px; }
.wizard-stap-titel { margin: 0 0 20px; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 28px; }
.wizard-nav [data-vorige][hidden] { display: none; }
.wizard-nav .wizard-volgende, .wizard-nav .wizard-afronden { margin-left: auto; }
.wizard-slot { margin-top: 12px; }
.wizard-stap { animation: wizard-in 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes wizard-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wizard-stap { animation: none; } }

/* Vragenlijst-pagina compacter: weinig witruimte boven, en de intro zo strak dat
   de start-knop (CTA) meteen zichtbaar is vóór de scroll — ook op mobiel. */
.sectie-vragenlijst { padding: clamp(14px, 3vw, 30px) 0 clamp(40px, 7vw, 72px); }
.sectie-vragenlijst .wizard-intro .kicker { margin-bottom: 8px; }
.sectie-vragenlijst .wizard-intro h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin: 0 0 10px; }
.sectie-vragenlijst .wizard-intro .intro-tekst { font-size: 1.1rem; line-height: 1.5; margin-bottom: 14px; }
.sectie-vragenlijst .wizard-intro-kaart { margin-top: 0; padding: 24px 26px; }
.sectie-vragenlijst .wizard-intro-kaart h3 { margin-bottom: 6px; }
.sectie-vragenlijst .wizard-intro-kaart p { line-height: 1.5; margin-bottom: 0.7em; }
.sectie-vragenlijst .wizard-start { margin-top: 14px; }

@media (max-width: 620px) {
  .sectie-vragenlijst { padding: 10px 0 36px; }
  .sectie-vragenlijst .wizard-intro h1 { font-size: clamp(1.55rem, 6.6vw, 2rem); margin-bottom: 6px; }
  .sectie-vragenlijst .wizard-intro .intro-tekst { font-size: 0.98rem; line-height: 1.45; margin-bottom: 12px; }
  .sectie-vragenlijst .wizard-intro-kaart { padding: 18px 18px; }
  .sectie-vragenlijst .wizard-intro-kaart p { font-size: 0.98rem; line-height: 1.45; margin-bottom: 0.6em; }
  .sectie-vragenlijst .wizard-start { margin-top: 12px; width: 100%; }
}

.vraag-kaart { padding: 26px 26px 28px; }
.vraag-kaart fieldset { border: none; }
.vraag-label {
  display: block;
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--inkt);
  margin-bottom: 6px;
}
.vraag-nummer { color: var(--goud-tekst); font-weight: 500; }
.vraag-help { margin-bottom: 10px; }
.vraag-kaart input[type="text"], .vraag-kaart textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  padding: 14px 18px;
  border: 1px solid var(--zand-donker);
  border-radius: 10px;
  background: var(--wit);
  color: var(--inkt);
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.vraag-kaart textarea { min-height: 130px; resize: vertical; }
.vraag-kaart input[type="text"]:focus, .vraag-kaart textarea:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(109, 26, 45, 0.12);
}

.optie-lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.optie-lijst label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  min-height: 44px;
  border: 1px solid var(--zand-donker);
  border-radius: 10px;
  background: var(--wit);
  cursor: pointer;
  transition: border-color var(--overgang), background var(--overgang);
}
.optie-lijst label:hover { border-color: var(--bordeaux); }
.optie-lijst input { width: 22px; height: 22px; accent-color: var(--bordeaux); flex-shrink: 0; }
.optie-lijst label:has(input:checked) { border-color: var(--bordeaux); background: var(--oudroze-licht); }

.schaal-rij { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.schaal-rij label {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--zand-donker);
  background: var(--wit);
  display: flex; align-items: center; justify-content: center;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang);
}
.schaal-rij label:hover { border-color: var(--bordeaux); }
.schaal-rij input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schaal-rij label:has(input:checked) { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--wit); }
.schaal-rij label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(109, 26, 45, 0.25); }
.schaal-uitersten {
  display: flex; justify-content: space-between; gap: 16px;
  max-width: 320px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

/* --- module: pages-a (home, waarom, klantreis, regio) --- */
.vinklijst { list-style: none; }
.vinklijst li { position: relative; padding-left: 36px; margin-bottom: 14px; }
.vinklijst li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--goud);
  font-weight: 500;
  font-size: 1.15rem;
}
.stap-cijfer { font-family: var(--font-kop); font-size: 1.5rem; }
/* Zachte, in de achtergrond overvloeiende beeldstrook: geen harde kaartrand of
   slagschaduw, maar geveerde randen (mask) zodat het beeld één geheel wordt met
   de sectie. Werkt voor de placeholder én voor een later geplaatste echte foto. */
.foto-rond {
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(78% 82% at 50% 45%, #000 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(78% 82% at 50% 45%, #000 55%, rgba(0, 0, 0, 0) 100%);
}
.citaat {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.4;
  color: var(--bordeaux);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.sectie-bordeaux .kicker { color: var(--goud-licht); }
.sectie-bordeaux p { color: var(--oudroze-licht); }
.regio-kaartbeeld {
  background: var(--wit);
  border: 1px solid var(--zand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: clamp(8px, 2vw, 24px);
  overflow: hidden;
}
.regio-kaartbeeld svg, .regio-kaartbeeld img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius) - 6px); }
.gebied-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.gebied-kaart h3 { display: flex; align-items: center; gap: 12px; }
.gebied-stip {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--goud);
  display: inline-block;
  flex-shrink: 0;
}
/* --- einde module: pages-a --- */

/* --- module: pages-b (woonanalyse, faq, reviews, contact, blog, juridisch) --- */
.knop-groot { padding: 20px 40px; font-size: 1.12rem; }
.prijs-groot { font-family: var(--font-kop); font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--bordeaux); margin-bottom: 18px; }
.formulier-melding-fout { background: #fbecec; border-color: #d9a4a4; }
.ster-leeg { color: var(--zand-donker); }
.review-kop { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-kanalen { list-style: none; }
.contact-kanalen li { margin-bottom: 14px; }
.contact-kanalen a {
  display: flex; align-items: center; gap: 16px;
  background: var(--wit);
  border: 1px solid var(--zand);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-height: 44px;
  text-decoration: none;
  color: var(--inkt);
  transition: box-shadow var(--overgang), transform var(--overgang);
}
.contact-kanalen a:hover { box-shadow: var(--schaduw); transform: translateY(-1px); }
.contact-kanalen .kaart-icoon { margin-bottom: 0; flex-shrink: 0; }
.contact-kanalen strong { color: var(--bordeaux); font-weight: 500; }
.blog-kaart { color: var(--inkt); }
.blog-kaart-placeholder {
  height: 220px;
  background: linear-gradient(140deg, var(--oudroze-licht), var(--zand));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kop);
  font-size: 1.5rem;
  color: var(--bordeaux);
}
.artikel-hoofdfoto { width: 100%; border-radius: var(--radius); box-shadow: var(--schaduw); object-fit: cover; max-height: 460px; }
.share-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--zand); }
.share-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 8px 22px;
  border: 1px solid var(--zand-donker);
  border-radius: 999px;
  text-decoration: none;
  color: var(--bordeaux);
  font-size: 0.95rem;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang);
}
.share-links a:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--wit); }
.juridisch-inhoud p { margin-bottom: 1.3em; }

/* --- module: booking (afspraakplanner) --- */
.boek-stap { margin-bottom: 44px; }
.boek-stap h2, .boek-stap h3 { margin-bottom: 16px; }
.boek-laden { color: var(--inkt-zacht); }
.keuze-maand { margin: 26px 0 12px; font-family: var(--font-kop); font-size: 1.35rem; color: var(--goud); }
.keuze-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.keuze-knop {
  font-family: var(--font-body); font-weight: 300; font-size: 1.02rem;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--zand-donker); border-radius: 12px;
  padding: 14px 10px; min-height: 56px; cursor: pointer; text-align: center;
  transition: border-color var(--overgang), background var(--overgang), color var(--overgang);
}
.keuze-knop:hover { border-color: var(--bordeaux); }
.keuze-knop.gekozen { background: var(--bordeaux); color: var(--wit); border-color: var(--bordeaux); }
.keuze-knop .dag-groot { display: block; font-family: var(--font-kop); font-size: 1.55rem; line-height: 1.15; }
.keuze-knop .dag-klein { display: block; font-size: 0.85rem; letter-spacing: 0.04em; }
.boek-samenvatting { background: var(--oudroze-licht); border-radius: var(--radius); padding: 16px 22px; font-size: 1.08rem; margin-bottom: 26px; }
.veld-rij-publiek { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .veld-rij-publiek { grid-template-columns: 1fr; } }
.afspraak-details { list-style: none; }
.afspraak-details li { padding: 10px 0; border-bottom: 1px solid var(--zand); display: flex; gap: 14px; flex-wrap: wrap; }
.afspraak-details li:last-child { border-bottom: none; }
.afspraak-details .etiketje { min-width: 96px; color: var(--inkt-zacht); flex-shrink: 0; }

/* Knoppen om de afspraak aan de eigen agenda toe te voegen. */
.agenda-toevoegen-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.agenda-toevoegen-knop { display: inline-flex; align-items: center; gap: 10px; }
.agenda-toevoegen-knop svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 520px) {
  .agenda-toevoegen-knoppen { flex-direction: column; }
  .agenda-toevoegen-knop { width: 100%; justify-content: center; }
}

/* Skip-link: eerste focusbare element op de pagina, verborgen tot het focus krijgt,
   waarna een toetsenbordgebruiker meteen naar de hoofdinhoud kan springen. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  /* Verborgen tot de link focus krijgt. Bewust geklikt tot 1px (niet enkel naar
     boven geschoven): anders schemert de link door zodra de pagina bij het
     omhoog scrollen doorveert, want de header staat sticky bovenaan. */
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--bordeaux);
  color: var(--wit);
  border-bottom-right-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 12px 22px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  outline: 2px solid var(--goud-licht);
  outline-offset: 2px;
}
/* --- einde module: design-core --- */