.elementor-kit-7{--e-global-color-primary:#3A4A28;--e-global-color-secondary:#2A371D;--e-global-color-text:#232920;--e-global-color-accent:#7CB93B;--e-global-color-groenlicht:#EDF3E3;--e-global-color-creme:#F7F3CE;--e-global-color-witwarm:#FAFAF6;--e-global-color-tekstgrijs:#5C6355;--e-global-color-lijn:#E2E6DA;--e-global-color-wit:#FFFFFF;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Nunito Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Caveat";--e-global-typography-accent-font-weight:600;--e-global-typography-knoptekst-font-family:"Poppins";--e-global-typography-knoptekst-font-weight:700;--e-global-typography-bodyvet-font-family:"Nunito Sans";--e-global-typography-bodyvet-font-weight:700;background-color:#FAFAF6;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1220px;}.e-con{--container-max-width:1220px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   PARKSTAD TUINONDERHOUD: basis uit het oorspronkelijke ontwerp.
   Opgeschoond: regels voor de oude HTML-blokken zijn verwijderd,
   alleen wat de site nog echt gebruikt staat hier.
   ============================================================ */
/* ============================================================
   PARKSTAD TUINONDERHOUD: designprototype v2
   Stijl uit V1-concepten (wervingscampagne), designniveau
   geinspireerd op krinkels.nl: groot beeld, rustige opmaak,
   krachtige typografie. Geen emoji, alleen SVG-lijniconen.
   ============================================================ */

:root {
  /* Global colors */
  --groen: #3A4A28;          /* primair olijfgroen (uit concept) */
  --groen-diep: #2A371D;     /* donkere secties / footer */
  --groen-fris: #7CB93B;     /* conversie-accent */
  --groen-licht: #EDF3E3;    /* lichte tint-secties */
  --creme: #F7F3CE;          /* badge-geel uit concept */
  --wit: #FFFFFF;
  --wit-warm: #FAFAF6;
  --tekst: #232920;
  --tekst-grijs: #5C6355;
  --lijn: #E2E6DA;

  /* Typografie */
  --font-kop: "Poppins", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --font-schrift: "Caveat", cursive;

  /* Signatuur: blad-hoek (grote ronding rechtsboven, zie concept) */
  --blad: 18px 96px 18px 18px;
  --blad-klein: 14px 56px 14px 14px;

  --schaduw: 0 22px 60px -22px rgba(42, 55, 29, .38);
  --ease: cubic-bezier(.32,.72,0,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst);
  background: var(--wit-warm);
}

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

h1, h2, h3, h4 { font-family: var(--font-kop); margin: 0 0 .5em; color: var(--groen-diep); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.14; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.24; }
/* visueel als h2, maar semantisch geen kop (kop-rij gebruikt de schrift-eyebrow als h2) */
.kop-groot { font-family: var(--font-kop); font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.24; color: var(--groen-diep); margin: 0 0 .5em; }
.op-donker .kop-groot { color: var(--wit); }
h3, h4 { line-height: 1.3; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
p  { margin: 0 0 1em; }
a  { color: var(--groen); }

.wrap { width: min(1220px, 100% - 48px); margin-inline: auto; }
.sectie { padding: clamp(80px, 10vw, 150px) 0; }

/* ---------- SVG-lijniconen ---------- */
.ic {
  width: 24px; height: 24px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}

/* ---------- handschrift-accent (logo-tagline stijl) ---------- */
.schrift {
  font-family: var(--font-schrift);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--groen-fris);
  display: block;
  transform: rotate(-2deg);
  margin-bottom: .35em;
}

/* ---------- badge (creme pil uit concept) ---------- */
.badge {
  display: inline-block;
  background: var(--creme); color: var(--groen-diep);
  font-family: var(--font-kop); font-size: .82rem; font-weight: 600;
  line-height: 1.5; padding: 7px 16px; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(42,55,29,.08);
}
.badge strong { font-weight: 800; }
.badge .bol { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--groen-fris); margin-right: 6px; vertical-align: 1px; }
.badge--fris { background: var(--groen-fris); color: var(--groen-diep); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-kop); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 0; cursor: pointer;
  padding: 15px 15px 15px 26px; border-radius: 999px;
  will-change: transform;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .22s ease;
}
.knop:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.knop .pijl {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: transform .28s var(--ease);
}
.knop .pijl .ic { width: 16px; height: 16px; }
.knop:hover .pijl { transform: translate(3px, -2px) scale(1.06); }

/* neutrale, zachte schaduw i.p.v. de groene "glow" */
.knop--primair { background: var(--groen-fris); color: var(--groen-diep); box-shadow: 0 8px 20px -14px rgba(42,55,29,.45); }
.knop--primair .pijl { background: rgba(42,55,29,.14); }
.knop--primair:hover { background: #8AC94A; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(42,55,29,.5); }

.knop--donker { background: var(--groen); color: var(--wit); }
.knop--donker .pijl { background: rgba(255,255,255,.16); }
.knop--donker:hover { background: var(--groen-diep); transform: translateY(-2px); }

.knop--ghost { background: transparent; color: var(--groen-diep); box-shadow: inset 0 0 0 2px var(--groen); }
.knop--ghost .pijl { background: rgba(58,74,40,.1); }
.knop--wit { background: var(--wit); color: var(--groen-diep); }
.knop--wit .pijl { background: var(--groen-licht); }

/* ---------- vinkjes-lijst (uit concept) ---------- */
.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vinkjes li { display: flex; gap: 12px; align-items: flex-start; }
.vinkjes li::before {
  content: ""; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--groen-fris);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232A371D" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>');
  background-size: 13px; background-position: center; background-repeat: no-repeat;
  margin-top: 4px;
}
.vinkjes strong { color: var(--groen-diep); }
.op-donker .vinkjes strong,
.vac-hero .vinkjes strong,
.zij-kaart--groen .vinkjes strong,
.cta-kaart .vinkjes strong { color: var(--wit); }
.pakket--top .vinkjes strong { color: var(--groen-diep); }

/* ============================================================
   HEADER
   ============================================================ */
.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,250,246,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
  transition: box-shadow .4s var(--ease);
}
.top.is-vast { box-shadow: 0 10px 30px -18px rgba(42,55,29,.4); }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.logo__img { display: block; height: 52px; width: auto; max-width: none; border-radius: 10px; }
.footer .logo__img { height: 58px; }
@media (max-width: 768px) { .logo__img { height: 44px; } }

.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-kop); font-size: .95rem; font-weight: 600;
  color: var(--tekst); text-decoration: none; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.nav a:hover, .nav a.actief { color: var(--groen); border-color: var(--groen-fris); }
.nav .vac-teller {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--groen-fris); color: var(--groen-diep);
  border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1;
}
.top .knop { padding: 11px 11px 11px 20px; font-size: .9rem; }
.top .knop .pijl { width: 28px; height: 28px; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO: full-bleed beeld (Krinkels-niveau)
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  color: var(--wit);
  min-height: min(86vh, 820px);
  display: flex; align-items: center;
}
.hero::after { /* blad-watermerk zoals in concept */
  content: ""; position: absolute; right: -120px; top: -160px;
  width: 620px; height: 620px; opacity: .08; pointer-events: none; z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5C20 25 12 55 30 80c8 11 20 15 20 15s12-4 20-15C88 55 80 25 50 5z" fill="white"/><path d="M50 18v70" stroke="white" stroke-width="2"/></svg>') no-repeat center/contain;
  transform: rotate(24deg);
}
.hero h1 { color: var(--wit); margin: 20px 0 16px; }
.hero h1 em { font-style: normal; color: var(--groen-fris); }

.snelstart {
  margin-top: 34px; padding: 10px;
  background: var(--wit); border-radius: 999px;
  display: flex; gap: 8px; align-items: center;
  max-width: 540px; box-shadow: var(--schaduw);
}
.snelstart input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--font-body); font-size: 1rem; padding: 10px 10px 10px 18px; color: var(--tekst);
}
.snelstart .knop { padding: 12px 12px 12px 22px; font-size: .92rem; white-space: nowrap; }
.hero__mini .ic { width: 15px; height: 15px; color: var(--groen-fris); stroke-width: 2.4; }
.chip-review .sterren { color: #F5B301; letter-spacing: 2px; font-size: .9rem; }
.rev-top .sterren { color: #F5B301; letter-spacing: 1px; font-size: .82rem; }

/* ---------- USP-balk ---------- */
.uspbalk { background: var(--groen); color: var(--wit); }
.uspbalk .usp { display: flex; gap: 14px; align-items: center; font-size: .92rem; line-height: 1.45; }
.uspbalk .usp b { display: block; font-family: var(--font-kop); font-size: .95rem; }
.uspbalk .usp small { color: rgba(255,255,255,.72); }
.uspbalk .icoon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--groen-fris); }
.kop-rij .intro { max-width: 58ch; color: var(--tekst-grijs); }
.dienst-tegel .pijl-cirkel {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: var(--wit);
  transition: background .4s, transform .5s var(--ease);
}
.dienst-tegel:hover .pijl-cirkel { background: var(--groen-fris); color: var(--groen-diep); transform: translate(2px, -2px); }
.dienst-tegel .pijl-cirkel .ic { width: 18px; height: 18px; }

/* ---------- abonnement / pakketten ---------- */
.op-donker { background: var(--groen-diep); color: rgba(255,255,255,.85); position: relative; overflow: hidden; }
.op-donker h2, .op-donker h3 { color: var(--wit); }
.op-donker .kop-rij .intro { color: rgba(255,255,255,.72); }
.pakket .vinkjes { margin: 18px 0 28px; font-size: .95rem; flex: 1; }
.pakket .knop { justify-content: center; }

/* ---------- seizoenskalender ---------- */
.seizoenen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.seizoen {
  background: var(--wit); border-radius: var(--blad-klein); padding: 26px;
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.seizoen__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.seizoen__kop .icoon { width: 42px; height: 42px; border-radius: 12px; background: var(--groen-licht); display: grid; place-items: center; color: var(--groen); }
.seizoen h3 { margin: 0; font-size: 1.05rem; }
.seizoen small { color: var(--tekst-grijs); font-size: .8rem; display: block; }
.seizoen ul { list-style: none; margin: 0 0 14px; padding: 0; font-size: .9rem; color: var(--tekst-grijs); display: grid; gap: 6px; }
.seizoen ul li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--groen-fris); margin-right: 9px; vertical-align: 3px; }
.seizoen .nu-label { display: none; }
.seizoen.is-nu { box-shadow: 0 0 0 2px var(--groen-fris), var(--schaduw); transform: translateY(-4px); }
.seizoen.is-nu .nu-label {
  display: inline-block; background: var(--creme); color: var(--groen-diep);
  font-family: var(--font-kop); font-size: .7rem; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; margin-left: auto;
}

/* ---------- stappen ---------- */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: stap; }
.stap { position: relative; padding: 28px 24px 24px; background: var(--wit); border-radius: var(--blad-klein); box-shadow: inset 0 0 0 1px var(--lijn); }
.stap::before {
  counter-increment: stap; content: counter(stap, decimal-leading-zero);
  font-family: var(--font-kop); font-weight: 800; font-size: 2.6rem;
  color: var(--groen-fris); opacity: .45; display: block; line-height: 1; margin-bottom: 14px;
}
.stap h3 { font-size: 1.05rem; }
.stap p { font-size: .92rem; color: var(--tekst-grijs); margin: 0; }

/* ---------- projecten (voor/na) ---------- */
.projecten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project { border-radius: var(--blad-klein); overflow: hidden; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; color: var(--tekst); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.project:hover { transform: translateY(-6px); box-shadow: var(--schaduw); }
.project .tag { position: absolute; top: 12px; left: 12px; background: var(--creme); color: var(--groen-diep); font-family: var(--font-kop); font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.review { background: var(--wit); border-radius: var(--blad-klein); padding: 28px; box-shadow: inset 0 0 0 1px var(--lijn); display: flex; flex-direction: column; gap: 14px; }
.review .sterren { color: #F5B301; letter-spacing: 3px; }
.review blockquote { margin: 0; font-size: .98rem; flex: 1; }
.review .wie { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.review .wie .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--groen-licht); display: grid; place-items: center; font-family: var(--font-kop); font-weight: 700; color: var(--groen); }
.review .wie b { display: block; font-family: var(--font-kop); }
.review .wie small { color: var(--tekst-grijs); }
.google-pill .sterren { color: #F5B301; }
.vac-banner__lijst .ic { width: 16px; height: 16px; color: var(--groen-fris); }
.vac-uren {
  font-family: var(--font-body); font-weight: 700; font-size: .76rem; white-space: nowrap;
  color: var(--groen-fris); background: rgba(124,185,59,.16); border-radius: 999px; padding: 3px 11px;
}
.vacature-kaart__foto .tag { position: absolute; top: 12px; left: 12px; background: var(--creme); color: var(--groen-diep); font-family: var(--font-kop); font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.vacature-kaart .vinkjes { font-size: .92rem; gap: 7px; flex: 1; }
.vacature-kaart .meer { margin-top: 18px; font-family: var(--font-kop); font-weight: 700; font-size: .92rem; color: var(--groen); display: inline-flex; gap: 8px; align-items: center; }
.vacature-kaart .meer .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.vacature-kaart:hover .meer { color: var(--groen-fris); }
.vacature-kaart:hover .meer .ic { transform: translateX(4px); }
.vac-hero .startbonus { display: inline-block; background: var(--wit); color: var(--groen-diep); font-family: var(--font-kop); font-weight: 800; font-size: .95rem; padding: 6px 16px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.vac-hero .vinkjes { margin-top: 8px; }
.solliciteer-kaart .knop { width: 100%; justify-content: center; margin-top: 6px; }
.solliciteer-kaart .of { text-align: center; font-size: .85rem; color: var(--tekst-grijs); margin: 14px 0 0; }
.solliciteer-kaart .of a { font-weight: 700; }

/* ---------- werkgebied ---------- */
.werkgebied { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.plaatsen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.plaats { background: var(--wit); border-radius: 999px; padding: 8px 18px; font-family: var(--font-kop); font-size: .88rem; font-weight: 600; color: var(--groen-diep); box-shadow: inset 0 0 0 1px var(--lijn); text-decoration: none; }
a.plaats:hover { box-shadow: inset 0 0 0 2px var(--groen-fris); }
.plaats--meer { background: var(--groen-licht); }
/* plaats-pill licht op bij hover of gekoppelde kaart-pin */
.plaatsen .plaats[data-plaats] { cursor: pointer; transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.plaatsen .plaats[data-plaats]:hover, .plaatsen .plaats.plaats--hover { box-shadow: inset 0 0 0 2px var(--groen-fris); background: var(--groen-licht); }
.kaart-pin.actief .pin-dot{ fill: var(--groen-fris); r: 6.5; }
.kaart-pin.actief .pin-label{ fill: var(--groen); }
.kaart-pin.actief .pin-ping{ animation: kaart-ping 1.2s ease-out infinite; }
@keyframes kaart-ping { 0% { r: 5; opacity: .55; } 70% { opacity: 0; } 100% { r: 20; opacity: 0; } }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--wit); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--font-kop); font-weight: 600; font-size: .98rem; color: var(--groen-diep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--groen-fris); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--tekst-grijs); font-size: .95rem; }
.cta-kaart .knop { margin-top: 8px; width: 100%; justify-content: center; }
.cta-kaart .of { text-align: center; font-size: .85rem; color: rgba(255,255,255,.6); margin: 12px 0 0; }
.cta-kaart .of a { color: var(--creme); font-weight: 700; }
.eind-cta .knoppen { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- kruimelpad ---------- */
.kruimel { font-size: .84rem; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.kruimel a { color: rgba(255,255,255,.85); text-decoration: none; }
.kruimel a:hover { color: var(--groen-fris); }
.kruimel span::before { content: "/"; margin: 0 8px; color: rgba(255,255,255,.35); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--groen-diep); color: rgba(255,255,255,.75); font-size: .92rem; position: relative; overflow: hidden; }
.footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer a:hover { color: var(--groen-fris); }
.footer h4 { color: var(--wit); font-size: .95rem; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul .ic { width: 16px; height: 16px; margin-right: 8px; color: var(--groen-fris); }
.footer .logo__naam { color: var(--wit); }
.mob-cta a .ic { width: 16px; height: 16px; }
.mob-cta a.primair { background: var(--groen-fris); color: var(--groen-diep); }

.funnel {
  background: var(--wit); border-radius: var(--blad-klein);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--schaduw);
}

.funnel .stap-scherm { display: none; }
.funnel .stap-scherm.actief { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 8px; }
.keuzes--2 { grid-template-columns: repeat(2, 1fr); }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuze label {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 22px 12px; border-radius: 16px;
  background: var(--wit-warm); box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-family: var(--font-kop); font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: box-shadow .3s, transform .3s var(--ease), background .3s;
  height: 100%;
}
.keuze .ic { width: 30px; height: 30px; color: var(--groen); stroke-width: 1.5; }
.keuze small { font-family: var(--font-body); font-weight: 400; color: var(--tekst-grijs); font-size: .8rem; }
.keuze input:checked + label { background: var(--groen-licht); box-shadow: inset 0 0 0 2.5px var(--groen-fris); transform: translateY(-2px); }
.keuze input:focus-visible + label { outline: 3px solid var(--groen-fris); outline-offset: 2px; }

.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld { display: grid; gap: 7px; margin-bottom: 16px; }
.veld label { font-family: var(--font-kop); font-weight: 600; font-size: .88rem; color: var(--groen-diep); }
.veld input, .veld select, .veld textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--tekst);
  padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--lijn);
  background: var(--wit-warm); outline: 0; width: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--groen-fris); box-shadow: 0 0 0 3px rgba(124,185,59,.18); }
.veld small { color: var(--tekst-grijs); font-size: .78rem; }
.veld--akkoord { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.veld--akkoord input { width: 20px; height: 20px; margin-top: 2px; }
.veld--akkoord label { font-weight: 400; font-family: var(--font-body); color: var(--tekst-grijs); }
.funnel__terug { background: none; border: 0; cursor: pointer; font-family: var(--font-kop); font-weight: 600; color: var(--tekst-grijs); font-size: .9rem; padding: 10px 6px; }
.funnel__terug:hover { color: var(--groen); }
.zij-kaart .contactlink { display: flex; align-items: center; gap: 10px; font-family: var(--font-kop); font-weight: 700; text-decoration: none; margin-top: 10px; }
.zij-kaart .contactlink .ic { color: var(--groen-fris); }

.funnel-succes { text-align: center; padding: 30px 10px; }
.funnel-succes .vink-groot {
  width: 74px; height: 74px; border-radius: 50%; background: var(--groen-fris);
  display: grid; place-items: center; margin: 0 auto 22px; color: var(--groen-diep);
}
.funnel-succes .vink-groot .ic { width: 34px; height: 34px; stroke-width: 2.6; }
.contact-info .icoon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: var(--groen-licht); display: grid; place-items: center; color: var(--groen); }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  /* Header past niet meer op één rij (nav + acties) → hamburger + mobiele CTA-balk.
     Voorkomt horizontale overflow die de review-chip buiten beeld duwde. */
  .nav, .top__acties { display: none; }
  .hamburger { display: block; }
  .nav.open {
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wit-warm); border-bottom: 1px solid var(--lijn);
    padding: 18px 24px 24px;
  }
  .nav.open a { padding: 12px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--lijn); }
  .mob-cta { display: flex; }
  /* Review-chip in de hero-flow i.p.v. absoluut, zodat hij niet buiten beeld valt.
     position:relative + z-index houdt hem bóven de hero-achtergrond (die z-index:0 heeft). */
  .hero__in { padding-bottom: 0; }
  .chip-review {
    position: relative; z-index: 1; inset: auto;
    display: inline-flex; margin: 22px 0 clamp(40px, 8vw, 72px);
  }

  .diensten-raster, .projecten, .reviews, .vacatures-raster { grid-template-columns: repeat(2, 1fr); }
  .seizoenen, .stappen, .uspbalk__in { grid-template-columns: repeat(2, 1fr); }
  .pakketten { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .pakket--top { order: -1; }
  .funnel-wrap, .vac-inhoud { grid-template-columns: 1fr; }
  .funnel-zij { position: static; grid-template-columns: 1fr 1fr; }
  .solliciteer-kaart { position: static; }
  .footer__in { grid-template-columns: 1fr 1fr; }
  .vac-banner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero { min-height: 0; }
  .werkgebied{ grid-template-columns: 1fr; }
  .snelstart { flex-direction: column; border-radius: 20px; padding: 14px; }
  .snelstart input { width: 100%; text-align: center; padding: 12px; }
  .snelstart .knop { width: 100%; justify-content: center; }
  .keuzes, .keuzes--2, .veldrij { grid-template-columns: 1fr; } .projecten, .seizoenen, .stappen{ grid-template-columns: 1fr; }
  .sectie { padding: 68px 0; }
}

/* ============================================================
   SNELSTART-POPUP (mini-funnel)
   ============================================================ */
.popup { position: fixed; inset: 0; z-index: 200; display: none; }
.popup.open { display: block; }

.popup__overlay {
  position: absolute; inset: 0;
  background: rgba(23, 29, 20, .55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.popup.open .popup__overlay { opacity: 1; }

.popup__paneel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(560px, calc(100% - 28px));
  max-height: calc(100dvh - 36px); overflow: auto;
  background: var(--wit); border-radius: 24px;
  box-shadow: 0 40px 90px -34px rgba(23, 29, 20, .55);
  opacity: 0; transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.popup.open .popup__paneel { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.popup__x {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--wit-warm); color: var(--tekst-grijs);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s var(--ease);
}
.popup__x:hover { background: var(--groen-licht); color: var(--groen-diep); transform: rotate(90deg); }

.popup__balk { height: 5px; background: var(--groen-licht); }
.popup__balk i {
  display: block; height: 100%; width: 33%;
  background: var(--groen-fris); transition: width .5s var(--ease);
}

.popup__body { padding: 30px 34px 6px; }
.popup__mini { font-family: var(--font-kop); font-weight: 600; font-size: .78rem; color: var(--groen); }
.popup__body h2 { font-size: 1.5rem; margin: 8px 0 6px; }
.popup__sub { color: var(--tekst-grijs); margin: 0 0 20px; font-size: .95rem; }

.popup-stap { display: none; }
.popup-stap.actief { display: block; animation: popup-in .4s var(--ease); }
@keyframes popup-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.popup-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.popup-keuze {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 15px 16px; border-radius: 14px; cursor: pointer;
  background: var(--wit-warm); border: 0; box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-family: var(--font-kop); font-weight: 600; font-size: .96rem; color: var(--groen-diep);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), background .24s ease;
}
.popup-keuze .ic { width: 22px; height: 22px; color: var(--groen); flex: 0 0 auto; }
.popup-keuze span { display: flex; flex-direction: column; line-height: 1.25; }
.popup-keuze small { font-family: var(--font-body); font-weight: 400; color: var(--tekst-grijs); font-size: .78rem; }
.popup-keuze:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--groen-fris); background: var(--groen-licht); }
.popup-keuze.gekozen { box-shadow: inset 0 0 0 2.5px var(--groen-fris); background: var(--groen-licht); }
.popup-keuze:focus-visible { outline: 3px solid var(--groen-fris); outline-offset: 2px; }
.popup-keuze--mid { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 10px; }
.popup-keuze--mid span { align-items: center; }

.popup__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 34px 30px; }
.popup__terug { background: none; border: 0; cursor: pointer; font-family: var(--font-kop); font-weight: 600; color: var(--tekst-grijs); font-size: .9rem; padding: 10px 6px; transition: color .22s ease; }
.popup__terug:hover { color: var(--groen); }
.popup__nav .knop { flex: 1; justify-content: center; }

@media (max-width: 560px) {
  .popup__body { padding: 26px 20px 4px; }
  .popup__nav { padding: 4px 20px 24px; }
  .popup-raster { grid-template-columns: 1fr 1fr; gap: 10px; }
  .popup-keuze { padding: 14px 12px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .popup__overlay, .popup__paneel, .popup-stap.actief, .popup__balk i { transition: none; animation: none; }
}


/* ====== Elementor compatibiliteit (Parkstad build) ====== */
.elementor .wrap { width: min(1220px, 100% - 48px); margin-inline: auto; }
.elementor-section.elementor-section-stretched { }
.elementor-widget-html, .elementor-widget-html .elementor-widget-container { line-height: inherit; }
.e-con, .e-con-inner { --container-max-width: none; }
/* zorg dat volledige secties niet ingeperkt worden */
.pt-sectie > .elementor-container, .pt-sectie > .e-con-inner { max-width: none; width: 100%; padding: 0; }
/* Logo (inline SVG of img): sizing herstellen tegen Elementor-resets */
.elementor .logo__img { height: 52px; width: auto; max-width: none; display: block; }
.elementor .footer .logo__img { height: 58px; }
@media (max-width: 768px) { .elementor .logo__img { height: 44px; } }
/* SVG-logo kleuren; grijze tekst licht in de donkere footer */
.ptlogo-groen { fill: #93c33f; }
.ptlogo-grijs { fill: #606164; }
.footer .ptlogo-grijs { fill: #FAFAF6; }
/* HTML-widget containers: geen extra marges/inperking */
.pt-sectie .elementor-widget-html .elementor-widget-container { margin: 0; }
.elementor-widget-html { line-height: 1.7; }
/* knoppen: native button-chrome UIT -> voorkomt dat macOS/OS de :active/geselecteerde
   status met de systeem-accentkleur (bijv. roze) tint. Plus accent op groen forceren. */
:root { accent-color: #7CB93B; }
.elementor .knop,
.elementor .popup-keuze,
.elementor .keuze label,
.elementor .popup__x,
.elementor .popup__terug,
.elementor .funnel__terug,
.elementor .snelstart button {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.elementor .popup__terug, .elementor .funnel__terug { background: transparent !important; }
/* popup-paneel: scrollbar volledig verbergen (scroll blijft werken) zodat hij nooit rechts
   ruimte inneemt -> links/rechts altijd symmetrisch, ook op Safari */
.popup__paneel { scrollbar-width: none; -ms-overflow-style: none; }
.popup__paneel::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* mobiel: popup-keuzes onder elkaar (1 kolom) i.p.v. overlopende 2 kolommen */
@media (max-width: 560px) {
  .popup-raster, .popup-raster--3 { grid-template-columns: 1fr !important; }
}
/* mobiel: kaartenrijen met een inline grid-template (bv. de Zakelijk-kaarten repeat(3,1fr))
   toch responsive laten stapelen -> !important verslaat de inline-stijl */
@media (max-width: 1020px) { .stappen[style], .pakketten[style] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) { .stappen[style], .seizoenen[style] { grid-template-columns: 1fr !important; } }
.elementor .knop--donker { background: var(--groen); color: var(--wit); }
.elementor .knop--donker:hover { background: var(--groen-diep); }
.elementor .knop--primair { background: var(--groen-fris); color: var(--groen-diep); }
/* geselecteerde/actieve popup- en funnel-keuzes: altijd het groene design, nooit OS-accent */
.elementor .popup-keuze:hover { background-color: var(--groen-licht) !important; }
.elementor .popup-keuze:active,
.elementor .popup-keuze:focus,
.elementor .popup-keuze.gekozen {
  background-color: var(--groen-licht) !important; color: var(--groen-diep);
  box-shadow: inset 0 0 0 2.5px var(--groen-fris);
}
.elementor .keuze input:checked + label { background-color: var(--groen-licht) !important; }
/* geen dubbele offset-outline op keuzes; de strakke inset-rand is de indicator */
.elementor .popup-keuze:focus, .elementor .popup-keuze:focus-visible,
.elementor .keuze input:focus-visible + label,
.elementor .keuze label:focus-visible { outline: none !important; }
.elementor .keuze input:focus-visible + label { box-shadow: inset 0 0 0 2.5px var(--groen-fris) !important; }
/* tekstkleuren afdwingen tegen reset.css button{color:#CC3366} en button:hover/:focus{color:#fff} */
.elementor .popup-keuze, .elementor .popup-keuze *,
.elementor .popup-keuze:hover, .elementor .popup-keuze:hover *,
.elementor .popup-keuze:focus, .elementor .popup-keuze:focus *,
.elementor .popup-keuze:active, .elementor .popup-keuze:active *,
.elementor .popup-keuze.gekozen, .elementor .popup-keuze.gekozen * { color: var(--groen-diep) !important; }
.elementor .popup-keuze small, .elementor .popup-keuze:hover small { color: var(--tekst-grijs) !important; }
.elementor .popup-keuze .ic, .elementor .popup-keuze:hover .ic { color: var(--groen) !important; }
/* algemene neutralisatie van reset.css button:hover/:focus{color:#fff} op design-knoppen */
.elementor .knop:hover, .elementor .knop:focus { color: inherit; }
.elementor .knop--donker:hover, .elementor .knop--donker:focus { color: var(--wit) !important; }
.elementor .popup__terug, .elementor .funnel__terug { background: transparent !important; }
.elementor .popup__terug:hover, .elementor .funnel__terug:hover { color: var(--groen) !important; }
.werkgebied-osm .wrap { position: relative; z-index: 2; width: min(1220px, 100% - 48px); margin-inline: auto; }
.pt-osm-label { background: rgba(255,255,255,.92) !important; border: 0 !important; box-shadow: 0 2px 6px rgba(42,55,29,.15) !important;
  font-family: var(--font-kop); font-weight: 700; font-size: 12px; color: var(--groen-diep) !important; padding: 1px 8px !important; border-radius: 8px; white-space: nowrap; }
.pt-osm-label::before { display: none !important; }
/* mobiel: kaart-labels verbergen (ze overlappen op de kleine kaart; de pills tonen de plaatsen) */
@media (max-width: 860px) { .werkgebied-osm .pt-osm-label { display: none !important; } }
@media (min-width: 861px) {
  .werkgebied-osm .wrap { padding: clamp(60px, 7vw, 100px) 0; }
}
@media (max-width: 860px) {
  .werkgebied-osm .wrap { padding-bottom: clamp(48px, 8vw, 72px); }
}
.elementor .keuze label { color: var(--tekst) !important; }
.elementor .keuze small { color: var(--tekst-grijs) !important; }
.elementor .knop--donker { color: var(--wit) !important; }
.elementor .knop--primair, .elementor .knop--ghost, .elementor .knop--wit { color: var(--groen-diep) !important; }
.elementor .popup__terug, .elementor .funnel__terug, .elementor .popup__x { color: var(--tekst-grijs) !important; }
/* soepelere hover: schaduw mee laten animeren (de reveal-transitie overschreef de kaart-transitie) */
.elementor .reveal { transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); } .elementor .project, .elementor .seizoen, .elementor .review { will-change: transform; }
/* teller-bolletje ook in de footer (design scope't .vac-teller alleen in .nav) */
.footer .vac-teller {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px;
  background: var(--groen-fris); color: var(--groen-diep);
  border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1;
  font-family: var(--font-kop); vertical-align: middle;
}


/* Fix (jul 2026): offerte-popup — gelijke padding links/rechts.
   Hello-thema reset.css zet white-space:nowrap op <button>, waardoor de
   keuze-labels niet wrappen en de grid het paneel uit drukt. */
.elementor .popup-keuze { white-space: normal; }
.popup-raster { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }


/* ===PT-WIDGET-LAAG-START=== */

/* --- contact-offerte.css --- */
/* ============================================================
   Contact (48) + Offerte (50)

   Bijna alle opmaak staat nu als ECHTE widget-instelling in
   build/pages/contact.py en build/pages/offerte.py: kleuren en
   typografie van koppen, tekst, icon-box en icon-list, de breedte
   van de wrap, de witte formulierkaart, de plakkende zijkolom en
   het complete formulier (veldkleur, veldrand, radius, labels,
   knop en de stappenbalk).

   Hieronder staat alleen nog wat Elementor niet als instelling
   kent: ::before / ::after, ::placeholder, :focus op een veld,
   het gedrag van een aangevinkte keuzetegel, en de opmaak van
   HTML die uit een formulierveld komt.
   ============================================================ */

/* ---------- kader ----------
   Boxed-containers zijn sitebreed uitgezet (de kit zet
   --container-max-width op none). De breedte zelf is een
   container-instelling; dit houdt de wrap gecentreerd en
   zonder binnenmarge. */
.pt-wrap.pt-wrap.e-con { max-width: none; margin-inline: auto; padding: 0; }

/* ---------- contactregel ----------
   De omschrijving is HTML in het icon-box-widget; de link en de
   bijregel daarbinnen kunnen dus geen widget-instelling zijn. */
.pt-contactregel.pt-contactregel .elementor-icon-box-description a {
  color: var(--tekst); text-decoration: none; font-weight: 700;
}
.pt-contactregel.pt-contactregel .elementor-icon-box-description a:hover { color: var(--groen); }
.pt-contactregel.pt-contactregel .elementor-icon-box-description small {
  display: block; color: var(--tekst-grijs); font-size: .8rem;
}

/* ---------- formulier ---------- */
/* tekstvak: minimale hoogte, alleen verticaal schaalbaar */
.pt-form.pt-form textarea.elementor-field-textual { min-height: 120px; resize: vertical; }
.pt-form.pt-form .elementor-field-textual::placeholder { color: #9AA394; }

/* groene rand + gloed zodra je in een veld staat. Het form-widget heeft
   wel een randkleur maar geen focus-kleur, en die instelling zou de
   focus-rand van de kit overschrijven. Vandaar deze extra regel. */
.elementor-page-48 .pt-form.pt-form .elementor-field-group .elementor-field.elementor-field-textual:focus,
.elementor-page-50 .pt-form.pt-form .elementor-field-group .elementor-field.elementor-field-textual:focus {
  border-color: var(--groen-fris); box-shadow: 0 0 0 3px rgba(124,185,59,.18); outline: 0;
}

/* akkoord-vinkje: eigen vakje, en een eigen labelkleur. Het form-widget
   kent maar één labelkleur en die is voor de veldlabels; dit label moet
   grijs en in de bodytekst blijven. */
.pt-form.pt-form .elementor-field-type-acceptance .elementor-field-subgroup,
.pt-form.pt-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex; align-items: flex-start; gap: 10px;
}
.pt-form.pt-form .elementor-field-type-acceptance input[type="checkbox"] {
  width: 19px; height: 19px; margin: 2px 0 0; flex: 0 0 auto;
  accent-color: var(--groen-fris); opacity: 1; position: static;
}
.elementor-page-48 .pt-form.pt-form .elementor-field-type-acceptance .elementor-field-option label,
.elementor-page-50 .pt-form.pt-form .elementor-field-type-acceptance .elementor-field-option label {
  margin: 0; font-family: var(--font-body); font-weight: 400;
  font-size: .88rem; color: var(--tekst-grijs);
}

/* knoppen: het liftje bij hover en de slagschaduw kent het form-widget niet */
.elementor-page-48 .pt-form.pt-form .elementor-button,
.elementor-page-50 .pt-form.pt-form .elementor-button {
  border: 0; cursor: pointer; text-shadow: none;
  transition: transform .28s var(--ease), background .22s ease;
}
.elementor-page-50 .pt-form.pt-form .e-form__buttons__wrapper__button-next {
  display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 20px -14px rgba(42,55,29,.45);
}
.elementor-page-50 .pt-form.pt-form .e-form__buttons__wrapper__button-next:hover {
  transform: translateY(-2px);
}
/* de knop "Vorige" is een tekstknop; het form-widget stuurt alleen zijn
   tekstkleur aan, de rest (geen vlak, eigen padding) blijft CSS */
.elementor-page-50 .pt-form.pt-form .elementor-button.e-form__buttons__wrapper__button-previous {
  background-color: transparent; box-shadow: none;
  padding: 12px 6px; font-weight: 600;
}
.elementor-page-50 .pt-form.pt-form .elementor-button.e-form__buttons__wrapper__button-previous:hover {
  background-color: transparent; color: var(--groen);
}
/* pijltjes op de stap-knoppen (die hebben geen icoon-optie) */
.elementor-page-50 .pt-form.pt-form .e-form__buttons__wrapper__button-next::after {
  content: "\2192"; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(42,55,29,.14); font-size: .95rem; line-height: 1;
}
.elementor-page-50 .pt-form.pt-form .e-form__buttons__wrapper__button-previous::before {
  content: "\2190"; margin-right: 8px; font-size: .95rem;
}
/* het rondje om het pijl-icoon van de verzendknop */
.pt-form.pt-form .elementor-button[type="submit"] .elementor-button-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(42,55,29,.14); display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem; margin: 0;
}
.pt-form.pt-form .elementor-button[type="submit"] .elementor-button-icon svg {
  width: 14px; height: 14px; fill: currentColor;
}
.pt-form.pt-form .e-form__buttons { margin-top: 14px; }
.pt-form.pt-form .e-form__buttons__wrapper { display: flex; gap: 14px; align-items: center; }

/* het vlak achter de gelukt-melding */
.pt-form.pt-form .elementor-message.elementor-message-success {
  background: var(--groen-licht); border-radius: 12px; padding: 16px 20px; font-weight: 600;
}

/* ---------- keuze-tegels (radio / checkbox velden) ----------
   Elementor zet de veld-CSS-klasse op .elementor-field-subgroup. Een
   raster van klikbare tegels met een aangevinkte staat is geen
   widget-instelling, dus dit blijft CSS. */
.elementor-field-subgroup.pt-keuzes.pt-keuzes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 4px;
}
.elementor-field-subgroup.pt-keuzes--2.pt-keuzes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option {
  position: relative; display: block; margin: 0; padding: 0; width: auto;
}
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option input[type="checkbox"],
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option input[type="radio"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; margin: 0; z-index: 1;
}
.elementor-page-50 .pt-form.pt-form .elementor-field-subgroup.pt-keuzes .elementor-field-option label,
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; margin: 0; padding: 20px 12px; border-radius: 16px;
  background: var(--wit-warm); box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-family: var(--font-kop); font-weight: 600; font-size: .9rem; line-height: 1.35;
  color: var(--groen-diep); cursor: pointer;
  transition: box-shadow .3s, transform .3s var(--ease), background .3s;
}
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option input:checked + label {
  background: var(--groen-licht); box-shadow: inset 0 0 0 2.5px var(--groen-fris);
  transform: translateY(-2px);
}
.elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option input:focus-visible + label {
  outline: 3px solid var(--groen-fris); outline-offset: 2px;
}
@media (max-width: 767px) {
  .elementor-field-subgroup.pt-keuzes.pt-keuzes,
  .elementor-field-subgroup.pt-keuzes--2.pt-keuzes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor-field-subgroup.pt-keuzes.pt-keuzes .elementor-field-option label { padding: 16px 8px; font-size: .84rem; }
}

/* ---------- tussenkop binnen een formulier (html-veld) ----------
   Dit is losse HTML in een veld, dus geen widget met eigen instellingen. */
.pt-form.pt-form .elementor-field-type-html { padding-top: 4px; }
.pt-form.pt-form .pt-stapkop { margin: 6px 0 2px; }
.pt-form.pt-form .pt-stapkop h2 {
  font-family: var(--font-kop); font-size: 1.5rem; font-weight: 800;
  color: var(--groen-diep); margin: 0 0 6px; line-height: 1.25;
}
.pt-form.pt-form .pt-stapkop p { color: var(--tekst-grijs); margin: 0; font-size: .95rem; }

/* ---------- meerstaps-formulier ----------
   Kleuren en typografie van de stappen staan in het widget. Alleen de
   ruimte onder de balk en de kleur van het streepje ertussen niet:
   daar heeft Elementor geen instelling voor. */
.pt-form.pt-form .e-form__indicators { margin-bottom: 28px; }
.pt-form.pt-form .e-form__indicators__indicator__separator { background-color: var(--lijn); }
/* Elementor kleurt het woordje onder een stap mee met de stapkleur. Hier
   blijft dat woordje altijd grijs, ook bij de stap waar je nu staat. */
.elementor-page-50 .pt-form.pt-form .e-form__indicators__indicator__label { color: var(--tekst-grijs); }
/* Het randje om een stapcijfer volgt bij Elementor de cijferkleur. Bij ons is
   het cijfer donkergroen en het randje fris groen (net zo groen als het vlak,
   dus je ziet het niet). Dat kan niet als instelling. */
.elementor-page-50 .pt-form.pt-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
  color: var(--groen-diep);
}
.elementor-page-50 .pt-form.pt-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number,
.elementor-page-50 .pt-form.pt-form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
  border-color: var(--groen-fris);
}

/* ---------- sticky zijkolom ----------
   Het plakken zelf is een container-instelling; alleen het uitzetten
   op tablet en mobiel kan Elementor niet responsive regelen. */
@media (max-width: 1024px) {
  .pt-zijkolom.pt-zijkolom.e-con { position: static; }
}

/* ---------- contactlinks in de zijkolom ----------
   Icoonkleur en teksttypografie staan in het widget; de maatvoering
   van het icoonvlakje niet. */
.pt-contactlink.pt-contactlink .elementor-icon-list-item { align-items: center; }
.pt-contactlink.pt-contactlink .elementor-icon-list-item a { gap: 10px; align-items: center; }
.pt-contactlink.pt-contactlink .elementor-icon-list-icon { width: 22px; height: 22px; background: none; margin-top: 0; }
.pt-contactlink.pt-contactlink .elementor-icon-list-icon svg { width: 19px; height: 19px; }
.pt-contactlink.pt-contactlink .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--groen); }

/* de naam in de regel onder de review staat als <b> in de tekst */
.pt-wieregel.pt-wieregel b { font-family: var(--font-kop); color: var(--groen-diep); }


/* --- diensten.css --- */
/* ============================================================
   DIENSTEN - pagina 44 (/diensten/) + single template CPT dienst
   Alle klassen met prefix .dns- zodat er niets van andere
   pagina's geraakt wordt. Aanvulling op pt-widgets.css.

   Kleuren, typografie, padding, marges, gaps, flex-richting,
   grid-kolommen, afbeeldingsradius/-schaduw en de sticky-positie
   staan als ECHTE widget-/container-instelling in
   build/pages/diensten.py en build/templates/dienst_single.py.
   Hieronder staat alleen nog wat Elementor niet heeft:
     - ::before / ::after (kruimelpad-scheiding, vinkjes en
       01/02/03-cirkels in de post-inhoud)
     - marges op .elementor-heading-title en op losse <p>'s in
       een text-editor
     - de opmaak binnen theme-post-content (post-inhoud)
     - max-width in ch/px, aspect-ratio en object-fit
     - grid met ONgelijke kolommen (1.15fr .85fr) en clamp()-waarden
     - het terugzetten van sticky op mobiel
   ============================================================ */

/* ---------- kader ----------
   `min()` + `margin-inline: auto` past niet in de breedte-control. */
.dns-wrap.e-con {
  width: min(1220px, 100% - 48px);
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

/* ---------- sectieritme (clamp) ---------- */
.dns-sectie.e-con { padding: clamp(72px, 8vw, 120px) 0; }
.dns-paghero.e-con { padding: clamp(56px, 7vw, 100px) 0; }

/* ---------- 1. paginahero ---------- */
.dns-kruimel p { margin: 0; }
.dns-kruimel span::before { content: "/"; margin: 0 8px; color: rgba(255,255,255,.35); }

/* ---------- kop-rij boven het tegelraster ---------- */
.dns-koprij.e-con { margin-bottom: clamp(28px, 3.5vw, 46px); }
.dns-koprij .pt-kop-groot.pt-kop-groot .elementor-heading-title { margin: 0; }

/* ---------- 2. beeldtegel-raster (loop-grid) ---------- */
.dns-tegels .elementor-loop-container { align-items: stretch; }
.dns-tegels .e-loop-item > .e-con,
.dns-tegels .e-loop-item { height: 100%; }

/* ---------- 3. dienstblokken (2 koloms, afwisselend) ---------- */
.dns-blok-sectie { scroll-margin-top: 96px; }
/* alleen naast elkaar gelijke kolommen: `flex: 1 1 0` (flex-basis 0)
   kent Elementor niet, en de knik zit op 1025px, niet op de
   Elementor-breakpoint. */
@media (min-width: 1025px) {
  .dns-blok > .e-con { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1024px) {
  .dns-blok > .e-con { width: 100%; }
}
.dns-blok .dns-tekst .elementor-widget-heading:not(.pt-schrift.pt-schrift) .elementor-heading-title {
  margin: 0 0 .45em;
}
.dns-blok .dns-tekst .dns-blok-tekst p { margin: 0; }

.dns-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .dns-foto img { aspect-ratio: 16 / 10; }
}

/* ---------- 4. eind-CTA ---------- */
/* de container centreert zijn kinderen (align-items: center); de
   widgets moeten toch de volle breedte houden zodat de gecentreerde
   tekst over meerdere regels klopt. */
.dns-eindcta > .elementor-widget { width: 100%; }
.dns-eindcta .elementor-heading-title { margin: 0 0 8px; }

/* ============================================================
   SINGLE TEMPLATE  /dienst/<slug>/
   ============================================================ */
.dns-shero.e-con { padding: clamp(88px, 10vw, 150px) 0; position: relative; }
.dns-sherotxt.e-con { max-width: 780px; }
.dns-sherotxt .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 12px; }

/* twee kolommen: inhoud + sticky CTA-kaart (ongelijke verhouding) */
.dns-twee.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.dns-twee > .e-con { min-width: 0; }

/* ---------- post-inhoud (theme-post-content) ----------
   Dit is de inhoud van de CPT zelf; Elementor heeft daar geen
   widget-instellingen voor, dus dit blijft CSS. */
.dns-inhoud.e-con { max-width: 72ch; }
.dns-inhoud .elementor-widget-theme-post-content { color: var(--tekst-grijs); font-size: 1.02rem; }
.dns-inhoud h2, .dns-inhoud h3 {
  font-family: var(--font-kop); color: var(--groen-diep);
  font-size: 1.5rem; line-height: 1.3; margin: 1.6em 0 .5em;
}
.dns-inhoud p { margin: 0 0 1em; }
.dns-inhoud ul {
  list-style: none; margin: 0 0 1.4em; padding: 0;
  display: grid; gap: 10px;
}
.dns-inhoud ul li {
  position: relative; padding-left: 34px; color: var(--tekst-grijs);
}
.dns-inhoud ul li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--groen-fris);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/22px no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/22px no-repeat;
}
.dns-inhoud ul li::after {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--groen-diep);
  border-bottom: 2px solid var(--groen-diep);
  transform: rotate(-45deg);
}
.dns-inhoud a { color: var(--groen); }
.dns-inhoud h3 {
  font-size: 1.12rem;
  margin: 1.5em 0 .35em;
}
.dns-inhoud p strong,
.dns-inhoud li strong { color: var(--groen-diep); }

/* genummerde werkwijze (01, 02, 03 ...): counter + ::before */
.dns-inhoud ol {
  list-style: none;
  counter-reset: dns-stap;
  margin: 0 0 1.5em; padding: 0;
  display: grid; gap: 12px;
}
.dns-inhoud ol li {
  position: relative;
  counter-increment: dns-stap;
  padding-left: 46px;
  color: var(--tekst-grijs);
  min-height: 30px;
}
.dns-inhoud ol li::before {
  content: counter(dns-stap, decimal-leading-zero);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--groen-licht); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 700; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
}

/* pluspunten-lijst in de post-content (groene vinkjes) */
.dns-inhoud .pt-contentvink.pt-contentvink { margin: 1.8em 0 .6em; }

/* ---------- sticky CTA-kaart ---------- */
.dns-cta .dns-cta-kop .elementor-heading-title { margin: 14px 0 .5em; }
.dns-cta .dns-cta-tekst p { margin: 0; }
.dns-cta .dns-of p { margin: 0; }
.dns-cta .dns-of a { color: var(--creme); font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
  .dns-twee.e-con { grid-template-columns: 1fr; }
  .dns-cta.e-con { position: static; }
}

/* FAQ-toggle onder de post-content */
.dns-faq.elementor-widget { max-width: 880px; }

/* recente projecten */
.dns-projecten .elementor-loop-container { align-items: stretch; }
.dns-projecten .e-loop-item > .e-con,
.dns-projecten .e-loop-item { height: 100%; }

/* De USP-balk klapte van oudsher pas op 720px naar één kolom; de
   Elementor-mobielbreakpoint ligt op 767px. Alleen die band zetten we
   terug zodat 721-767px er precies hetzelfde uitziet als voorheen. */
@media (min-width: 721px) and (max-width: 767px) {
  .dns-uspbalk.e-con { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* werkgebied: plaats-pillen */
.dns-plaatsen.e-con { padding: clamp(48px, 6vw, 78px) 0; }
.dns-plaatsint p { margin: 0; color: var(--tekst-grijs); max-width: 62ch; }


/* --- home.css --- */

/* ============================================================
   HOMEPAGE — layout 1-op-1 gelijk aan de originele HTML-build
   ============================================================ */

/* ---------- rij-hulpklasse: kinderen niet standaard 100% breed ---------- */
.pt-rij.pt-rij > * { width: auto; flex: 0 1 auto; }
.pt-rij.pt-rij > .pt-groei { flex: 1 1 auto; min-width: 0; }

/* ---------- rasters (waren CSS-grids in het origineel) ---------- */
.pt-raster.pt-raster { display: grid; }
.pt-raster.pt-raster > * { width: auto; max-width: none; }
.pt-raster--usp.pt-raster--usp       { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pt-raster--seizoenen.pt-raster--seizoenen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pt-raster--stappen.pt-raster--stappen   { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pt-raster--3.pt-raster--3         { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ---------- kop-rij ---------- */
.pt-koprij.pt-koprij { display: flex; flex-direction: row; flex-wrap: nowrap;
             align-items: flex-end; justify-content: space-between;
             gap: 30px; margin-bottom: clamp(38px, 4.5vw, 60px); }
.pt-koprij.pt-koprij > * { width: auto; }

/* ---------- hero ---------- */
.pt-hero.pt-hero { min-height: min(86vh, 820px); }
.pt-hero.pt-hero > .e-con-boxed > .e-con-inner { padding-block: 0; }
.pt-hero-in.pt-hero-in { position: relative; z-index: 1; max-width: 640px;
              padding-block: clamp(80px, 10vw, 140px); }
.pt-hero.pt-hero::after {
  content: ""; position: absolute; right: -120px; top: -160px;
  width: 620px; height: 620px; opacity: .08; pointer-events: none; z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5C20 25 12 55 30 80c8 11 20 15 20 15s12-4 20-15C88 55 80 25 50 5z" fill="white"/><path d="M50 18v70" stroke="white" stroke-width="2"/></svg>') no-repeat center/contain;
  transform: rotate(24deg);
}
.pt-hero-h1.pt-hero-h1 .elementor-heading-title { margin: 20px 0 16px; }
.pt-hero-sub.pt-hero-sub p { margin: 0; }

.pt-snelstart.pt-snelstart { margin-top: 34px; }
.pt-snelstart.pt-snelstart .snelstart { margin-top: 0; }

.pt-hero-mini.pt-hero-mini { margin-top: 20px; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-items { display: flex; gap: 22px; flex-wrap: wrap; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-item { font-size: .86rem; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-item,
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text { color: rgba(255,255,255,.78); }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-icon { width: 15px; height: 15px; background: none; margin-top: 0; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-icon svg { width: 13px; height: 13px; fill: var(--groen-fris); }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text b { color: var(--creme); }

/* social-proof chip rechtsonder in de hero */
.pt-chip.pt-chip {
  position: absolute; width: auto; right: clamp(20px, 5vw, 70px); bottom: clamp(24px, 4vw, 54px);
  z-index: 2; background: var(--wit); border-radius: 16px;
  font-size: .82rem; color: var(--tekst); box-shadow: var(--schaduw); line-height: 1.4;
}
.pt-chip.pt-chip > .e-con { width: auto; flex: 0 0 auto; }
.pt-chip.pt-chip .elementor-widget { width: auto; }
.pt-chip.pt-chip .elementor-star-rating__title { display: none; }
.pt-avatars.pt-avatars { flex: 0 0 auto; }
.pt-avatars.pt-avatars .elementor-widget { margin-left: -10px; width: auto; }
.pt-avatars.pt-avatars .elementor-widget:first-child { margin-left: 0; }
.pt-avatars.pt-avatars .elementor-heading-title {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--wit);
  display: grid; place-items: center; font-family: var(--font-kop); font-weight: 700;
  font-size: .62rem; color: #fff;
}
.pt-avatars.pt-avatars .elementor-widget:nth-child(1) .elementor-heading-title { background: linear-gradient(140deg,#6B9440,#45602B); }
.pt-avatars.pt-avatars .elementor-widget:nth-child(2) .elementor-heading-title { background: linear-gradient(140deg,#8FAF62,#5C7A38); }
.pt-avatars.pt-avatars .elementor-widget:nth-child(3) .elementor-heading-title { background: linear-gradient(140deg,#A3A468,#6A7040); }
.pt-avatars.pt-avatars .elementor-widget:nth-child(4) .elementor-heading-title { background: linear-gradient(140deg,#7CB93B,#4E7A1F); }
.pt-avatars.pt-avatars .elementor-widget:nth-child(5) .elementor-heading-title { background: linear-gradient(140deg,#5C6355,#3A4A28); }
.pt-chip-top.pt-chip-top .elementor-star-rating { font-size: 13px; letter-spacing: 1px; }
.pt-chip-top.pt-chip-top .elementor-heading-title { font-family: var(--font-kop); font-size: .92rem; color: var(--tekst); }
.pt-chip-sub.pt-chip-sub p { font-size: .74rem; color: var(--tekst-grijs); margin: 0; }
.pt-chip-sub.pt-chip-sub b { font-family: var(--font-kop); color: var(--groen); }

/* ---------- diensten-loopgrid ---------- */
.pt-loop--diensten.pt-loop--diensten .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
.pt-loop--projecten.pt-loop--projecten .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }
@media (max-width: 1020px) {
  .pt-loop--diensten.pt-loop--diensten .elementor-grid,
  .pt-loop--projecten.pt-loop--projecten .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .pt-loop--diensten.pt-loop--diensten .elementor-grid,
  .pt-loop--projecten.pt-loop--projecten .elementor-grid { grid-template-columns: 1fr !important; }
}
.pt-diensten-noot.pt-diensten-noot p { margin-top: 22px; color: var(--tekst-grijs); font-size: .95rem; }

/* ---------- vacaturebanner ---------- */
.pt-vacbanner.pt-vacbanner { position: relative; overflow: hidden; }
.pt-vacbanner.pt-vacbanner::after {
  content: ""; position: absolute; right: -80px; bottom: -120px;
  width: 380px; height: 380px; opacity: .08; pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5C20 25 12 55 30 80c8 11 20 15 20 15s12-4 20-15C88 55 80 25 50 5z" fill="white"/></svg>') no-repeat center/contain;
  transform: rotate(20deg);
}
.pt-vacbanner-in.pt-vacbanner-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 30px;
                   position: relative; z-index: 1; }
.pt-vacbanner-in.pt-vacbanner-in > * { width: auto; max-width: none; }
.pt-vacbanner-lijst.pt-vacbanner-lijst .elementor-grid { gap: 10px; }

/* vacature-regel (loop item) op donkergroen */
.pt-vacregel.pt-vacregel { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
               transition: transform .3s var(--ease), background .25s; }
.pt-vacregel.pt-vacregel:hover { background: rgba(255,255,255,.16); transform: translateX(4px); }
.pt-vacregel.pt-vacregel > .e-con { width: auto; flex: 0 0 auto; }
.pt-vacregel.pt-vacregel > .elementor-widget-heading { width: auto; flex: 1 1 auto; min-width: 0; }
.pt-vacregel.pt-vacregel .pt-vacregel-titel .elementor-heading-title {
  font-family: var(--font-kop); font-weight: 600; font-size: .95rem; color: var(--wit); }
.pt-vacregel.pt-vacregel .pt-vacregel-uren .elementor-heading-title {
  font-family: var(--font-body); font-size: .82rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.pt-vacregel.pt-vacregel .pt-vacregel-pijl .elementor-icon { color: var(--groen-fris); }
.pt-vacregel.pt-vacregel .pt-vacregel-pijl svg { fill: var(--groen-fris); }

/* ---------- FAQ + CTA-kaart ---------- */
.pt-faqcta.pt-faqcta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 70px); align-items: start; }
.pt-faqcta.pt-faqcta > * { width: auto; max-width: none; }

/* ---------- werkgebied met kaart ---------- */
.pt-werkgebied.pt-werkgebied { position: relative; overflow: hidden; background: var(--groen-licht); }
.pt-werkgebied.pt-werkgebied > .e-con-inner { padding-block: 0; }
.pt-werkgebied.pt-werkgebied .pt-kaart-canvas { z-index: 0; }
/* het widget om de kaart mag geen positioneringscontext zijn, anders krijgt de kaart 0x0 */
.pt-werkgebied.pt-werkgebied .elementor-widget-html,
.pt-werkgebied.pt-werkgebied .elementor-widget-html .elementor-widget-container,
.pt-werkgebied.pt-werkgebied .elementor-widget-shortcode,
.pt-werkgebied.pt-werkgebied .elementor-widget-shortcode .elementor-widget-container,
.pt-werkgebied.pt-werkgebied .elementor-shortcode { position: static; }
.pt-werkgebied-kaart.pt-werkgebied-kaart {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--blad); box-shadow: var(--schaduw); max-width: 560px;
  padding: clamp(28px, 3.4vw, 46px);
}
.pt-werkgebied.pt-werkgebied .leaflet-container { background: var(--groen-licht) !important; font-family: var(--font-body); }
.pt-werkgebied.pt-werkgebied .leaflet-tile-pane { filter: grayscale(.78) saturate(.5) sepia(.3) hue-rotate(48deg) brightness(1.1) contrast(.82); opacity: .62; }
.pt-werkgebied.pt-werkgebied .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
/* plaats-pillen: flex-wrap zoals .plaatsen */
.pt-plaatsen.pt-plaatsen { margin-top: 20px; }
.pt-plaatsen.pt-plaatsen .elementor-grid { display: flex !important; flex-wrap: wrap; gap: 10px; grid-template-columns: none !important; }
.pt-plaatsen.pt-plaatsen .elementor-grid-item { width: auto; }
@media (min-width: 861px) {
  .pt-werkgebied.pt-werkgebied { min-height: 640px; align-items: center; }
  .pt-werkgebied.pt-werkgebied .pt-kaart-canvas { position: absolute; inset: 0; }
  .pt-werkgebied.pt-werkgebied > .e-con-boxed > .e-con-inner { padding-block: clamp(60px, 7vw, 100px); }
}
@media (max-width: 860px) {
  .pt-werkgebied.pt-werkgebied .pt-kaart-canvas { position: relative; height: 300px; }
  .pt-werkgebied.pt-werkgebied > .e-con-boxed > .e-con-inner { padding-bottom: clamp(48px, 8vw, 72px); }
  .pt-werkgebied-kaart.pt-werkgebied-kaart { max-width: none; margin-top: -80px; }
}


/* ---------- responsive, exact de breakpoints van het origineel ---------- */
@media (max-width: 1020px) {
  .pt-raster--usp.pt-raster--usp, .pt-raster--seizoenen.pt-raster--seizoenen, .pt-raster--stappen.pt-raster--stappen, .pt-raster--3.pt-raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-vacbanner-in.pt-vacbanner-in { grid-template-columns: 1fr; }
  .pt-hero-in.pt-hero-in { padding-bottom: 0; }
  .pt-chip.pt-chip { position: relative; inset: auto; display: inline-flex; align-self: flex-start;
             margin: 22px 48px clamp(40px, 8vw, 72px); z-index: 1; }
}
@media (max-width: 768px) {
  .pt-hero.pt-hero { min-height: 0; }
  .pt-hero-in.pt-hero-in { max-width: none; }
  .pt-raster.pt-raster { grid-template-columns: 1fr !important; }
  .pt-faqcta.pt-faqcta { grid-template-columns: 1fr; }
  .pt-koprij.pt-koprij { flex-direction: column; flex-wrap: wrap; align-items: flex-start; }
  .pt-sectie.pt-sectie > .e-con-inner { padding-block: 68px; }
}


/* --- projecten-locaties.css --- */
/* ============================================================
   PROJECTEN & LOCATIES
   - pagina 46  (/projecten/)                 prefix .prj-
   - single template CPT project              prefix .psg-
   - single template CPT locatie              prefix .loc-
   Aanvulling op pt-widgets.css. Niets hierin raakt andere pagina's.
   ============================================================ */

/* ---------- kruimelpad ----------
   De rij zelf (flex, baseline, marges) staat in de bouwscripts. Hier blijft
   alleen wat Elementor niet kan: de marge van de <p> binnen het tekstwidget
   en de "/"-scheiders, die uit ::before komen. */
.psg-kruimel .pt-kruimel.pt-kruimel p,
.loc-kruimel .pt-kruimel.pt-kruimel p { margin: 0; }
.psg-kruimel .pt-kruimel.pt-kruimel span::before,
.loc-kruimel .pt-kruimel.pt-kruimel span::before {
  content: "/"; margin: 0 8px; color: rgba(255, 255, 255, .35);
}
.psg-kruimel-nu .elementor-heading-title::before,
.loc-kruimel-nu .elementor-heading-title::before {
  content: "/"; margin: 0 8px; color: rgba(255, 255, 255, .35);
}

/* Elementor kent geen max-width-control voor containers; de kolombreedte
   van de koprij blijft daarom CSS. */
.loc-koprij-l.e-con { max-width: 62ch; }

/* ============================================================
   A. PAGINA 46: /projecten/
   ============================================================ */
.prj-hero .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 10px; }
/* de <p> in het tekstwidget: Elementor kan alleen het widget zelf stylen, en
   .pt-intro heeft een max-width in ch die met die fontgrootte meeschaalt */
.prj-heroint p { margin: 0; font-size: 1.08rem; }

/* plaatspillen uit loop-item 238: dat sjabloon is gedeeld met de homepage,
   daarom passen we de pil hier per pagina aan in plaats van in het sjabloon */
.loc-pillen .pt-plaats.pt-plaats .elementor-button {
  display: block; width: 100%; text-align: center;
  padding: 9px 10px; font-size: .84rem;
}
.loc-pillen .e-loop-item > .e-con { padding: 0; }

/* eind-CTA: de marge van de kop en van de <p> in het tekstwidget kan
   Elementor niet als instelling, de rest staat in de bouwscripts. */
.psg-cta .elementor-heading-title,
.loc-cta .elementor-heading-title { margin: 0 0 .4em; }
.prj-cta .pt-intro.pt-intro p,
.psg-cta .pt-intro.pt-intro p,
.loc-cta .pt-intro.pt-intro p { margin: 0; }

/* ============================================================
   B. SINGLE: CPT project
   ============================================================ */
/* icoon van de terugknop: de cirkel van .pt-knop uitzetten en het pijltje
   kleiner maken kan Elementor niet als widget-instelling */
.psg-terug .elementor-button-icon { width: auto; height: auto; background: none; }
.psg-terug .elementor-button-icon svg { width: 13px; height: 13px; }
.psg-hero .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 10px; }
.psg-heroint p { margin: 0; font-size: 1.08rem; }

/* featured image: de beeldverhouding heeft Elementor niet als instelling */
.psg-foto img { display: block; aspect-ratio: 16 / 9; }

/* tekstkolom: de opmaak van de post-inhoud (theme-post-content) blijft CSS */
.psg-tekst .elementor-widget-theme-post-content h2 {
  font-family: var(--font-kop); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--groen-diep); margin: 1.6em 0 .5em; line-height: 1.3;
}
.psg-tekst .elementor-widget-theme-post-content > .elementor-widget-container > *:first-child { margin-top: 0; }
.psg-tekst .elementor-widget-theme-post-content p {
  color: var(--tekst-grijs); font-size: 1.05rem; line-height: 1.75; margin: 0 0 1.05em;
}
.psg-tekst .elementor-widget-theme-post-content a { color: var(--groen); font-weight: 700; }

/* ---------- vinkjeslijst binnen post-content (ul.pt-contentvink) ---------- */
.pt-contentvink.pt-contentvink { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 10px; }
.pt-contentvink.pt-contentvink li {
  position: relative; padding-left: 34px;
  color: var(--tekst-grijs); font-size: 1rem; line-height: 1.6;
}
.pt-contentvink.pt-contentvink li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%; background: var(--groen-fris);
}
.pt-contentvink.pt-contentvink li::after {
  content: ""; position: absolute; left: 7px; top: .48em;
  width: 8px; height: 4px; border-left: 2px solid var(--groen-diep);
  border-bottom: 2px solid var(--groen-diep); transform: rotate(-45deg);
}

/* ============================================================
   C. SINGLE: CPT locatie
   ============================================================ */
.loc-badge-bol .elementor-heading-title::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--groen-fris); margin-right: 7px; vertical-align: 1px;
}
.loc-hero .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 10px; }
.loc-heroint p { margin: 0; font-size: 1.08rem; }

/* 2-koloms: post-content + sticky CTA.
   Ongelijke kolomverhouding: geen gelijke fr-kolommen, dus geen grid-control. */
.loc-twee.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.loc-twee > .e-con { min-width: 0; }
.loc-seo .elementor-widget-theme-post-content h2 {
  font-family: var(--font-kop); font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  color: var(--groen-diep); margin: 1.7em 0 .5em; line-height: 1.3;
}
.loc-seo .elementor-widget-theme-post-content > .elementor-widget-container > *:first-child { margin-top: 0; }
.loc-seo .elementor-widget-theme-post-content p {
  color: var(--tekst-grijs); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1em;
}
.loc-seo .elementor-widget-theme-post-content a { color: var(--groen); font-weight: 700; }

/* de marges van koppen en alinea's binnen een widget kan Elementor niet */
.loc-ctakaart .loc-cta-kop .elementor-heading-title { margin: 16px 0 .5em; }
.loc-ctakaart .loc-cta-tekst p { margin: 0 0 20px; }
.loc-of p { margin: 14px 0 0; }
.loc-of a { color: var(--groen-fris); font-weight: 700; }

/* reviews */
.loc-pill .elementor-star-rating__wrapper { display: flex; }
.loc-quote { flex: 1; }
.loc-quote p { margin: 0; }
.loc-wietxt .pt-wie-sub.pt-wie-sub p { margin: 0; }

/* FAQ + beeld.
   Ongelijke kolomverhouding: geen gelijke fr-kolommen, dus geen grid-control. */
.loc-faqrij.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.loc-faqfoto img { display: block; aspect-ratio: 4 / 3; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1024px) {
  .loc-twee.e-con,
  .loc-faqrij.e-con { grid-template-columns: 1fr; }
  /* Elementor kan een positie niet per apparaat terugzetten */
  .loc-ctakaart.e-con { position: static; }
}
/* 720px is geen Elementor-breekpunt (die staan op 1024 en 767),
   dus deze drie omslagpunten blijven CSS */
@media (max-width: 720px) {
  .loc-uspbalk.e-con { grid-template-columns: 1fr; gap: 14px; }
  .loc-rev3.e-con { grid-template-columns: 1fr; }
  .loc-koprij.e-con { flex-direction: column; align-items: flex-start; }
  .psg-fotowrap.e-con { margin-top: -24px; }
}


/* --- pt-widgets.css --- */

/* ============================================================
   PT WIDGET-LAAG  —  native Elementor V3 widgets in de PT-huisstijl
   Alles hieronder styelt ECHTE Elementor-widgets (heading, text-editor,
   button, icon-list, icon-box, image, accordion, loop-grid, form, nav-menu)
   zodat de pagina's niet meer uit HTML-blokken bestaan.
   ============================================================ */


/* ------------------------------------------------------------------
   Elementor-containers hebben standaard flex-wrap: wrap EN richting
   column. In een raster met gelijke rijhoogtes wikkelt de inhoud dan
   naar een tweede kolom, buiten de kaart. Standaard op nowrap zetten;
   containers waar in de editor bewust "wrap" is gekozen zetten
   --flex-wrap zelf en blijven dus gewoon werken.
   ------------------------------------------------------------------ */
.e-con.e-flex { --flex-wrap: nowrap; }

/* ---------- containerbreedte gelijk aan de oude .wrap (1220px + 24px marge) ---------- */
.e-con, .e-con-inner { --container-max-width: 1268px; }
.e-con-boxed > .e-con-inner {
  padding-inline-start: max(24px, var(--padding-inline-start, 0px));
  padding-inline-end:   max(24px, var(--padding-inline-end, 0px));
}

/* ---------- sectieritme, exact gelijk aan het originele ontwerp ---------- */
/* .sectie  { padding: clamp(80px, 10vw, 150px) 0 }  ->  */
.pt-sectie.pt-sectie > .e-con-inner,
.pt-sectie.pt-sectie.e-con-full { padding-block: clamp(80px, 10vw, 150px); }
.pt-sectie--kort.pt-sectie--kort > .e-con-inner,
.pt-sectie--kort.pt-sectie--kort.e-con-full { padding-block: clamp(60px, 7vw, 90px); }
/* .pag-hero { padding: clamp(56px, 7vw, 100px) 0 } */
.pt-paghero.pt-paghero > .e-con-inner,
.pt-paghero.pt-paghero.e-con-full { padding-block: clamp(56px, 7vw, 100px); }
.pt-sectie--geen-top.pt-sectie--geen-top > .e-con-inner,
.pt-sectie--geen-top.pt-sectie--geen-top.e-con-full { padding-top: 0; }
.pt-sectie--geen-bodem.pt-sectie--geen-bodem > .e-con-inner,
.pt-sectie--geen-bodem.pt-sectie--geen-bodem.e-con-full { padding-bottom: 0; }
.pt-sectie--vlak.pt-sectie--vlak > .e-con-inner,
.pt-sectie--vlak.pt-sectie--vlak.e-con-full { padding-block: 0; }
/* kop-rij: exact de marge van .kop-rij */
.pt-koprij.pt-koprij { margin-bottom: clamp(38px, 4.5vw, 60px); }

/* in kaarten heeft de laatste alinea geen ondermarge (zoals in het origineel) */
.pt-kaart.pt-kaart .elementor-widget-text-editor p:last-child,
.pt-projectkaart.pt-projectkaart .elementor-widget-text-editor p:last-child,
.pt-vackaart.pt-vackaart .elementor-widget-text-editor p:last-child,
.pt-tegel.pt-tegel .elementor-widget-text-editor p:last-child,
.pt-review.pt-review .elementor-widget-text-editor p:last-child,
.pt-seizoen.pt-seizoen .elementor-widget-text-editor p:last-child,
.pt-stap.pt-stap .elementor-widget-text-editor p:last-child,
.pt-usp.pt-usp .elementor-icon-box-description { margin-bottom: 0; }

/* grid-blowout voorkomen: grid-items mogen krimpen tot onder hun min-content */
.elementor-grid > *, .e-loop-item, .pt-raster.pt-raster > * { min-width: 0; }

/* ---------- generiek ---------- */
.pt-sectie.pt-sectie > .e-con-inner,
.pt-sectie.pt-sectie { --pt-blad: var(--blad-klein); }

.pt-op-donker.pt-op-donker .elementor-heading-title,
.pt-op-donker.pt-op-donker h1, .pt-op-donker.pt-op-donker h2, .pt-op-donker.pt-op-donker h3 { color: var(--wit); }
.pt-op-donker.pt-op-donker .elementor-widget-text-editor { color: rgba(255,255,255,.75); }

/* ---------- hero ---------- */
.pt-hero.pt-hero { position: relative; overflow: hidden; }
.pt-hero.pt-hero .elementor-heading-title { color: var(--wit); }
.pt-hero-sub.pt-hero-sub { font-size: 1.18rem; color: rgba(255,255,255,.88); max-width: 48ch; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-items { display: flex; gap: 22px; flex-wrap: wrap; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-item,
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text,
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text b { font-size: .86rem; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-item,
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text { color: rgba(255,255,255,.78); }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-icon { width: 16px; height: 16px; background: none; margin-top: 0; }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-icon svg { width: 14px; height: 14px; fill: var(--groen-fris); }
.pt-hero-mini.pt-hero-mini .elementor-icon-list-text b { color: var(--creme); }

/* paginahero (donkergroen blok bovenaan subpagina's) */
.pt-paghero.pt-paghero { background: var(--groen-diep); }
.pt-paghero.pt-paghero .elementor-heading-title { color: var(--wit); }
.pt-paghero.pt-paghero .elementor-widget-text-editor:not(.pt-kruimel) { color: rgba(255,255,255,.78); max-width: 68ch; }

/* kruimelpad (breadcrumbs-widget of text) */
.pt-kruimel.pt-kruimel, .pt-kruimel.pt-kruimel p { font-size: .84rem; color: rgba(255,255,255,.65); }
.pt-kruimel.pt-kruimel a { color: rgba(255,255,255,.85); text-decoration: none; }
.pt-kruimel.pt-kruimel a:hover { color: var(--groen-fris); }


/* handschrift-eyebrow als heading-widget */
/* lettertype, grootte en kleur staan in het widget zelf; de lichte rotatie
   is het enige dat Elementor niet kan. */
.pt-schrift.pt-schrift .elementor-heading-title {
  display: inline-block;
  transform-origin: center center;
  transform: rotate(-2deg);
  margin-bottom: .35em;
}

/* koppen: dezelfde ondermarge als in het origineel (h1..h4 { margin: 0 0 .5em }) */
.pt-sectie.pt-sectie .elementor-widget-heading h1.elementor-heading-title,
.pt-sectie.pt-sectie .elementor-widget-heading h2.elementor-heading-title,
.pt-sectie.pt-sectie .elementor-widget-heading h3.elementor-heading-title,
.pt-sectie.pt-sectie .elementor-widget-heading h4.elementor-heading-title,
.pt-paghero.pt-paghero .elementor-widget-heading h1.elementor-heading-title,
.pt-hero.pt-hero .elementor-widget-heading h1.elementor-heading-title { margin: 0 0 .5em; }
.pt-seizoen.pt-seizoen .elementor-heading-title,
.pt-vacregel.pt-vacregel .elementor-heading-title,
.pt-avatars.pt-avatars .elementor-heading-title,
.pt-badge.pt-badge .elementor-heading-title { margin: 0; }
.pt-koprij.pt-koprij { flex-direction: row; }
.pt-koprij.pt-koprij > * { width: auto; }
.pt-koprij.pt-koprij > *:first-child { flex: 0 1 auto; }
.pt-koprij.pt-koprij > .elementor-widget-button,
.pt-koprij.pt-koprij > .pt-googlepill { flex: 0 0 auto; }
.pt-koprij.pt-koprij > .elementor-widget-text-editor { flex: 0 1 auto; max-width: 58ch !important; }

/* h2-look zonder h2-semantiek */
/* kleur hangt af van de sectie (licht of donker), dus die blijft in CSS;
   lettertype, grootte, gewicht en regelhoogte staan in het widget zelf. */
.pt-kop-groot.pt-kop-groot .elementor-heading-title { margin: 0 0 .5em; color: var(--groen-diep); }
.pt-op-donker.pt-op-donker .pt-kop-groot .elementor-heading-title { color: var(--wit); }
.pt-op-donker.pt-op-donker .pt-kop-groot .elementor-heading-title { color: var(--wit); }

.pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 .35em; }
.pt-intro.pt-intro { color: var(--tekst-grijs); max-width: 58ch; }
.pt-op-donker.pt-op-donker .pt-intro { color: rgba(255,255,255,.72); }

/* badge als heading-widget */
.pt-badge.pt-badge .elementor-heading-title {
  display: inline-block;
  background: var(--creme); color: var(--groen-diep);
  font-family: var(--font-kop); font-size: .82rem; font-weight: 600;
  line-height: 1.5; padding: 7px 16px; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(42,55,29,.08);
}
.pt-badge.pt-badge .elementor-heading-title strong { font-weight: 800; }
.pt-badge--bol.pt-badge--bol .elementor-heading-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--groen-fris);
  margin-right: 7px; vertical-align: 1px;
}
.pt-badge--fris.pt-badge--fris .elementor-heading-title {
  background: var(--groen-fris); color: var(--groen-diep); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; font-size: .74rem;
}
.pt-badge--wit.pt-badge--wit .elementor-heading-title {
  background: var(--wit); color: var(--groen-diep); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; border-radius: 8px; padding: 6px 16px;
}

/* markering-blok in koppen (via <mark> in de heading-tekst) */
.elementor-heading-title mark,
.elementor-widget-text-editor mark {
  display: inline; background: var(--wit); color: var(--groen-diep);
  padding: .06em .26em; margin-left: -.26em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  border-radius: 6px; line-height: 1.6;
}
.elementor-heading-title mark.fris { background: var(--groen-fris); }
.pt-hero-h1.pt-hero-h1 .elementor-heading-title em { font-style: normal; color: var(--groen-fris); }

/* ---------- knoppen (button-widget) ---------- */
/* kleuren, typografie, padding en radius staan als widget-instellingen in
   Elementor. Hier alleen het gedrag dat Elementor niet kan: de flex-rij en de
   ronde icoon-cirkel achter de tekst. */
.pt-knop.pt-knop .elementor-button {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer; text-shadow: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .22s ease;
}
.pt-knop.pt-knop .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 12px; flex-direction: row; }
.pt-knop.pt-knop .elementor-button-text { flex-grow: 0; }
.pt-knop.pt-knop .elementor-button-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; font-size: .85rem; transition: transform .28s var(--ease);
}
.pt-knop.pt-knop .elementor-button-icon svg { width: 15px; height: 15px; fill: currentColor; }
.pt-knop.pt-knop .elementor-button:hover .elementor-button-icon { transform: translate(3px, -2px) scale(1.06); }
.pt-knop.pt-knop .elementor-button:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
/* nooit de themakleur op hover/focus overnemen: tekst blijft leesbaar */
.pt-knop.pt-knop .elementor-button:hover,
.pt-knop.pt-knop .elementor-button:focus,
.pt-knop.pt-knop .elementor-button:visited { color: var(--groen-diep); }
.pt-knop--donker.pt-knop--donker .elementor-button,
.pt-knop--donker.pt-knop--donker .elementor-button:hover,
.pt-knop--donker.pt-knop--donker .elementor-button:focus { color: var(--wit); }
.pt-knop.pt-knop .elementor-button-text { color: inherit; }

/* alleen de icoon-cirkel per variant en het optillen bij hover */
.pt-knop--primair.pt-knop--primair .elementor-button { box-shadow: 0 8px 20px -14px rgba(42,55,29,.45); }
.pt-knop--primair.pt-knop--primair .elementor-button-icon { background: rgba(42,55,29,.14); }
.pt-knop--primair.pt-knop--primair .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(42,55,29,.5); }
.pt-knop--donker.pt-knop--donker .elementor-button-icon { background: rgba(255,255,255,.16); }
.pt-knop--donker.pt-knop--donker .elementor-button:hover { transform: translateY(-2px); }
.pt-knop--ghost.pt-knop--ghost .elementor-button-icon { background: rgba(58,74,40,.1); }
.pt-knop--ghost.pt-knop--ghost .elementor-button:hover { transform: translateY(-2px); }
.pt-knop--wit.pt-knop--wit .elementor-button-icon { background: var(--groen-licht); }
.pt-knop--wit.pt-knop--wit .elementor-button:hover { transform: translateY(-2px); }
.pt-knop--klein.pt-knop--klein .elementor-button-icon { width: 28px; height: 28px; }
.pt-knop--vol.pt-knop--vol .elementor-button { width: 100%; justify-content: center; }

/* ---------- vinkjes-lijst (icon-list-widget) ---------- */
.pt-vinkjes.pt-vinkjes .elementor-icon-list-items { display: grid; gap: 10px; }
.pt-vinkjes.pt-vinkjes .elementor-icon-list-item { align-items: flex-start; }
.pt-vinkjes.pt-vinkjes .elementor-icon-list-item > a,
.pt-vinkjes.pt-vinkjes .elementor-icon-list-item { display: flex; gap: 12px; align-items: flex-start; }
/* Exact hetzelfde vinkje als in het oorspronkelijke ontwerp: een groene cirkel
   met daarin het getekende vinkje. Het Font Awesome-icoon eronder wordt verborgen,
   zodat de vinkjes in icon-lists, in post-inhoud en in de vacature-lijsten er
   allemaal identiek uitzien. */
.pt-vinkjes.pt-vinkjes .elementor-icon-list-icon {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  padding: 0;
  background-color: var(--groen-fris);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 3px;
}
/* Het vinkje via een masker, niet via background-image: Elementor zet in
   nog-niet-geladen containers `background-image: none !important`, waardoor een
   achtergrondvinkje pas na het scrollen zichtbaar zou worden. */
.pt-vinkjes.pt-vinkjes .elementor-icon-list-icon::before {
  content: ""; width: 13px; height: 13px; background-color: var(--groen-diep);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
}
.pt-vinkjes.pt-vinkjes .elementor-icon-list-icon svg,
.pt-vinkjes.pt-vinkjes .elementor-icon-list-icon i { display: none; }
.pt-vinkjes.pt-vinkjes .elementor-icon-list-text { padding: 0; color: inherit; }
.pt-vinkjes.pt-vinkjes .elementor-icon-list-text strong { color: var(--groen-diep); }
.pt-op-donker.pt-op-donker .pt-vinkjes .elementor-icon-list-text strong,
.pt-kaart--groen.pt-kaart--groen .pt-vinkjes .elementor-icon-list-text strong { color: var(--wit); }

/* bolletjes-lijst (seizoenen / opsommingen in kaarten) */
.pt-bullets.pt-bullets .elementor-icon-list-items { display: grid; gap: 6px; }
.pt-bullets.pt-bullets .elementor-icon-list-item { align-items: center; font-size: .9rem; color: var(--tekst-grijs); }
.pt-bullets.pt-bullets .elementor-icon-list-icon { width: 5px; height: 5px; border-radius: 50%; background: var(--groen-fris); margin-right: 9px; padding: 0; }
.pt-bullets.pt-bullets .elementor-icon-list-icon svg,
.pt-bullets.pt-bullets .elementor-icon-list-icon i { display: none; }

/* ---------- USP-balk (icon-box-widgets) ---------- */
.pt-uspbalk.pt-uspbalk { background: var(--groen); }
/* .uspbalk__in { padding: 26px 0 } */
.pt-uspbalk.pt-uspbalk > .e-con-inner { padding-block: 26px; }
.pt-usp.pt-usp .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 14px; text-align: left; }
.pt-usp.pt-usp .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.pt-usp.pt-usp .elementor-icon-box-icon .elementor-icon {
  width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1);
  display: grid; place-items: center; color: var(--groen-fris); font-size: 20px;
}
.pt-usp.pt-usp .elementor-icon-box-icon .elementor-icon svg { width: 22px; height: 22px; fill: var(--groen-fris); }
.pt-usp.pt-usp .elementor-icon-box-title { margin: 0; font-family: var(--font-kop); font-size: .95rem; font-weight: 700; color: var(--wit); line-height: 1.35; }
.pt-usp.pt-usp .elementor-icon-box-description { margin: 0; font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.4; }

/* lichte variant (op witte achtergrond) */
.pt-usp--licht.pt-usp--licht .elementor-icon-box-icon .elementor-icon { background: var(--groen-licht); color: var(--groen); }
.pt-usp--licht.pt-usp--licht .elementor-icon-box-icon .elementor-icon svg { fill: var(--groen); }
.pt-usp--licht.pt-usp--licht .elementor-icon-box-title { color: var(--groen-diep); }
.pt-usp--licht.pt-usp--licht .elementor-icon-box-description { color: var(--tekst-grijs); }

/* ---------- kaarten (containers) ---------- */
.pt-kaart.pt-kaart { background: var(--wit); border-radius: var(--blad-klein); box-shadow: inset 0 0 0 1px var(--lijn); }
.pt-kaart--groen.pt-kaart--groen { background: var(--groen); color: var(--wit); box-shadow: var(--schaduw); }
.pt-kaart--groen.pt-kaart--groen .elementor-heading-title { color: var(--wit); }
.pt-kaart--groen.pt-kaart--groen .elementor-widget-text-editor { color: rgba(255,255,255,.8); }
.pt-kaart--glas.pt-kaart--glas { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pt-kaart--glas.pt-kaart--glas .elementor-widget-text-editor { color: rgba(255,255,255,.72); }
.pt-blad.pt-blad { border-radius: var(--blad); }

/* stap-kaart met genummerd 01/02/03 label */
.pt-stap.pt-stap { position: relative; }
.pt-stap.pt-stap::before {
  position: static; float: none; inset: auto;
  counter-increment: ptstap; content: counter(ptstap, decimal-leading-zero);
  font-family: var(--font-kop); font-weight: 800; font-size: 2.6rem;
  color: var(--groen-fris); opacity: .45; display: block; line-height: 1; margin-bottom: 14px;
}
.pt-stappen.pt-stappen, .pt-raster--stappen.pt-raster--stappen { counter-reset: ptstap; }
.pt-stap.pt-stap .elementor-heading-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5em; }
.pt-stap.pt-stap .elementor-widget-text-editor { font-size: .92rem; color: var(--tekst-grijs); }
.pt-kaart--glas.pt-kaart--glas.pt-stap .elementor-widget-text-editor { color: rgba(255,255,255,.72); }

/* ---------- beeldtegel diensten (loop item) ---------- */
.pt-tegel.pt-tegel {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 4.5;
  border-radius: var(--blad-klein);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  box-shadow: 0 2px 0 rgba(42,55,29,.05);
}
.pt-tegel.pt-tegel:hover { transform: translateY(-8px); box-shadow: var(--schaduw); }
.pt-tegel.pt-tegel .pt-tegel-foto { position: absolute; inset: 0; z-index: 0; transition: transform 1.2s var(--ease); }
.pt-tegel.pt-tegel:hover .pt-tegel-foto { transform: scale(1.05); }
.pt-tegel.pt-tegel .pt-tegel-foto .elementor-widget-container,
.pt-tegel.pt-tegel .pt-tegel-foto figure,
.pt-tegel.pt-tegel .pt-tegel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-tegel.pt-tegel .pt-tegel-body { position: relative; z-index: 2; flex-direction: row; }
.pt-tegel.pt-tegel .pt-tegel-body > * { width: auto; }
.pt-tegel.pt-tegel .pt-tegel-body > .e-con { flex: 1 1 auto; min-width: 0; }
.pt-tegel.pt-tegel .pt-tegel-body > .elementor-widget-icon { flex: 0 0 auto; }
.pt-tegel.pt-tegel .elementor-heading-title { color: var(--wit); font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; }
.pt-tegel.pt-tegel .elementor-widget-text-editor { color: rgba(255,255,255,.82); font-size: .9rem; }
.pt-tegel.pt-tegel .pt-pijl-cirkel .elementor-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: var(--wit); font-size: 16px;
  transition: background .4s, transform .5s var(--ease), color .4s;
}
.pt-tegel.pt-tegel .pt-pijl-cirkel .elementor-icon svg { width: 18px; height: 18px; fill: currentColor; }
.pt-tegel.pt-tegel:hover .pt-pijl-cirkel .elementor-icon { background: var(--groen-fris); color: var(--groen-diep); transform: translate(2px,-2px); }

@media (max-width: 768px) { .pt-tegel.pt-tegel { aspect-ratio: 16 / 11; } }

/* ---------- projectkaart (loop item) ---------- */
.pt-projectkaart.pt-projectkaart {
  border-radius: var(--blad-klein); overflow: hidden; background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pt-projectkaart.pt-projectkaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw); }
.pt-projectkaart.pt-projectkaart .pt-foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.pt-projectkaart.pt-projectkaart:hover .pt-foto img { transform: scale(1.04); }
.pt-projectkaart.pt-projectkaart .pt-foto { overflow: hidden; }
.pt-projectkaart.pt-projectkaart .elementor-heading-title { font-size: 1.02rem; font-weight: 700; color: var(--groen-diep); margin-bottom: 4px; }
.pt-projectkaart.pt-projectkaart .elementor-widget-text-editor { font-size: .88rem; color: var(--tekst-grijs); }

/* ---------- vacaturekaart (loop item) ---------- */
.pt-vackaart.pt-vackaart {
  border-radius: var(--blad-klein); overflow: hidden; background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pt-vackaart.pt-vackaart:hover { transform: translateY(-8px); box-shadow: var(--schaduw); }
.pt-vackaart.pt-vackaart .pt-foto img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pt-vackaart.pt-vackaart .elementor-heading-title { font-size: 1.25rem; font-weight: 700; color: var(--groen-diep); }
.pt-vackaart.pt-vackaart .pt-meer .elementor-button {
  background: transparent; padding: 0; color: var(--groen);
  font-family: var(--font-kop); font-weight: 700; font-size: .92rem; box-shadow: none;
}
.pt-vackaart.pt-vackaart .pt-meer .elementor-button-icon {
  width: auto; height: auto; background: none; display: inline-flex; opacity: 1;
  transition: transform .4s var(--ease);
}
.pt-vackaart.pt-vackaart:hover .pt-meer .elementor-button-icon { transform: translateX(4px); }
.pt-vackaart.pt-vackaart .pt-meer .elementor-button-icon svg { width: 14px; height: 14px; }
.pt-vackaart.pt-vackaart:hover .pt-meer .elementor-button { color: var(--groen-fris); transform: none; }

/* tag-label linksboven op een foto */
.pt-tag.pt-tag { position: absolute; top: 12px; left: 12px; z-index: 3; }
.pt-tag.pt-tag .elementor-heading-title {
  display: inline-block; background: var(--creme); color: var(--groen-diep);
  font-family: var(--font-kop); font-size: .72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.pt-vackaart.pt-vackaart .pt-tag .elementor-heading-title {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- seizoenkaart ---------- */
.pt-seizoen.pt-seizoen .elementor-heading-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.pt-seizoen.pt-seizoen .pt-periode { font-size: .8rem; color: var(--tekst-grijs); }
.pt-seizoen.pt-seizoen .pt-seizoen-icoon .elementor-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--groen-licht);
  display: grid; place-items: center; color: var(--groen); font-size: 19px;
}
.pt-seizoen.pt-seizoen .pt-seizoen-icoon .elementor-icon svg { width: 21px; height: 21px; fill: var(--groen); }

/* ---------- review-kaart ---------- */
.pt-review.pt-review .elementor-star-rating { font-size: 15px; letter-spacing: 3px; }
.pt-review.pt-review blockquote,
.pt-review.pt-review .pt-quote { margin: 0; font-size: .98rem; color: var(--tekst); }
.pt-review.pt-review .pt-avatar .elementor-heading-title {
  width: 40px; height: 40px; border-radius: 50%; background: var(--groen-licht);
  display: grid; place-items: center; font-family: var(--font-kop); font-weight: 700;
  color: var(--groen); font-size: .85rem;
}
.pt-review.pt-review .pt-wie .elementor-heading-title { font-family: var(--font-kop); font-size: .88rem; font-weight: 700; color: var(--groen-diep); }
.pt-review.pt-review .pt-wie-sub { font-size: .82rem; color: var(--tekst-grijs); }

/* google-pill */
.pt-googlepill.pt-googlepill {
  display: inline-flex; align-items: center; gap: 10px; background: var(--wit);
  border-radius: 999px; padding: 10px 20px; box-shadow: inset 0 0 0 1px var(--lijn); font-size: .9rem;
}
.pt-googlepill.pt-googlepill .elementor-star-rating { font-size: 14px; }
.pt-googlepill.pt-googlepill .elementor-widget-text-editor { margin: 0; }
.pt-googlepill.pt-googlepill .elementor-widget-text-editor p { margin: 0; }
.pt-googlepill.pt-googlepill b { font-family: var(--font-kop); }

/* ---------- FAQ (accordion-widget) ---------- */
.pt-faq.pt-faq .elementor-accordion { display: grid; gap: 12px; }
.pt-faq.pt-faq .elementor-accordion-item { border: 0; background: var(--wit); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; }
.pt-faq.pt-faq .elementor-tab-title {
  border: 0 !important; padding: 18px 22px;
  font-family: var(--font-kop); font-weight: 600; font-size: .98rem; color: var(--groen-diep);
}
.pt-faq.pt-faq .elementor-tab-title a { color: var(--groen-diep); }
.pt-faq.pt-faq .elementor-accordion-icon { color: var(--groen-fris); float: right; width: auto; }
.pt-faq.pt-faq .elementor-accordion-icon svg { width: 14px; height: 14px; fill: var(--groen-fris); }
.pt-faq.pt-faq .elementor-tab-content { border: 0 !important; padding: 0 22px 20px; color: var(--tekst-grijs); font-size: .95rem; }
.pt-faq.pt-faq .elementor-tab-content p { margin: 0; }

/* toggle-widget (alle items standaard dicht, net als de originele <details>) */
.pt-faq.pt-faq .elementor-toggle { display: grid; gap: 12px; }
.pt-faq.pt-faq .elementor-toggle-item { border: 0; background: var(--wit); border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; }
.pt-faq.pt-faq .elementor-toggle .elementor-tab-title {
  border: 0 !important; padding: 18px 22px; line-height: 1.7;
  font-family: var(--font-kop); font-weight: 600; font-size: .98rem; color: var(--groen-diep);
  display: flex; flex-direction: row-reverse; justify-content: space-between;
  align-items: center; gap: 16px; text-align: left;
}
.pt-faq.pt-faq .elementor-toggle .elementor-toggle-title { flex: 1 1 auto; text-align: left; color: var(--groen-diep); }
.pt-faq.pt-faq .elementor-toggle .elementor-toggle-icon { color: var(--groen-fris); float: none; margin: 0; width: auto;
  font-size: 1.4rem; line-height: 1.7; }
.pt-faq.pt-faq .elementor-toggle .elementor-toggle-icon svg { width: .62em; height: .62em; fill: var(--groen-fris); }
.pt-faq.pt-faq .elementor-toggle .elementor-tab-content {
  border: 0 !important; padding: 0 22px 20px; color: var(--tekst-grijs); font-size: .95rem; }
.pt-faq.pt-faq .elementor-toggle .elementor-tab-content p { margin: 0; }

/* nested-accordion variant */
.pt-faq.pt-faq .e-n-accordion-item { background: var(--wit); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--lijn); margin-bottom: 12px; }
.pt-faq.pt-faq .e-n-accordion-item-title { padding: 18px 22px; font-family: var(--font-kop); font-weight: 600; color: var(--groen-diep); }

/* ---------- plaats-pillen ---------- */
.pt-plaats.pt-plaats .elementor-button,
.pt-plaats.pt-plaats a {
  display: inline-block; background: var(--wit); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 600; font-size: .88rem; line-height: 1.7;
  padding: 8px 18px; border-radius: 999px; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.pt-plaats.pt-plaats .elementor-button:hover,
.pt-plaats.pt-plaats a:hover { box-shadow: inset 0 0 0 2px var(--groen-fris); background: var(--groen-licht); color: var(--groen-diep); }
.pt-plaats.pt-plaats .elementor-button-icon { display: none; }
.pt-plaats--meer.pt-plaats--meer .elementor-heading-title {
  display: inline-block; background: var(--groen-licht); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 600; font-size: .88rem; line-height: 1.7;
  padding: 8px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn);
}
.pt-plaats--meer.pt-plaats--meer { margin-top: 10px; }

/* ---------- formulieren (form-widget) ---------- */
.pt-form.pt-form .elementor-field-group > label {
  font-family: var(--font-kop); font-weight: 600; font-size: .88rem; color: var(--groen-diep); margin-bottom: 6px;
}
.pt-form.pt-form .elementor-field-textual {
  width: 100%; padding: 13px 16px; border-radius: 12px; background: var(--wit);
  border: 1px solid var(--lijn); font-family: var(--font-body); font-size: .95rem; color: var(--tekst);
  transition: border-color .2s, box-shadow .2s; min-height: auto;
}
.pt-form.pt-form .elementor-field-textual:focus { border-color: var(--groen-fris); box-shadow: 0 0 0 3px rgba(124,185,59,.18); outline: 0; }
.pt-form.pt-form .elementor-field-type-acceptance .elementor-field-option label { font-family: var(--font-body); font-weight: 400; font-size: .88rem; color: var(--tekst-grijs); }
.pt-form.pt-form .elementor-button[type="submit"] {
  display: inline-flex; align-items: center; gap: 12px; background: var(--groen-fris); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 700; font-size: 1rem; border: 0;
  padding: 15px 26px; border-radius: 999px; box-shadow: 0 8px 20px -14px rgba(42,55,29,.45);
  transition: transform .28s var(--ease), background .22s ease;
}
.pt-form.pt-form .elementor-button[type="submit"]:hover { background: #8AC94A; transform: translateY(-2px); }
.pt-form.pt-form .elementor-message { font-family: var(--font-body); }

/* ---------- navigatie (nav-menu-widget) ---------- */
.pt-nav.pt-nav .elementor-nav-menu > li > a {
  font-family: var(--font-kop); font-weight: 600; font-size: .95rem;
  color: var(--groen-diep); padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.pt-nav.pt-nav .elementor-nav-menu > li > a:hover,
.pt-nav.pt-nav .elementor-nav-menu > li > a.elementor-item-active { color: var(--groen); border-color: var(--groen-fris); }
.pt-nav.pt-nav .elementor-nav-menu--dropdown a { font-family: var(--font-kop); font-weight: 600; }

.pt-nav.pt-nav .vac-teller {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px;
  background: var(--groen-fris); color: var(--groen-diep);
  border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1;
  font-family: var(--font-kop); vertical-align: middle;
}

/* telefoon-blokje in de header */
.pt-tel.pt-tel .elementor-heading-title { font-family: var(--font-kop); font-weight: 700; font-size: .95rem; color: var(--groen-diep); white-space: nowrap; }
.pt-tel.pt-tel .elementor-heading-title small { display: block; font-weight: 500; color: var(--tekst-grijs); font-size: .72rem; }
.pt-tel.pt-tel a { color: inherit; text-decoration: none; }

/* logo exact zoals .logo__img (inline SVG) */
.pt-logo.pt-logo .logo { display: inline-flex; align-items: center; text-decoration: none; }
.pt-logo.pt-logo .logo__img { height: 52px; width: auto; max-width: none; display: block; }
.pt-footer.pt-footer .pt-logo .logo__img { height: 58px; }
.pt-footer.pt-footer .ptlogo-grijs { fill: #FAFAF6; }
@media (max-width: 768px) { .pt-logo.pt-logo .logo__img { height: 44px; } }

/* hamburger zoals het origineel: drie streepjes, geen grijs blokje */
.pt-nav.pt-nav .elementor-menu-toggle {
  background: none !important; border: 0; border-radius: 0; padding: 8px;
  color: var(--groen-diep);
}
.pt-nav.pt-nav .elementor-menu-toggle svg { width: 26px; height: 26px; fill: var(--groen-diep); }
.pt-nav.pt-nav .elementor-menu-toggle:hover { background: none !important; }
/* uitklapmenu in de huisstijl: over de volle breedte onder de header */
.pt-header.pt-header .pt-nav .elementor-menu-toggle + .elementor-nav-menu--dropdown,
.pt-nav.pt-nav .elementor-nav-menu--dropdown {
  background: var(--wit-warm); border-bottom: 1px solid var(--lijn);
  box-shadow: 0 18px 30px -22px rgba(42,55,29,.45);
}
.pt-header.pt-header .e-con-inner { position: relative; }
.pt-nav.pt-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
  position: absolute; left: 0; right: 0; width: auto; margin: 0;
}
.pt-nav.pt-nav .elementor-nav-menu--dropdown a {
  font-family: var(--font-kop); font-weight: 600; font-size: 1.05rem;
  color: var(--groen-diep); padding: 14px 24px; min-height: 52px;
  display: flex; align-items: center; border-bottom: 1px solid var(--lijn);
}
.pt-nav.pt-nav .elementor-nav-menu--dropdown li:last-child a { border-bottom: 0; }
.pt-nav.pt-nav .elementor-nav-menu--dropdown a:hover,
.pt-nav.pt-nav .elementor-nav-menu--dropdown a.elementor-item-active {
  background: var(--groen-licht); color: var(--groen);
}

/* header: logo / menu / acties netjes op één rij, geen overflow */
.pt-header.pt-header .e-con-inner { flex-wrap: nowrap; }
.pt-logo.pt-logo, .pt-nav.pt-nav, .pt-header-acties.pt-header-acties { width: auto; flex: 0 0 auto; }
.pt-nav.pt-nav { margin-left: auto; }
.pt-header-acties.pt-header-acties { display: flex; }
/* Omslagpunt gelijk aan Elementor's tablet-breakpoint: hamburger + mobiele CTA-balk */
@media (max-width: 1024px) {
  .pt-nav.pt-nav { margin-left: auto; }
  .pt-header-acties.pt-header-acties { display: none; }
}

/* header-container. Sticky moet op de theme-builder-wrapper staan: .pt-header zelf
   zit in een <header> die precies even hoog is, dus daar heeft sticky geen ruimte. */
.elementor-location-header { position: sticky; top: 0; z-index: 60; }
.pt-header.pt-header { position: relative; z-index: 60; background: rgba(250,250,246,.92); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--lijn); }

/* ---------- vacaturelijst (home-banner) ---------- */
.pt-vaclijst.pt-vaclijst a,
.pt-vaclijst.pt-vaclijst .elementor-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.9); border-radius: 12px; padding: 14px 18px;
  font-family: var(--font-kop); font-weight: 700; font-size: .95rem; color: var(--groen-diep);
  text-decoration: none; box-shadow: none; transition: transform .3s var(--ease), background .25s;
}
.pt-vaclijst.pt-vaclijst a:hover,
.pt-vaclijst.pt-vaclijst .elementor-button:hover { background: var(--wit); transform: translateX(4px); color: var(--groen-diep); }
.pt-vaclijst.pt-vaclijst .elementor-button-content-wrapper { width: 100%; justify-content: space-between; }
.pt-vaclijst.pt-vaclijst .elementor-button-icon { width: 20px; height: 20px; background: none; }
.pt-vaclijst.pt-vaclijst .elementor-button-icon svg { width: 14px; height: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .pt-uspbalk.pt-uspbalk .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pt-schrift.pt-schrift .elementor-heading-title { font-size: 1.35rem; }
  .pt-stap.pt-stap::before { font-size: 2.1rem; }
}

/* ---------- FOOTER (widgets) ---------- */
/* .footer__in { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px } */
.pt-foot-in.pt-foot-in > .e-con-inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; align-items: start;
}
.pt-foot-in.pt-foot-in > .e-con-inner > * { width: auto; min-width: 0; }
@media (max-width: 1020px) { .pt-foot-in.pt-foot-in > .e-con-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .pt-foot-in.pt-foot-in > .e-con-inner { grid-template-columns: 1fr; } }
/* onderbalk netjes links/rechts */
.pt-foot-onder.pt-foot-onder > .e-con-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pt-foot-onder.pt-foot-onder > .e-con-inner > * { width: auto; }
.pt-footer.pt-footer { background: var(--groen-diep); color: rgba(255,255,255,.75); font-size: .92rem; position: relative; overflow: hidden; }
.pt-footer.pt-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.pt-footer.pt-footer a:hover { color: var(--groen-fris); }
.pt-footer.pt-footer .elementor-heading-title { color: #fff; font-family: var(--font-kop); font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.pt-foot-pitch.pt-foot-pitch { color: rgba(255,255,255,.72); font-family: var(--font-body); font-size: .95rem; line-height: 1.6; max-width: 280px; }
.pt-foot-list.pt-foot-list .elementor-icon-list-items { padding: 0; margin: 0; }
.pt-foot-list.pt-foot-list .elementor-icon-list-item { margin: 0 !important; padding: 5px 0 !important; }
.pt-foot-list.pt-foot-list .elementor-icon-list-item:not(:last-child) { border: 0; }
.pt-foot-list.pt-foot-list .elementor-icon-list-text,
.pt-foot-list.pt-foot-list a { color: rgba(255,255,255,.72); font-family: var(--font-body); font-size: .95rem; transition: color .2s; }
.pt-foot-list.pt-foot-list a:hover .elementor-icon-list-text,
.pt-foot-list.pt-foot-list a:hover { color: #fff; }
.pt-foot-list.pt-foot-list .elementor-icon-list-icon svg,
.pt-foot-list.pt-foot-list .elementor-icon-list-icon i { color: var(--groen-fris); fill: var(--groen-fris); }
.pt-foot-onder.pt-foot-onder { border-top: 1px solid rgba(255,255,255,.12); }
.pt-foot-onder.pt-foot-onder .elementor-widget-text-editor,
.pt-foot-onder.pt-foot-onder p { color: rgba(255,255,255,.5); font-family: var(--font-body); font-size: .82rem; margin: 0; }
.pt-foot-onder.pt-foot-onder a { color: rgba(255,255,255,.72); }
.pt-foot-onder.pt-foot-onder a:hover { color: #fff; }

/* sticky mobiele CTA-balk (buttons) */
.pt-mobcta.pt-mobcta { display: none; }
@media (max-width: 1024px) {
  .pt-mobcta.pt-mobcta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    box-shadow: 0 -10px 30px rgba(42,55,29,.3);
  }
  .pt-mobcta.pt-mobcta .pt-knop { flex: 1 1 0; min-width: 0; }
  .pt-mobcta.pt-mobcta .pt-knop .elementor-button {
    width: 100%; justify-content: center; border-radius: 0; padding: 14px 8px;
    font-size: .82rem; gap: 8px;
  }
  .pt-mobcta.pt-mobcta .pt-knop .elementor-button-icon { width: 18px; height: 18px; background: none; }
  /* ruimte voor de balk zit als padding onder in de footer-container (Elementor) */
  /* vacaturepagina's hebben een eigen balk (Solliciteer) in de vacature-template */
  body.single-vacature .elementor-location-footer .pt-mobcta.pt-mobcta { display: none; }
}
/* hero-chip op telefoon: zelfde inspringing als de hero-tekst */
@media (max-width: 767px) {
  .pt-chip.pt-chip { margin-inline: 44px; }
}

.pt-of.pt-of p { text-align: center; font-size: .85rem; margin: 0; }
.pt-kaart--groen.pt-kaart--groen .pt-of p { color: rgba(255,255,255,.6); }
.pt-kaart--groen.pt-kaart--groen .pt-of a { color: var(--creme); font-weight: 700; }
.pt-ctakaart.pt-ctakaart { position: sticky; top: 100px; }
@media (max-width: 768px) { .pt-ctakaart.pt-ctakaart { position: static; } }


/* ---------- component wint van context (badges houden hun eigen kleur) ---------- */
.pt-badge.pt-badge .elementor-heading-title,
.pt-badge--fris.pt-badge--fris .elementor-heading-title,
.pt-badge--wit.pt-badge--wit .elementor-heading-title { color: var(--groen-diep); }
.pt-plaats--meer.pt-plaats--meer .elementor-heading-title { color: var(--groen-diep); }

/* ---------- vacature-excerpt: uren + pluspunten ---------- */
.vac-uren { display: block; font-family: var(--font-kop); font-weight: 600;
            font-size: .92rem; color: var(--tekst-grijs); margin-bottom: 12px; }
.vac-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .92rem; }
.vac-usp li { position: relative; padding-left: 34px; line-height: 1.55; }
.vac-usp li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--groen-fris);
}
.vac-usp li::after {
  content: ""; position: absolute; left: 4.5px; top: calc(.15em + 4.5px);
  width: 13px; height: 13px; background-color: var(--groen-diep);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
}
.vac-usp strong { color: var(--groen-diep); }
/* compacte regel op de homepage toont alleen de uren; de kaart alleen de pluspunten */
.pt-vacregel.pt-vacregel .vac-usp { display: none; }
.pt-vackaart.pt-vackaart .vac-uren { display: none; }
.pt-vacregel.pt-vacregel .vac-uren { margin: 0; color: rgba(255,255,255,.6); font-size: .82rem; }

/* ---------- hele loop-kaart klikbaar ---------- */
.pt-tegel.pt-tegel, .pt-projectkaart.pt-projectkaart, .pt-vackaart.pt-vackaart, .pt-vacregel.pt-vacregel { position: relative; }
.pt-kaartlink.pt-kaartlink { position: absolute; inset: 0; margin: 0; width: auto; z-index: 4; }
.pt-kaartlink.pt-kaartlink .elementor-button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; background: none; box-shadow: none; border-radius: inherit;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
}
.pt-kaartlink.pt-kaartlink .elementor-button:hover { background: none; transform: none; }
.pt-kaartlink.pt-kaartlink .elementor-button-content-wrapper,
.pt-kaartlink.pt-kaartlink .elementor-button-icon { display: none; }
/* echte knoppen/links binnen de kaart blijven bovenop de overlay */
.pt-vackaart.pt-vackaart .pt-meer, .pt-tegel.pt-tegel .pt-pijl-cirkel { position: relative; z-index: 5; pointer-events: none; }


/* ============================================================
   KOP-RIJ: introtekst altijd ONDER de kop (verzoek klant)
   Knoppen en de Google-pil blijven wel rechts staan.
   ============================================================ */
.pt-koprij.pt-koprij, .zak-koprij, .dns-koprij, .prj-koprij, .loc-koprij, .vac-koprij,
.psg-koprij { flex-wrap: wrap; }
.pt-koprij.pt-koprij > .elementor-widget-text-editor,
.zak-koprij > .elementor-widget-text-editor,
.dns-koprij > .elementor-widget-text-editor,
.prj-koprij > .elementor-widget-text-editor,
.loc-koprij > .elementor-widget-text-editor,
.vac-koprij > .elementor-widget-text-editor,
.psg-koprij > .elementor-widget-text-editor {
  flex: 1 1 100%; max-width: 58ch !important; margin-top: 4px;
}


/* ---------- Elementor Taxonomy Filter in de huisstijl van .plaats ---------- */
.pt-filter.pt-filter .e-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-filter.pt-filter .e-filter-item {
  background: var(--wit); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 600; font-size: .88rem; line-height: 1.7;
  padding: 8px 18px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.pt-filter.pt-filter .e-filter-item:hover {
  box-shadow: inset 0 0 0 2px var(--groen-fris); background: var(--groen-licht); color: var(--groen-diep);
}
.pt-filter.pt-filter .e-filter-item[aria-pressed="true"] {
  background: var(--groen-fris); color: var(--groen-diep); box-shadow: none;
}

/* terugknop op de single-templates: compacter en rustiger */
.psg-terug .elementor-button,
.pt-knop--terug.pt-knop--terug .elementor-button {
  padding: 10px 20px; font-size: .88rem; gap: 8px;
  background: rgba(255,255,255,.1); color: var(--wit);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.psg-terug .elementor-button:hover,
.pt-knop--terug.pt-knop--terug .elementor-button:hover {
  background: rgba(255,255,255,.18); color: var(--wit); transform: translateY(-1px);
}
.psg-terug .elementor-button-icon,
.pt-knop--terug.pt-knop--terug .elementor-button-icon { width: auto; height: auto; background: none; }
.psg-terug .elementor-button-icon svg,
.pt-knop--terug.pt-knop--terug .elementor-button-icon svg { width: 13px; height: 13px; }


/* ---------- loop-item wrapper mag geen eigen kaart-uiterlijk hebben ---------- */
/* anders zie je bij de hover-lift een tweede, verschoven wit blok achter de kaart */
.elementor-loop-container > .e-loop-item {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
}

/* ---------- terugknop op single-templates (compacter) ---------- */
.pt-knop.pt-knop.psg-terug .elementor-button,
.pt-knop.pt-knop.pt-knop--terug .elementor-button {
  padding: 10px 20px; font-size: .88rem; gap: 8px;
  background: rgba(255,255,255,.1); color: var(--wit);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.pt-knop.pt-knop.psg-terug .elementor-button:hover,
.pt-knop.pt-knop.pt-knop--terug .elementor-button:hover {
  background: rgba(255,255,255,.18); color: var(--wit); transform: translateY(-1px);
}
.pt-knop.pt-knop.psg-terug .elementor-button-icon,
.pt-knop.pt-knop.pt-knop--terug .elementor-button-icon { width: auto; height: auto; background: none; }
.pt-knop.pt-knop.psg-terug .elementor-button-icon svg,
.pt-knop.pt-knop.pt-knop--terug .elementor-button-icon svg { width: 13px; height: 13px; }

/* ---------- vinkjes in post-content: exact hetzelfde vinkje als .vinkjes ---------- */
.pt-contentvink.pt-contentvink li::before {
  top: .15em; width: 22px; height: 22px;
  background-color: var(--groen-fris); background-image: none;
}
.pt-contentvink.pt-contentvink li::after {
  content: ""; display: block; position: absolute;
  left: 4.5px; top: calc(.15em + 4.5px); width: 13px; height: 13px;
  background-color: var(--groen-diep); border: 0; transform: none;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
}


/* ============================================================
   PAGINAHERO: exact de maten van .pag-hero uit het origineel
   .pag-hero h1 { margin: 14px 0 10px }
   .pag-hero p  { color: rgba(255,255,255,.8); max-width: 62ch; font-size: 1.08rem }
   ============================================================ */
.pt-paghero.pt-paghero .elementor-widget-heading h1.elementor-heading-title,
.dns-paghero .elementor-widget-heading h1.elementor-heading-title,
.prj-paghero .elementor-widget-heading h1.elementor-heading-title,
.loc-paghero .elementor-widget-heading h1.elementor-heading-title,
.vac-paghero .elementor-widget-heading h1.elementor-heading-title,
.zak-paghero .elementor-widget-heading h1.elementor-heading-title,
.psg-paghero .elementor-widget-heading h1.elementor-heading-title { margin: 14px 0 10px; }

/* :not(.pt-kruimel) — het kruimelpad is ook een text-editor maar heeft zijn
   eigen, kleinere opmaak. */
.pt-paghero.pt-paghero .elementor-widget-text-editor:not(.pt-kruimel),
.dns-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.prj-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.loc-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.vac-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.zak-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.psg-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel),
.dns-heroint, .prj-heroint, .loc-heroint, .zak-heroint, .vac-heroint, .psg-heroint,
.vcs-herotxt .elementor-widget-text-editor {
  font-size: 1.08rem; max-width: 62ch !important; color: rgba(255,255,255,.8);
}
.pt-paghero.pt-paghero .elementor-widget-text-editor:not(.pt-kruimel) p,
.dns-paghero .elementor-widget-text-editor:not(.pt-kruimel.pt-kruimel) p,
.prj-paghero .elementor-widget-text-editor p,
.loc-paghero .elementor-widget-text-editor p,
.vac-paghero .elementor-widget-text-editor p,
.zak-paghero .elementor-widget-text-editor p,
.psg-paghero .elementor-widget-text-editor p { margin: 0; }


/* ============================================================
   TYPOGRAFIE: exact de line-heights uit het origineel
   h1 1.14 · h2 1.24 · h3/h4 1.3
   ============================================================ */
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title { line-height: 1.3; }

/* ---------- kaartkop: icoon + titel + subtitel ---------- */
/* .seizoen__kop { display:flex; align-items:center; gap:12px }
   .seizoen h3 { margin:0 }  .seizoen small { display:block; font-size:.8rem } */
.pt-seizoen.pt-seizoen .pt-seizoen-icoon { flex: 0 0 auto; margin-right: 0; }
.pt-seizoen.pt-seizoen .elementor-widget-heading .elementor-heading-title { margin: 0; line-height: 1.3; }
.pt-seizoen.pt-seizoen .pt-periode,
.pt-seizoen.pt-seizoen .pt-periode p { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--tekst-grijs); }

/* icon-box (USP): tekstblok strak tegen het icoon */
.pt-usp.pt-usp .elementor-icon-box-wrapper { gap: 14px; }
.pt-usp.pt-usp .elementor-icon-box-content { display: grid; gap: 2px; }
.pt-usp.pt-usp .elementor-icon-box-title,
.pt-usp.pt-usp .elementor-icon-box-description { margin: 0; }

/* ---------- stapkaart: vaste ruimte onder het nummer en de titel ---------- */
.pt-stap.pt-stap::before { margin-bottom: 14px; }
.pt-stap.pt-stap .elementor-heading-title { margin: 0 0 .5em; line-height: 1.3; }
.pt-stap.pt-stap .elementor-widget-text-editor p { margin: 0; }


/* ============================================================
   NALOOP: uitlijning, gaps en hover
   ============================================================ */
/* kop-rij: kop krimpt, pil blijft rechts en valt nooit buiten de container */
.pt-koprij.pt-koprij, .prj-koprij, .loc-koprij, .zak-koprij, .dns-koprij, .vac-koprij,
.psg-koprij, .vcs-koprij { flex-wrap: wrap; }
/* LET OP: geen flex-basis in px. Als een kop-rij als kolom staat (intro onder de
   kop) wordt die basis de HOOGTE, en dan wordt de eyebrow ineens 320px hoog. */
.pt-koprij.pt-koprij > :first-child, .prj-koprij > :first-child, .loc-koprij > :first-child,
.zak-koprij > :first-child, .dns-koprij > :first-child, .vac-koprij > :first-child,
.psg-koprij > :first-child, .vcs-koprij > :first-child { flex: 0 1 auto; min-width: 0; }
/* broodtekst in een kop-rij staat altijd ónder de kop */
.pt-koprij.pt-koprij > .elementor-widget-text-editor, .prj-koprij > .elementor-widget-text-editor,
.loc-koprij > .elementor-widget-text-editor, .zak-koprij > .elementor-widget-text-editor,
.dns-koprij > .elementor-widget-text-editor, .vac-koprij > .elementor-widget-text-editor,
.psg-koprij > .elementor-widget-text-editor, .vcs-koprij > .elementor-widget-text-editor {
  flex: 1 1 100%; max-width: 58ch !important; margin-top: 4px;
}
.pt-googlepill.pt-googlepill, .loc-pill, .prj-pill, .zak-pill { flex: 0 0 auto; max-width: 100%; }

/* ruimte tussen introtekst en de knoprij in de hero's */
.pt-knoprij.pt-knoprij, .prj-knoprij, .psg-knoprij, .loc-knoprij, .dns-knoprij,
.zak-knoprij, .vac-knoprij { margin-top: 26px; }

/* USP-balk: puur informatief, dus geen hover-effect */
.pt-usp.pt-usp, .pt-usp.pt-usp *, .loc-uspbalk .pt-usp.pt-usp, .zak-uspbalk .pt-usp.pt-usp { cursor: default; }
.pt-usp.pt-usp:hover, .pt-usp.pt-usp:hover .elementor-icon-box-icon .elementor-icon,
.pt-usp.pt-usp .elementor-icon-box-wrapper:hover {
  background: none; transform: none; box-shadow: none;
}
.pt-usp.pt-usp:hover .elementor-icon-box-icon .elementor-icon { background: rgba(255,255,255,.1); }
.pt-usp--licht.pt-usp--licht:hover .elementor-icon-box-icon .elementor-icon { background: var(--groen-licht); }
.pt-usp.pt-usp .elementor-icon-box-title,
.pt-usp.pt-usp .elementor-icon-box-title a,
.pt-usp.pt-usp:hover .elementor-icon-box-title { color: var(--wit); }
.pt-usp--licht.pt-usp--licht .elementor-icon-box-title,
.pt-usp--licht.pt-usp--licht:hover .elementor-icon-box-title { color: var(--groen-diep); }


/* FAQ: geen harde focus-rand op de open vraag (wel zichtbaar bij toetsenbordnavigatie) */
.pt-faq.pt-faq .elementor-tab-title:focus,
.pt-faq.pt-faq .elementor-toggle-title:focus,
.pt-faq.pt-faq .elementor-accordion-title:focus,
.pt-faq.pt-faq .elementor-tab-title a:focus { outline: none; box-shadow: none; }
.pt-faq.pt-faq .elementor-toggle-title:focus-visible,
.pt-faq.pt-faq .elementor-tab-title:focus-visible {
  outline: 2px solid var(--groen-fris); outline-offset: 3px; border-radius: 6px;
}

/* de "Alle"-knop krijgt dezelfde pil-stijl */
.pt-filter.pt-filter .e-filter-item:first-child { font-weight: 700; }
.pt-filter.pt-filter .e-filter { margin-top: 4px; }


/* ---------- vacature-excerpt op een donkere achtergrond ---------- */
.pt-op-donker.pt-op-donker .vac-uren,
.vcs-hero .vac-uren,
.vcs-herotxt .vac-uren {
  background: none; padding: 0; border-radius: 0;
  color: rgba(255,255,255,.75); font-family: var(--font-kop); font-weight: 600;
  font-size: .95rem; display: block; margin: 0 0 14px;
}
.pt-op-donker.pt-op-donker .vac-usp,
.vcs-hero .vac-usp { text-align: left; }
.pt-op-donker.pt-op-donker .vac-usp li,
.vcs-hero .vac-usp li { color: rgba(255,255,255,.85); }
.pt-op-donker.pt-op-donker .vac-usp strong,
.vcs-hero .vac-usp strong { color: var(--wit); }
/* de losse vinkjeslijst mag nooit uitgelijnd raken door een flex-ouder */
.vac-usp, .vac-usp li { text-align: left; justify-content: flex-start; }

/* ---------- juridische tekstpagina's ---------- */
.prv-tekst { max-width: 76ch; overflow-wrap: anywhere; word-break: normal; }
.prv-tekst a { overflow-wrap: anywhere; }
.prv-tekst h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prv-tekst p, .prv-tekst li { color: var(--tekst-grijs); }
.prv-tekst a { color: var(--groen); font-weight: 600; }

/* ---------- kaart: plaatsen zijn klikbaar ---------- */
.leaflet-container .pt-osm-label.pt-osm-label { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.leaflet-container .pt-osm-label--hover.pt-osm-label--hover {
  background: var(--groen-fris) !important; color: var(--groen-diep) !important;
  box-shadow: 0 4px 10px rgba(42,55,29,.25) !important;
}
.leaflet-container path.leaflet-interactive { cursor: pointer; }
.leaflet-container .pt-osm-label--link.pt-osm-label--link { pointer-events: auto !important; cursor: pointer; }
.leaflet-container .pt-osm-label--link.pt-osm-label--link:hover {
  background: var(--groen-fris) !important; color: var(--groen-diep) !important;
  box-shadow: 0 4px 10px rgba(42,55,29,.25) !important;
}
.leaflet-container path.leaflet-interactive:focus-visible { outline: 2px solid var(--groen-fris); outline-offset: 2px; }


/* ---------- sterren: eicons laadt niet op deze site, dus een SVG-masker ---------- */
/* (het glyph-alternatief viel terug op een tofu-blokje in Nunito Sans) */
.elementor-star-rating i {
  position: relative; display: inline-block; width: 1em; height: 1em; line-height: 1;
  vertical-align: -.12em; font-style: normal;
  /* Elementor zet het eicons-teken als tekst in de <i>; dat lettertype laadt
     hier niet, dus die tekst wordt weggeschoven en afgekapt. */
  overflow: hidden; text-indent: 100%; white-space: nowrap;
}
.elementor-star-rating i::before {
  content: ""; position: absolute; inset: 0; text-indent: 0;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z"/></svg>') center/contain no-repeat;
}
.elementor-star-rating { letter-spacing: 2px; }
.elementor-star-rating__title { display: none; }

/* ---------- offertepopup: keuzetegels netjes uitgelijnd ---------- */
/* labels mogen afbreken (anders lopen ze uit de tegel) en alle tegels krijgen
   dezelfde hoogte, ook als een label over twee regels gaat. */
.popup-raster, .popup-raster--3 { grid-auto-rows: 1fr; align-items: stretch; }
.popup-keuze { align-items: center; white-space: normal; min-width: 0; }
.popup-keuze span { min-width: 0; overflow-wrap: anywhere; }
.popup-keuze .ic { flex: 0 0 auto; }

.pt-intro.pt-intro, .pt-intro.pt-intro p { color: var(--tekst-grijs); }
.pt-op-donker.pt-op-donker .pt-intro,
.pt-op-donker.pt-op-donker .pt-intro p,
.pt-paghero.pt-paghero .pt-intro,
.pt-paghero.pt-paghero .pt-intro p { color: rgba(255,255,255,.78); }

/* ---------- kaart: OpenStreetMap-tegels in de huisstijl ---------- */
/* OSM heeft geen API-sleutel nodig; het filter dempt de kleuren zodat de kaart
   bij de site past. Laden de tegels niet, dan blijft het lichte groenvlak staan. */
.leaflet-container { background: var(--groen-licht) !important; }
.pt-kaart-zonder-tegels.pt-kaart-zonder-tegels .leaflet-tile-pane { display: none; }
.leaflet-container .leaflet-control-attribution {
  font-size: 10px; background: rgba(255,255,255,.7); font-family: var(--font-body);
}
.leaflet-container .leaflet-control-attribution a { color: var(--groen); }

/* ---------- bedanktscherm van de offertepopup ---------- */
/* De kop is bewust een <p>: het bedankje is geen paginakop, alleen een
   opvallende regel. De opmaak komt van de site-koptypografie. */
.funnel-succes .funnel-succes__kop {
  font-family: var(--font-kop, inherit);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--groen-diep);
  margin: 0 0 10px;
}
/* WhatsApp is een vlak merklogo, geen lijnicoon zoals de rest van de sprite. */
.ic--vlak { fill: currentColor; stroke: none; }
.knop--whatsapp .ic--vlak { width: 20px; height: 20px; }

/* ---------- lange woorden op smalle schermen ---------- */
/* Nederlandse samenstellingen als "Privacyverklaring", "groenonderhoud" en
   "bedrijventerreinen" passen op 320px niet binnen de regel. Zonder afbreken
   steken ze buiten het scherm en valt het einde van de kop weg. break-word
   breekt alleen het woord dat er echt niet in past; kortere woorden blijven
   gewoon heel. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-icon-list-text,
.elementor-button-text,
.pt-intro.pt-intro, .pt-schrift.pt-schrift { overflow-wrap: break-word; }

/* Onder 480px afbreken met een echt afbreekstreepje op de lettergreep
   ("Privacy-verklaring") in plaats van midden in het woord. De pagina staat op
   lang="nl-NL", dus de browser gebruikt de Nederlandse woordafbreking. Boven
   480px verandert er niets aan de koppen. */
@media (max-width: 480px) {
  h1, h2, h3,
  .elementor-heading-title { hyphens: auto; -webkit-hyphens: auto; }
}


/* --- vacatures.css --- */
/* ============================================================
   VACATURES — overzichtspagina 52 (/vacatures/) prefix .vac-
   en de Elementor single-template voor CPT `vacature` prefix .vcs-

   Binnenmarges, gaps, flex-richting, uitlijning, achtergronden,
   schaduwen, het plakken van de sollicitatiekaart en de kleuren en
   groottes van koppen en tekst staan nu als ECHTE widget-instelling
   in build/pages/vacatures.py en build/templates/vacature_single.py.

   Wat hier nog staat kan Elementor niet:
   - clamp() (meegroeiende maten); een instelling kan alleen een vaste
     maat per apparaat, en dat geeft een andere sprong op tussenmaten;
   - rasters met ongelijke kolommen (1.4fr .9fr) en rasters die op
     640px of 860px omklappen: dat zijn geen Elementor-breekpunten;
   - ::before / ::after (het scheidingsteken in het kruimelpad, de
     vinkjes en nummers in de vacaturetekst, het kopje boven de
     pluspunten);
   - de opmaak van de vacaturetekst zelf, want die komt uit het
     tekstveld van de vacature en niet uit widgets.
   ============================================================ */

/* ---------- kader ----------
   De breedte is een container-instelling; dit houdt de wrap
   gecentreerd en zonder maximumbreedte van de kit. */
.vac-wrap.e-con,
.vcs-wrap.e-con { max-width: none; margin-inline: auto; }

/* ---------- sectieritme (clamp: geen instelling) ---------- */
.vac-sectie.e-con { padding: clamp(60px, 7vw, 90px) 0; }
.vcs-sectie.e-con { padding: clamp(60px, 7vw, 90px) 0; }
.vac-paghero.e-con { padding: clamp(56px, 7vw, 100px) 0; }

/* ============================================================
   1. OVERZICHTSPAGINA (52)
   ============================================================ */
.vac-herotxt > .elementor-widget { width: 100%; }
.vac-herotxt .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 10px; }
.vac-heroint p { margin: 0; }

/* kop-rij: alleen de meegroeiende ondermarge blijft CSS */
.vac-koprij.e-con { margin-bottom: clamp(38px, 4.5vw, 60px); }
.vac-koprij-l .elementor-widget-heading:last-child .elementor-heading-title { margin: 0; }

/* 4 stap-kaarten (klapt om op 640px, geen Elementor-breekpunt) */
.vac-raster4.e-con {
  --display: grid; display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.vac-stap.e-con > .elementor-widget:last-child .elementor-widget-container p:last-child { margin: 0; }

/* 6 kaarten met icon-box: waarom bij ons werken */
.vac-waarom6.e-con {
  --display: grid; display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.vac-waaromkaart .pt-usp.pt-usp .elementor-icon-box-content { min-width: 0; }

/* faq over solliciteren (verder gestyled via .pt-faq in de kit) */
.vac-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

/* loop-grid vacaturekaarten */
.vac-grid .elementor-grid { align-items: stretch; }

/* eind-cta */
.vac-eindcta > .elementor-widget { width: 100%; }
.vac-eindcta .elementor-heading-title { margin: 0; }

/* ============================================================
   2. SINGLE TEMPLATE VACATURE
   ============================================================ */

/* --- hero: ongelijke kolommen en meegroeiende ruimte --- */
.vcs-heroin.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(56px, 7vw, 100px) 0;
}
.vcs-heroin > .e-con { min-width: 0; }
.vcs-herotxt > .elementor-widget { width: 100%; }

/* kruimelpad: het schuine streepje ertussen is een ::before */
.vcs-kruimel > .elementor-widget { width: auto; display: flex; align-items: center; gap: 8px; }
.vcs-kruimel > .elementor-widget + .elementor-widget::before {
  content: "/"; color: rgba(255, 255, 255, .35);
}
.vcs-kruimel p,
.vcs-kruimel .elementor-heading-title { margin: 0; font-size: .84rem; font-weight: 400; }
.vcs-kruimel .elementor-heading-title { color: rgba(255, 255, 255, .65); font-family: var(--font-body); }

.vcs-eyebrow .elementor-heading-title { margin-bottom: 0; }
.vcs-h1 .elementor-heading-title { margin: 0 0 12px; }
/* de uren-regel is een dynamische post-excerpt: die komt zonder <p> binnen */
.vcs-uren.elementor-widget-text-editor,
.vcs-uren p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-kop);
  font-weight: 600;
}

.vcs-herofoto .elementor-widget-image { width: 100%; }
.vcs-herofoto img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }

/* --- inhoud + sollicitatiekaart: ongelijke kolommen --- */
.vcs-twee.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}
.vcs-twee > .e-con { min-width: 0; }

/* --- de post_content van de vacature ---
   Dit is de tekst van de vacature zelf, geen widgets. Alles hieronder
   moet dus CSS blijven. */
.vcs-postcontent > *:first-child,
.vcs-postcontent .elementor-widget-container > *:first-child { margin-top: 0; }
.vcs-postcontent h2 {
  font-size: 1.5rem; margin: clamp(36px, 4vw, 52px) 0 .5em;
}
.vcs-postcontent h2:first-child { margin-top: 0; }
.vcs-postcontent ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; color: var(--tekst-grijs);
}
/* let op: geen flex op de li, anders krijgt de tekst na een <strong> de gap
   erbij ("gemiddeld , passend bij"). Vandaar het vinkje absoluut gepositioneerd. */
.vcs-postcontent li { display: block; position: relative; padding-left: 34px; }
.vcs-postcontent li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--groen-fris);
}
.vcs-postcontent li::after {
  content: ""; position: absolute; left: 4.5px; top: 6.5px;
  width: 13px; height: 13px; background-color: var(--groen-diep);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 13px no-repeat;
}
.vcs-postcontent li strong { color: var(--groen-diep); }

.vcs-postcontent h3 {
  font-size: 1.08rem;
  font-family: var(--font-kop);
  color: var(--groen-diep);
  margin: clamp(24px, 3vw, 34px) 0 .35em;
}
.vcs-postcontent h2 + h3 { margin-top: .8em; }
.vcs-postcontent p { color: var(--tekst-grijs); }
.vcs-postcontent ul + p { margin-top: 1em; }
.vcs-postcontent p + ul { margin-top: .4em; }

/* genummerde sollicitatiestappen in de vacaturetekst */
.vcs-postcontent ol.vcs-stappenlijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; counter-reset: vcsstap;
  color: var(--tekst-grijs);
}
.vcs-postcontent ol.vcs-stappenlijst li {
  display: block; position: relative; padding-left: 40px;
}
.vcs-postcontent ol.vcs-stappenlijst li::before {
  counter-increment: vcsstap;
  content: counter(vcsstap);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--groen); color: #fff;
  font-family: var(--font-kop); font-weight: 800; font-size: .82rem;
  display: grid; place-items: center;
}
.vcs-postcontent ol.vcs-stappenlijst li strong { color: var(--groen-diep); }
.vcs-postcontent ol.vcs-stappenlijst + p { margin-top: 1.2em; }

/* de 3 pluspunten bovenaan de vacaturetekst (kopje via ::before) */
.pt-plus.pt-plus {
  background: var(--groen-licht);
  border-radius: var(--blad-klein);
  padding: 22px 26px 24px;
  margin: 0 0 clamp(30px, 4vw, 44px) !important;
}
.pt-plus.pt-plus::before {
  content: "Dit maakt deze baan leuk";
  font-family: var(--font-kop); font-weight: 800;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--groen); margin-bottom: 2px;
}
.pt-plus.pt-plus li { color: var(--tekst); }

/* stappenblok in de linkerkolom */
.vcs-blok.e-con { margin-top: clamp(36px, 4vw, 52px); }
.vcs-blok > .elementor-widget { width: 100%; }
.vcs-blok .pt-schrift.pt-schrift .elementor-heading-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.vcs-stappen3.e-con {
  --display: grid; display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.vcs-stap .elementor-widget-text-editor p:last-child { margin: 0; }

/* sollicitatiekaart: het plakken is een instelling, het meeschuiven van
   het anker (#solliciteer-blok) niet */
.vcs-kaart.e-con { scroll-margin-top: 110px; }
.vcs-kaart > .elementor-widget { width: 100%; }
.vcs-kaart .vcs-kaartkop .elementor-heading-title { margin: 0 0 .4em; }
.vcs-kaarttekst p { margin: 0 0 6px; }
.vcs-of p { margin: 14px 0 0; }
.vcs-of a { font-weight: 700; }

/* formulier in de kaart */
.vcs-kaart .pt-form.pt-form .elementor-field-group { margin-bottom: 4px; }
.vcs-kaart .pt-form.pt-form .elementor-form-fields-wrapper { margin-bottom: 0; }

/* --- USP-balk onder de hero --- */
.vcs-uspraster.e-con {
  --display: grid; display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.vcs-uspraster > .elementor-widget { width: auto; min-width: 0; }
.vcs-uspraster .pt-usp.pt-usp .elementor-icon-box-wrapper { align-items: flex-start; }

/* --- werken bij ons --- */
.vcs-werken.e-con {
  --display: grid; display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.vcs-werkkaart.e-con > .elementor-widget:last-child .elementor-widget-container p:last-child { margin: 0; }

/* --- projecten-loop --- */
.vcs-projectgrid .elementor-grid { align-items: stretch; }
.vcs-projectknop.e-con > .elementor-widget { width: auto; max-width: none; }

/* --- tweede sollicitatie-cta: ongelijke kolommen --- */
.vcs-cta2-in.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
.vcs-cta2-in > .e-con { min-width: 0; }
.vcs-cta2-tekst > .elementor-widget { width: 100%; }
.vcs-cta2-tekst .elementor-widget-heading .elementor-heading-title { margin: 0 0 .5em; }
.vcs-cta2-tekst .elementor-widget-text-editor p { margin: 0 0 18px; color: var(--tekst-grijs); }
.vcs-ctavink .elementor-icon-list-items { display: grid; gap: 8px; }
.vcs-cta2-kaart > .elementor-widget { width: 100%; }
.vcs-cta2-kaart .elementor-widget-button .elementor-button { width: 100%; }
.vcs-ctamail p { margin: 6px 0 0; }
.vcs-ctamail a { font-weight: 700; }

/* --- JSON-LD schema-widget: niets te zien --- */
.vcs-schema.e-con { display: none; }

/* --- andere vacatures --- */
.vcs-koprij.e-con { margin-bottom: clamp(30px, 4vw, 48px); }
.vcs-koprij-l .elementor-widget-heading:last-child .elementor-heading-title { margin: 0; }

/* --- eind-cta --- */
.vcs-eindcta > .elementor-widget { width: 100%; }
.vcs-eindcta .elementor-heading-title { margin: 0; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1024px) {
  .vac-raster4.e-con { grid-template-columns: repeat(2, 1fr); }
  .vcs-twee.e-con { grid-template-columns: 1fr; }
  .vcs-kaart.e-con { position: static; }
  .vcs-uspraster.e-con { grid-template-columns: repeat(2, 1fr); }
  .vcs-werken.e-con { grid-template-columns: repeat(2, 1fr); }
  .vac-waarom6.e-con { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .vcs-heroin.e-con { grid-template-columns: 1fr; }
  .vcs-herofoto { order: -1; }
  .vcs-herofoto img { aspect-ratio: 16 / 10; }
  .vac-koprij.e-con,
  .vcs-koprij.e-con { flex-direction: column; align-items: flex-start; }
  .vcs-stappen3.e-con { grid-template-columns: 1fr; }
  .vcs-cta2-in.e-con { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vac-raster4.e-con { grid-template-columns: 1fr; }
  .vcs-uspraster.e-con { grid-template-columns: 1fr; gap: 18px; }
  .vcs-werken.e-con { grid-template-columns: 1fr; }
  .vac-waarom6.e-con { grid-template-columns: 1fr; }
}


/* --- werkgebied.css --- */
/* ============================================================
   WERKGEBIED
   - pagina /werkgebied/                      prefix .wgb-
   - kaart + FAQ + wijken op de locatiepagina's (template 281)
   Aanvulling op pt-widgets.css. Niets hierin raakt andere pagina's.
   ============================================================ */

/* ---------- wat Elementor niet als instelling kan ----------
   Breedtes, marges, padding, flex-richting en gaps staan in
   build/pages/werkgebied.py. Hier blijft over: de marges van koppen en
   alinea's binnen een widget, de max-breedtes (daar heeft een container geen
   control voor) en de ::before-scheiders van het kruimelpad. */
.wgb-hero .pt-h1.pt-h1 .elementor-heading-title { margin: 0 0 10px; }
/* .pt-intro heeft een max-width in ch, die met de fontgrootte van het widget
   meeschaalt; de grootte van de <p> blijft daarom hier staan */
.wgb-heroint p { margin: 0; font-size: 1.08rem; }
.wgb-koprij.e-con { max-width: 62ch; }
.wgb-cta .elementor-heading-title { margin: 0 0 .4em; }
.wgb-cta .pt-intro.pt-intro p { margin: 0; }

/* ---------- kruimelpad ---------- */
.wgb-kruimel .pt-kruimel.pt-kruimel p { margin: 0; }
.wgb-kruimel .pt-kruimel.pt-kruimel span::before {
  content: "/"; margin: 0 8px; color: rgba(255, 255, 255, .35);
}

/* ============================================================
   KAARTSECTIE (zelfde opbouw als het werkgebied op de homepage)
   De Leaflet-kaart is geen Elementor-widget maar de uitvoer van de shortcode
   [pt_kaart]; alles onder .leaflet- en .wgb-canvas blijft dus CSS.
   ============================================================ */
/* de shortcode/html-widget mag geen positioneringscontext zijn,
   anders krijgt de kaart 0x0 */
.wgb-kaartsectie .elementor-widget-shortcode,
.wgb-kaartsectie .elementor-widget-shortcode > .elementor-widget-container,
.wgb-kaartsectie .elementor-widget-shortcode .elementor-shortcode,
.wgb-kaartsectie .elementor-widget-html,
.wgb-kaartsectie .elementor-widget-html > .elementor-widget-container { position: static; }

.wgb-canvas { z-index: 0; }
.wgb-kaartsectie .leaflet-container { background: var(--groen-licht) !important; font-family: var(--font-body); }
.wgb-kaartsectie .leaflet-tile-pane {
  filter: grayscale(.78) saturate(.5) sepia(.3) hue-rotate(48deg) brightness(1.1) contrast(.82); opacity: .62;
}
.wgb-kaartsectie .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .7); }
.wgb-kaartsectie .leaflet-interactive { cursor: pointer; }
.pt-osm-label--nu.pt-osm-label--nu { font-size: 13px !important; box-shadow: 0 3px 10px rgba(42, 55, 29, .28) !important; }

/* glas-effect en max-breedte: geen van beide heeft een container-control */
.wgb-kaartkader.e-con {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  max-width: 560px;
}
.wgb-kaartkader .elementor-heading-title { margin: 0 0 .4em; }
.wgb-kaartkader .pt-intro.pt-intro p { margin: 0; }

/* plaats-pillen: flex-wrap, gelijk aan de homepage */
.wgb-plaatsen .elementor-grid {
  display: flex !important; flex-wrap: wrap; gap: 10px; grid-template-columns: none !important;
}
.wgb-plaatsen .elementor-grid-item { width: auto; }
.wgb-plaatsen .e-loop-item > .e-con { padding: 0; }

@media (min-width: 861px) {
  .wgb-kaartsectie.e-con { min-height: 640px; align-items: center; }
  .wgb-canvas { position: absolute; inset: 0; }
  .wgb-kaartsectie > .e-con-boxed > .e-con-inner { padding-block: clamp(60px, 7vw, 100px); }
}
@media (max-width: 860px) {
  .wgb-canvas { position: relative; height: 300px; }
  .wgb-kaartsectie > .e-con-boxed > .e-con-inner { padding-bottom: clamp(48px, 8vw, 72px); }
  .wgb-kaartkader.e-con { max-width: none; margin-top: -80px; }
  .wgb-kaartsectie .pt-osm-label.pt-osm-label { display: none !important; }
}

/* ============================================================
   WIJKEN EN KERNEN: uitvoer van de shortcode [pt_wijken], geen widgets
   ============================================================ */
.wgb-wijken { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.wgb-wijken span {
  display: inline-block; background: var(--wit); color: var(--groen-diep);
  font-family: var(--font-kop); font-weight: 600; font-size: .88rem; line-height: 1.7;
  padding: 8px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lijn);
}

/* ============================================================
   FAQ PER PLAATS: shortcode [pt_faq], eigen <details>-opbouw, geen widget
   ============================================================ */
.wgb-faq { display: grid; gap: 12px; margin-top: 22px; }
.wgb-faq details {
  background: var(--wit); border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden;
}
.wgb-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-kop); font-weight: 600; font-size: .98rem; color: var(--groen-diep);
}
.wgb-faq summary::-webkit-details-marker { display: none; }
.wgb-faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--groen-fris);
  transition: transform .4s var(--ease);
}
.wgb-faq details[open] summary::after { transform: rotate(45deg); }
.wgb-faq details p { padding: 0 22px 20px; margin: 0; color: var(--tekst-grijs); font-size: .95rem; }

/* ============================================================
   SEO-tekst op /werkgebied/
   Ongelijke kolomverhouding: geen gelijke fr-kolommen, dus geen grid-control.
   ============================================================ */
.wgb-tekstrij.e-con {
  --display: grid; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 4vw, 56px); width: 100%;
}
.wgb-tekstrij > .e-con { min-width: 0; }
.wgb-tekst p { margin: 0 0 1em; }
.wgb-tekst p:last-child { margin-bottom: 0; }
.wgb-tekst a { color: var(--groen); font-weight: 700; }
.wgb-lijstkaart .elementor-heading-title { margin: 0 0 16px; }

@media (max-width: 1020px) {
  .wgb-tekstrij.e-con { grid-template-columns: 1fr; }
}

/* ============================================================
   HAAKJES IN HET LOCATIE-TEMPLATE (281)
   ============================================================ */
.loc-wijken .wgb-wijken { margin: 18px 0 4px; }
.loc-faqdyn .wgb-faq { margin-top: 22px; }


/* --- zakelijk.css --- */
/* ============================================================
   ZAKELIJK & VVE - pagina 149 (/zakelijk-vve/)
   Eigen widget-CSS, alles met prefix .zak- zodat het geen
   andere pagina's raakt. Aanvulling op pt-widgets.css.

   Kleuren, typografie, padding, marges, gaps, flex-richting,
   grid-kolommen en de sticky-positie staan als ECHTE
   widget-/container-instelling in build/pages/zakelijk.py.
   Hieronder staat alleen nog wat Elementor niet heeft:
     - ::before-inhoud (kruimelpad-scheiding)
     - marges op .elementor-heading-title en op losse <p>'s
       binnen een text-editor (daar is geen control voor)
     - max-width in ch
     - grid met ONgelijke kolommen (1.1fr .9fr) en clamp()-waarden
     - het terugzetten van sticky op mobiel (position is niet
       responsive in Elementor)
   ============================================================ */

/* ---------- kader ----------
   boxed-containers zijn sitebreed uitgezet, dus we maken de wrap zelf.
   `min()` + `margin-inline: auto` kan de breedte-control van Elementor niet. */
.zak-wrap.e-con {
  width: min(1220px, 100% - 48px);
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

/* ---------- sectieritme ----------
   clamp() past niet in de padding-control (die kent alleen vaste
   waarden per breakpoint). */
.zak-sectie.e-con { padding: clamp(80px, 10vw, 150px) 0; }
.zak-paghero.e-con { padding: clamp(56px, 7vw, 100px) 0; }

/* ---------- 1. paginahero ---------- */
.zak-kruimel p { margin: 0; }
.zak-kruimel span::before { content: "/"; margin: 0 8px; color: rgba(255,255,255,.35); }
.zak-heroint p { margin: 0; }

/* max-width in ch. frontend.min.css zet
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` (0,4,0),
   daarom hier ook vier klassen. */
.elementor .zak-koprij .pt-intro.pt-intro.pt-intro { max-width: 58ch; }

/* ---------- 3. tweekolomsraster (tekst + sticky CTA) ----------
   ongelijke kolommen + clamp()-gap: blijft CSS. */
.zak-twee.e-con {
  --display: grid; display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.zak-twee > .e-con { min-width: 0; }

/* SEO-tekstkolom: koppen + losse alinea-widgets */
.zak-seo.e-con { max-width: 72ch; }
.zak-seo .elementor-widget-heading:not(.pt-schrift.pt-schrift) .elementor-heading-title { margin: 0 0 .5em; }
.zak-seo .elementor-widget-text-editor p { margin: 0 0 1em; }
.zak-seo .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.zak-seo .elementor-widget-text-editor a { color: var(--groen); }

/* sticky CTA-kaart */
.zak-cta .zak-cta-kop .elementor-heading-title { margin: 16px 0 .5em; }
.zak-cta .zak-cta-tekst p { margin: 0; }
.zak-cta .zak-of p { margin: 0; }
.zak-cta .zak-of a { color: var(--creme); font-weight: 700; text-decoration: none; }

/* ---------- kop-rij (eyebrow + h2 links, intro rechts) ---------- */
.zak-koprij.e-con { padding: 0 0 clamp(38px, 4.5vw, 60px); }
.zak-koprij > .e-con,
.zak-koprij > .elementor-widget { min-width: 0; }
.zak-koprij-l .elementor-widget-heading:not(.pt-schrift.pt-schrift) .elementor-heading-title { margin: 0; }
.zak-koprij .pt-intro.pt-intro p { margin: 0; }

/* ---------- 4. seizoen-/opdrachtgeverkaart ---------- */
/* tekstkolom naast het icoon krimpt mee met zijn inhoud. Elementors
   breedte-control kent geen `auto` en geldt alleen vanaf 768px. */
.zak-seizoentxt.e-con,
.zak-wietxt.e-con { width: auto; }
.pt-seizoen.pt-seizoen .pt-periode p { margin: 0; }
.pt-seizoen.pt-seizoen .pt-bullets .elementor-icon-list-item { line-height: 1.4; }

/* ---------- 6. reviews ---------- */
.zak-pill.e-con { width: auto; flex: 0 0 auto; }
.zak-pill .elementor-star-rating__wrapper { display: flex; }
.zak-quote { flex: 1; }
.zak-quote p { margin: 0; }
.pt-review.pt-review .pt-wie-sub p { margin: 0; }

/* ---------- 7. FAQ ---------- */
.zak-faqkolom .elementor-widget-heading:not(.pt-schrift.pt-schrift) .elementor-heading-title { margin: 0; }

/* ---------- 8. eind-CTA ---------- */
.zak-eindcta .elementor-heading-title { margin: 0; }

/* ---------- responsive ----------
   Het aantal kolommen van de rasters staat als container-instelling
   (desktop 4/3, tablet 2, mobiel 1). Elementor knikt op 1024px en 767px,
   de oude CSS knikte op 1020px en 768px. Alleen die twee randen dekken
   we hier af, zodat 1021-1024px en precies 768px onveranderd blijven. */
@media (min-width: 1021px) and (max-width: 1024px) {
  .zak-uspbalk.e-con,
  .zak-raster4.e-con { grid-template-columns: repeat(4, 1fr); }
  .zak-raster3.e-con { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 768px) {
  .zak-uspbalk.e-con,
  .zak-raster4.e-con,
  .zak-raster3.e-con { grid-template-columns: 1fr; }
  .zak-koprij.e-con { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .zak-sectie.e-con { padding: 68px 0; }
  .zak-twee.e-con { grid-template-columns: 1fr; }
  .zak-cta.e-con { position: static; }
  .zak-seo.e-con { max-width: none; }
}
@media (max-width: 560px) {
  .zak-knoprij.e-con .pt-knop.pt-knop,
  .zak-knoppen.e-con .pt-knop.pt-knop { width: 100%; }
  .zak-knoprij.e-con .elementor-button,
  .zak-knoppen.e-con .elementor-button { width: 100%; justify-content: center; }
}

/* ===PT-WIDGET-LAAG-EIND=== *//* End custom CSS */