/* ============================================================================
   LOONBEDRIJF VAN KLEEF — BRUG NAAR ELEMENTOR (elementor.css)
   Laadt alleen als Elementor actief is (inc/elementor.php), na componenten.css
   en na de CSS van Elementor zelf. componenten.css en home.css blijven
   ongewijzigd: dit bestand laat dezelfde regels werken op de opbouw van
   Elementor (klassieke containers en widgets met de gt-klassen, zie
   tools/naar_elementor.php).

   Wat er anders is dan in de blokversie:
   - Elke band is een container (div.e-con.gt-band) binnen div.elementor, en
     elk tekstblok een widget (div.elementor-widget-…) met de alinea, lijst of
     kop daarbinnen. De gt-klasse van een alinea staat op die div, niet op de p.
   - Elementor geeft containers standaard flex, 10px binnenmarge en 20px
     tussenruimte, en koppen regelhoogte 1. Dat zetten we hier terug.
   - Tekst met foto, knoppen, fotoraster, veelgestelde vragen en de hero
     hebben een andere HTML; hun regels staan hieronder per bouwsteen.
   De basis-CSS van Elementor laadt op Elementor-pagina's vóór die van het
   thema (inc/elementor.php), zodat de gt-regels hun gewone voorrang houden.

   Inhoud
    1. Basis: containers en widgets neutraal
    2. Banden, losse tekst en omhullingen
    3. Tekst in widgets (alinea's, lijsten, koppen)
    4. Kaarten en rasters
    5. Tekst met foto
    6. Knoppen
    7. Fotoraster
    8. Veelgestelde vragen (accordeon)
    9. Offerteband
   10. Hero op de homepage
   11. Mobiel en tablet
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. BASIS
   Geen binnenmarge en geen tussenruimte van Elementor op onze containers: de
   maten komen uit componenten.css. Een container zonder eigen opmaak gedraagt
   zich als een gewoon blok (zoals een kolom of groep in de blokeditor).
   ------------------------------------------------------------------------- */
.elementor .e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}
.elementor .e-con:is(.lvk-blok, .gt-tekst-foto__tekst, .gt-hero__inhoud),
.elementor .e-con.e-child:not([class*="gt-"]) {
  display: block;
}
/* Widgets: geen eigen positionering (de klikbare dienstkaart rekt zijn link
   op over de hele kaart) en geen eigen uitlijning */
.elementor .elementor-widget { position: static; }
.elementor .elementor-widget-image { text-align: left; }
.elementor .elementor-widget-image img { display: block; }
/* Omhullingen van shortcodes (formulier, video, offerteband) */
.elementor .elementor-shortcode { display: block; }
/* Elementor laat de pagina vloeiend scrollen (html { scroll-behavior: smooth }
   in frontend.css); de blokversie springt direct naar een anker (#diensten).
   Wie "beweging verminderen" aanzet, krijgt dat al via style.css. */
html { scroll-behavior: auto; }

/* ----------------------------------------------------------------------------
   2. BANDEN, LOSSE TEKST EN OMHULLINGEN
   ------------------------------------------------------------------------- */
/* Banden op de volle breedte: de pagina staat op GeneratePress "Volle
   breedte", dus geen uitbreek-marges nodig */
.entry-content > .elementor > .e-con { margin-left: 0; margin-right: 0; max-width: none; }

/* Een omhulling om een blok dat zelf een band is (woordenband, offerteband):
   geen eigen ruimte */
.elementor .e-con.lvk-blok,
.elementor .lvk-blok > .elementor-widget,
.elementor .lvk-blok .elementor-shortcode > .elementor { padding: 0; margin: 0; }

/* Losse tekst bovenaan een pagina (contact): op dezelfde lijn als de banden,
   met de 40px witruimte die GeneratePress boven gewone inhoud zet */
.elementor .e-con.lvk-los {
  display: grid;
  grid-template-columns: minmax(var(--gt-zijmarge), 1fr) minmax(0, var(--gt-inhoud)) minmax(var(--gt-zijmarge), 1fr);
  padding: 40px 0 0;
}
.elementor.elementor .lvk-los > * { grid-column: 2; min-width: 0; margin: 0 0 1.1em; }
.elementor.elementor .lvk-los > .gt-intro { margin-bottom: 34px; max-width: 640px; color: var(--gt-tekst-zacht); line-height: 1.65; }
.entry-content > .elementor > .lvk-los:first-child > .elementor-widget-text-editor:first-child { font-size: 1.08em; color: var(--gt-tekst-zacht); }

/* Maximale breedtes van tekst in een band. Elementor zet max-width: 100% op
   elke widget in een container (.elementor.elementor .e-con > .elementor-widget,
   specificiteit 0,4,0); daarom hier met .elementor.elementor ervoor. */
.elementor.elementor .gt-band > .elementor-widget-heading { max-width: 720px; }
.elementor.elementor .gt-band > .gt-intro { max-width: 640px; }
.elementor.elementor .lvk-los > .gt-intro { max-width: 640px; }
.elementor.elementor .gt-hero__inhoud > .gt-hero__tekst { max-width: 560px; }
.elementor.elementor .gt-kaart--dienst > .gt-kaart__foto { max-width: none; }
/* Alle koppen: geen los woord op de laatste regel (ook in kaarten en tekst
   met foto; zie componenten.css §1 voor de blokversie) */
.elementor .elementor-heading-title { text-wrap: balance; }
/* Een kop midden in een band, na lopende tekst: h2 48px, h3 32px erboven
   (componenten.css §1). Niet na een eyebrow of intro: dat zijn hier ook
   tekstwidgets, en die houden hun 8px en 34px. */
.elementor .gt-band > .elementor-widget-text-editor:not(.gt-eyebrow):not(.gt-intro) + .elementor-widget-heading:has(> h2) { margin-top: 48px; }
.elementor .gt-band > .elementor-widget-text-editor:not(.gt-eyebrow):not(.gt-intro) + .elementor-widget-heading:has(> h3) { margin-top: 32px; }

/* ----------------------------------------------------------------------------
   3. TEKST IN WIDGETS
   Een alinea met een gt-klasse is een div met die klasse en een p erin. Bij
   de klassen die zelf de tekst opmaken (eyebrow, intro, hero-tekst, klein,
   "lees meer") neemt de p de opmaak van de div over; bij een klasse zonder
   eigen opmaak (gt-belnummers) gelden de gewone regels voor p. Opeenvolgende alinea's zonder klasse staan
   samen in één teksteditor; de ruimte ertussen is die van de band (20px), de
   kaart (14px) of het antwoord (12px), zoals in de blokversie.
   ------------------------------------------------------------------------- */
.elementor :is(.gt-eyebrow, .gt-intro, .gt-hero__tekst, .gt-klein, .gt-kaart__link).elementor-widget-text-editor > p {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-shadow: inherit;
}
.elementor :is(.gt-band, .gt-kaart, .lvk-los, .gt-hero__inhoud, .e-n-accordion-item) > .elementor-widget-text-editor > * { margin-top: 0; margin-bottom: 0; }
.elementor :is(.gt-band, .lvk-los) > .elementor-widget-text-editor > * + * { margin-top: 20px; }
.elementor .gt-kaart > .elementor-widget-text-editor > * + * { margin-top: 14px; }
/* Kolom zonder klasse (kolommen van de offerteband, tweekoloms rasters): in de
   blokversie een "flow"-layout van WordPress: 24px tussen de blokken, geen
   marge onder (:root :where(.is-layout-flow) > *). */
.elementor .e-con.e-child:not([class*="gt-"]) > *,
.elementor .e-con.e-child:not([class*="gt-"]) > .elementor-widget-text-editor > * { margin-top: 0; margin-bottom: 0; }
.elementor .e-con.e-child:not([class*="gt-"]) > * + *,
.elementor .e-con.e-child:not([class*="gt-"]) > .elementor-widget-text-editor > * + * { margin-top: 24px; }
.elementor.elementor .gt-cta-band .gt-knoppen { margin-top: 26px; }
/* Een lijst zonder eigen klasse (privacybeleid, cookiebeleid, referenties) staat in
   de blokversie direct in de band, en daar zet componenten.css margin-left: 0
   (.gt-band > *): de opsommingstekens hangen links naast de tekstkolom. In
   Elementor staat de lijst in een tekstvak en gold de 3em van GeneratePress. */
.elementor .gt-band > .elementor-widget-text-editor > :is(ul, ol) { margin-left: 0; }

/* Koppen: regelhoogte zoals style.css (Elementor zet 1) */
.elementor :is(h1, h2, h3, h4, h5, h6).elementor-heading-title { line-height: 1.2; }
.elementor h1.elementor-heading-title { line-height: 1.15; }

/* Tekst met foto: gewone marges zoals in het media-text-blok (kop 0,5em,
   alinea 1,1em eronder), niets boven de eerste en onder de laatste */
.elementor .gt-tekst-foto__tekst .elementor-heading-title { margin-bottom: 0.5em; }
.elementor .gt-tekst-foto__tekst > :first-child,
.elementor .gt-tekst-foto__tekst > :first-child > :first-child { margin-top: 0; }
.elementor .gt-tekst-foto__tekst > :last-child,
.elementor .gt-tekst-foto__tekst > :last-child > :last-child { margin-bottom: 0; }
/* eyebrow: 8px eronder (p.gt-eyebrow) */
.elementor .gt-tekst-foto__tekst > .gt-eyebrow { margin-bottom: 8px; }
.elementor .gt-tekst-foto__tekst > .gt-eyebrow > p { margin-bottom: 0; }
/* alinea na een vinkjes- of stappenlijst: dezelfde ruimte als tussen twee
   alinea's (componenten.css, tekst met foto); ook als er een container op volgt,
   zoals de knoppen (.gt-knoppen) op compact loonwerk (vanaf 0.3.5) */
.elementor .gt-tekst-foto__tekst > .elementor-widget-text-editor:has(> :is(ul, ol):last-child) + :is(.elementor-widget, .e-con) { margin-top: 1.1em; }

/* ----------------------------------------------------------------------------
   4. KAARTEN EN RASTERS
   ------------------------------------------------------------------------- */
.elementor :is(.gt-grid2, .gt-grid3, .gt-grid4) > .e-con { min-width: 0; margin: 0; }
.elementor .gt-grid2:not(.gt-tekst-foto):not(.gt-grid2--boven):not(.gt-kaarten) > .e-con { align-self: center; }
.elementor .gt-grid2--boven > .e-con { align-self: start; }
.elementor .gt-grid2.gt-kaarten > .e-con { align-self: stretch; }
/* kop in een kaart: 10px eronder in plaats van 14px (.gt-kaart > h3 + *) */
.elementor .gt-kaart > .elementor-widget-heading + :not(:first-child) { margin-top: 10px; }
/* "Lees meer"-regel: 15px diepgroen (p.gt-kaart__link) */
.elementor .gt-kaart .gt-kaart__link > p { font-size: 15px; color: var(--gt-groen-diep); }
/* De link zelf: in de blokversie zonder onderstreping, bij hover en focus een
   rode (componenten.css, .gt-kaart__link a). style.css onderstreept links in
   lopende tekst met p:not(.gt-kaart__link) a; hier staat de klasse op de
   widget en niet op de p, dus die uitzondering werkt niet. Deze regels wegen
   zwaarder (0,6,2 tegen 0,5,4) en zetten de opmaak van de blokversie terug. */
.entry-content .elementor .gt-kaart__link.elementor-widget-text-editor > p a:not(.wp-block-button__link):not(.gt-knop) { text-decoration: none; text-underline-offset: auto; }
.entry-content .elementor .gt-kaart:hover .gt-kaart__link.elementor-widget-text-editor > p a:not(.wp-block-button__link):not(.gt-knop),
.entry-content .elementor .gt-kaart__link.elementor-widget-text-editor > p a:not(.wp-block-button__link):not(.gt-knop):is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: var(--gt-rood);
  text-underline-offset: 3px;
}
/* De hele dienstkaart is klikbaar: de link rekt op tot de kaart (position:
   relative op de kaart zelf, niet op de widget) */
.elementor .gt-kaart--dienst { position: relative; }

/* ----------------------------------------------------------------------------
   5. TEKST MET FOTO (media-text in de blokversie)
   Container gt-grid2 gt-tekst-foto met een tekstkolom en een foto-widget.
   Zelfde maten als .wp-block-media-text.gt-tekst-foto.
   ------------------------------------------------------------------------- */
.elementor .e-con.gt-tekst-foto {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 52px;
  row-gap: 0;
  align-items: center;
}
.elementor .e-con.gt-tekst-foto.gt-tekst-foto--foto-links { grid-template-columns: 0.95fr 1.05fr; }
.elementor .gt-tekst-foto > .e-con, .elementor .gt-tekst-foto > .elementor-widget { min-width: 0; margin: 0; align-self: center; }
.elementor .gt-tekst-foto__foto img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-schaduw);
}

/* ----------------------------------------------------------------------------
   6. KNOPPEN
   Een knoppenrij (gt-knoppen) met knop-widgets; de knop zelf is
   a.elementor-button. Zelfde opmaak als de knop van de blokeditor (style.css
   §4) en de Grastotaal-knop (.pro-btn): 14px 28px binnenmarge, 16px Sora 600,
   regelhoogte 1.4, ongeveer 50px hoog; tot en met 768px 15px 24px (§11).
   Specificiteit (0,3,1): hoger dan de linkregels voor donkere vlakken in
   componenten.css.
   ------------------------------------------------------------------------- */
.elementor .e-con.gt-knoppen { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.elementor .gt-knoppen > .elementor-widget-button { width: auto; max-width: 100%; }
.elementor .elementor-widget-button a.elementor-button {
  display: inline-block;
  min-height: 44px;
  background: var(--gt-groen-diep);
  color: var(--gt-wit);
  border: 0;
  border-radius: var(--gt-radius-knop);
  font-family: var(--gt-font-kop);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  padding: 14px 28px;
  box-shadow: var(--gt-schaduw);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gt-overgang), transform var(--gt-overgang), box-shadow var(--gt-overgang);
}
.elementor .elementor-widget-button .elementor-button-content-wrapper { display: inline; gap: 0; }
/* Zoals .wp-block-button__link (WordPress): de tekst verticaal in het midden
   als de knop door min-height hoger is dan zijn tekst (de groene heroknop) */
.elementor .elementor-widget-button a.elementor-button { align-content: center; word-break: break-word; }
.elementor .elementor-widget-button a.elementor-button:hover { background: var(--gt-groen-diep-hv); color: var(--gt-wit); transform: translateY(-2px); box-shadow: var(--gt-schaduw-hover); }
.elementor .elementor-widget-button a.elementor-button:visited { color: var(--gt-wit); }
/* omlijnd */
.elementor .is-style-outline a.elementor-button,
.elementor .is-style-outline a.elementor-button:visited { background: transparent; color: var(--gt-groen-diep); border: 2px solid var(--gt-groen-diep); box-shadow: none; }
/* bij muis-over geen schaduw, zoals de omlijnde knop in de blokversie (daar wint
   box-shadow: none van .is-style-outline van de hover-schaduw van .wp-block-button__link) */
.elementor .is-style-outline a.elementor-button:hover { background: var(--gt-groen-diep); color: var(--gt-wit); box-shadow: none; }
/* op donker (offerteband): wit met diepgroene tekst; omlijnd wit */
.elementor :is(.gt-donker, .gt-band--groen) .elementor-widget-button a.elementor-button,
.elementor :is(.gt-donker, .gt-band--groen) .elementor-widget-button a.elementor-button:visited { background: var(--gt-wit); color: var(--gt-groen-diep); text-decoration: none; }
.elementor :is(.gt-donker, .gt-band--groen) .elementor-widget-button a.elementor-button:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); text-decoration: none; }
.elementor :is(.gt-donker, .gt-band--groen) .is-style-outline a.elementor-button,
.elementor :is(.gt-donker, .gt-band--groen) .is-style-outline a.elementor-button:visited { background: transparent; color: var(--gt-wit); border: 2px solid rgba(255, 255, 255, 0.75); box-shadow: none; }
.elementor :is(.gt-donker, .gt-band--groen) .is-style-outline a.elementor-button:hover { background: rgba(255, 255, 255, 0.14); color: var(--gt-wit); box-shadow: none; }
/* in de groene band (gt-band--groen) is ook de omlijnde knop wit gevuld met
   diepgroene tekst en een witte rand, en bij muis-over heldergroen met donkere
   tekst: zo doet de blokversie het (style.css, .entry-content .gt-band--groen
   a.wp-block-button__link:not(.has-background) wint daar van de omlijnd-regels).
   Alleen op /offerte/, band "Liever bellen of mailen?", knop "Mail je aanvraag". */
.elementor .gt-band--groen .is-style-outline a.elementor-button,
.elementor .gt-band--groen .is-style-outline a.elementor-button:visited { background: var(--gt-wit); color: var(--gt-groen-diep); border: 2px solid var(--gt-wit); box-shadow: none; }
.elementor .gt-band--groen .is-style-outline a.elementor-button:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); border-color: var(--gt-wit); box-shadow: none; }
.elementor :is(.gt-donker, .gt-band--groen, .gt-cta-band) .elementor-widget-button a.elementor-button:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   7. FOTORASTER (galerij met drie foto's en een bijschrift)
   Dezelfde opbouw als het galerijblok van WordPress (flex, geen grid): dan
   krijgen de foto's tot op de subpixel dezelfde maat (280 px hoog, niet
   279,98) en staat het bijschrift op dezelfde pixel. Drie kolommen vanaf
   600 px; daaronder twee, en de derde foto over de hele breedte.
   ------------------------------------------------------------------------- */
.elementor .e-con.gt-fotogrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.elementor .e-con.gt-fotogrid > .elementor-widget-image {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: calc(33.33333% - 16px * 0.66667);
  max-width: none;
  min-width: 0;
  margin: 0;
}
.elementor .gt-fotogrid figure.wp-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin: 0;
  border-radius: var(--gt-radius);
  overflow: hidden;
  background: var(--gt-zandwit);
}
/* position: static: GeneratePress zet .wp-caption img op relative; dan ligt
   de foto boven de vervaging achter het bijschrift (::before hieronder) */
.elementor .gt-fotogrid figure.wp-caption img {
  position: static;
  display: block;
  flex: 1 0 0%;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--gt-radius);
}
/* Foto zonder bijschrift (de referentiepagina's): de img staat direct in de
   widget. Zelfde maat als in de blokversie: 4:3, bijgesneden, ronde hoeken. */
.elementor .e-con.gt-fotogrid > .elementor-widget-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--gt-radius);
}
@media (max-width: 599.98px) {
  .elementor .e-con.gt-fotogrid > .elementor-widget-image { width: calc(50% - 8px); }
}
.elementor .gt-fotogrid figcaption.widget-image-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  margin: 0;
  padding: 32px 14px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gt-wit);
  opacity: 1; /* GeneratePress: .wp-caption .wp-caption-text { opacity: .8 } */
  text-align: left;
  background: linear-gradient(0deg, rgba(23, 26, 21, 0.78) 0%, rgba(23, 26, 21, 0.55) 55%, rgba(23, 26, 21, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  /* zoals het bijschrift van het galerijblok (WordPress) */
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  will-change: transform;
}
.elementor .gt-fotogrid figcaption.widget-image-caption:is(:hover, :focus, :focus-within) { scrollbar-color: rgba(255, 255, 255, 0.8) transparent; }
@media (hover: none) { .elementor .gt-fotogrid figcaption.widget-image-caption { scrollbar-color: rgba(255, 255, 255, 0.8) transparent; } }
.elementor .gt-fotogrid figcaption a { color: var(--gt-wit); }
/* Lichte vervaging achter het bijschrift, zoals het galerijblok van WordPress
   (figure:has(figcaption)::before): 3em hoog, naar boven uitlopend. Maakt het
   bijschrift leesbaar op lichte foto's. */
.elementor .gt-fotogrid figure.wp-caption:has(figcaption)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  max-height: 3em;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent);
  mask-image: linear-gradient(0deg, #000 20%, transparent);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   8. VEELGESTELDE VRAGEN
   Elementors accordeon (details/summary) met dezelfde opmaak als
   details.gt-faq__item: witte vakken, 10px ertussen, plus/min rechts.
   ------------------------------------------------------------------------- */
.elementor .gt-faq__lijst .e-n-accordion { display: block; }
.elementor .gt-faq__lijst .e-n-accordion-item {
  display: block;
  max-width: 820px;
  margin: 0;
  background: var(--gt-wit);
  color: var(--gt-tekst);
  border: 1px solid var(--gt-lijn);
  border-radius: var(--gt-radius-klein);
}
.elementor .gt-faq__lijst .e-n-accordion-item + .e-n-accordion-item { margin-top: 10px; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 16px 52px 16px 20px;
  border: 0;
  border-radius: var(--gt-radius-klein);
  font-family: var(--gt-font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--gt-groen-diep);
}
.elementor .gt-faq__lijst .e-n-accordion-item-title-header,
.elementor .gt-faq__lijst .e-n-accordion-item-title-text { display: inline; font: inherit; color: inherit; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title::marker { content: ''; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title:hover { color: var(--gt-groen-diep-hv); text-decoration: underline; text-decoration-color: var(--gt-rood); text-underline-offset: 3px; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background-color: var(--gt-groen-diep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.elementor .gt-faq__lijst .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}
.elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
/* antwoord */
.elementor .gt-faq__lijst .e-n-accordion-item > .e-con { display: block; padding: 0 20px 20px; border: 0; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-con > .elementor-widget-text-editor > * + * { margin-top: 12px; }
.elementor .gt-faq__lijst .e-n-accordion-item > .e-con p { font-size: 17px; line-height: 1.65; color: var(--gt-tekst); max-width: none; }
.elementor .gt-faq__lijst .e-n-accordion-item a { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------------------
   9. OFFERTEBAND (Elementor-sjabloon via [lvk_blok naam="offerteband"])
   ------------------------------------------------------------------------- */
.elementor .gt-cta-band__kolommen > .e-con > .elementor-widget-text-editor > p { color: rgba(255, 255, 255, 0.92); }

/* ----------------------------------------------------------------------------
   10. HERO OP DE HOMEPAGE (cover in de blokversie; zie home.css)
   Container gt-hero met een foto-widget (gt-hero__foto, over het hele vlak)
   en een inhoudscontainer (gt-hero__inhoud). lvk-dim-40: de 40% donkere laag
   van het cover-blok.
   ------------------------------------------------------------------------- */
.elementor .e-con.gt-hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: calc(74vh - 60px);
  padding: 0;
  overflow: hidden;
  overflow: clip;
  background: var(--gt-tekst);
  isolation: isolate;
}
.elementor .gt-hero > .gt-hero__foto { position: absolute; inset: 0; z-index: 0; margin: 0; }
.elementor .gt-hero > .gt-hero__foto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 38%;
  border-radius: 0;
}
.elementor .gt-hero.lvk-dim-40::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(23, 26, 21, 0.4); }
.elementor .gt-hero > .gt-hero__inhoud {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--gt-breedte);
  margin: 0 auto;
  padding: 44px 24px 88px;
  text-align: left;
  color: var(--gt-wit);
}
.elementor .gt-hero__inhoud > * { margin-top: 0; margin-bottom: 0; }
.elementor .gt-hero__inhoud > .gt-eyebrow { margin-bottom: 8px; }
.elementor .gt-hero .gt-eyebrow--vinkje::before { content: none; }
.elementor .gt-hero .gt-eyebrow--vinkje > p::before { content: '\2713\00a0'; content: '\2713\00a0' / ''; }
.elementor .gt-hero__inhoud h1.elementor-heading-title {
  color: var(--gt-wit);
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.15;
  max-width: 760px;
  margin: 0 0 0.5em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.elementor .gt-hero .gt-knoppen { margin-top: 26px; gap: 14px; }
/* hero-knoppen: 16px / 1.4 (home.css), gevuld diepgroen, omlijnd wit */
.elementor .gt-hero .elementor-widget-button a.elementor-button { font-size: 16px; line-height: 1.4; }
.elementor .gt-hero .elementor-widget-button:not(.is-style-outline) a.elementor-button,
.elementor .gt-hero .elementor-widget-button:not(.is-style-outline) a.elementor-button:visited { background: var(--gt-groen-diep); color: var(--gt-wit); }
.elementor .gt-hero .elementor-widget-button:not(.is-style-outline) a.elementor-button:hover { background: var(--gt-groen-diep-hv); color: var(--gt-wit); }
/* geen witruimte van GeneratePress boven de hero */
.site-content:has(.entry-content > .elementor > .gt-hero:first-child) { padding-top: 0; }

/* ----------------------------------------------------------------------------
   11. MOBIEL EN TABLET
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .elementor .e-con.gt-tekst-foto { grid-template-columns: 1.05fr 0.95fr; column-gap: 32px; }
  .elementor .e-con.gt-tekst-foto.gt-tekst-foto--foto-links { grid-template-columns: 0.95fr 1.05fr; }
  .elementor .gt-tekst-foto__foto img { height: 320px; }
  .elementor .e-con.gt-hero { min-height: 0; }
}
/* Tablet: de laatste losse kaart van drie over de volle breedte, met een
   bredere foto (componenten.css §3) */
@media (min-width: 641px) and (max-width: 980px) {
  .elementor .gt-grid3 > .e-con:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .elementor .gt-grid3 > .gt-kaart--dienst:last-child:nth-child(odd) .gt-kaart__foto img { aspect-ratio: 21 / 9; }
}
@media (max-width: 768px) {
  .elementor .elementor-widget-button a.elementor-button { padding: 15px 24px; }
  .elementor .e-con.lvk-los { padding-top: 30px; } /* GeneratePress: 30px boven de inhoud op telefoon */
}
@media (max-width: 640px) {
  .elementor .gt-tekst-foto__foto img { height: 240px; }
  .elementor .gt-knoppen > .elementor-widget-button { flex: 1 1 100%; }
  .elementor .gt-knoppen .elementor-widget-button a.elementor-button { display: block; width: 100%; }
  .elementor .gt-hero .gt-knoppen > .elementor-widget-button { flex: 0 0 auto; }
  .elementor .gt-hero .gt-knoppen .elementor-widget-button a.elementor-button { display: inline-block; width: auto; }
  .elementor .gt-hero > .gt-hero__inhoud { padding: 44px 24px 44px; }
  .elementor .gt-hero__inhoud h1.elementor-heading-title { font-size: 34px; }
  .elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title { padding: 14px 48px 14px 16px; font-size: 16px; }
  .elementor .gt-faq__lijst .e-n-accordion-item > .e-n-accordion-item-title::after { right: 14px; }
  .elementor .gt-faq__lijst .e-n-accordion-item > .e-con { padding: 0 16px 16px; }
  .elementor .gt-faq__lijst .e-n-accordion-item > .e-con p { font-size: 16px; }
}
@media (max-width: 600px) {
  /* tekst met foto onder elkaar, foto boven (zoals is-stacked-on-mobile) */
  .elementor .e-con.gt-tekst-foto,
  .elementor .e-con.gt-tekst-foto.gt-tekst-foto--foto-links { grid-template-columns: 100%; row-gap: 24px; }
  .elementor .gt-tekst-foto > .gt-tekst-foto__foto { grid-row: 1; }
  .elementor .gt-tekst-foto > .gt-tekst-foto__tekst { grid-row: 2; }
  /* fotoraster: 10px tussenruimte (componenten.css) */
  .elementor .e-con.gt-fotogrid { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .elementor-widget-button a.elementor-button:hover { transform: none; }
}