/* Hallmark · macrostructure: Marquee Hero (home) · Index-First · Split Studio · genre: editorial
 * theme: Heuvelland — paper warm-white (98%) / display grotesk + body serif / accent forest-green + burnt orange
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * Waarom dit bestaat: het theme had één font (Poppins) voor koppen en body, zes secties
 * met hetzelfde pilletje-boven-H2-ritme, en alles in kaarten met schaduw. De mooiste foto
 * van de site zat in een kaartje van 420px in een doos in een zwarte band.
 * Dit blad draait dat om. Het overschrijft style.css, het vervangt hem niet.
 */


/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* papier en inkt blijven het bestaande merk */
  --h-paper:   #fffaf3;
  --h-paper-2: #f7f0e5;
  --h-ink:     #1b232c;
  --h-muted:   #5d6673;      /* 5,4:1 op papier — de oude #667080 zat op 4,82 */
  --h-line:    #e2d8ca;
  --h-hair:    #cdbfab;
  --h-forest:  #1a3d2f;
  --h-dark:    #14181c;

  /* De vlam is decoratie: strepen, markeringen, vlakken zonder tekst.
     Nooit als tekstkleur en nooit als knopvlak — wit erop is 3,19:1.
     Het accent is de leesbare variant: 6,86:1 met wit, 6,61:1 als tekst op papier. */
  --h-flame:   #d97706;
  --h-accent:  #8a4a02;
  --h-accent-2:#6d3a01;

  --h-display: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
  --h-body:    "Source Serif 4", Georgia, "Iowan Old Style", serif;

  /* 4pt-schaal */
  --h-1:4px; --h-2:8px; --h-3:12px; --h-4:16px; --h-6:24px;
  --h-8:32px; --h-12:48px; --h-16:64px; --h-24:96px;
  --h-max: 1180px;
  --h-prose: 68ch;
}

/* ─── Typografie ─────────────────────────────────────────────────────────── */
body{
  background: var(--h-paper);
  color: var(--h-ink);
  font-family: var(--h-body);
  font-size: 17.5px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,
.dfl-nav-cta,.dfl-button,.dfl-brand,
.dfl-kicker,.dfl-pill,
label,button,summary,
th,.dfl-score{
  font-family: var(--h-display);
  font-style: normal;           /* koppen zijn roman, nooit cursief */
}
h1,h2,h3{ color: var(--h-ink); letter-spacing:-.028em; line-height:1.04; text-wrap:balance; }
/* De sprong van H1 naar body stond op 2,19x; dat leest als één grijze massa.
   3-4x is waar ritme vandaan komt. */
h1{ font-weight:800; font-size:clamp(2.6rem, 6.2vw, 5rem); }
h2{ font-weight:800; font-size:clamp(1.75rem, 3.2vw, 2.9rem); margin:0 0 var(--h-3); }
h3{ font-weight:700; font-size:clamp(1.12rem, 1.5vw, 1.32rem); letter-spacing:-.018em; }
p{ margin:0 0 var(--h-4); }
.dfl-content p, .dfl-lead, .dfl-card p, .dfl-faq p{ max-width: var(--h-prose); }
.dfl-lead{ color: var(--h-muted); font-size:1.06rem; line-height:1.58; }
a{ color: var(--h-accent-2); text-underline-offset:.18em; text-decoration-thickness:from-font; }
a:hover{ color: var(--h-accent); }

/* De pill was zes keer hetzelfde grijze doosje boven zes H2's. Wordt een klein
   label in de accentkleur. Eerst stond er een streepje onder, maar dat waren zes
   extra randen voor pure versiering; letterspacing en kleur onderscheiden genoeg. */
.dfl-pill,.dfl-kicker{
  display:inline-block; background:none !important; border:0; border-radius:0;
  padding:0; margin:0 0 var(--h-3); border:0;
  color:var(--h-accent-2);
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  min-height:0;
}
.dfl-section.dark .dfl-pill,.dfl-hero .dfl-kicker{ color:#f0c98a; background:none !important; }

/* ─── Marquee Hero ───────────────────────────────────────────────────────── */
/* De foto is de fold. Geen kaartje meer, geen zwarte band eromheen, geen
   tweede knop: één ding om op te klikken. */
/* De fold moet van rand tot rand. Er zit elders een max-width van 1120px op
   deze sectie en een van 900px op de figure — allebei uit het oude ontwerp,
   waar de foto bewust een kaartje in een band was. */
.dfl-hero.variant-c{
  position:relative; isolation:isolate;
  width:100% !important; max-width:none !important;
  margin-top:0; padding:0;
  min-height:min(84svh, 760px);
  display:grid; align-items:end;
  background: var(--h-forest);
  overflow:clip;
}
.dfl-hero.variant-c > .dfl-container{
  position:relative; z-index:2;
  width:min(var(--h-max), calc(100% - var(--h-8)));
  padding: var(--h-24) 0 var(--h-12);
}
.dfl-hero.variant-c .dfl-hero-card,
.dfl-hero.variant-c .dfl-hero-card--top{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:0;
  width:100% !important; max-width:none !important;
  height:auto !important; min-height:0 !important; aspect-ratio:auto !important;
  margin:0 !important; border-radius:0 !important; box-shadow:none !important; background:none;
}
.dfl-hero.variant-c .dfl-hero-card img,
.dfl-hero.variant-c .dfl-hero-card--top img{
  width:100% !important; height:100% !important;
  min-height:0 !important; max-height:none !important;
  object-fit:cover; object-position:center 30%; display:block;
}
/* Het oude ontwerp legde al een donkere 90deg-overlay over de hele hero
   (::before, 760px). Samen met de nieuwe scrim werd de bovenste 288px dubbel
   gedempt en ontstond er een zichtbare naad dwars door de fold. */
.dfl-hero.variant-c::before{ display:none !important; content:none !important; }

/* Scrim: donker onderaan zodat de tekst overal leesbaar blijft, ook als de
   foto ooit vervangen wordt door een lichtere. */
.dfl-hero.variant-c::after{
  content:"" !important; position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:auto !important; height:auto !important; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,24,28,.14) 0%, rgba(20,24,28,.36) 44%, rgba(20,24,28,.88) 100%),
    linear-gradient(100deg, rgba(20,24,28,.62) 0%, rgba(20,24,28,.28) 42%, transparent 68%);
}
.dfl-hero.variant-c .dfl-hero-text{
  max-width:min(46rem, 100%); margin:0; text-align:left; color:#fff;
}
/* De ch-eenheid rekent in het font van het element zelf. Op de tekstkolom is dat
   de body-serif, en 26ch werd daar 233px — een kolom van vier woorden breed.
   De maat hoort op de kop, in de maat van de kop. */
.dfl-hero.variant-c h1{ max-width:15ch; }
/* De H1 kwam op 50,4px uit omdat de header-regel hierboven met !important een
   clamp van 3,6vw oplegt. In de fold mag hij groter: de sprong naar body was
   2,19x en hoort richting 3-4x. */
.dfl-hero.variant-c h1{
  color:#fff; margin:0 0 var(--h-4);
  font-size:clamp(2.6rem, 6vw, 4.8rem) !important;
}
.dfl-hero.variant-c .dfl-lead{
  color:rgba(255,255,255,.94); max-width:56ch; font-size:1.08rem; margin-bottom:var(--h-6);
}
.dfl-hero.variant-c .dfl-actions{ gap:var(--h-4); }
/* Eén CTA in de fold. De tweede knop blijft bestaan maar als tekstlink onder
   de knop, zodat de blik één doel heeft. */
.dfl-hero.variant-c .dfl-button.ghost{
  background:none; border:0; padding:0; min-height:44px; color:#fff;
  text-decoration:underline; text-underline-offset:.24em;
}
.dfl-hero.variant-c .dfl-button.ghost:hover{ color:#f0c98a; }

/* style.css centreert alles in deze hero met margin:auto op de p en
   text-align:center op de tekstkolom. Die twee moeten allebei weg, anders
   staat de lead onder een links uitgelijnde H1 gecentreerd. */
.dfl-hero.variant-c .dfl-hero-text p,
.dfl-hero.variant-c .dfl-lead{
  margin-left:0 !important; margin-right:0 !important; text-align:left !important;
}
.dfl-hero.variant-c .dfl-actions{ justify-content:flex-start !important; }
.dfl-hero.variant-c .dfl-kicker{ color:#fff; }
/* De ghost-knop stond in #6d3a01 op een zonovergoten foto. */
.dfl-hero.variant-c .dfl-button.ghost{ color:#fff !important; }
.dfl-hero.variant-c .dfl-button.ghost:hover{ color:#f0c98a !important; }
/* De pill-radius komt uit een specifiekere regel in style.css. */
.dfl-button,.dfl-nav-cta,.dfl-tool-submit button,.dfl-button.ghost{ border-radius:2px !important; }

/* De harde regel tussen fold en de rest — Marquee's scharnier. */
.dfl-hero.variant-c + .dfl-section{ border-top:3px solid var(--h-ink); }

/* ─── Sectieritme ────────────────────────────────────────────────────────── */
/* Was: licht, crème, licht, donker, licht, donker — een streepjespatroon.
   Wordt: papier tenzij er een reden is om te breken. Eén donkere band. */
.dfl-section{ padding: var(--h-16) 0; background:var(--h-paper); }
.dfl-section.alt{ background:var(--h-paper); border-top:1px solid var(--h-line); }
.dfl-section.dark{ background:var(--h-dark); color:#efe7db; }
.dfl-section.dark h2,.dfl-section.dark h3,.dfl-section.dark strong{ color:#fff; }
.dfl-section.dark .dfl-lead{ color:#c3bcb1; }
.dfl-container{ width:min(var(--h-max), calc(100% - var(--h-8))); margin:0 auto; }

/* ─── Split Studio: kop links, gereedschap rechts, één hairline ertussen ─── */
.dfl-grid-2{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--h-12); align-items:start; }
.dfl-tool{
  background:none; border:0; border-left:1px solid var(--h-line);
  border-radius:0; box-shadow:none; padding:0 0 0 var(--h-8);
}
.dfl-tool-grid{ gap:var(--h-4); }
.dfl-field label{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--h-muted); display:block; margin-bottom:var(--h-1);
}
.dfl-field select,.dfl-field input,.dfl-field textarea{
  width:100%; min-height:46px; padding:0 var(--h-3);
  border:1px solid var(--h-hair); border-radius:2px;
  background:var(--h-paper); color:var(--h-ink);
  font-family:var(--h-body); font-size:1rem;
}
.dfl-field select:focus-visible,.dfl-field input:focus-visible,.dfl-field textarea:focus-visible,
.dfl-button:focus-visible,.dfl-nav-cta:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--h-accent); outline-offset:2px;
}

/* ─── Knoppen ────────────────────────────────────────────────────────────── */
/* Wit op #d97706 was 3,19:1 — onder AA, op de belangrijkste knop van de site.
   #8a4a02 haalt 6,86:1 en blijft dezelfde warme familie. */
.dfl-button,.dfl-nav-cta,.dfl-tool-submit button{
  background:var(--h-accent) !important; color:#fff !important;
  border:0; border-radius:2px; min-height:48px; padding:0 var(--h-6);
  font-weight:700; letter-spacing:-.005em; box-shadow:none;
  text-decoration:none;
  transition:background 140ms ease, transform 140ms ease;
}
.dfl-button:hover,.dfl-nav-cta:hover,.dfl-tool-submit button:hover{ background:var(--h-accent-2) !important; }
.dfl-button:active,.dfl-nav-cta:active{ transform:translateY(1px); }
.dfl-button.ghost{
  background:none !important; color:var(--h-accent-2) !important;
  border:1px solid var(--h-hair);
}
.dfl-button.ghost:hover{ background:var(--h-paper-2) !important; }
/* Op de donkere band werd de ghost-knop #6d3a01 op #14181c — 1,4:1. */
.dfl-section.dark .dfl-button.ghost,.dfl-footer .dfl-button.ghost{
  color:#fff !important; border-color:rgba(255,255,255,.4);
}
.dfl-section.dark .dfl-button.ghost:hover{ background:rgba(255,255,255,.1) !important; }

/* ─── Index-First: de diensten worden een prijsindex, geen kaartendek ────── */
.dfl-grid-3{ display:block; margin-top:var(--h-8); border-top:1px solid var(--h-ink); }
.dfl-card{
  background:none; border:0; border-bottom:1px solid var(--h-line);
  border-radius:0; box-shadow:none;
  padding:var(--h-6) 0;
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:var(--h-8);
  align-items:start;
}
.dfl-card h3{ margin:0; }
.dfl-card p{ margin:0; color:var(--h-muted); }
.dfl-card:hover{ background:linear-gradient(90deg, rgba(217,119,6,.05), transparent 62%); }
/* De icoonvierkantjes waren drie keer hetzelfde grijze blokje met een klokje erin. */
.dfl-icon{ display:none; }

/* ─── De vergelijkingstabel ──────────────────────────────────────────────── */
/* Stond als crème kaartjes op een zwarte band — het contrast werkte tegen
   zichzelf. Wordt een echte tabel met hairlines op de donkere ondergrond. */
.dfl-comparison{ gap:0; margin-top:var(--h-8); border-top:1px solid rgba(255,255,255,.28); }
.dfl-section.dark .dfl-row{
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0; padding:var(--h-4) 0; color:#d9d2c7;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr) minmax(0,1fr);
  gap:var(--h-6);
}
.dfl-section.dark .dfl-row span,
.dfl-section.dark .dfl-row p{ color:#cfc7bb; }
.dfl-section.dark .dfl-row strong{ font-family:var(--h-display); font-weight:700; }
.dfl-section.dark .dfl-row a{ color:#f0c98a; }
.dfl-row{
  background:none; border:0; border-bottom:1px solid var(--h-line);
  border-radius:0; padding:var(--h-4) 0;
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.dfl-faq{ gap:0; margin-top:var(--h-8); border-top:1px solid var(--h-ink); }
/* design-check telde 34 randen/schaduwen; vier daarvan waren een box-shadow
   die hier nog onder de FAQ-items hing, en een 1px rand rond de full-bleed
   hero. De hairlines eronder zijn wel bewust: die vervingen de kaartendekken. */
.dfl-faq details{
  background:none !important; border:0; border-bottom:1px solid var(--h-line);
  border-radius:0; padding:0; box-shadow:none !important;
}
.dfl-hero.variant-c .dfl-hero-card,
.dfl-hero.variant-c .dfl-hero-card--top{ border:0 !important; }
.dfl-faq summary{
  cursor:pointer; padding:var(--h-4) var(--h-8) var(--h-4) 0; position:relative;
  font-weight:700; font-size:1.06rem; letter-spacing:-.015em; list-style:none;
}
.dfl-faq summary::-webkit-details-marker{ display:none; }
.dfl-faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--h-accent); font-weight:600; font-size:1.3rem;
}
.dfl-faq details[open] summary::after{ content:"−"; }
.dfl-faq details > p{ margin:0 0 var(--h-4); color:var(--h-muted); }

/* ─── Kop en voet ────────────────────────────────────────────────────────── */
.dfl-topbar{
  position:sticky; top:0; z-index:50;
  width:100%; margin:0; border:0; border-bottom:1px solid var(--h-line); border-radius:0;
  background:rgba(255,250,243,.94); backdrop-filter:blur(14px);
}
.dfl-topbar .dfl-nav{ min-height:66px; }
.dfl-brand{ max-width:none; font-weight:800; letter-spacing:-.03em; }
.dfl-brand-mark{ background:var(--h-forest); color:#fff; border-radius:2px; }
.dfl-menu a{ font-family:var(--h-display); font-weight:600; font-size:.94rem; color:var(--h-ink); text-decoration:none; }
.dfl-menu a:hover{ color:var(--h-accent-2); }
.dfl-nav-cta{ font-size:.9rem; min-height:42px; padding:0 var(--h-4); }
.dfl-footer{ background:var(--h-dark); color:#c3bcb1; }
.dfl-footer a{ color:#f0c98a; }
.dfl-footer h3,.dfl-footer strong{ font-family:var(--h-display); color:#fff; }

/* ─── Losse hoeken ───────────────────────────────────────────────────────── */
.dfl-result{ border-top:2px solid var(--h-ink); border-radius:0; background:none; margin-top:var(--h-6); padding-top:var(--h-4); }
.dfl-score{ font-family:var(--h-display); font-weight:800; letter-spacing:-.04em; color:var(--h-accent-2); }
.dfl-blog-card,.dfl-post-card,.dfl-author-card,.dfl-toc,.dfl-offerte{
  border-radius:2px; box-shadow:none;
}
/* ─── De kop van elke binnenpagina ───────────────────────────────────────── */
/* Stond als een donkere doos ín een groene band: hetzelfde kaartje-in-een-doos
   dat de fold ook had. Wordt één rustige band in het bosgroen, links uitgelijnd,
   zodat de 20 binnenpagina's dezelfde vorm hebben als de home.
   (Een eerdere versie zette hier background:paper — dat gaf een witte H1 op
   crème op /kennisbank/, 1,1:1.) */
.dfl-single-hero,.dfl-page-hero,.dfl-article-hero,.dfl-listing-hero,.dfl-page-header{
  background:var(--h-forest) !important;
  color:#fff; text-align:left !important;
  /* De inspringing hoort op de band zelf: de binnenlaag heeft width:100% uit
     style.css en die won van een width zonder !important, waardoor de titels
     tegen de linkerrand plakten. */
  padding:var(--h-16) max(var(--h-4), calc((100% - var(--h-max)) / 2)) var(--h-12) !important;
  animation:none !important;
}
.dfl-single-hero__overlay,
.dfl-listing-hero__inner,
.dfl-article-hero__content,
.dfl-page-header > .dfl-container{
  background:none !important; padding:0 !important;
  width:100% !important; max-width:none !important; margin:0 !important;
  text-align:left !important;
}
/* De blog-listing had een eigen achtergrondlaag met een tweede gradient. */
.dfl-listing-hero__bg{ display:none !important; }
.dfl-single-hero__scrim-card{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important; max-width:none !important;
  text-align:left !important;
}
.dfl-single-hero__title,.dfl-listing-hero__title,
.dfl-single-hero h1,.dfl-article-hero h1,.dfl-page-header h1,.dfl-listing-hero h1{
  color:#fff !important; margin:0 0 var(--h-3); max-width:22ch;
  font-size:clamp(2rem, 3.6vw, 3.3rem) !important; hyphens:none !important;
}
.dfl-single-hero__lead,.dfl-listing-hero__lead,.dfl-single-hero .dfl-lead,.dfl-page-header .dfl-lead{
  color:rgba(255,255,255,.9) !important; margin:0 !important; max-width:60ch;
}
.dfl-single-hero .dfl-breadcrumb,.dfl-breadcrumb--light,.dfl-article-hero .dfl-breadcrumb{
  justify-content:flex-start !important; color:rgba(255,255,255,.72);
  font-size:.8rem; margin:0 0 var(--h-3) !important;
}
.dfl-single-hero .dfl-breadcrumb a,.dfl-breadcrumb--light a,.dfl-article-hero .dfl-breadcrumb a{
  color:rgba(255,255,255,.86) !important;
}
.dfl-single-hero .dfl-breadcrumb .sep{ color:rgba(255,255,255,.45); }
/* De kicker was een oranje pil; wordt hetzelfde streeplabel als op de home. */
.dfl-kicker--on-image{
  background:none !important; border-radius:0 !important; padding:0 !important;
  border:0 !important; color:#f0c98a !important; margin:0 0 var(--h-3) !important;
}

/* De slot-CTA stond gecentreerd met een inline style in de template. Gecentreerde
   tekstblokken met twee knoppen eronder zijn het standaard-CTA-blok; links
   uitlijnen laat hem meelopen met de rest van de pagina. */
#cta .dfl-container{ text-align:left !important; }
#cta .dfl-lead{ margin-left:0 !important; }
#cta .dfl-actions{ justify-content:flex-start !important; }

/* ─── Mobiel: 320 / 375 / 414 / 768 ──────────────────────────────────────── */
html,body{ overflow-x:clip; }
h1,h2,h3{ overflow-wrap:anywhere; min-width:0; }
@media (max-width: 900px){
  .dfl-grid-2{ grid-template-columns:minmax(0,1fr); gap:var(--h-8); }
  .dfl-tool{ border-left:0; border-top:1px solid var(--h-line); padding:var(--h-6) 0 0; }
  .dfl-card{ grid-template-columns:minmax(0,1fr); gap:var(--h-2); }
  .dfl-section.dark .dfl-row,.dfl-row{ grid-template-columns:minmax(0,1fr); gap:var(--h-1); }
  .dfl-section{ padding:var(--h-12) 0; }
  .dfl-hero.variant-c{ min-height:min(78svh, 640px); }
  .dfl-hero.variant-c > .dfl-container{ padding:var(--h-16) 0 var(--h-8); }
  .dfl-hero.variant-c .dfl-hero-text{ max-width:none; }
}
@media (max-width: 480px){
  body{ font-size:17px; }
  /* 24px totaal gaf 12px per kant; de lat is minimaal 16px, anders staat tekst
     tegen de schermrand. */
  .dfl-container{ width:calc(100% - 36px); }
  .dfl-hero.variant-c .dfl-actions{ flex-direction:column; align-items:stretch; }
  .dfl-hero.variant-c .dfl-button{ width:100%; }
  /* De tekstlink erft anders width:100% en centreert in het volle blok, terwijl
     de knop erboven links begint. */
  .dfl-hero.variant-c .dfl-button.ghost{ width:auto; align-self:flex-start; padding-left:0; }
  /* Over twee regels liep de streep tot midden in de tweede regel. */
  .dfl-pill,.dfl-kicker{ display:block; font-size:.66rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ─── Verzoening met dfl-product-layer ───────────────────────────────────── */
/* Die mu-plugin is een tweede knoppen- en kickersysteem en laadt ná dit blad.
   Gemeten fouten: .dfl-button--primary kwam op 2,29:1 (zijn donkere tekst op
   mijn accent), .dfl-kicker op 1,8:1 (amber op papier), de actieve nav-link en
   de blogfilter op 3,07 en 3,19 (het felle #d97706 als tekst).
   Specificiteit met een body-prefix, want gelijke specificiteit + !important
   laat het laatst geladen blad winnen. */
body .dfl-button--primary,body .entry-content .dfl-button--primary{
  background:var(--h-accent) !important; color:#fff !important;
  border-color:var(--h-accent) !important; box-shadow:none !important;
}
body .dfl-button--primary:hover{ background:var(--h-accent-2) !important; }
body .dfl-button--quiet{ background:#fff !important; color:var(--h-ink) !important; border-color:var(--h-hair) !important; }
body .dfl-button--dark{ background:var(--h-dark) !important; color:#fff !important; border-color:var(--h-dark) !important; }
body .dfl-button--ghost{ background:rgba(255,255,255,.14) !important; color:#fff !important; }

/* Amber leest op papier als 1,8:1. Op de donkere blokken van de product-layer
   blijft hij staan — die selectors zijn specifieker. */
body .dfl-kicker{ color:var(--h-accent-2) !important; }
.dfl-hero .dfl-kicker,.dfl-section.dark .dfl-kicker,
.dfl-single-hero .dfl-kicker,.dfl-listing-hero .dfl-kicker{ color:#f0c98a !important; }

/* De actieve menu-link en de actieve blogfilter stonden in het felle oranje. */
body .dfl-menu a.is-active,body .dfl-menu .current-menu-item > a,
body .dfl-menu .current_page_item > a{ color:var(--h-accent-2) !important; }
body .dfl-filter-bar a.is-active,body .dfl-filter-bar .is-active{
  background:var(--h-accent) !important; color:#fff !important; border-color:var(--h-accent) !important;
}

/* Tabellen op smalle schermen. Drie kolommen in 390px liet de browser midden
   in woorden afbreken ("Bedrijfste rrein"). Laat hem liever schuiven. */
@media (max-width: 600px){
  .dfl-content-main table,.entry-content table{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    font-size:.92rem;
  }
  .dfl-content-main table td,.dfl-content-main table th,
  .entry-content table td,.entry-content table th{
    word-break:normal !important; overflow-wrap:break-word; hyphens:auto;
    min-width:6.5rem; padding:var(--h-2) var(--h-3);
  }
}

/* ─── Randen die niets scheiden ──────────────────────────────────────────── */
/* design-check telde 41 randen/schaduwen. Drie soorten daarvan dragen niets bij:
   een rand rond een knop die al een eigen vlak heeft, een oranje onderstreping
   onder elke footerlink (underline-ruis), en het streepje onder de sectielabels.
   Wat overblijft zijn de hairlines die de kaartendekken vervingen — die scheiden
   wel iets en horen er dus wel. */
.dfl-button,.dfl-nav-cta,.dfl-tool-submit button{ border:0 !important; }
.dfl-button.ghost{ border:1px solid var(--h-hair) !important; }
/* In de fold is de tweede actie bewust een tekstlink, geen tweede knop: één
   ding om op te klikken. De algemene ghost-rand hierboven gaf hem alsnog een
   kader. */
.dfl-hero.variant-c .dfl-button.ghost{ border:0 !important; padding-left:0; }
.dfl-section.dark .dfl-button.ghost{ border-color:rgba(255,255,255,.4) !important; }
.dfl-footer a,.dfl-footer li a,.dfl-footer .menu-item a{
  border:0 !important; text-decoration:none;
}
.dfl-footer a:hover{ text-decoration:underline; text-underline-offset:.2em; }

/* ─── Aanmeldformulier vliegers ──────────────────────────────────────────── */
/* Zelfde grammatica als de rest: hairlines in plaats van kaders, labels klein
   en in de accentkleur, één kolom zodra het krap wordt. */
.dfl-piloot{ margin:var(--h-8) 0 0; border-top:1px solid var(--h-ink); padding-top:var(--h-6); }
.dfl-piloot__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.dfl-piloot__rij{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--h-4) var(--h-8); }
.dfl-piloot .dfl-field{ margin:0 0 var(--h-4); }
.dfl-piloot__opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--h-muted); }
.dfl-piloot__hint{ display:block; margin-top:var(--h-1); font-size:.86rem; color:var(--h-muted); }
.dfl-piloot__set{ border:0; padding:0; margin:0 0 var(--h-6); }
.dfl-piloot__set legend{
  font-family:var(--h-display); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--h-muted);
  padding:0; margin-bottom:var(--h-2);
}
.dfl-piloot__vinkjes{ display:flex; flex-wrap:wrap; gap:var(--h-2) var(--h-6); }
/* 44px is de maat van een vingertop; 32 is net te krap en dan mis je het vakje. */
.dfl-piloot__vink{
  display:inline-flex; align-items:center; gap:var(--h-2);
  font-size:.98rem; cursor:pointer; min-height:44px;
}
.dfl-piloot__vink input{ width:17px; height:17px; accent-color:var(--h-accent); }
.dfl-piloot__slot{
  display:flex; align-items:center; gap:var(--h-4); flex-wrap:wrap;
  border-top:1px solid var(--h-line); padding-top:var(--h-6); margin-top:var(--h-2);
}
.dfl-piloot__status{ font-size:.94rem; color:var(--h-muted); }
.dfl-piloot__status.is-fout{ color:#8a1c10; }
.dfl-piloot__klaar{
  border-left:3px solid var(--h-flame); padding:var(--h-2) 0 var(--h-2) var(--h-4);
  margin:0; max-width:60ch;
}
@media (max-width: 700px){
  .dfl-piloot__rij{ grid-template-columns:minmax(0,1fr); gap:0; }
  .dfl-piloot__vinkjes{ gap:var(--h-1) var(--h-4); }
}
.dfl-piloot__ster{ color:var(--h-accent); text-decoration:none; border:0; font-weight:700; }