/* ============================================================
   style.css — AdviesInJeRegio
   Alle stijlen op één plek. Aanpassen hier = overal bijgewerkt.
   ============================================================ */

/* ── CSS Variabelen (kleuren) ─────────────────────────────── */
/* V10 — warme, rustige merkstijl: crème/zandtinten met donkergroen
   als primaire kleur en een subtiele beige/gouden accent. Vervangt
   de hardere zwart/groene V9-stijl; structuur en klassen ongewijzigd. */
:root {
  --bg:        #f6f0e4;   /* warme crème achtergrond */
  --bg-soft:   #efe6d3;   /* iets donkerder crème, voor afwisseling */
  --green:     #1f4934;   /* rustig donkergroen — primaire merkkleur */
  --green-deep:#163525;   /* dieper groen — header/nav/footer */
  --cta:       #1f4934;   /* CTA-knoppen: zelfde donkergroen, rustig i.p.v. fel */
  --cta-hover: #14332322;
  --gold:      #b6884f;   /* subtiel beige/goudaccent */
  --box:       #fffcf5;   /* kaarten/boxen: bijna-wit warm */
  --line:      #ddd0b3;   /* warme, beige rand */
  --text:      #2b2519;   /* charcoal/donkerbruine hoofdtekst */
  --text-soft: #6b5f49;   /* gedempte secundaire tekst */
  --link:      #1f4934;   /* links in donkergroen */
  --link-on-dark: #d9e6da;/* links op donkere achtergrond (header/footer) */
  --trust:     #eee2c2;   /* lichte beige vertrouwens-boxen */
  --card:      #fffcf5;
  --white:     #ffffff;
}

/* ── Reset & basis ───────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

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


/* ── Navigatiemenu ───────────────────────────────────────── */
.site-nav {
  background: var(--green-deep);
  border-bottom: 1px solid var(--green-deep);
  position: relative;
  z-index: 100;
}

.site-nav .container {
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nav-toggle {
  display: block;
  width: auto;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 14px 0;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 12px 0;
  width: 100%;
}

.site-nav.open .nav-links {
  display: block;
}

/* Dropdown altijd verborgen op mobiel tenzij menu open */
.nav-links .dropdown {
  display: none;
}

.nav-links .has-dropdown.open .dropdown {
  display: block;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  display: block;
  padding: 10px 4px;
  color: white;
  font-size: clamp(16px, 3vw, 19px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
  text-decoration: none;
}

/* Dropdown */
.dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

.has-dropdown > a {
  cursor: pointer;
}

/* hover/focus dropdown alleen op desktop via @media hieronder */

.dropdown li { margin: 0; }

.dropdown a {
  font-size: clamp(14px, 2.8vw, 17px);
  padding: 8px 4px;
  color: var(--link-on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Desktop nav */
@media (min-width: 700px) {
  .nav-toggle { display: none; }

  .site-nav .container {
    padding: 0 20px;
  }

  .nav-links {
    display: flex !important;
    align-items: center;
    gap: 4px;
    row-gap: 4px;
    flex-wrap: wrap;
    width: auto;
    padding: 0;
  }

  .nav-links li { margin: 0; }

  .nav-links > li > a {
    padding: 14px 16px;
    border-bottom: none;
    font-size: clamp(15px, 2vw, 18px);
    border-radius: 6px;
  }

  .nav-links > li > a:hover {
    background: rgba(255,255,255,0.08);
  }

  .has-dropdown {
    position: relative;
  }

  .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--green-deep);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    min-width: 180px;
    padding: 8px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }

  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    display: block;
  }

  .dropdown a {
    padding: 10px 16px;
    border-bottom: none;
    font-size: clamp(14px, 1.8vw, 16px);
  }

  .dropdown a:hover {
    background: rgba(255,255,255,0.08);
  }
}


/* ── Typografie ──────────────────────────────────────────── */
h1 {
  font-size: clamp(28px, 6.5vw, 56px);
  margin: 0 0 14px 0;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(23px, 4.5vw, 36px);
  margin: 0 0 14px 0;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

p, li, label, input, select, textarea, button {
  font-size: clamp(18px, 3.8vw, 22px);
}

dt {
  font-weight: bold;
  margin: 16px 0 4px 0;
  font-size: clamp(17px, 3.5vw, 21px);
}

dd {
  margin: 0 0 12px 0;
  padding-left: 0;
  font-size: clamp(16px, 3.2vw, 20px);
}

dl { margin: 0; }

/* ── Layout ──────────────────────────────────────────────── */
header {
  background: var(--green-deep);
  padding: 28px 20px 24px 20px;
  color: var(--white);
}

header h1 {
  color: var(--white);
}

header p {
  margin-bottom: 0;
  color: var(--link-on-dark);
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 700px) {
  .container { padding: 20px 24px; }
}

/* ── Componenten ─────────────────────────────────────────── */
.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: white;
}

.box {
  background: var(--box);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: 0 2px 10px rgba(43,37,25,0.05);
}

@media (min-width: 700px) {
  .box { padding: 28px; border-radius: 18px; }
}

.trust {
  background: var(--trust);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px 0;
  font-weight: bold;
}

.form-intro {
  color: var(--link);
  margin: 24px 0 4px 0;
  font-size: clamp(19px, 4vw, 23px);
}

/* ── Lijsten ─────────────────────────────────────────────── */
ul { margin: 0; padding-left: 28px; }
li { margin-bottom: 10px; }

ol.steps { padding-left: 24px; }
ol.steps li { margin-bottom: 14px; }

/* ── Formulier ───────────────────────────────────────────── */
input, select, textarea {
  width: 100%;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,73,52,0.12);
}

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

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 18px 0;
}

.checkbox-row input {
  width: 24px;
  height: 24px;
  margin: 3px 0 0 0;
  flex: 0 0 auto;
}

.checkbox-row label {
  margin: 0;
  line-height: 1.45;
}

.privacy-info {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 4px 0 18px 0;
}

.privacy-info a {
  color: inherit;
  text-decoration: underline;
}

button {
  width: 100%;
  padding: 16px 18px;
  background: var(--cta);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(31,73,52,0.18);
}

button:hover { background-color: var(--green-deep); }
button:active { transform: translateY(1px); }

/* ── Grid links ──────────────────────────────────────────── */
.links-grid,
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.links-grid a,
.overview-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 92px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.links-grid a { background: var(--card); }

.overview-grid a {
  background: var(--green);
  font-weight: bold;
  color: var(--white);
}

.links-grid a:hover,
.overview-grid a:hover { text-decoration: underline; }

.full-width { grid-column: 1 / -1; }

.faq-link {
  margin: 8px 0 16px 0;
  font-size: clamp(17px, 3.5vw, 20px);
}

.faq-link a {
  color: var(--link);
  text-decoration: underline;
}

/* ── Tabellen ────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th { background: var(--green); padding: 12px; text-align: left; font-size: clamp(15px, 3vw, 18px); }
td { padding: 12px; border-top: 1px solid var(--line); font-size: clamp(15px, 3vw, 18px); }

/* ── Terug naar boven knop ───────────────────────────────── */
.back-to-top {
  display: block;
  position: fixed;
  /* Basisafstand tot de onderrand, plus (indien van toepassing) de
     veilige zone onderaan het scherm (bijv. de streep/thuisbalk op
     moderne telefoons), plus een dynamische extra afstand die de knop
     omhoog duwt zodra de footer in beeld komt — zie het bijbehorende
     script in footer-links.php. Zonder viewport-fit=cover heeft
     env() geen effect en verandert er niets t.o.v. voorheen. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--back-to-top-offset, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--cta);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 8px 22px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  white-space: nowrap;
  width: auto;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ── Cookiebanner ────────────────────────────────────────── */
#cookie-banner {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--green-deep);
  border-top: 1px solid var(--gold);
  padding: 20px 24px;
  z-index: 9999;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

#cookie-banner p {
  margin: 0 0 14px 0;
  color: var(--white);
  font-size: clamp(15px, 3vw, 18px);
}

#cookie-banner a {
  color: var(--gold);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-btn-accept {
  background: var(--cta);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-weight: bold;
  cursor: pointer;
  font-size: clamp(15px, 3vw, 18px);
  width: auto;
}

.cookie-btn-decline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  font-size: clamp(15px, 3vw, 18px);
  width: auto;
}


/* ── Prijslijst (mobiel-vriendelijk alternatief voor tabellen) */
ul.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.price-list li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(17px, 3.4vw, 21px);
  line-height: 1.5;
  margin-bottom: 0;
}

ul.price-list li:first-child {
  border-top: none;
}

/* ── Tabellen scrollbaar op mobiel */
.box {
  overflow-x: auto;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 359px) {
  .links-grid,
  .overview-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
}

/* ============================================================
   V8 — Reviews, projecten en keurmerken
   ============================================================ */

/* Sterren (CSS-only, geen emoji in de PHP-bestanden) */
.stars-5 {
  display: inline-block;
  font-size: clamp(18px, 4vw, 22px);
  letter-spacing: 2px;
  color: var(--gold);
  line-height: 1;
}
.stars-5::before { content: "\2605\2605\2605\2605\2605"; }

.stars-empty {
  display: inline-block;
  font-size: clamp(18px, 4vw, 22px);
  letter-spacing: 2px;
  color: var(--line);
  line-height: 1;
}
.stars-empty::before { content: "\2605\2605\2605\2605\2605"; }

/* Reviewkaarten */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .review-grid { grid-template-columns: 1fr 1fr; }
}

.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.review-card .review-tekst {
  font-style: italic;
  margin: 10px 0;
  font-size: clamp(16px, 3.4vw, 19px);
}

.review-card .review-meta {
  color: var(--link);
  font-weight: bold;
  font-size: clamp(14px, 3vw, 17px);
}

.review-card .review-meta span {
  display: block;
  font-weight: normal;
  color: var(--text);
  opacity: 0.8;
  font-size: 0.85em;
}

/* Placeholder-kaarten (reviews en projecten "binnenkort") */
.placeholder-card {
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 20px;
  opacity: 0.85;
}

.placeholder-tag {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-size: 0.75em;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* Waarom-sectie / kenmerken grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

.feature-item {
  background: var(--trust);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}

.feature-item h3 {
  margin: 0 0 6px 0;
  font-size: clamp(19px, 3.6vw, 22px);
  color: var(--link);
}

.feature-item p {
  margin: 0;
  font-size: clamp(16px, 3.2vw, 19px);
}

/* Keurmerken / kwaliteitsblokken */
.badge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

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

.badge-item {
  background: var(--box);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.badge-item h3 {
  margin: 0 0 6px 0;
  font-size: clamp(17px, 3.2vw, 20px);
}

.badge-item p {
  margin: 0;
  font-size: clamp(15px, 2.8vw, 18px);
  opacity: 0.9;
}

/* Projectenkaarten */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .project-grid { grid-template-columns: 1fr 1fr; }
}

.project-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.project-card h3 {
  margin: 0 0 8px 0;
  font-size: clamp(19px, 3.6vw, 22px);
  color: var(--link);
}

.project-card ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.project-card li {
  margin-bottom: 4px;
  font-size: clamp(15px, 3vw, 18px);
}

/* ============================================================
   V9 — toegankelijkheid, anti-spam en lokale plaatsfoto's
   ============================================================ */

/* Visueel verborgen, maar wel beschikbaar voor schermlezers.
   Gebruikt voor formulierlabels bij velden die al een zichtbare
   placeholder hebben (voorkomt dubbele visuele tekst). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot-veld: onzichtbaar en onbereikbaar voor gewone bezoekers,
   maar aanwezig in de DOM (geen display:none, dat wordt door sommige
   bots al herkend en overgeslagen). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Beeldcredits-tabel */
.credits-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.credits-tabel th,
.credits-tabel td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.credit-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}
.credit-status-ok      { background: #e3f4e9; color: #1a6e3c; }
.credit-status-todo    { background: #f2f2f2; color: #777; }
.credit-status-verify  { background: #fdf1d6; color: #8a5a00; }

/* ============================================================
   V9 — toetsenbordtoegankelijkheid: zichtbare focus-states
   Alleen aanvullend, geen bestaande stijlen overschreven.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible,
.back-to-top:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}

/* Fallback voor browsers zonder :focus-visible-ondersteuning */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}

/* .sr-only labels mogen bij focus (bv. via 'skip'-navigatie) niet meetellen
   voor lay-out; ze blijven onzichtbaar maar het gekoppelde veld krijgt
   gewoon de focus-outline hierboven. */

/* Formulier-foutmelding (bij terugkeer met ?fout=...) */
.form-foutmelding {
  background: #fbe4e0;
  color: #7a2015;
  border-left: 3px solid #c0392b;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 0 16px;
}

/* ============================================================
   V10 — visuele afronding (schaduw/warme kaartstijl)
   Alleen aanvullend op bestaande klassen, geen structuurwijziging.
   ============================================================ */
.review-card,
.project-card,
.feature-item,
.badge-item {
  box-shadow: 0 2px 10px rgba(43,37,25,0.05);
}

a { transition: color 0.15s; }


/* ============================================================
   V10.1 — Gratis WarmtepompCheck
   Alleen aanvullend op bestaande klassen, geen structuurwijziging.
   ============================================================ */

.check-hint {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: -8px 0 14px 0;
}

.check-resultaat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.check-resultaat h2 { margin-top: 0; }
.check-resultaat h3 { color: var(--link); margin: 20px 0 6px 0; }

.check-badge {
  display: inline-block;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 10px;
  margin: 4px 0 10px 0;
}

.check-badge--goed {
  background: #e4f0e8;
  color: var(--green-deep);
}

.check-badge--aandacht {
  background: #f6ecd8;
  color: #7a5a1e;
}

.check-badge--afwijkend {
  background: #fbe4e0;
  color: #7a2015;
}

.check-disclaimer {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 16px 0;
}

.check-cta-link {
  display: block;
  text-align: center;
  background: var(--cta);
  color: var(--white) !important;
  font-weight: bold;
  padding: 16px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  margin-top: 10px;
}

.check-cta-link:hover { background-color: var(--green-deep); }


/* V11 — merk, conversie en toegankelijkheid */
.home-hero { position:relative; background:linear-gradient(rgba(15,54,37,.82),rgba(15,54,37,.86)),url('/images/hero-nederland.webp') center 48%/cover no-repeat; min-height:260px; display:flex; align-items:center; }
.home-hero h1,.home-hero p { text-shadow:0 1px 2px rgba(0,0,0,.28); }
.home-intro { background:var(--white); border-radius:16px; padding:clamp(24px,5vw,42px); margin:24px 0; box-shadow:0 8px 26px rgba(20,55,38,.08); }
.home-intro h2 { font-size:clamp(26px,5vw,38px); margin-top:4px; }
.eyebrow { font-weight:700; color:var(--link); margin-bottom:0; }
.trust-strip { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-weight:600; font-size:15px; }
.trust-strip span::before { content:'✓ '; color:var(--link); }
.veld-fout { border:2px solid #b3261e !important; background:#fff7f6 !important; }
input[readonly][name="plaats"] { background:#f3f5f3; color:#33443a; }
.check-details { margin:14px 0; padding:12px 14px; background:#f4f7f4; border-radius:10px; }
.check-details summary { cursor:pointer; font-weight:700; color:var(--link); text-decoration:underline; text-underline-offset:3px; }
main a, .box p a, .box li a { text-decoration-thickness:1px; text-underline-offset:3px; }
@media (max-width:700px){ .home-hero{min-height:220px;background-position:62% 50%;} .home-intro{margin:16px 0;padding:22px 18px;} .trust-strip{flex-direction:column;gap:7px;} }

/* ── V12.1: adviesplatform & categorieclusters ───────────── */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 100%;
  padding: 20px;
  background: var(--box);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(43,37,25,0.05);
}

.category-card:hover {
  text-decoration: none;
  border-color: var(--gold);
  transform: translateY(-1px);
}

.category-card-primary {
  border-width: 2px;
  border-color: var(--green);
}

.category-card strong {
  font-size: clamp(22px, 4.2vw, 30px);
  line-height: 1.2;
  color: var(--green-deep);
}

.category-card > span:not(.category-status):not(.category-action) {
  font-size: clamp(16px, 3.2vw, 19px);
  color: var(--text-soft);
}

.category-status {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--green-deep);
  font-size: 14px;
  font-weight: bold;
}

.category-action {
  margin-top: auto;
  padding-top: 8px;
  color: var(--green);
  font-size: clamp(16px, 3.2vw, 19px);
  font-weight: bold;
}

.process-steps,
.decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.process-steps > div,
.decision-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.process-steps strong,
.decision-grid strong {
  color: var(--green-deep);
  font-size: clamp(17px, 3.3vw, 20px);
}

.process-steps span,
.decision-grid span {
  color: var(--text-soft);
  font-size: clamp(15px, 3vw, 18px);
}

.cluster-intro {
  padding: 24px 0 8px;
}

.cluster-intro > p:not(.eyebrow) {
  max-width: 760px;
}

.cluster-note,
.soft-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--trust);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-size: clamp(16px, 3.2vw, 19px);
}

.cluster-links a {
  min-height: 78px;
}

.plain-check-list {
  padding-left: 24px;
  margin-bottom: 0;
}

.plain-check-list li {
  margin-bottom: 10px;
}

@media (min-width: 700px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .process-steps-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .decision-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Regio-overzicht */
.region-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.region-grid{grid-template-columns:1fr}}

/* V14 — consistente hero, nette desktopflow, footer en regiohubs */
.site-hero {
  position: relative;
  background-image: linear-gradient(90deg, rgba(15,54,37,.80) 0%, rgba(15,54,37,.58) 52%, rgba(15,54,37,.36) 100%), url('/images/hero-nederland.webp?v=14');
  background-position: center 10%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 245px;
  display:flex;
  align-items:center;
}
.site-hero .container { width:100%; }
.site-hero h1,.site-hero p,.site-hero .back-link { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.32); }
.site-hero h1 { max-width:820px; margin-bottom:10px; }
.site-hero p { max-width:760px; margin-bottom:0; }
.home-hero { min-height:350px; }
.cluster-intro { max-width:900px; }
.trust-strip { display:flex; flex-wrap:wrap; gap:8px 22px; margin:12px 0 0; }
.trust-strip span { display:inline-flex; align-items:flex-start; gap:7px; line-height:1.45; }
.trust-strip span::before { content:'✓'; color:var(--green); font-weight:800; flex:0 0 auto; }
@media (max-width:700px) {
  .site-hero { min-height:220px; background-position:66% 50%; }
  .home-hero { min-height:245px; }
  .trust-strip { flex-direction:column; gap:8px; }
}


/* ============================================================
   V15 — rustige adviesstijl, één footercomponent en minder kaart-op-kaart
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

p, li, label, input, select, textarea, button {
  font-size: clamp(16px, 1.35vw, 19px);
}

.box {
  box-shadow: none;
  border-radius: 12px;
}

.site-hero {
  min-height: 330px;
  background-position: center 10%;
}
.site-hero.home-hero { min-height: 350px; }
.site-hero .container { position: relative; }
.hero-topline {
  position: absolute;
  top: 18px;
  right: 24px;
}
.hero-contact-link {
  display: inline-block;
  padding: 7px 10px;
  color: rgba(255,255,255,.92) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.hero-contact-link:hover { color: #fff !important; }
.nav-contact-mobile { display: none; }

.home-intro {
  background: transparent;
  border-radius: 0;
  padding: 32px 0 18px;
  margin: 0;
  box-shadow: none;
}
.home-intro > p:not(.eyebrow) { max-width: 780px; }

.category-grid { gap: 16px; }
.category-card {
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255,252,245,.78);
  transition: border-color .15s ease, background-color .15s ease;
}
.category-card:hover {
  transform: none;
  background: #fffdf8;
}
.category-card-primary { border-width: 1px; border-color: var(--green); }
.category-status {
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--line);
}

.editorial-section {
  margin: 0;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.editorial-section > p { max-width: 820px; }
.muted-section { padding-bottom: 26px; }

.process-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
}
.process-line > div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 3px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.process-line > div:last-child { border-bottom: 0; }
.step-number {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green-deep);
  font-weight: 700;
  font-size: 15px;
}
.process-line strong { color: var(--green-deep); }
.process-line div > span:last-child { color: var(--text-soft); font-size: 16px; }

.home-region-link {
  margin: 0;
  padding: 30px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.home-region-link p { max-width: 760px; }
.home-region-link a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.quality-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
}
.quality-list > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.quality-list > div:last-child { border-bottom: 0; }
.quality-list h3 { margin: 0 0 7px; color: var(--green-deep); font-size: 19px; }
.quality-list p { margin: 0; color: var(--text-soft); font-size: 16px; }

.quiet-link-list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.quiet-link-list a {
  display: grid;
  gap: 3px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.quiet-link-list a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.quiet-link-list strong { color: var(--green-deep); font-size: 17px; }
.quiet-link-list span { color: var(--text-soft); font-size: 15px; }

.factor-list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.factor-list > div {
  display: grid;
  gap: 4px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.factor-list strong { color: var(--green-deep); }
.factor-list span { color: var(--text-soft); font-size: 16px; }

.interest-section {
  margin: 22px 0 10px;
  padding: 28px 24px;
  background: #edf3ed;
  border: 1px solid #cbd9cc;
  border-radius: 12px;
}
.interest-section > p { max-width: 820px; }
.interest-form { max-width: 720px; margin-top: 18px; }
.interest-form textarea { min-height: 100px; }

.check-cta-link {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 8px;
  box-shadow: none;
}

.lead-form-compact { max-width: 760px; margin-left: auto; margin-right: auto; }
.lead-form-compact > p:not(.eyebrow) { color: var(--text-soft); }

/* Footer V15: alle maten en uitlijning komen uitsluitend uit deze set. */
.site-footer {
  margin-top: 42px;
  background: #123c2b;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 38px 24px calc(30px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.footer-brand { display: grid; gap: 4px; }
.footer-brand strong { font-size: 20px; line-height: 1.25; }
.footer-brand span { font-size: 15px; color: rgba(255,255,255,.78); }
.footer-contact-block { display: grid; gap: 4px; }
.footer-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.footer-contact-block a { font-size: 16px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-main-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.footer-main-links a { color: #fff; font-size: 15px; text-decoration: none; }
.footer-main-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; }
.footer-legal-links a,
.footer-cookie-link,
.footer-copyright {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}
.footer-legal-links a { text-decoration: underline; text-underline-offset: 3px; }
.footer-cookie-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  margin: -10px 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer-cookie-link:hover { background: none; color: #fff; }
.footer-copyright { color: rgba(255,255,255,.66); }

@media (min-width: 700px) {
  .process-line { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .process-line > div { border-bottom: 0; border-right: 1px solid var(--line); padding: 8px 26px; }
  .process-line > div:first-child { padding-left: 0; }
  .process-line > div:last-child { border-right: 0; padding-right: 0; }
  .quality-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quality-list > div { border-bottom: 0; border-right: 1px solid var(--line); padding: 0 24px; }
  .quality-list > div:first-child { padding-left: 0; }
  .quality-list > div:last-child { border-right: 0; padding-right: 0; }
  .quiet-link-list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 32px; }
  .factor-list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 32px; }
  .factor-list-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .factor-list-three > div { padding-right: 18px; }
  .footer-inner { grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr); }
  .footer-main-links { grid-column: 1 / -1; }
  .footer-bottom { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (max-width: 699px) {
  .site-hero { min-height: 220px; background-position: 66% 50%; }
  .site-hero.home-hero { min-height: 245px; }
  .hero-topline { display: none; }
  .nav-contact-mobile { display: block; }
  .home-intro { padding: 24px 0 10px; }
  .editorial-section { padding: 28px 0; }
  .category-card { padding: 18px; }
  .interest-section { margin-left: -4px; margin-right: -4px; padding: 24px 18px; }
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .footer-main-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; }
}

.region-topic-grid { margin-bottom: 28px; }
.region-local-note { margin-top: 0; }

/* ============================================================
   V15.6 — sitebrede template-polish + truth & trust
   Eén redactioneel ritme, lokale hero's waar de bronfoto geschikt is.
   ============================================================ */

/* Oudere informatiepagina's gebruiken nog .box in de markup. Op redactionele
   pagina's maken we alleen de TOPLEVEL boxen vlak. Formulieren en echte
   interne kaarten blijven daardoor herkenbaar en functioneel. */
.page-editorial main > .box:not(.lead-form-box) {
  margin: 0;
  padding: 32px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.page-editorial main > .box:not(.lead-form-box):first-child,
.page-editorial main > .editorial-section:first-child {
  border-top: 0;
}
.page-editorial main > .box:not(.lead-form-box) > h2:first-child,
.page-editorial main > .editorial-section > h2:first-child {
  margin-top: 0;
}
.page-editorial main > .box:not(.lead-form-box) > p,
.page-editorial main > .box:not(.lead-form-box) > ul,
.page-editorial main > .box:not(.lead-form-box) > ol {
  max-width: 840px;
}

/* De huidige regio-index is een lange navigatielijst, geen kaart-in-kaart. */
.region-index-intro { padding-bottom: 24px; }
.region-index-grid { margin: 4px 0 34px; }
.region-city-lead { padding-bottom: 26px; }
.region-city-lead > p { max-width: 760px; }

/* Regio-overzicht: bestaand breed stadsbeeld, lokaal opgeslagen. */
.site-hero.hero-regio-overview {
  background-image:
    linear-gradient(90deg, rgba(15,54,37,.82) 0%, rgba(15,54,37,.62) 52%, rgba(15,54,37,.40) 100%),
    url('/images/og-image.jpg');
  background-position: center 48%;
}

/* Lokale pagina's: plaatsfoto direct als hero. Geen tweede foto onder de hero. */
.site-hero.hero-place {
  background-position: center 48%;
}
.site-hero.hero-place-apeldoorn { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-apeldoorn.webp'); }
.site-hero.hero-place-arnhem { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-arnhem.webp'); }
.site-hero.hero-place-deventer { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-deventer.webp'); }
.site-hero.hero-place-didam { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-didam.webp'); }
.site-hero.hero-place-dieren { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-dieren.webp'); }
.site-hero.hero-place-doesburg { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-doesburg.webp'); }
.site-hero.hero-place-doetinchem { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-doetinchem.webp'); }
.site-hero.hero-place-duiven { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-duiven.webp'); }
.site-hero.hero-place-ede { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-ede.webp'); }
.site-hero.hero-place-groenlo { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-groenlo.webp'); }
.site-hero.hero-place-harderwijk { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-harderwijk.webp'); }
.site-hero.hero-place-lochem { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-lochem.webp'); }
.site-hero.hero-place-nijmegen { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-nijmegen.webp'); }
.site-hero.hero-place-rheden { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-rheden.webp'); }
.site-hero.hero-place-tiel { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-tiel.webp'); }
.site-hero.hero-place-ulft { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-ulft.webp'); }
.site-hero.hero-place-varsseveld { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-varsseveld.webp'); }
.site-hero.hero-place-westervoort { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-westervoort.webp'); }
.site-hero.hero-place-winterswijk { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-winterswijk.webp'); }
.site-hero.hero-place-zutphen { background-image:linear-gradient(90deg,rgba(15,54,37,.82),rgba(15,54,37,.54)),url('/images/plaats-zutphen.webp'); }

/* Foto-specifieke uitsneden: herkenbaar onderwerp i.p.v. willekeurige midden-crop. */
.site-hero.hero-place-apeldoorn { background-position:center 52%; }
.site-hero.hero-place-arnhem { background-position:center 42%; }
.site-hero.hero-place-deventer { background-position:center 48%; }
.site-hero.hero-place-didam { background-position:center 46%; }
.site-hero.hero-place-doesburg { background-position:center 52%; }
.site-hero.hero-place-doetinchem { background-position:center 54%; }
.site-hero.hero-place-duiven { background-position:center 48%; }
.site-hero.hero-place-ede { background-position:center 46%; }
.site-hero.hero-place-groenlo { background-position:center 46%; }
.site-hero.hero-place-lochem { background-position:center 48%; }
.site-hero.hero-place-rheden { background-position:center 44%; }
.site-hero.hero-place-varsseveld { background-position:center 45%; }
.site-hero.hero-place-westervoort { background-position:center 48%; }
.site-hero.hero-place-winterswijk { background-position:center 52%; }
.site-hero.hero-place-zutphen { background-position:center 45%; }

@media (max-width: 699px) {
  .site-hero.hero-place,
  .site-hero.hero-regio-overview { min-height: 230px; }
  .site-hero.hero-place { background-position:center 50%; }
  .site-hero.hero-regio-overview { background-position:center 50%; }
  .page-editorial main > .box:not(.lead-form-box) { padding: 28px 0; }
  .region-index-grid { margin-bottom: 28px; }
}

/* ── V15.6 rustige kennisnavigatie ─────────────────────────
   Voor informatiehubs: geen grote CTA-tegels. De enige gevulde groene
   knop blijft de echte primaire actie (check/aanvraag). */
.knowledge-links {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 34px;
  border-top: 1px solid var(--line);
}

.knowledge-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--green-deep);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
}

.knowledge-links a::after {
  content: "→";
  flex: 0 0 auto;
  font-weight: 700;
}

.knowledge-links a:hover { text-decoration: underline; }

@media (min-width: 700px) {
  .knowledge-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-links a:nth-child(2) { border-top: 0; }
}

/* ============================================================
   V15.6 — categoriebeelden: zelfde hero-systeem, inhoudelijk herkenbaar
   ============================================================ */
.site-hero.hero-category {
  background-position: center 50%;
  background-size: cover;
}
.site-hero.hero-warmtepomp {
  background-image:
    linear-gradient(90deg, rgba(15,54,37,.86) 0%, rgba(15,54,37,.68) 42%, rgba(15,54,37,.25) 70%, rgba(15,54,37,.12) 100%),
    url('/images/hero-warmtepomp.webp');
  background-position: center 50%;
}
.site-hero.hero-thuisbatterij {
  background-image:
    linear-gradient(90deg, rgba(15,54,37,.87) 0%, rgba(15,54,37,.70) 42%, rgba(15,54,37,.28) 70%, rgba(15,54,37,.12) 100%),
    url('/images/hero-thuisbatterij.webp');
  background-position: center 52%;
}
.site-hero.hero-familiewoning {
  background-image:
    linear-gradient(90deg, rgba(15,54,37,.88) 0%, rgba(15,54,37,.72) 42%, rgba(15,54,37,.30) 70%, rgba(15,54,37,.14) 100%),
    url('/images/hero-familiewoning.webp');
  background-position: center 54%;
}

@media (max-width:700px) {
  .site-hero.hero-warmtepomp {
    background-position: 68% 50%;
  }
  .site-hero.hero-thuisbatterij {
    background-position: 67% 50%;
  }
  .site-hero.hero-familiewoning {
    background-position: 66% 52%;
  }
}

/* V15.6 Truth & Trust: vaste platformrol in de centrale footer */
.footer-platform-note {
  margin: 4px 0 0;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}


/* V15.8 — veilige reflow voor lange Nederlandse samenstellingen */
h1, h2, h3, .category-card strong, .quiet-link-list strong, .knowledge-links a {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
@media (max-width: 360px) {
  h1, h2, h3 { overflow-wrap: anywhere; }
}


/* ============================================================
   V16 — UX SIMPLIFICATION BODYKIT
   Minder gelijktijdige keuzes, compactere kennispagina's en één duidelijke
   hoofdactie per fase. Backend/URLs/SEO blijven ongemoeid.
   ============================================================ */

/* Primaire navigatie: merk + vier routes, geen kennis-dropdowns. */
.site-nav .container { justify-content: space-between; gap: 12px; }
.nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
  color: #fff !important;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  text-decoration: none !important;
}
.nav-brand:hover { color: var(--gold) !important; }
.nav-links { width: 100%; }
@media (min-width:700px) {
  .site-nav .container { flex-wrap: nowrap; }
  .nav-links { width: auto; margin-left: auto; flex-wrap: nowrap; }
  .nav-links > li > a { padding: 14px 11px; font-size: 16px; white-space: nowrap; }
}
@media (max-width:699px) {
  .nav-toggle { margin-left: auto; }
  .nav-links { padding-bottom: 14px; }
}

/* Detail- en taakpagina's starten direct bij inhoud: geen 330px categoriebeeld. */
.site-hero.hero-compact {
  min-height: 0;
  padding: 30px 0 28px;
  background-image: none !important;
  background: var(--green-deep) !important;
}
.site-hero.hero-compact h1 { font-size: clamp(29px, 4.6vw, 44px); max-width: 860px; }
.site-hero.hero-compact p { max-width: 780px; }
.site-hero.hero-compact .back-link { display: inline-block; margin-bottom: 12px; font-size: 15px; }

/* Hubs blijven visueel, maar minder hoog. */
.site-hero.hero-category { min-height: 270px; }
.site-hero.home-hero { min-height: 285px; }
.site-hero.hero-thuisbatterij { background-position: right center; }
@media (max-width:699px) {
  .site-hero.hero-category { min-height: 235px; }
  .site-hero.home-hero { min-height: 235px; }
  .site-hero.hero-thuisbatterij { background-position: 88% 50%; }
}

/* Home: drie keuzes, één ondersteunende regel. */
.home-intro { padding-top: 36px; padding-bottom: 42px; }
.home-intro > p:not(.eyebrow) { max-width: 700px; }
.category-grid { margin-top: 28px; }
.category-card { padding: 24px; gap: 10px; background: rgba(255,252,245,.62); }
.category-card strong { font-size: clamp(21px, 3vw, 27px); }
.category-card > span:not(.category-action) { line-height: 1.5; }
.home-promise {
  margin: 28px 0 0;
  max-width: 760px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}

/* Hubs: primaire actie + één rustige verdiepingsroute. */
.hub-intro { padding-top: 34px; padding-bottom: 30px; max-width: 800px; }
.hub-intro h2 { max-width: 720px; }
.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.hub-actions .check-cta-link { margin-top: 0; }
.secondary-link,
.secondary-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hub-summary { padding-top: 30px; padding-bottom: 42px; }
.hub-summary .factor-list { max-width: 920px; }

/* Kennisindex: groepen in plaats van één lange keuzevlakte. */
.knowledge-intro { padding-bottom: 24px; }
.knowledge-group { padding-top: 30px; padding-bottom: 34px; }
.knowledge-group h2 { font-size: clamp(22px, 3vw, 30px); }
.knowledge-group .knowledge-links { max-width: 900px; }
.knowledge-cta { margin-top: 26px; }

/* Rustiger formulieren: labels zichtbaar, placeholders alleen als voorbeeld. */
.field-label {
  display: block;
  margin: 14px 0 6px;
  color: var(--green-deep);
  font-size: 15px;
  font-weight: 700;
}
form .field-label:first-of-type { margin-top: 0; }
.lead-form-box input:not([type="checkbox"]):not([type="hidden"]),
.lead-form-box select,
.lead-form-box textarea,
#check-tool input:not([type="hidden"]),
#check-tool select {
  margin-top: 0;
}

/* Checkresultaat levert eerst een leesbare samenvatting. */
.check-summary {
  margin: 16px 0 24px;
  border-top: 1px solid var(--line);
}
.check-summary > div {
  display: grid;
  grid-template-columns: minmax(115px,.7fr) minmax(0,1.3fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.check-summary dt { font-weight: 700; color: var(--green-deep); }
.check-summary dd { margin: 0; }

/* Kennisartikelen eindigen niet meer in een groot formulier. */
.article-next-step { max-width: 840px; }
.article-next-step p { max-width: 720px; }
.article-next-step .secondary-cta { margin-top: 4px; }

/* Minder verticale 'kaart-op-kaart'-druk. */
.page-editorial main > .box:not(.lead-form-box),
.page-editorial main > .editorial-section { scroll-margin-top: 20px; }

@media (max-width:699px) {
  .home-intro { padding-top: 28px; padding-bottom: 34px; }
  .category-grid { margin-top: 22px; }
  .category-card { padding: 20px 18px; }
  .hub-actions { align-items: stretch; }
  .hub-actions .check-cta-link { width: 100%; text-align: center; }
  .check-summary > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   V16.2 — UX COHERENCE
   Rustige uitleg rond aanvraag, controle vóór verzenden en aanvraagbewijs.
   ============================================================ */
.field-why {
  margin: -8px 0 14px;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}
.help-choice {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.help-choice h3 { margin-top: 0; }
.application-review {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,252,245,.72);
}
.application-review h3 { margin-top: 4px; }
.review-summary,
.receipt-summary {
  margin: 18px 0 20px;
  border-top: 1px solid var(--line);
}
.review-summary > div,
.receipt-summary > div {
  display: grid;
  grid-template-columns: minmax(150px,.8fr) minmax(0,1.2fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.review-summary dt,
.receipt-summary dt {
  font-weight: 700;
  color: var(--green-deep);
}
.review-summary dd,
.receipt-summary dd { margin: 0; overflow-wrap: anywhere; }
.review-note {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.55;
}
.review-actions {
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: 12px;
  margin-top: 18px;
}
.secondary-button {
  background: transparent;
  color: var(--green-deep);
  border: 1px solid var(--green-deep);
  box-shadow: none;
}
.secondary-button:hover {
  background: rgba(26,110,60,.07);
  color: var(--green-deep);
}
.receipt-card {
  max-width: 820px;
  margin: 34px auto 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,252,245,.72);
}
.receipt-check {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 0 12px;
  border-radius: 50%;
  background: #e4f0e8;
  color: var(--green-deep);
  font-size: 24px;
  font-weight: 800;
}
.receipt-next {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.receipt-contact {
  margin-top: 22px;
  color: var(--text-soft);
}
.trust-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  counter-reset: truststep;
}
.trust-steps li {
  counter-increment: truststep;
  position: relative;
  padding: 0 0 22px 48px;
}
.trust-steps li::before {
  content: counter(truststep);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-deep);
  color: #fff;
  font-weight: 800;
}
.trust-steps strong,
.trust-steps span { display: block; }
.trust-steps span {
  margin-top: 3px;
  color: var(--text-soft);
}
@media (max-width:699px) {
  .review-summary > div,
  .receipt-summary > div { grid-template-columns: 1fr; gap: 2px; }
  .review-actions { grid-template-columns: 1fr; }
  .application-review,
  .receipt-card { padding: 20px 18px; }
}


/* ============================================================
   V16.2 — UX COHERENCE
   Oriëntatie vóór hero, duidelijkere kennisroute, compleet controlescherm,
   compactere typografie en gerichte foutfeedback.
   ============================================================ */
p, li, label, input, select, textarea, button {
  font-size: clamp(17px, 1.35vw, 18px);
}

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  margin: 0 0 12px;
  font-size: 14px;
}
.breadcrumb-trail a {
  color: rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb-trail a:hover { color: #fff; }

.hub-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 24px;
  max-width: 900px;
}
.hub-route {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,252,245,.7);
  color: var(--text);
  text-decoration: none;
}
.hub-route strong { color: var(--green-deep); font-size: 20px; line-height: 1.25; }
.hub-route span:not(.route-action) { color: var(--text-soft); line-height: 1.45; }
.hub-route .route-action { margin-top: auto; padding-top: 5px; color: var(--green-deep); font-weight: 800; }
.hub-route:hover { border-color: var(--gold); text-decoration: none; }
.hub-route-primary {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
}
.hub-route-primary strong,
.hub-route-primary span:not(.route-action),
.hub-route-primary .route-action { color: #fff; }

.category-meta {
  display: inline-block;
  width: fit-content;
  margin-bottom: 1px;
  color: var(--text-soft);
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .02em;
}

.fact-check-note {
  margin: 22px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 14px;
}
.fact-check-note a { font-weight: 700; }

.application-review h4 {
  margin: 22px 0 8px;
  color: var(--green-deep);
  font-size: 17px;
}
.application-review h4:first-of-type { margin-top: 16px; }
.review-profile { margin-bottom: 24px; }

.form-error-summary {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 4px solid #a33a2b;
  background: #fff2ee;
  color: #552018;
}
.form-error-summary:focus { outline: 3px solid rgba(163,58,43,.25); outline-offset: 2px; }
.form-error-summary strong { display: block; margin-bottom: 6px; }
.form-error-summary ul { margin: 0; padding-left: 22px; }
.field-error {
  margin: -8px 0 14px;
  color: #8a2d20;
  font-size: 14px;
  font-weight: 700;
}

.site-hero.hero-thuisbatterij { background-position: center center; }
@media (max-width:699px) {
  .hub-route-grid { grid-template-columns: 1fr; }
  .hub-route { padding: 18px; }
  .site-hero.hero-thuisbatterij { background-position: 73% 50%; }
}