/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Voorkom horizontaal scrollen. overflow-x: clip i.p.v. hidden zodat
   sticky-elementen (o.a. de header) blijven werken. */
html,
body {
	overflow-x: clip;
}

/* Decoratieve mandarijn — voeg de class "dec-mandarin" toe aan een Elementor container */
.dec-mandarin,
.container-404-page {
	position: relative;
}

.dec-mandarin::after,
.container-404-page::after {
	content: "";
	/* gecapt op 1080px, anders groeit de mandarijn op brede schermen door
	   tot buitenproportionele maten */
	font-size: min(40vw, 1080px);
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 100%;
	top: 100%;
	transform: translate(-57%, -10%) rotate(12deg) scaleX(-1);
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

.dec-mandarin::before,
.container-404-page::before {
	content: "";
	font-size: 62.8125vw;
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 0;
	top: -70px;
	transform: translate(-70%, -20%);
	background: url(assets/images/dec-apple.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
	transition: all .3s ease-in-out;
}

/* hover: appel schuift naar rechts (oud.css .view.apple .mainrow:hover::before) */
.dec-mandarin:hover::before,
.container-404-page:hover::before {
	left: 50px;
}

/* Decoratieve kiwi — voeg de class "dec-kiwi" toe aan een container (bijv. de
   titel/intro van de nieuws-overzichtpagina). Kiwi linksonder. (oud.css dec-kiwi.svg) */
.dec-kiwi {
	position: relative;
}

.dec-kiwi::after {
	content: "";
	font-size: min(23.125vw, 20.8125rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	top: 60%;
	transform: translate(-60%, 0) rotate(50deg);
	transform-origin: center center;
	background: url(assets/images/dec-kiwi.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* Decoratieve aardbei — voeg de class "cta-nobrainer" toe aan een Elementor container */
.cta-nobrainer {
	position: relative;
}

.cta-nobrainer::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translate(0px, -52%);
	display: block;
	width: 33.9394vw;
	padding-bottom: 33.9394vw;
	left: 0px;
	margin-left: 10.4167vw;
	background: url(assets/images/aardbei.webp) center center / contain no-repeat;
	pointer-events: none;
}

/* Duitse variant: zelfde plek en maat, andere aardbei. Beide afbeeldingen zijn
   vierkant, dus de vierkante box met "contain" hoeft niet mee te veranderen. */
.cta-nobrainer.de::before {
	background-image: url(assets/images/aardbei-de.png);
}

@media only screen and (max-width: 767px) {
	/* mandarijn/appel-decoratie: mobiele maten/posities uit oud-mobile.css
	   (iets kleiner en minder ver buiten beeld) */
	.dec-mandarin::before,
	.container-404-page::before {
		font-size: 54.328125vw;
		top: -30px;
		transform: translate(-40%, -20%);
	}

	.dec-mandarin::after,
	.container-404-page::after {
		font-size: 64.6875vw;
	}

	/* mandarijn-::after op mobiel verbergen */
	.dec-mandarin::after {
		display: none;
	}

	/* aardbei: mobiele maat/positie (uit oud.css .Snippet.Contact>figure::before) */
	.cta-nobrainer::before {
		width: 60%;
		padding-bottom: 60%;
		left: 40%;
		margin-left: 0;
	}
}

/* ── Snippet Voordelen ────────────────────────────────────────────────
   Elementor import (voordelen-werkgevers.json). Voeg de class
   "snippet-voordelen" toe aan de buitenste Container.
   Overgenomen/aangepast van .Snippet.Voordelen in oud.css. */
.snippet-voordelen {
	position: relative;
	overflow: visible; /* banaan mag boven de sectie uitsteken */
	color: #000;
}

/* Grijze achtergrond-gradient — herbruikbaar, uit oud.css (.colored.bggrey) */
.bggrey {
	color: #000;
	background: linear-gradient(176deg, rgba(174, 174, 174, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* decoratieve appel — als achtergrond van een ::before die de sectie vult.
   De achtergrond wordt tot de rand van de sectie geknipt, dus geen scrollbalk
   en geen overlap met de volgende sectie; de banaan steekt gewoon uit. */
.snippet-voordelen::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) scaleX(-1);
	width: 100vw;
	z-index: 0;
	pointer-events: none;
	background: url(assets/images/dec-apple.svg) no-repeat right -40vw bottom -24vw / 69vw 69vw;
	transition: background-size .3s ease-in-out, background-position .3s ease-in-out;
}

.snippet-voordelen:hover::before {
	background-size: 76vw 76vw;
	background-position: right -38vw bottom -26vw;
}

/* de rij (Elementor .e-con-inner): twee kolommen, boven de decoratie */
.snippet-voordelen > .e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

/* de twee kolommen (alle child-containers behalve .bg) elk 50% */
.snippet-voordelen > .e-con-inner > .e-con:not(.bg) {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
}

/* linker kolom (Lukie Luke) — de kolom zónder banaan */
.snippet-voordelen > .e-con-inner > .e-con:not(.bg):not(:has(.banana)) {
	align-self: flex-end;
}

/* rechter kolom (tekst) — de kolom mét banaan */
.snippet-voordelen > .e-con-inner > .e-con:has(.banana) {
	text-align: center;
}

/* banaan die over de bovenrand hangt */
.snippet-voordelen .banana img {
	display: block;
	margin-top: -7.6388888889vw;
	margin-bottom: 39.9px;
	width: calc(100% + 100px);
	max-width: calc(100% + 100px);
	margin-left: -50px;
	margin-right: -50px;
	animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	animation-delay: .3s;
}

.snippet-voordelen .elementor-widget-heading .elementor-heading-title {
	font-size: 6vw;
	line-height: .8229166667em;
}

.snippet-voordelen .Content,
.snippet-voordelen .Content p {
	font-size: 1.125rem;
}

@keyframes shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}

@media only screen and (max-width: 767px) {
	/* appel groter op mobiel (oud.css .Snippet.Voordelen>.bg::before font-size 149.33vw) */
	.snippet-voordelen::before {
		background-size: 149.3333333333vw 149.3333333333vw;
	}

	/* geen hover-effect op mobiel */
	.snippet-voordelen:hover::before {
		background-size: 149.3333333333vw 149.3333333333vw;
		background-position: left -40vw bottom -24vw;
	}

	.snippet-voordelen > .e-con-inner {
		flex-direction: column;
	}

	.snippet-voordelen > .e-con-inner > .e-con:not(.bg) {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.snippet-voordelen > .e-con-inner > .e-con:not(.bg):not(:has(.banana)) {
		align-self: center;
	}

	/* banaan niet meer buiten de kolom laten uitsteken op mobiel */
	.snippet-voordelen .banana img {
		margin-top: -12vw;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	.snippet-voordelen .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}
}

/* ── Snippet Werkwijze ────────────────────────────────────────────────
   Elementor import (werkwijze.json). Sectie-classes: "snippet-werkwijze bgdgrey".
   Vereiste child-classes: .werkwijze-bus (bus-afbeelding), .werkwijze-inner (rij),
   .werkwijze-heading (kop), .Content (tekst).
   Overgenomen/aangepast van .Snippet.Werkwijze in oud.css. */

/* Donkergrijze achtergrond — herbruikbaar (oud.css .colored.bgdgrey) */
.bgdgrey {
	color: #fff;
	background: #212a31;
}

.bgdgrey a {
	color: #fff;
}

.snippet-werkwijze {
	position: relative;
	z-index: 1;
	overflow: visible;
	text-align: center;
}

/* radiale gloed bovenaan, achter de content (standaard aan) */
.snippet-werkwijze::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100vw + 300px);
	max-width: calc(100vw + 300px);
	height: 410px;
	background: radial-gradient(circle at bottom center, #4b5c6f 0%, rgba(75, 92, 111, 0) 70%);
	z-index: -1;
	pointer-events: none;
}

/* gloed uitzetten: voeg de class "werkwijze-no-glow" toe naast "snippet-werkwijze" */
.snippet-werkwijze.werkwijze-no-glow::after {
	display: none;
}

/* bus-afbeelding */
.snippet-werkwijze .werkwijze-bus img {
	width: 88.6956521739%;
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

/* inner-rij (Elementor child-container): kop links, tekst rechts */
.snippet-werkwijze > .e-con-inner > .e-con {
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	text-align: left;
}

/* kop-kolom */
.snippet-werkwijze .werkwijze-heading {
	flex: 0 0 400px;
	width: 400px;
	padding-right: 40px;
}

.snippet-werkwijze .werkwijze-heading .elementor-heading-title {
	/* Gecapt op 7.8125rem: dat is exact de waarde die 7.8125vw op 1600px
	   heeft, dus onder die breedte verandert er niets. De cap stond eerst
	   alleen in de media query hieronder, waar je hem niet zoekt als je deze
	   regel aanpast. */
	font-size: min(7.8125vw, 7.8125rem);
	/* Was .7142857143em. De kop staat over vier regels ("Van / grond / tot /
	   mond") en op die afstand dook de g van "grond" 36px door de t van de
	   regel eronder. Gemeten: pas vanaf 1em raken de letters elkaar net niet
	   meer; .9em houdt de strakke display-zetting en haalt het ergste eruit.
	   Bewust hier en niet in de 1600px-query: de verhouding is op elke
	   breedte dezelfde, dus daar zou de regelafstand op precies 1600px
	   zichtbaar uit elkaar springen. */
	line-height: .9em;
	margin-top: -6.25vw; /* trekt de kop over de bus heen */
	margin-bottom: -10px;
}

/* zonder gloed (deze pagina): geen negatieve optrek van de kop
   (hogere specificiteit wint ook van de 1600px-override hieronder) */
.snippet-werkwijze.werkwijze-no-glow .werkwijze-heading .elementor-heading-title {
	margin-top: 0;
}

/* tekst-kolom */
.snippet-werkwijze .Content {
	flex: 1 1 auto;
	max-width: 486px;
	margin-top: 15px;
	font-size: 1.125rem;
}

/* Boven 1600px staat de font-size stil door de cap hierboven; de negatieve
   optrek moet hier apart worden stilgezet, want die staat in vw. */
@media only screen and (min-width: 1600px) {
	.snippet-werkwijze .werkwijze-heading .elementor-heading-title {
		margin-top: -100px;
	}
}

@media only screen and (max-width: 767px) {
	.snippet-werkwijze > .e-con-inner > .e-con {
		flex-direction: column;
	}

	.snippet-werkwijze .werkwijze-heading {
		flex-basis: auto;
		width: 100%;
		padding-right: 0;
	}

	.snippet-werkwijze .werkwijze-heading .elementor-heading-title {
		font-size: 3rem;
		margin-top: -30px;
	}

	.snippet-werkwijze .Content {
		max-width: 100%;
	}

	/* gloed op mobiel vanaf de bovenkant i.p.v. onderaan */
	.snippet-werkwijze::after {
		background: radial-gradient(circle at top center, #4b5c6f 0%, rgba(75, 92, 111, 0) 70%);
	}
}

/* ── Snippet Fruit ────────────────────────────────────────────────────
   Elementor import (fruit.json). Sectie-classes: "snippet-fruit bgwhite".
   Tekstkolom bevat de mandarijn (image-widget met class "mandarin"),
   de kop, tekst (.Content) en knop (.more.outline); de andere kolom bevat
   de figuur-afbeelding (Jochem). Aangepast van .Snippet.Fruit in oud.css. */

/* Witte achtergrond — herbruikbaar (oud.css .colored.bgwhite) */
.bgwhite {
	background: #fff;
	color: #000;
}

.bgwhite .Content a {
	color: #ffa600;
}

.snippet-fruit {
	position: relative;
	z-index: 4;
	overflow: visible;
	text-align: center;
}

.snippet-fruit > .e-con-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.snippet-fruit > .e-con-inner > .e-con {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
}

/* tekstkolom links (bevat de mandarijn) */
.snippet-fruit > .e-con-inner > .e-con:has(.mandarin) {
	order: 0;
	position: relative;
	padding-top: 105px;
}

/* figuurkolom rechts (Jochem) */
.snippet-fruit > .e-con-inner > .e-con:not(:has(.mandarin)) {
	order: 1;
	align-self: flex-end;
	padding-left: 59.5px;
	padding-top: 105px;
}

/* Jochem bloedt onderaan uit de sectie */
.snippet-fruit > .e-con-inner > .e-con:not(:has(.mandarin)) img {
	display: block;
	margin-bottom: -20.8695652174%;
}

/* mandarijn-decoratie, rechtsboven bij de tekstkolom */
.snippet-fruit .mandarin {
	position: absolute;
	left: 100%;
	top: 0;
	transform: translate(-20%, -120px);
	width: 23.916667vw;
	max-width: 100%;
	margin: 0;
	pointer-events: none;
	z-index: 1;
}

.snippet-fruit .mandarin img {
	display: block;
	width: 100%;
}

.snippet-fruit .elementor-widget-heading .elementor-heading-title {
	font-size: 6vw;
	line-height: .8229166667em;
}

.snippet-fruit .Content {
	font-size: 1.125rem;
}

@media only screen and (min-width: 1600px) {
	.snippet-fruit .elementor-widget-heading .elementor-heading-title {
		font-size: 6rem;
	}

	.snippet-fruit .mandarin {
		width: 370px;
	}
}

@media only screen and (max-width: 767px) {
	.snippet-fruit > .e-con-inner {
		flex-direction: column;
	}

	.snippet-fruit > .e-con-inner > .e-con {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.snippet-fruit > .e-con-inner > .e-con:has(.mandarin) {
		padding-top: 90px; /* ruimte voor de mandarijn die boven de kolom hangt */
	}

	.snippet-fruit > .e-con-inner > .e-con:not(:has(.mandarin)) {
		padding-left: 0;
		padding-top: 40px;
	}

	.snippet-fruit .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	/* mandarijn kleiner en binnen beeld houden op mobiel */
	.snippet-fruit .mandarin {
		width: 38vw;
		left: 0;
		right: 0;
		top: 110%;
		transform: translate(0, -60px);
	}
}

/* ── Homepage hero ────────────────────────────────────────────────────
   Elementor import (homepage-hero.json). Sectie-class: "homepage-hero".
   Achtergrondfoto via Elementor; slogan + review-badge in een HTML-widget
   (.Slogan). Aangepast van .banner / .Slogan uit oud.css. */

/* Big John bestaat alleen in deze ene snit; hij hoort altijd op 700 te staan.
   Daarom is dit de enige @font-face voor de familie: elke plek die "Big John"
   aanvraagt hoort er font-weight: 700 bij te zetten. */
@font-face {
	font-family: "Big John";
	src: url(assets/fonts/BigJohnFOJW-WLF-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.homepage-hero {
	position: relative;
	overflow: visible;
	z-index: 5; /* zodat de overlopende druif vóór de sectie eronder komt */
	min-height: min(53.5138888889vw, 785px);
	justify-content: center; /* verticaal centreren */
	align-items: flex-start; /* horizontaal: slogan links, zoals origineel */
	background: linear-gradient(176deg, rgba(174, 174, 174, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.homepage-hero > .e-con-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	/* content (slogans/afbeelding) binnen de 1400px-container houden;
	   varianten mogen dit overschrijven (bijv. hero-pear op 1300px) */
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Standaard banner-decoratie: peer + mandarijn.
   Overgenomen van .banner .banner_image::before/::after uit oud.css.
   Echte spans in een HTML-widget binnen de hero:
     <span class="hero-deco-layer">
       <span class="hero-deco-pear"></span><span class="hero-deco-mandarin"></span>
     </span>
   De layer krijgt expliciet dezelfde afmeting als de hero (min-height uit
   .homepage-hero) en overlapt 'm gecentreerd; de vruchten positioneren
   binnen die layer. Opt-in via class "hero-deco". */
.homepage-hero.hero-deco .hero-deco-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: min(53.5138888889vw, 785px);
	z-index: 0; /* boven de achtergrondfoto, onder de content */
	pointer-events: none;
	display: block;
}

.homepage-hero.hero-deco .hero-deco-pear,
.homepage-hero.hero-deco .hero-deco-mandarin {
	position: absolute;
	display: block;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.homepage-hero.hero-deco .hero-deco-pear {
	left: calc(50% + min(39.5833333333vw, 570px));
	top: 50%;
	width: min(35.7638888889vw, 515px);
	height: min(35.7638888889vw, 515px);
	transform: translate(-50%, -50%) rotate(-60deg);
	transform-origin: center center;
	background-image: url(assets/images/dec-pear.svg);
}

.homepage-hero.hero-deco .hero-deco-mandarin {
	left: calc(50% + min(25.6944444444vw, 370px));
	top: calc(100% - 30px);
	width: min(17.0138888889vw, 245px);
	height: min(17.0138888889vw, 245px);
	transform: translate(-50%, -100%) rotate(20deg);
	transform-origin: center center;
	background-image: url(assets/images/dec-mandarin.svg);
}

.homepage-hero.hero-deco .Slogan {
	top: 50%;
}

/* In de varianten zijn de slogans absoluut → de HTML-widget klapt in tot
   hoogte 0. Geef 'm de volle hero-hoogte zodat de absolute slogans t.o.v.
   een echte canvas positioneren (i.p.v. bovenaan samen te vallen).
   Bij een e-con-full hero (geen .e-con-inner) is dit canvas meteen de
   referentie voor alle left/top-percentages van de slogans — en dus zo
   breed als het venster.
   Cap 'm daarom op de 1400px-container en centreer 'm: zo vallen .Slogan,
   .Slogan2 en .Slogan3 (incl. hun ::before-vruchten) op brede schermen
   nooit buiten die 1400px.
   De extra .elementor-widget-class is nodig voor de specificiteit t.o.v.
   Elementor's `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`. */
.homepage-hero.hero-pear .elementor-widget.elementor-widget-html,
.homepage-hero.hero-orange .elementor-widget.elementor-widget-html,
.homepage-hero.hero-banana .elementor-widget.elementor-widget-html,
.homepage-hero.hero-grapes .elementor-widget.elementor-widget-html,
.homepage-hero.hero-fruit .elementor-widget.elementor-widget-html,
.homepage-hero.hero-redapple .elementor-widget.elementor-widget-html,
.homepage-hero.hero-deco .elementor-widget.elementor-widget-html {
	position: absolute;
	left: 0;
	right: 0;
	width: auto;
	max-width: 1400px;
	margin-inline: auto;
	height: 100%;
	min-height: min(53.5138888889vw, 785px);
}

/* In een e-con-full hero (geen .e-con-inner) plakt de absolute bannerfoto
   tegen de linkerrand van het venster: boven 1440px blijft-ie links hangen
   terwijl het slogan-canvas hierboven gecentreerd is. Zelfde behandeling:
   centreren, gecapt op de eigen breedte (1440px).
   Alleen voor e-con-full — in een boxed hero centreert de .e-con-inner de
   foto al en zou dit Elementor's eigen widget-breedtes overschrijven. */
.homepage-hero.e-con-full > .elementor-widget.elementor-widget-image.elementor-absolute {
	left: 0;
	right: 0;
	width: auto;
	max-width: 1440px;
	margin-inline: auto;
}

/* slogan (schuin, op de druiventros) */
.homepage-hero .Slogan {
	position: relative;
	max-width: 100%;
	/* gecapt op de ontwerpbreedte (1440px) zodat de druif niet te groot wordt */
	width: min(25.6944444444vw, 370px);
	margin: 0 auto 0 0; /* links uitlijnen zoals origineel */
	top: min(7vw, 100px); /* iets omlaag zodat de druif over de onderrand valt */
	transform: rotate(-10deg);
	text-transform: uppercase;
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	line-height: .8181818182em;
	font-size: min(3.125vw, 45px);
	text-align: center;
	color: #fff;
}

.homepage-hero .Slogan::before {
	content: "";
	left: 50%;
	top: 60%;
	transform: translate(-50%, -45%);
	transform-origin: center center;
	width: 204.3243243243%;
	padding-bottom: 204.3243243243%;
	position: absolute;
	display: block;
	z-index: 0;
	background: url(assets/images/banner-grapes.svg) no-repeat center center / 100% 100%;
	pointer-events: none;
}

/* tekst van de slogans boven de vrucht */
.homepage-hero .Slogan > *,
.homepage-hero .Slogan2 > *,
.homepage-hero .Slogan3 > * {
	position: relative;
	z-index: 1;
}

/* extra slogans (Slogan2 / Slogan3) — basisstijl uit oud.css */
.homepage-hero .Slogan2,
.homepage-hero .Slogan3 {
	position: relative;
	max-width: 100%;
	transform: rotate(-10deg);
	text-transform: uppercase;
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	line-height: .8181818182em;
	text-align: center;
	color: #fff;
}

.homepage-hero .Slogan2 {
	width: min(11.7361111111vw, 169px);
	font-size: min(2.0833333333vw, 30px);
}

.homepage-hero .Slogan3 {
	width: min(6.9444444444vw, 100px);
	font-size: min(1.3888888889vw, 20px);
}

.homepage-hero .Slogan2::before,
.homepage-hero .Slogan3::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -45%);
	width: 204.3243243243%;
	padding-bottom: 204.3243243243%;
	z-index: 0;
	background: url(assets/images/banner-grapes.svg) no-repeat center center / 100% 100%;
	pointer-events: none;
}

/* hero-pear: geef de inner de volledige hero-afmetingen, zodat de absolute
   slogans niet in een 0-hoge box samenvallen */
.homepage-hero.hero-pear > .e-con-inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	min-height: min(53.5138888889vw, 785px);
}

/* pear-variant: de drie slogans verspreid over de hero (voeg class "hero-pear" toe) */
.homepage-hero.hero-pear .Slogan {
	position: absolute;
	left: 68%;
	top: 60%;
	width: 16.6666666667vw;
	margin: 0;
	transform: translate(0, -45%) rotate(0deg);
	z-index: 3; /* boven de banner-afbeelding */
}

.homepage-hero.hero-pear .Slogan2 {
	position: absolute;
	left: 15%;
	top: 42%;
	transform: translate(0, -50%) rotate(-5deg);
	z-index: -1; /* achter de foto/andere slogans (oud.css .restyle-pear .Slogan2) */
}

.homepage-hero.hero-pear .Slogan3 {
	position: absolute;
	left: 63%;
	top: 30%;
	transform: translate(0, -50%) rotate(-5deg);
	z-index: 3; /* boven de banner-afbeelding */
}

/* pear-variant: juiste vrucht achter elke slogan (oud.css .restyle-pear) */
.homepage-hero.hero-pear .Slogan::before {
	background-image: url(assets/images/banner-pear.svg);
	transform: translate(-58%, -64%) scaleX(-1) rotate(-8deg);
	width: min(36vw, 518px);
	height: min(36vw, 518px);
	padding-bottom: 0;
}

.homepage-hero.hero-pear .Slogan2::before {
	transform: translate(-50%, -46%);
	width: min(25.4vw, 365px);
	height: min(25.4vw, 365px);
	padding-bottom: 0;
}

.homepage-hero.hero-pear .Slogan3::before {
	background-image: url(assets/images/banner-strawberry.svg);
	transform: translate(-60%, -42%) rotate(-35deg) scaleX(-1);
	width: min(12.6vw, 181px);
	height: min(12.6vw, 181px);
	padding-bottom: 0;
}

/* pear-variant, Frans: de vertaalde slogan is langer, dus iets kleiner gezet en
   de peer wat hoger zodat de tekst er weer gecentreerd op valt */
.homepage-hero.hero-pear.fr .Slogan {
	font-size: min(2.7vw, 45px);
}

.homepage-hero.hero-pear.fr .Slogan::before {
	top: 50%;
}

/* kiwi-variant: appel-decoratie rechts afsnijden op de sectierand.
   Alleen op de kiwi-hero, zodat de overlopende druif op andere hero's zichtbaar blijft. */
.homepage-hero.hero-kiwi {
	overflow: hidden;
}

/* kiwi-variant: kiwi-fruit achter de (enkele) slogan (oud.css .kiwi .Slogan::before) */
.homepage-hero.hero-kiwi .Slogan::before {
	background-image: url(assets/images/banner-kiwi.svg);
	transform: translate(-38%, -48%) rotate(15deg);
	width: 162.1621621622%;
	padding-bottom: 162.1621621622%;
}

/* kiwi-decoratie op de banner-afbeelding: aardbei (::before) + appel (::after).
   Direct op .elementor-widget-image (dat is al position:absolute, dus het anker),
   geen overflow-clipping zodat de fruitjes zichtbaar zijn. Posities uit oud.css
   .kiwi .banner_image::before / ::after (150px resp. 350px vanaf de rechterrand). */

/* img boven de decoraties → aardbei/appel peeken erachter vandaan */
.homepage-hero.hero-kiwi .elementor-widget-image img {
	position: relative;
	z-index: 2;
}

.homepage-hero.hero-kiwi .elementor-widget-image::before,
.homepage-hero.hero-kiwi .elementor-widget-image::after {
	content: "";
	position: absolute;
	display: block;
	pointer-events: none;
	background: no-repeat center center / 100% 100%;
	z-index: 1; /* achter de img */
	transform-origin: center center;
}

/* aardbei rechts-midden */
.homepage-hero.hero-kiwi .elementor-widget-image::before {
	left: calc(100% - 150px);
	top: 50%;
	width: min(18.75vw, 270px);
	height: min(18.75vw, 270px);
	transform: translate(-41%, -85%) rotate(-5deg);
	background-image: url(assets/images/dec-strawberry.svg);
}

/* appel rechtsonder */
.homepage-hero.hero-kiwi .elementor-widget-image::after {
	left: calc(100% - 350px);
	top: calc(100% - 30px);
	width: min(39.5833333333vw, 570px);
	height: min(39.5833333333vw, 570px);
	transform: translate(-50%, -80%) rotate(20deg);
	background-image: url(assets/images/dec-apple.svg);
}

/* ── redapple-variant (oud.css .restyle-redapple) ─────────────────────
   Slogan links met rode appel, Slogan2 rechts-onder met peer. */
.homepage-hero.hero-redapple .Slogan {
	position: absolute;
	left: 0;
	top: 50%;
	width: min(22.9166666667vw, 330px);
	margin: 0;
	transform: translate(0, -25%) rotate(-10deg);
}

.homepage-hero.hero-redapple .Slogan::before {
	background-image: url(assets/images/banner-apple-red.svg);
	transform: translate(-45%, -58%) rotate(10deg);
	width: 186.4864864865%;
	padding-bottom: 186.4864864865%;
}

.homepage-hero.hero-redapple .Slogan2 {
	position: absolute;
	left: 75%;
	top: 50%;
	transform: translate(0, 100%) rotate(0deg);
}

.homepage-hero.hero-redapple .Slogan2::before {
	background-image: url(assets/images/banner-pear.svg);
	transform: translate(-58%, -66%) scaleX(-1) rotate(-12deg);
}

/* Google review-badge (binnen de slogan) */
.homepage-hero .google-review-score {
	display: inline-flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	color: inherit;
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 10px;
	border-bottom: 3px solid #fff;
	width: fit-content;
	text-decoration: none;
}

.homepage-hero .google-review-score:hover {
	border-color: transparent;
}

.homepage-hero .google-review-link {
	text-decoration: none;
}

.homepage-hero .google-review-score svg {
	fill: #fff;
	color: #fff;
}

.homepage-hero .google-review-score svg.google {
	position: relative;
	top: .05rem;
	margin-left: .9rem;
}

.homepage-hero .google-review-score svg.stars {
	margin-right: -0.7rem;
}

.homepage-hero .google-review-score .hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Hero banana-variant (voeg class "hero-banana" toe naast homepage-hero) ──
   3 slogans: hoofd-slogan rechts (zwart) op een banaan, Slogan2 links op een
   sinaasappel, Slogan3 links-midden op een kiwi. Uit oud.css .restyle-banana.
   Staat bewust vóór de mobiele query, zodat de mobiele regels (later in de
   bron) deze desktop-basis correct overschrijven. */
.homepage-hero.hero-banana > .e-con-inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	min-height: min(53.5138888889vw, 785px);
}

.homepage-hero.hero-banana .Slogan {
	position: absolute;
	left: auto;
	right: 0;
	top: 55%;
	width: min(26.3888888889vw, 380px);
	margin: 0;
	color: #000; /* zwarte tekst */
	text-align: left;
	transform: translate(-30%, -50%);
}

.homepage-hero.hero-banana .Slogan::before {
	background: url(assets/images/banner-banana.svg) no-repeat center center / 100% 100%;
	top: 0;
	transform: translate(-48%, -40%);
	width: 175.6756756757%;
	padding-bottom: 175.6756756757%;
}

.homepage-hero.hero-banana .Slogan2 {
	position: absolute;
	left: 15%;
	top: 40%;
	transform: translate(0, -50%);
}

.homepage-hero.hero-banana .Slogan2::before {
	background-image: url(assets/images/banner-orange.svg);
	transform: translate(-38%, -59%) rotate(-15deg);
	width: min(20.6vw, 297px);
	height: min(20.6vw, 297px);
	padding-bottom: 0;
}

.homepage-hero.hero-banana .Slogan3 {
	position: absolute;
	left: 20%;
	top: 58%;
	transform: rotate(-10deg);
}

.homepage-hero.hero-banana .Slogan3::before {
	background-image: url(assets/images/banner-kiwi.svg);
	transform: translate(-38%, -49%) rotate(16deg);
	width: min(12.2vw, 176px);
	height: min(12.2vw, 176px);
	padding-bottom: 0;
}

/* ── Hero fruit-variant (voeg class "hero-fruit" toe naast homepage-hero) ──
   3 slogans: "Hoe dan?" op rode appel (rechts), "100% BIO" op peer (links),
   "BIO en duurzaam?" op aardbei (linksonder). Uit oud.css .restyle-fruit.
   Staat bewust vóór de mobiele query, zodat de mobiele regels (later in de
   bron) deze desktop-basis correct overschrijven. */
.homepage-hero.hero-fruit > .e-con-inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	min-height: min(53.5138888889vw, 785px);
}

.homepage-hero.hero-fruit .Slogan {
	position: absolute;
	left: 71%;
	top: 65%;
	width: min(17.7083333333vw, 255px);
	margin: 0;
	transform: translate(0, -50%);
}

.homepage-hero.hero-fruit .Slogan .line1 span,
.homepage-hero.hero-fruit .Slogan > div span {
	font-size: min(5.9027777778vw, 85px);
	line-height: .85;
}

.homepage-hero.hero-fruit .Slogan::before {
	background-image: url(assets/images/banner-apple-red.svg);
	top: 0;
	transform: translate(-52%, -40%) scaleX(-1) rotate(-12deg);
	width: min(35.9vw, 517px);
	height: min(35.9vw, 517px);
	padding-bottom: 0;
}

.homepage-hero.hero-fruit .Slogan2 {
	position: absolute;
	left: 13%;
	top: 30%;
	font-size: min(3.125vw, 45px);
	line-height: .95;
	transform: translate(0, -50%) rotate(30deg);
}

.homepage-hero.hero-fruit .Slogan2::before {
	background-image: url(assets/images/banner-pear.svg);
	transform: translate(-43%, -66%) rotate(-12deg);
	width: min(21.2vw, 306px);
	height: min(21.2vw, 306px);
	padding-bottom: 0;
}

.homepage-hero.hero-fruit .Slogan3 {
	position: absolute;
	left: 5%;
	top: 58%;
	width: min(13.8888888889vw, 200px);
	font-size: min(2.0833333333vw, 30px);
	line-height: .95;
	transform: translate(0, -50%) rotate(-8deg);
}

.homepage-hero.hero-fruit .Slogan3 .line2 span,
.homepage-hero.hero-fruit .Slogan3 > div span {
	font-size: min(3.8194444444vw, 55px);
	line-height: .95;
}

.homepage-hero.hero-fruit .Slogan3::before {
	background-image: url(assets/images/banner-strawberry.svg);
	top: 0;
	transform: translate(-42%, -20%) rotate(25deg);
	width: min(20.1vw, 290px);
	height: min(20.1vw, 290px);
	padding-bottom: 0;
}

/* ── Hero grapes-variant (voeg class "hero-grapes" toe naast homepage-hero) ──
   Hoofd-slogan links op de druiventros, Slogan2 rechts op een peer,
   Slogan3 linksonder op een sinaasappel. Uit oud.css .restyle-grapes.
   Staat bewust vóór de mobiele query, zodat de mobiele regels (later in de
   bron) deze desktop-basis correct overschrijven. */
.homepage-hero.hero-grapes > .e-con-inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	min-height: min(53.5138888889vw, 785px);
}

.homepage-hero.hero-grapes .Slogan {
	position: absolute;
	left: 15%;
	top: 50%;
	width: min(15.2777777778vw, 220px);
	margin: 0;
	font-size: min(2.4305555556vw, 35px);
	transform: translate(0, -65%);
}

.homepage-hero.hero-grapes .Slogan::before {
	transform: translate(-50%, -50%);
	width: min(33.9vw, 488px);
	height: min(33.9vw, 488px);
	padding-bottom: 0;
}

.homepage-hero.hero-grapes .Slogan2 {
	position: absolute;
	left: 70%;
	top: 60%;
	width: min(16.6666666667vw, 240px);
	font-size: min(2.7777777778vw, 40px);
	transform: translate(0, -45%);
}

.homepage-hero.hero-grapes .Slogan2::before {
	background-image: url(assets/images/banner-pear.svg);
	transform: translate(-58%, -66%) scaleX(-1) rotate(-12deg);
	width: min(31.5vw, 454px);
	height: min(31.5vw, 454px);
	padding-bottom: 0;
}

.homepage-hero.hero-grapes .Slogan3 {
	position: absolute;
	left: 23%;
	top: 82%;
	transform: translate(0, -50%) rotate(-15deg);
}

.homepage-hero.hero-grapes .Slogan3::before {
	background-image: url(assets/images/banner-orange.svg);
	transform: translate(-38%, -59%) rotate(-15deg);
	width: min(12.6vw, 181px);
	height: min(12.6vw, 181px);
	padding-bottom: 0;
}

/* ── Hero orange-variant (voeg class "hero-orange" toe naast homepage-hero) ──
   2 slogans: hoofd-slogan linksonder op een sinaasappel, Slogan2 rechtsboven
   (zwarte tekst) op een banaan. Uit oud.css .restyle-orange.
   Staat bewust vóór de mobiele query, zodat de mobiele regels (later in de
   bron) deze desktop-basis correct overschrijven. */
.homepage-hero.hero-orange > .e-con-inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	min-height: min(53.5138888889vw, 785px);
}

.homepage-hero.hero-orange .Slogan {
	position: absolute;
	left: 0;
	top: 60%;
	width: min(27.7777777778vw, 400px);
	margin: 0;
	line-height: min(3vw, 43px);
	transform: translate(0, -90%) rotate(-10deg);
	z-index: 3; /* slogan + fruit boven de banner-foto */
}

.homepage-hero.hero-orange .Slogan .line1 {
	margin: 0 0 -20px 0;
	/* font-size kun je niet met max-width cappen; min() doet hetzelfde:
	   2.9vw tot 1440px breed, daarna vast op 42px */
	font-size: min(2.9vw, 42px);
}

.homepage-hero.hero-orange .Slogan::before {
	background-image: url(assets/images/banner-orange.svg);
	transform: translate(-38%, -52%);
	width: 41vw;
	height: 41vw;
	/* gecapt op de ontwerpbreedte (41vw van 1440px) zodat de sinaasappel
	   boven 1440px niet verder meegroeit */
	max-width: 590px;
	max-height: 590px;
	padding-bottom: 0;
}

.homepage-hero.hero-orange .Slogan2 {
	position: absolute;
	left: 67%;
	top: 40%;
	width: min(19.4444444444vw, 280px);
	color: #000; /* zwarte tekst */
	text-align: left;
	transform: translate(0, -20%);
	z-index: 3; /* slogan + fruit boven de banner-foto */
}

.homepage-hero.hero-orange .Slogan2 .line2,
.homepage-hero.hero-orange .Slogan2 .line3 {
	font-size: min(1.3888888889vw, 20px);
	line-height: .96;
}

.homepage-hero.hero-orange .Slogan2 .line3 {
	font-size: min(2vw, 29px);
}

.homepage-hero.hero-orange .Slogan2::before {
	background-image: url(assets/images/banner-banana.svg);
	transform: translate(-50%, -55%);
	width: 36vw;
	height: 36vw;
	/* gecapt op de ontwerpbreedte (36vw van 1440px) */
	max-width: 518px;
	max-height: 518px;
	padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.homepage-hero {
		/* nooit lager dan 400px; boven ~571px venster wint 70vw weer */
		min-height: max(70vw, 400px);
	}

	/* mobiele foto (aparte image-widget) valt over de slogan heen.
	   width:100% zodat de widget uitrekt i.p.v. de natuurlijke 450px aan te
	   nemen (anders valt de foto buiten de container op smalle schermen). */
	.homepage-hero .elementor-widget-image.elementor-hidden-desktop.elementor-hidden-tablet {
		position: relative;
		z-index: 50;
		width: 100%;
	}

	.homepage-hero .elementor-widget-image.elementor-hidden-desktop.elementor-hidden-tablet img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* kiwi + redapple + deco + banana + pear + fruit + grapes: slogan-widget over de foto heen op mobiel */
	.homepage-hero.hero-kiwi .elementor-widget-html,
	.homepage-hero.hero-redapple .elementor-widget-html,
	.homepage-hero.hero-deco .elementor-widget-html,
	.homepage-hero.hero-banana .elementor-widget-html,
	.homepage-hero.hero-pear .elementor-widget-html,
	.homepage-hero.hero-fruit .elementor-widget-html,
	.homepage-hero.hero-grapes .elementor-widget-html,
	.homepage-hero.hero-orange .elementor-widget-html {
		position: absolute;
		inset: 0;
		z-index: 100;
	}

	/* kiwi-decoraties (aardbei + appel) verbergen op mobiel */
	.homepage-hero.hero-kiwi .elementor-widget-image::before,
	.homepage-hero.hero-kiwi .elementor-widget-image::after {
		display: none;
	}

	/* hero-deco: peer + mandarijn zitten al in de mobiele afbeelding (59_banner.png) */
	.homepage-hero.hero-deco .hero-deco-layer {
		display: none;
	}

	/* hero-deco: slogan-positie op mobiel */
	.homepage-hero.hero-deco .Slogan {
		top: 58%;
		left: -3%;
	}

	/* redapple: Slogan1-positie op mobiel */
	.homepage-hero.hero-redapple .Slogan {
		position: absolute;
		left: 0;
		top: 76%;
		width: 45vw;
		margin: 0;
		transform: translate(0, -25%) rotate(-10deg);
	}

	/* redapple: op mobiel alleen Slogan1 tonen */
	.homepage-hero.hero-redapple .Slogan2 {
		display: none;
	}

	/* orange: op mobiel alleen Slogan1 tonen */
	.homepage-hero.hero-orange .Slogan2 {
		display: none;
	}

	/* fruit: op mobiel alleen Slogan1 tonen */
	.homepage-hero.hero-fruit .Slogan2,
	.homepage-hero.hero-fruit .Slogan3 {
		display: none;
	}

	/* fruit: op mobiel groter — appel + tekst schalen naar verhouding mee */
	.homepage-hero.hero-fruit .Slogan {
		width: 27vw;
		padding: 10px 0;
	}

	.homepage-hero.hero-fruit .Slogan .line1 span,
	.homepage-hero.hero-fruit .Slogan > div span {
		font-size: 9vw;
	}

	.homepage-hero.hero-fruit .Slogan::before {
		width: 55vw;
		height: 55vw;
	}

	/* Hero-varianten op mobiel: slogans blijven absoluut, maar met de
	   mobiele posities/afmetingen uit oud-mobile.css. De ::before-vruchten
	   gebruiken vaste vw-maten (height + padding-bottom:0) zoals op desktop,
	   zodat ze niet inklappen. background-image erven ze van de desktopregels. */

	/* basis-slogangroottes op mobiel (varianten overschrijven positie) */
	.homepage-hero .Slogan {
		width: 49.3333333333vw;
		font-size: 25px;
	}

	.homepage-hero .Slogan2 {
		width: 22.5333333333vw;
		font-size: 2.8125vw;
	}

	.homepage-hero .Slogan3 {
		width: 13.3333333333vw;
		font-size: 2.2222222222vw;
	}

	/* ── pear ── */
	.homepage-hero.hero-pear .Slogan {
		left: 60%;
		top: 65%;
		width: 37.3333333333vw;
		transform: translate(0, -45%);
	}

	.homepage-hero.hero-pear .Slogan::before {
		transform: translate(-58%, -64%) scaleX(-1) rotate(-8deg);
		width: 80.7vw;
		height: 80.7vw;
		padding-bottom: 0;
	}

	/* pear-banner heeft op mobiel alleen Slogan1 */
	.homepage-hero.hero-pear .Slogan2,
	.homepage-hero.hero-pear .Slogan3 {
		display: none;
	}

	/* ── banana ── (op mobiel alleen Slogan1, mét de CSS-banaan erachter) */
	.homepage-hero.hero-banana .Slogan {
		left: 5%;
		right: auto;
		top: 86%;
		width: 72.8571428571vw;
		transform: translate(0, -120%);
	}

	.homepage-hero.hero-banana .Slogan::before {
		width: 140.5405405405%;
		padding-bottom: 140.5405405405%;
		transform: translate(-56%, -42%);
	}

	/* banana-banner heeft op mobiel alleen Slogan1 */
	.homepage-hero.hero-banana .Slogan2,
	.homepage-hero.hero-banana .Slogan3 {
		display: none;
	}

	/* ── orange ── */
	.homepage-hero.hero-orange .Slogan {
		left: 0;
		top: 75%;
		width: 57.3333333333vw;
		transform: translate(0, -90%) rotate(-10deg);
	}

	.homepage-hero.hero-orange .Slogan .line1 {
		font-size: 4.5vw;
	}

	.homepage-hero.hero-orange .Slogan::before {
		transform: translate(-38%, -52%);
		width: 64.9vw;
		height: 64.9vw;
		padding-bottom: 0;
	}

	.homepage-hero.hero-orange .Slogan2 {
		left: 67%;
		top: 20%;
		width: 37.3333333333vw;
		transform: translate(0, -20%);
	}

	.homepage-hero.hero-orange .Slogan2 .line2,
	.homepage-hero.hero-orange .Slogan2 .line3 {
		font-size: 2.2222222222vw;
	}

	.homepage-hero.hero-orange .Slogan2::before {
		transform: translate(-50%, -55%);
		width: 69.6vw;
		height: 69.6vw;
		padding-bottom: 0;
	}

	/* ── grapes ── */
	.homepage-hero.hero-grapes .Slogan {
		left: 0;
		top: 75%;
		width: 29.3333333333vw;
		font-size: 5.7777777778vw;
		transform: translate(0, -65%);
	}

	.homepage-hero.hero-grapes .Slogan::before {
		transform: translate(-50%, -50%);
		width: 91.2vw;
		height: 91.2vw;
		padding-bottom: 0;
	}

	/* grapes-banner heeft op mobiel alleen Slogan1 */
	.homepage-hero.hero-grapes .Slogan2,
	.homepage-hero.hero-grapes .Slogan3 {
		display: none;
	}
}

/* ── AppleCTA ─────────────────────────────────────────────────────────
   Elementor import (apple-cta.json). Container-class: "snippet-applecta".
   Groene appel als achtergrond, witte kop (Big John) + knop.
   Aangepast van .Snippet.AppleCTA in oud.css. */
.snippet-applecta {
	position: relative;
	z-index: 10; /* overlapt de hero erboven */
	text-align: center;
	/* omhoog geschoven zodat de CTA over de hero valt (rechtsonder) */
	margin-top: max(-15.625vw, -225px);
}

/* content rechts uitgelijnd en zo breed als de tekst (zoals origineel).
   Werkt of "snippet-applecta" nu op een boxed (.e-con-inner) of full (.e-con-full)
   container staat. */
.snippet-applecta > .e-con-inner,
.snippet-applecta.e-con-full {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: 0;
}

/* groene appel achter de tekst (vaste maat, gecentreerd op de tekst, gespiegeld) */
.snippet-applecta > .e-con-inner::before,
.snippet-applecta.e-con-full::before {
	content: "";
	position: absolute;
	width: min(28vw, 400px);
	height: min(28vw, 400px);
	display: block;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -58%) scale(-1, 1);
	transform-origin: center center;
	background: url(assets/images/dec-apple-green.svg) no-repeat center center / 100% 100%;
	transition: transform .3s ease-in-out;
	pointer-events: none;
}

.snippet-applecta > .e-con-inner:hover::before,
.snippet-applecta.e-con-full:hover::before {
	transform: translate(-50%, -58%) scale(-1.05, 1.05) rotate(3deg);
}

/* apple-home-variant: andere appel-afbeelding op de ::before, niet gespiegeld */
.apple-home > .e-con-inner::before,
.apple-home.e-con-full::before {
	background-image: url(assets/images/apple-home.svg);
	transform: translate(-50%, -58%);
}

.apple-home > .e-con-inner:hover::before,
.apple-home.e-con-full:hover::before {
	transform: translate(-50%, -58%) scale(1.05, 1.05) rotate(3deg);
}

/* applecta hoger in de stapeling: het hele blok (incl. omringende container)
   boven de buren, zodat het niet wordt afgedekt. De interne appel-::before
   blijft op -1 t.o.v. de eigen tekst, maar wordt via deze context meegetild. */
.e-con:has(.snippet-applecta),
.snippet-applecta {
	position: relative;
	z-index: 600;
}

.snippet-applecta > .e-con-inner,
.snippet-applecta.e-con-full,
.snippet-applecta .elementor-widget,
.snippet-applecta .elementor-heading-title,
.snippet-applecta .elementor-button {
	position: relative;
	z-index: 2;
}

.snippet-applecta .elementor-widget-heading {
	margin-top: 80px;
}

.snippet-applecta .elementor-widget-heading,
.snippet-applecta .elementor-widget-heading .elementor-heading-title {
	text-align: center;
}

.snippet-applecta .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.0434782609em;
	line-height: .8333333333em;
	color: #fff;
	/* gecapt op 1440px (2.0625rem) zodat de kop + appel niet te groot worden */
	font-size: min(2.2916666667vw, 2.0625rem);
}

/* knop: wit met zwarte tekst, hover omgekeerd */
.snippet-applecta .elementor-button,
.snippet-applecta .more.outline {
	background-color: #fff;
	border: 2px solid #fff;
	color: #000;
	transition: all .3s ease-in-out;
}

.snippet-applecta .elementor-button:hover,
.snippet-applecta .more.outline:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

@media only screen and (max-width: 767px) {
	.snippet-applecta {
		margin-top: 0; /* geen overlap op mobiel */
	}

	.snippet-applecta > .e-con-inner,
	.snippet-applecta.e-con-full {
		margin-left: auto;
		margin-right: auto; /* centreren op mobiel */
	}

	.snippet-applecta > .e-con-inner::before,
	.snippet-applecta.e-con-full::before {
		width: 90vw;
		height: 90vw;
		max-width: 320px;
		max-height: 400px;
	}

	.snippet-applecta .elementor-widget-heading .elementor-heading-title {
		font-size: 1.75rem;
	}
}

/* ── USP-balk ─────────────────────────────────────────────────────────
   Elementor import (usps.json). Container-class "bannerusps" met een
   HTML-widget die <ul class="usps"> bevat. Aangepast van .bannerusps in oud.css.
   Het vinkje is een inline SVG (data-URI); vervang de url() door je eigen
   check.svg als je een merk-icoon hebt. */
.bannerusps {
	font-size: 1.125rem;
	font-weight: 600;
}

.bannerusps .usps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
}

.bannerusps .usps > li {
	margin: 0;
}

.bannerusps .usps > li a {
	color: inherit;
	text-decoration: none;
}

.bannerusps .usps > li a:hover {
	color: #ffa600;
	text-decoration: none;
}

.bannerusps .usps > li > span,
.bannerusps .usps > li > a > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	padding-left: 50px;
	min-height: 35px;
}

.bannerusps .usps > li > span::before,
.bannerusps .usps > li > a > span::before {
	content: "";
	width: 35px;
	height: 35px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(assets/images/check.svg) no-repeat center center / 100% 100%;
}

@media only screen and (max-width: 767px) {
	.bannerusps .usps {
		gap: 20px;
	}

	.bannerusps .usps > li {
		flex: 0 0 100%;
	}
}

/* ── Mainrow (intro-blok) ─────────────────────────────────────────────
   Elementor import (mainrow.json). Sectie-class "snippet-mainrow".
   Figuur links, kop (h1) + intro rechts. Aangepast van .mainrow in oud.css. */
.snippet-mainrow {
	position: relative;
	margin-top: 70px;
	margin-bottom: 70px;
}

.snippet-mainrow > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.snippet-mainrow > .e-con-inner > .e-con {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
}

/* figuurkolom links (bevat de afbeelding); bloedt links uit */
.snippet-mainrow > .e-con-inner > .e-con:has(.elementor-widget-image) {
	order: 0;
}

.snippet-mainrow > .e-con-inner > .e-con:has(.elementor-widget-image) img {
	display: block;
	margin-left: -50px;
	width: calc(100% + 50px);
	max-width: calc(100% + 50px);
}

/* tekstkolom rechts */
.snippet-mainrow > .e-con-inner > .e-con:not(:has(.elementor-widget-image)) {
	order: 1;
	text-align: center;
}

.snippet-mainrow .elementor-widget-heading .elementor-heading-title {
	text-align: left;
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	line-height: .9270833333em;
	/* homepage-h1, gecapt op 1440px (5.75rem) */
	font-size: min(4vw, 5.75rem);
	margin-right: -3.75vw;
	margin-left: -2.5vw;
	margin-bottom: 30px;
}

/* subtitel (h2) onder de kop — kleine bold-regel (oud.css .Heading>h2:not(.h1)),
   met -25px optrek zodat 'ie dicht onder de h1 staat */
.snippet-mainrow .elementor-widget-heading h2.elementor-heading-title {
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.2;
	font-size: 1.0625rem;
	margin: -25px 0 30px;
}

/* gewone pagina-h1 (niet-homepage): basisgrootte i.p.v. de grote .home-h1.
   Voeg class "mainrow-page" toe naast "snippet-mainrow". (oud.css h1 vs .home h1) */
.snippet-mainrow.mainrow-page .elementor-widget-heading h1.elementor-heading-title {
	font-size: 3.4375rem;
	line-height: 1;
}

/* oranje spans in de kop (zoals origineel) */
.snippet-mainrow .elementor-heading-title span {
	color: #e94c00;
}

/* intro-tekst + links (oud.css .Intro) */
.snippet-mainrow .Intro {
	margin-bottom: 30px;
}

.snippet-mainrow .Intro a {
	color: #ffa600 !important; /* wint van Elementor's globale linkkleur */
	text-decoration: underline;
}

.snippet-mainrow .Intro a:hover {
	text-decoration: none;
}

/* peer-decoratie linksboven — voeg class "mainrow-kiwi" toe naast
   "snippet-mainrow" (oud.css body .view.kiwi .mainrow::before).
   De decoratie zit op de dichtstbijzijnde .e-con-inner. */
.snippet-mainrow.mainrow-kiwi > .e-con-inner {
	position: relative;
}

.snippet-mainrow.mainrow-kiwi > .e-con-inner::before {
	content: "";
	font-size: min(43.125vw, 43.125rem);
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 0;
	top: 0;
	transform: translate(-80%, -5%) rotate(-15deg);
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.snippet-mainrow.mainrow-kiwi > .e-con-inner::before {
		font-size: 37.59375vw;
	}

	.snippet-mainrow > .e-con-inner {
		flex-direction: column;
	}

	.snippet-mainrow > .e-con-inner > .e-con {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* afbeelding niet meer links laten uitbloeden op mobiel */
	.snippet-mainrow > .e-con-inner > .e-con:has(.elementor-widget-image) img {
		margin-left: 0;
		width: 100%;
		max-width: 100%;
	}

	.snippet-mainrow .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}

	/* pagina-h1 ook terug naar mobiele maat (wint anders door specificiteit) */
	.snippet-mainrow.mainrow-page .elementor-widget-heading h1.elementor-heading-title {
		font-size: 2.5rem;
	}

	.snippet-mainrow .elementor-widget-heading h2.elementor-heading-title {
		font-size: 1.0625rem;
		text-align: center;
	}
}

/* ── Snippet Telermade ────────────────────────────────────────────────
   Elementor import (telermade.json). Sectie-class "snippet-telermade".
   Achtergrondafbeelding via Elementor; witte tekst links-midden, max 50%.
   Aangepast van .Snippet.Telermade / .colored.bgimg uit oud.css. */
.snippet-telermade {
	position: relative;
	color: #fff;
	background-color: #ffa600; /* oranje achter de foto, zoals origineel */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	justify-content: center; /* verticaal midden */
	align-items: flex-start; /* links */
}

/* content-container (de sub-container met kop/tekst/knop), links, tekst gecentreerd op de peer */
.snippet-telermade .e-con {
	position: relative;
	align-self: flex-start;
	/* gecapt op de ontwerpbreedte (38.19vw van 1440px); de max-width van 50%
	   blijft eronder gelden voor smallere vensters */
	width: min(38.1944444444vw, 550px);
	max-width: 50%;
	margin-right: auto;
	padding: 1.875vw;
	text-align: center;
}

/* tekst-widgets boven de peer */
.snippet-telermade .e-con > * {
	position: relative;
	z-index: 2;
}

/* grote groene peer achter de tekst (oud.css .Telermade>.inner::before) */
.snippet-telermade .e-con::before {
	content: "";
	position: absolute;
	/* Gecapt op de maat bij de ontwerpbreedte: 169.09% van een tekstblok van
	   550px. De cap staat op allebei, want de hoogte komt uit padding-bottom
	   en dat percentage rekent net als de breedte tegen de ouder — zo blijft
	   het vierkant kloppen. Geen max-width/aspect-ratio: de peer zit in een
	   flex-container en wordt dan in de hoogte uitgerekt. */
	width: min(169.0909090909%, 930px);
	padding-bottom: min(169.0909090909%, 930px);
	z-index: 1;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-38%, -64%);
	transform-origin: center center;
	background: url(assets/images/banner-pear.svg) no-repeat center center / 100% 100%;
	pointer-events: none;
}

/* alle tekst wit (txtwhite) — !important tegen Elementor's globale kleuren */
.snippet-telermade,
.snippet-telermade .elementor-heading-title,
.snippet-telermade .Content,
.snippet-telermade .Content p,
.snippet-telermade .Content a {
	color: #fff !important;
}

/* kop: Big John, uppercase, krappe letterafstand; gecapt op 1440px (5.4375rem) */
.snippet-telermade .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.0260869565em;
	line-height: .8045977011em;
	font-size: min(6.0416666667vw, 5.4375rem);
	margin-bottom: 1.875vw;
}

/* Duitse variant: de kop is langer, dus schaalt hij trager mee, stopt hij
   eerder (4.4375rem tegen 5.4375rem in de basisregel) en staat hij iets
   naar binnen. */
.snippet-telermade.de .elementor-widget-heading .elementor-heading-title {
	font-size: min(4.9vw, 4.4375rem);
	padding-left: 40px;
}

/* Frans: de vertaalde kop is langer, dus iets kleiner gezet zodat hij binnen
   dezelfde sectie past */
.snippet-telermade.fr .elementor-widget-heading .elementor-heading-title {
	font-size: min(4.75vw, 5.4375rem);
}

/* knop: wit met zwarte tekst, hover omgekeerd */
.snippet-telermade .elementor-button {
	background-color: #fff;
	border: 2px solid #fff;
	color: #000;
	transition: all .3s ease-in-out;
}

.snippet-telermade .elementor-button:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

@media only screen and (max-width: 767px) {
	.snippet-telermade {
		min-height: 50vh;
	}

	/* tekstblok gecentreerd (verticaal gecentreerd door de sectie) */
	.snippet-telermade .e-con {
		width: 90%;
		max-width: 90%;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	/* mobiel: gespiegelde peer (dec-pear.svg), kleiner en gecentreerd */
	.snippet-telermade .e-con::before {
		background-image: url(assets/images/dec-pear.svg);
		width: 115.818182%;
		padding-bottom: 115.818182%;
		transform: translate(-50%, -60%) scaleX(-1);
	}

	.snippet-telermade .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	/* De .de-regel hierboven heeft een class meer en zou dus ook op mobiel
	   winnen; hier expliciet terug naar de mobiele maat en zonder inspringing. */
	.snippet-telermade.de .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
		padding-left: 0;
	}
}

/* Variant "teler" (o.a. /alles-over-ons-fruit): de peer groter vanaf iPad
   naar beneden. Geldt voor tablet én mobiel, dus één query op 991px in plaats
   van twee. Zonder cap: de peer volgt hier altijd de breedte van het
   tekstblok. De class-selector heeft er één class meer dan de mobiele regel
   hierboven, dus die 115.818182% wordt ook op de telefoon overschreven. */
@media only screen and (max-width: 991px) {
	.snippet-telermade.teler .e-con::before {
		width: 220%;
		padding-bottom: 220%;
	}
}

/* ── Referentie-slider quote ──────────────────────────────────────────
   Voeg de class "referentie-slider-quote" toe aan het quote-element.
   Aanhalingstekens ervoor/erna. Aangepast van .Reference.Item.slider blockquote. */
.referentie-slider-quote {
	position: relative;
	padding-right: 80px;
}

.referentie-slider-quote::before,
.referentie-slider-quote::after {
	position: absolute;
	font-size: 100px;
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	display: flex;
	height: 44px;
	width: 44px;
	line-height: 1;
}

.referentie-slider-quote::before {
	content: "\201C"; /* “ */
	top: 0;
	left: -60px;
	justify-content: flex-start;
	align-items: flex-start;
}

.referentie-slider-quote::after {
	content: "\201D"; /* ” */
	top: 100%;
	right: 0;
	justify-content: flex-end;
	align-items: flex-end;
}

/* ── Steps (stappen) ──────────────────────────────────────────────────
   Elementor import (steps.json). Sectie-class "snippet-steps"; elke stap
   is een container met class "steps-item" (afbeelding + tekstkolom).
   Aangepast van .Steps.Overview / .Steps.Item uit oud.css. */
.snippet-steps > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* elke stap: afbeelding + tekst naast elkaar. Richting (row/row-reverse)
   regel je per stap in Elementor. */
.steps-item {
	position: relative; /* anchor voor de fruit-decoratie */
}

/* de flex-rij: bij "full" containers is dat de steps-item zelf,
   bij "boxed" containers de .e-con-inner */
.steps-item,
.steps-item > .e-con-inner {
	align-items: center;
	justify-content: space-between;
	gap: 35px;
}

/* fruit-decoratie achter stap 2 (banana-variant, oud.css nth-child(2)::after) */
.steps-banana .steps-item:nth-child(2)::after {
	content: "";
	font-size: 55.625vw;
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 50%;
	top: 50%;
	transform: translate(-7%, -58%) rotate(-15deg);
	background: url(assets/images/dec-banana.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* fruit-decoratie achter stap 3 (mandarijn, oud.css nth-child(3)::after)
   De maat zit in de font-size, want breedte en hoogte staan in em. Een cap
   hoort daarom ook daar: met een max-width zou alleen de breedte stoppen en
   werd de mandarijn een ovaal. 765px is de maat op de ontwerpbreedte van
   1440px, dus hij groeit op bredere schermen niet verder door. */
.steps-banana .steps-item:nth-child(3)::after {
	content: "";
	font-size: min(53.125vw, 765px);
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 50%;
	top: 50%;
	transform: translate(-5%, -45%) rotate(12deg) scaleX(-1);
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* peer-decoratie bij stap 4 (oud.css nth-child(4)::before) */
.steps-banana .steps-item:nth-child(4)::before {
	content: "";
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 0;
	top: 50%;
	font-size: 33.125vw;
	transform: translate(-40%, -57%) rotate(-5deg);
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
}

/* inhoud van stap 4 boven de peer */
.steps-banana .steps-item:nth-child(4) > * {
	position: relative;
	z-index: 2;
}

/* relax-beeld bij stap 5 (oud.css nth-child(5)::after)
   Breedte als percentage van de stap in plaats van in vw, met de
   beeldverhouding van dec-relax.webp (1 : .813) via aspect-ratio — die kwam
   eerst uit de em-hoogte, en die rekent mee met font-size, niet met een
   procentuele breedte. De cap van 400px zorgt dat het beeld op ultrabrede
   schermen niet doorgroeit. */
.steps-banana .steps-item:nth-child(5)::after {
	content: "";
	width: 25%;
	max-width: 400px;
	aspect-ratio: 1 / .812962963;
	position: absolute;
	transform-origin: center center;
	left: 50%;
	top: 0;
	transform: translate(-50%, -15%);
	background: url(assets/images/dec-relax.webp) no-repeat center center / contain;
	display: block;
	z-index: 1;
	pointer-events: none;
}

.steps-item > .e-con,
.steps-item > .elementor-widget,
.steps-item > .e-con-inner > .e-con,
.steps-item > .e-con-inner > .elementor-widget {
	flex: 0 0 48%;
	width: 48%;
	max-width: 48%;
}

/* fruit-variant: mandarijn achter stap 2 (oud.css .fruit ... li:nth-child(2)::after) */
.steps-fruit .steps-item:nth-child(2)::after {
	content: "";
	/* bewust kleiner dan de ontwerpmaat (68.125vw van 1440px = 981px) */
	font-size: min(68.125vw, 700px);
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 100%;
	top: 0;
	transform: translate(-55%, -5%) rotate(10deg) scaleX(-1);
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* orange-variant: mandarijn achter stap 2 (oud.css .orange ... li:nth-child(2)::after) */
.steps-orange .steps-item:nth-child(2)::after {
	content: "";
	font-size: 53.125vw;
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 0;
	top: 0;
	transform: translate(-40%, -20%);
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* orange-variant: grapefruit achter de tekst van stap 3 (oud.css .orange ... li:nth-child(3) .inner::after) */
.steps-orange .steps-item:nth-child(3) > .e-con,
.steps-orange .steps-item:nth-child(3) > .e-con-inner > .e-con {
	position: relative;
	padding-top: 150px;
}

.steps-orange .steps-item:nth-child(3) > .e-con::after,
.steps-orange .steps-item:nth-child(3) > .e-con-inner > .e-con::after {
	content: "";
	font-size: min(34.7222222222vw, 400px);
	width: 1em;
	height: .8675213675em;
	position: absolute;
	transform-origin: center center;
	left: 110%;
	top: 70px;
	transform: translate(-60%, -50%);
	background: url(assets/images/dec-grapefruit.webp) no-repeat center center / contain;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* Duitse variant: geen grapefruit bij stap 3. */
.steps-orange.de .steps-item:nth-child(3) > .e-con::after,
.steps-orange.de .steps-item:nth-child(3) > .e-con-inner > .e-con::after {
	display: none;
}

/* orange-variant stap 4: donkere volle-breedte band erachter (oud.css li:nth-child(4)::after) */
.steps-orange .steps-item:nth-child(4)::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100.2vw;
	max-width: 100.2vw;
	top: -35px;
	bottom: -35px;
	background: #212a31;
	z-index: -2;
	pointer-events: none;
}

/* peer links bij stap 4 (oud.css li:nth-child(4)::before) */
.steps-orange .steps-item:nth-child(4)::before {
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	font-size: 33.125vw;
	left: 0;
	top: 50%;
	transform: translate(-40%, -57%) rotate(-5deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	pointer-events: none;
}

/* appel op de tekstkolom van stap 4 (oud.css li:nth-child(4) .inner::after) */
.steps-orange .steps-item:nth-child(4) > .e-con,
.steps-orange .steps-item:nth-child(4) > .e-con-inner > .e-con {
	position: relative;
}

.steps-orange .steps-item:nth-child(4) > .e-con::after,
.steps-orange .steps-item:nth-child(4) > .e-con-inner > .e-con::after {
	content: "";
	position: absolute;
	font-size: 23.6805555556vw;
	width: 1em;
	height: 1.1026392962em;
	left: 0;
	top: 70px;
	transform: translate(-60%, -100%);
	transform-origin: center center;
	background: url(assets/images/dec-ecologisch-apple.webp) no-repeat center center / contain;
	z-index: -1;
	pointer-events: none;
}

/* Duitse variant: andere appel, hoger, en vóór de donkere band in plaats van
   erachter -- met de z-index van -1 uit de basisregel viel hij weg achter de band. */
.steps-orange.de .steps-item:nth-child(4) > .e-con::after,
.steps-orange.de .steps-item:nth-child(4) > .e-con-inner > .e-con::after {
	background-image: url(assets/images/dec-ecologisch-apple.png);
	top: 0;
	z-index: 1;
}

/* Franse variant: eigen appel met Franstalige tekst erop, verder gelijk aan de
   Duitse plaatsing (hoger en vóór de donkere band). */
.steps-orange.fr .steps-item:nth-child(4) > .e-con::after,
.steps-orange.fr .steps-item:nth-child(4) > .e-con-inner > .e-con::after {
	background-image: url(assets/images/fr-dec-ecologisch-apple.png);
	top: 0;
	z-index: 1;
}

/* witte tekst op de donkere band (stap 4) */
.steps-orange .steps-item:nth-child(4) .elementor-heading-title,
.steps-orange .steps-item:nth-child(4) .Content,
.steps-orange .steps-item:nth-child(4) .Content p {
	color: #fff;
}

/* orange-variant: banaan achter stap 5 (oud.css li:nth-child(5)::after) */
.steps-orange .steps-item:nth-child(5)::after {
	content: "";
	font-size: 49.375vw;
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: 50%;
	top: 50%;
	transform: translate(0%, -69%) rotate(-35deg);
	background: url(assets/images/dec-banana.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* fruit-variant: decoratie achter de tekst van stap 3 (voeg class "steps-fruit"
   toe aan de stappen-container). Uit oud.css .fruit ... li:nth-child(3) .inner::after. */
.steps-fruit .steps-item:nth-child(3) > .e-con,
.steps-fruit .steps-item:nth-child(3) > .e-con-inner > .e-con {
	position: relative;
	z-index: 1; /* tekstkolom (met decoratie) boven de foto */
}

.steps-fruit .steps-item:nth-child(3) > .e-con::after,
.steps-fruit .steps-item:nth-child(3) > .e-con-inner > .e-con::after {
	content: "";
	font-size: 24vw;
	width: 1em;
	height: .8679245283em;
	position: absolute;
	transform-origin: center center;
	left: 105%;
	top: -40px;
	transform: translate(-62%, -50%);
	background: url(assets/images/dec-inthehouse.webp) no-repeat center center / contain;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* stap-afbeelding bloedt boven/onder uit (oud.css .Steps.Item>figure>*) */
.steps-item .elementor-widget-image img {
	display: block;
	margin-top: -105px;
	margin-bottom: -105px;
}

/* tekstkolom van de stap (oud.css .Steps.Item>.inner) */
.steps-item > .e-con,
.steps-item > .e-con-inner > .e-con {
	margin-top: 105px;
	margin-bottom: 105px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	max-width: 535px;
}

/* grote stap-kop, gecapt op 5.75rem */
.steps-item .elementor-widget-heading .elementor-heading-title {
	position: relative;
	font-size: min(4vw, 5.75rem);
	line-height: .8152173913em;
	margin-bottom: .3260869565em;
}

/* genummerd rondje vóór elke stap-kop (oud.css counter(li)) */
.snippet-steps > .e-con-inner {
	counter-reset: step-nr;
}

.steps-item {
	counter-increment: step-nr;
}

.steps-banana .steps-item .elementor-widget-heading .elementor-heading-title::before {
	content: counter(step-nr);
	position: absolute;
	left: -15px;
	top: 0;
	transform: translate(-100%, -10%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 800;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	font-size: min(3.4347222222vw, 4.9375rem);
	line-height: 1;
	min-width: 1.1518987342em;
	height: 1.1518987342em;
	padding: .0253164557em;
	box-sizing: content-box;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	/* stappen stapelen: afbeelding boven, tekst onder */
	.steps-item,
	.steps-item > .e-con-inner {
		flex-direction: column;
	}

	.steps-item > .e-con,
	.steps-item > .elementor-widget,
	.steps-item > .e-con-inner > .e-con,
	.steps-item > .e-con-inner > .elementor-widget {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* geen bleed-marges op mobiel */
	.steps-item .elementor-widget-image img {
		margin-top: 0;
		margin-bottom: 0;
	}

	.steps-item > .e-con,
	.steps-item > .e-con-inner > .e-con {
		margin-top: 40px;
		margin-bottom: 40px;
		max-width: 100%;
	}

	.steps-item .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	/* Het genummerde rondje hangt op desktop links buiten de kop. Op mobiel is
	   daar geen ruimte voor — het viel half buiten het scherm. Daarom hier
	   gewoon naast de titel: de kop wordt een flexrij, zodat een kop van twee
	   of drie regels netjes naast het rondje uitlijnt in plaats van eronder
	   door te lopen. */
	.steps-banana .steps-item .elementor-widget-heading .elementor-heading-title {
		display: flex;
		align-items: center;
		gap: .25em;
	}

	.steps-banana .steps-item .elementor-widget-heading .elementor-heading-title::before {
		font-size: 2.25rem;
		position: static;
		transform: none;
		flex: 0 0 auto;
	}

	/* decoratieve vruchten zijn op de 2-koloms desktop afgestemd; op mobiel
	   verbergen zodat ze niet scheef/gigantisch over de gestapelde inhoud vallen */
	.steps-banana .steps-item::after,
	.steps-banana .steps-item::before,
	.steps-fruit .steps-item > .e-con::after,
	.steps-fruit .steps-item > .e-con-inner > .e-con::after,
	.steps-orange .steps-item:nth-child(2)::after,
	.steps-orange .steps-item:nth-child(3) > .e-con::after,
	.steps-orange .steps-item:nth-child(3) > .e-con-inner > .e-con::after,
	.steps-orange .steps-item:nth-child(4)::before,
	.steps-orange .steps-item:nth-child(4) > .e-con::after,
	.steps-orange .steps-item:nth-child(4) > .e-con-inner > .e-con::after,
	.steps-orange .steps-item:nth-child(5)::after {
		display: none;
	}

	/* Het relax-beeld bij stap 5 valt niet onder de regel hierboven: de
	   desktopregel met :nth-child(5) is specifieker en houdt het zichtbaar.
	   Op mobiel schuift het naar links en omlaag. */
	.steps-banana .steps-item:nth-child(5)::after {
		left: 30%;
		top: 40%;
		width: 40%;
	}

	/* stap 3 orange: geen extra padding meer nodig zonder grapefruit */
	.steps-orange .steps-item:nth-child(3) > .e-con,
	.steps-orange .steps-item:nth-child(3) > .e-con-inner > .e-con {
		padding-top: 0;
	}
}

/* ── Hoe-het-werkt: intro + CTA ───────────────────────────────────────
   Onderdeel van de volledige pagina-import (hoe-het-werkt.json). */
.hoe-intro {
	text-align: center;
	margin-top: 70px;
	margin-bottom: 70px;
}

.hoe-intro .elementor-widget-heading .elementor-heading-title {
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	line-height: .9270833333em;
	font-size: min(4vw, 5.75rem);
	margin-bottom: 30px;
}

.hoe-intro .Intro,
.hoe-intro .Intro p {
	font-size: 1rem; /* 16px basis */
	line-height: 1.6;
}

/* grotere intro vanaf 1200px (oud.css .Intro) */
@media only screen and (min-width: 1200px) {
	.hoe-intro .Intro,
	.hoe-intro .Intro p {
		font-size: 1.3125rem;
	}
}

.hoe-intro .Intro a,
.hoe-intro .elementor-widget-text-editor a {
	color: #ffa600;
}

.hoe-cta {
	text-align: center;
}

.hoe-cta .elementor-heading-title {
	color: #e94c00;
}

/* ── Snippet Geenverspilling (bgimg, wit, tekst rechts-midden) ─────────
   Elementor import (ons-fruit.json). Sectie-class "snippet-geenverspilling".
   Aangepast van .Snippet.Geenverspilling / .colored.bgimg.right uit oud.css. */
.snippet-geenverspilling {
	position: relative;
	color: #fff;
	background-color: #ffa600;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 40vw;
	justify-content: center;
	align-items: flex-end; /* tekst rechts */
}

/* rode appel achter de tekst — voeg class "snippet-geenverspilling-content"
   toe aan de content-container (oud.css .Geenverspilling>.inner::before) */
.snippet-geenverspilling-content {
	position: relative;
}

.snippet-geenverspilling-content::before {
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	width: 158%;
	padding-bottom: 158%;
	transform: translate(-49%, -65%);
	transform-origin: center center;
	background: url(assets/images/dec-apple-red.svg) no-repeat center center / 100% 100%;
	z-index: 0;
	pointer-events: none;
}

/* tekst boven de appel */
.snippet-geenverspilling-content > * {
	position: relative;
	z-index: 1;
}

.snippet-geenverspilling,
.snippet-geenverspilling .elementor-heading-title,
.snippet-geenverspilling .Content,
.snippet-geenverspilling .Content p {
	color: #fff !important;
}

.snippet-geenverspilling .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: -0.0260869565em;
	line-height: .8045977011em;
	font-size: min(6.0416666667vw, 5.4375rem);
	margin-bottom: 1.875vw;
}

@media only screen and (max-width: 767px) {
	.snippet-geenverspilling {
		min-height: auto;
	}

	.snippet-geenverspilling .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	/* rode appel verbergen: 158% van de content is op een 375px-scherm 529px
	   breed, dus hij steekt er links en rechts tientallen pixels buiten */
	.snippet-geenverspilling-content::before {
		display: none;
	}
}

/* ── Presentatie: tab-kaarten in de nested-tabs ───────────────────────
   Voeg de class "presentatie-tabs" toe aan de TABS-SECTIE. Onderscheid op
   wel/geen afbeelding-widget (werkt bij full- én boxed-containers):
   - media-kaart = kaart MET een image-widget → afbeelding + tekst naast elkaar
   - full-bg kaart = kaart ZONDER image-widget maar MET achtergrond → tekst-overlay */
/* media-kaart = ELKE container (op welke diepte dan ook) met een DIRECTE
   afbeelding-widget én een DIRECTE tekst-container. Zo maakt het niet uit of
   het tabblad boxed is, of kaarten in wrappers gegroepeerd zijn. */
.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) {
	flex-direction: row;
	align-items: center;
	gap: 40px;
	margin-bottom: 40px;
}

.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) > .elementor-widget-image {
	flex: 0 0 45%;
	max-width: 45%;
}

.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) > .e-con {
	flex: 1 1 auto;
}

.presentatie-tabs [role="tabpanel"] .elementor-widget-heading h3.elementor-heading-title {
	font-size: min(4.8611111111vw, 4.375rem);
	line-height: .8857142857em;
	margin-bottom: 15px;
}

@media only screen and (max-width: 1180px) {
	.presentatie-tabs [role="tabpanel"] .elementor-widget-heading h3.elementor-heading-title {
		font-size: 2.9125rem;
	}
}

/* full-bg kaart: geen image-widget, wél een achtergrond ingesteld */
.presentatie-tabs [role="tabpanel"] > .e-con[data-settings*="background_background"]:not(:has(.elementor-widget-image)) {
	min-height: 420px;
	justify-content: center;
	background-size: cover;
	background-position: center center;
	color: #fff;
	padding: 6%;
}

.presentatie-tabs [role="tabpanel"] > .e-con[data-settings*="background_background"]:not(:has(.elementor-widget-image)) .elementor-heading-title,
.presentatie-tabs [role="tabpanel"] > .e-con[data-settings*="background_background"]:not(:has(.elementor-widget-image)) .Content,
.presentatie-tabs [role="tabpanel"] > .e-con[data-settings*="background_background"]:not(:has(.elementor-widget-image)) .Content p {
	color: #fff;
}

/* eerste kaart van tab 4: ruimte bovenaan + de boodschap-graphic.
   Werkt bij full- én boxed-tabblad. (oud.css #nav-4 li:first-child::after) */
.presentatie-tabs [data-tab-index="4"] > .e-con:first-child,
.presentatie-tabs [data-tab-index="4"] > .e-con-inner > .e-con:first-child {
	position: relative;
	z-index: 3;
	padding-top: 21.875vw;
}

.presentatie-tabs [data-tab-index="4"] > .e-con:first-child::after,
.presentatie-tabs [data-tab-index="4"] > .e-con-inner > .e-con:first-child::after {
	content: "";
	position: absolute;
	left: 32%;
	top: -15px;
	width: 594px;
	max-width: 46vw;
	aspect-ratio: 594 / 427;
	background: url(assets/images/dec-boodschap.webp) no-repeat center center / 100% auto;
	pointer-events: none;
}

/* Duitse variant: zelfde plek en maat, andere graphic (2475x1780, praktisch
   dezelfde verhouding als de Nederlandse, dus de aspect-ratio blijft staan). */
.presentatie-tabs.de [data-tab-index="4"] > .e-con:first-child::after,
.presentatie-tabs.de [data-tab-index="4"] > .e-con-inner > .e-con:first-child::after {
	background-image: url(assets/images/dec-boodschap-de.png);
}

/* Franse variant: dezelfde plek en maat, graphic met Franse tekst. Zet de class
   "fr" naast "presentatie-tabs" op de tabs-sectie. */
.presentatie-tabs.fr [data-tab-index="4"] > .e-con:first-child::after,
.presentatie-tabs.fr [data-tab-index="4"] > .e-con-inner > .e-con:first-child::after {
	background-image: url(assets/images/fr-dec-boodschap.png);
}

/* appel-decoratie achter de tekst — voeg class "cta-fruitmeteenboodschap"
   toe aan de betreffende full-bg kaart (oud.css #nav-2 .isfull .inner::before) */
.cta-fruitmeteenboodschap {
	position: relative;
}

.cta-fruitmeteenboodschap > .e-con-inner {
	position: relative;
	z-index: 1;
}

.cta-fruitmeteenboodschap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 146.6666666667%;
	padding-bottom: 146.6666666667%;
	transform: translate(-50%, -65%) scale(-1, 1);
	transform-origin: center center;
	background: url(assets/images/dec-apple.svg) no-repeat center center / 100% 100%;
	z-index: 0;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	/* media-kaarten stapelen: afbeelding boven, tekst onder */
	.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) {
		flex-direction: column;
	}

	.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) > .elementor-widget-image {
		flex-basis: 100%;
		max-width: 100%;
	}

	.presentatie-tabs .e-con:has(> .elementor-widget-image):has(> .e-con) > .e-con {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* full-bg kaarten iets minder hoog op mobiel */
	.presentatie-tabs [role="tabpanel"] > .e-con[data-settings*="background_background"]:not(:has(.elementor-widget-image)) {
		min-height: 300px;
		padding: 30px 20px;
	}

	/* tab-4: de boodschap-graphic is op desktop afgestemd; op mobiel
	   verbergen zodat hij de gestapelde kaarttekst niet overlapt */
	.presentatie-tabs [data-tab-index="4"] > .e-con:first-child,
	.presentatie-tabs [data-tab-index="4"] > .e-con-inner > .e-con:first-child {
		padding-top: 0;
	}

	.presentatie-tabs [data-tab-index="4"] > .e-con:first-child::after,
	.presentatie-tabs [data-tab-index="4"] > .e-con-inner > .e-con:first-child::after {
		display: none;
	}
}

/* tab-navigatie: stijl van de oude .Shortcuts op de nested-tabs heading */
.presentatie-tabs .e-n-tabs-heading {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 auto;
	max-width: 1150px;
	width: 100%;
	font-size: 1.0625rem;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-top: 2px dotted #c2c2c2;
	border-bottom: 2px dotted #c2c2c2;
}

/* hover-effect op de tabbladen (rest van de tab-opmaak via Elementor) */
.presentatie-tabs .e-n-tab-title:hover {
	opacity: .5;
}

.customers-slider .swiper-wrapper {
	width: 100%;
  	animation: scroll-left 130s linear infinite;
}

.swiper-slide-next .teamlid-container img {
	height: 290px !important;
}

.teamlid-container img {
	transition: all 300ms;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── Logo-slider ──────────────────────────────────────────────────────
   Elementor Loop-carrousel met de class "logo-slider", die onafgebroken
   moet doorlopen in plaats van per logo te stappen.

   Swiper blijft zelf schuiven (autoplay + oneindige lus aan); we halen
   alleen de easing eruit. Samen met een autoplay-vertraging van 1ms en
   een lange overgangsduur levert dat een gelijkmatige, doorlopende
   beweging op. Pauzeren bij hover blijft Swiper's eigen instelling.

   Bewust géén eigen keyframe-animatie op de wrapper: in lus-modus kloont
   Swiper de slides (hier 3 sets van 6) en het aantal klonen hangt af van
   slides_to_show, dat per breakpoint verschilt (6 / 2 / 1). Een vaste
   translate-afstand zou daardoor op tablet en mobiel gaan springen.

   Instellingen in de widget:
     Autoplay: Ja           Autoplay-snelheid: 1
     Overgangsduur: 3000    Oneindige lus: Ja
     Pauzeren bij hover: Ja Pauzeren bij interactie: Nee */
.logo-slider .swiper-wrapper {
	/* Swiper zet zelf alleen transition-duration inline; !important dekt de
	   ease-out die swiper.min.css bij vrije modus op dezelfde specificiteit zet. */
	transition-timing-function: linear !important;
}

.header-menu .sub-menu .menu-item {
	padding-left: 20px;
}

.header-menu .sub-menu .menu-item a {
	text-transform: initial !important;
	border: 0 !important;
}

.header-container.elementor-sticky--effects {
	border-bottom: 1px solid #eaeaea;
	transition: all 300ms;
	background: white;
	z-index: 99999 !important;
}

/* header-main krijgt witte achtergrond + compactere padding zodra Elementor 'm sticky maakt */
.header-main.elementor-sticky--active,
.header-main .elementor-sticky--active {
	background-color: #fff !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	transition: background-color 300ms, padding 300ms;
	/* onder de lightbox hieronder, zodat die er altijd overheen valt */
	z-index: 1000 !important;
}

/* De Elementor-lightbox staat standaard op 9999 en wordt ná deze stylesheet
   ingeladen; !important is daarom nodig om er zeker overheen te komen. */
.dialog-type-lightbox {
	z-index: 100000 !important;
}

/* logo krimpt bij sticky */
.header-main.elementor-sticky--active .header-main-logo img {
	width: 100px !important;
	transition: width 300ms;
}

/* inner-container van de header verliest z'n padding bij sticky */
.header-main.elementor-sticky--active.e-con.e-flex > .e-con-inner {
	padding: 0 !important;
	align-items: baseline;
}

/* button-nav verliest z'n padding bij sticky */
.header-main.elementor-sticky--active .button-nav,
.header-main.elementor-sticky--active.button-nav {
	padding: 0 !important;
}

.header-container .header-logo img {
	transition: all 300ms;
}

.header-container.elementor-sticky--effects .header-logo img {
	max-width: 200px;
}

.header-container.elementor-sticky--effects .header-menu a, .header-container.elementor-sticky--effects .header-menu .sub-arrow {
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
}

.header-container.elementor-sticky--effects .header-menu .sub-menu a {
	color: white !important;
}

.header-container.elementor-sticky--effects .header-menu a:hover, .header-container.elementor-sticky--effects .header-menu a:hover .sub-arrow, .header-container.elementor-sticky--effects .header-menu .elementor-item-active {
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
}

.gform-theme--framework .gform_validation_errors {
	background: #FDDEDE;
}

.gform-theme--framework a {
	color: white;
}

.gform-theme--framework .gfield_required.gfield_required_text {
	color: #C5EDFE;
}

/* geselecteerde radio-knop oranje (merk-kleur) */
.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
	background-color: #E94C00;
}

/* ── Gravity Forms — opmaak overgenomen van het oude .cs_form
   (tokens uit oud.css regels 181-206). Scope: .gform_wrapper. ───────── */
.gform_wrapper {
	--fojw-input-bg: #fff;
	--fojw-input-border: #E5E5E5;
	/* focusrand in het huisstijlgroen; via de kit-variabele, zodat hij meegaat
	   als de primaire kleur in Elementor ooit verandert. */
	--fojw-input-focus: var(--e-global-color-primary, #5A8900);
	--fojw-input-color: #000;
	--fojw-input-radius: 7px;
	--fojw-input-fontsize: 0.9375rem;
	--fojw-input-font: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	--fojw-input-vpadding: 10px;
	--fojw-input-hpadding: 10px;
	--fojw-gridgap: 15px;
	--fojw-accent: #E94C00;
	text-align: left;
}

/* velden onder elkaar met vaste tussenruimte */
/* GF's eigen kolom-grid intact laten (niet forceren naar één kolom),
   zodat velden op "half" naast elkaar kunnen staan. Alleen de tussenruimte. */
.gform_wrapper .gform_fields {
	gap: var(--fojw-gridgap);
	grid-gap: var(--fojw-gridgap);
}

.gform_wrapper .gfield {
	margin: 0;
	padding: 0;
}

/* consent-veld (checkbox akkoord) iets meer ruimte erboven */
.gform_wrapper .gfield--input-type-consent {
	margin-top: 20px;
}

/* labels: bold, zwart */
.gform_wrapper .gfield_label {
	color: #000;
	font-family: var(--fojw-input-font);
	font-size: var(--fojw-input-fontsize);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 6px;
}

.gform_wrapper .gfield_required {
	color: var(--fojw-accent);
}

/* invoervelden, tekstvak en select */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100% !important;
	max-width: 100%;
	background: var(--fojw-input-bg) !important;
	color: var(--fojw-input-color);
	border: 1px solid var(--fojw-input-border) !important;
	border-radius: var(--fojw-input-radius) !important;
	font-family: var(--fojw-input-font);
	font-size: var(--fojw-input-fontsize);
	line-height: 1.25em;
	padding: var(--fojw-input-vpadding) var(--fojw-input-hpadding) !important;
	box-shadow: none !important;
	transition: border-color .2s ease;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--fojw-input-focus) !important;
	box-shadow: none !important;
	outline: none;
}

.gform_wrapper textarea {
	min-height: 100px;
}

.gform_wrapper ::placeholder {
	color: #999;
	opacity: 1;
}

/* checkbox / radio (o.a. de privacy-consent) — oranje accent */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	accent-color: var(--fojw-accent);
	width: auto !important;
	position: relative;
	border-color: #E5E5E5;
	box-shadow: none;
}

.gform_wrapper .gfield_consent_label,
.gform_wrapper .gchoice label,
.gform_wrapper .gfield-choice-input + label {
	font-weight: 400;
	font-size: var(--fojw-input-fontsize);
}

.gform_wrapper .gfield_consent_label a,
.gform_wrapper .gchoice label a {
	color: #ffa600;
	text-decoration: underline;
}

.gfield--type-consent {
	margin-top: 30px;
}

/* verzendknop — oranje gradient (oud: .more.bg3) */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 20px;
	padding: 0;
}

.gform_wrapper .gform_button {
	background: #FFA600 !important;
	background: linear-gradient(45deg, #FFA600 0%, #E94C00 100%) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 25px !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	padding: 12px 30px !important;
	cursor: pointer !important;
	transition: opacity .3s ease !important;
	width: auto !important;
	box-shadow: none !important;
	font-size: 12px !important;
}

.gform_wrapper .gform_button:hover {
	background: #FFA600 !important;
	opacity: 1 !important;
}

/* validatiestaat */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--fojw-accent) !important;
}

.gform_wrapper .gform_validation_errors {
	background: #FDDEDE;
	border-radius: var(--fojw-input-radius);
}

.gform_wrapper .gform_submission_error {
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.gform_wrapper .gform_footer,
	.gform_wrapper .gform-footer {
		justify-content: stretch;
	}

	.gform_wrapper .gform_button {
		width: 100%;
	}
}

/* ── Gravity Forms op een donkere kaart (".form-light") ───────────────
   Voeg de class "form-light" toe aan de shortcode-widget van een formulier
   dat op een donkere achtergrond staat (bijv. de groene formulierkaart op
   de adviesgesprek-pagina). Dit kan niet via Elementor-instellingen: de
   opmaak komt uit Gravity Forms' eigen markup, niet uit een widget.
   De invoervelden zelf blijven wit met zwarte tekst; alleen de teksten
   eromheen — die standaard zwart zijn — worden wit. */
.form-light .gform_wrapper .gform-field-label,
.form-light .gform_wrapper .gfield_label,
.form-light .gform_wrapper .gform_required_legend,
.form-light .gform_wrapper .gfield_description {
	color: #fff;
}

/* de link in de akkoordregel (standaard oranje) blijft zo leesbaar */
.form-light .gform_wrapper .gfield_consent_label a,
.form-light .gform_wrapper .gchoice label a {
	color: #fff;
	text-decoration: underline;
}

@media only screen and (min-width: 768px) {
	.slider-grid-3 .swiper-slide {
		width: calc(100% / 2) !important;
	}
}

@media only screen and (min-width: 992px) {
	.header-menu .sub-menu:before {
		content: '';
		position: absolute;
		top: -10px;
		left: 40px;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-bottom: 10px solid #0c173d;
		width: 0;
		height: 0;
	}
	
	.header-menu .sub-menu .menu-item {
		padding-left: 0px;
	}
	
	.slider-grid-3 .swiper-slide {
		width: calc(100% / 3) !important;
	}
}

/* ── Vacatures-overzicht ──────────────────────────────────────────────
   Elementor import (vacatures.json). Sectie-class "snippet-vacatures"
   (volle-breedte grijze band). Elke vacature is een container met class
   "vacature-kaart" (kop-link + specs + tekst + ronde "lees verder"-pijl).
   Aangepast van .Vacancy.Overview / .Vacancy.Item uit oud.css. */
.snippet-vacatures {
	position: relative;
	z-index: 1;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}

/* volle-breedte grijze achtergrond-gradient (oud.css .Vacancy.Overview::before) */
.snippet-vacatures::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 100vw;
	transform: translateX(-50%);
	background: linear-gradient(176deg, rgba(174, 174, 174, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	z-index: -1;
	pointer-events: none;
}

.snippet-vacatures > .e-con-inner {
	position: relative;
	z-index: 1;
}

.snippet-vacatures .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.0260869565em;
	line-height: .85em;
	font-size: min(3.4722222222vw, 3.125rem);
	margin-bottom: 40px;
}

/* de kaart */
.vacature-kaart {
	position: relative;
	background: #fff;
	color: #000;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	border-radius: 4px;
	padding: 30px 80px 30px 30px;
	text-align: left;
	margin-bottom: 20px;
	transition: box-shadow .3s ease, transform .3s ease;
}

.vacature-kaart,
.vacature-kaart a {
	text-decoration: none !important;
}

.vacature-kaart:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	transform: translateY(-2px);
}

.vacature-kaart .elementor-widget-heading .elementor-heading-title {
	font-size: 1.5rem;
	line-height: 1.15;
	margin-bottom: 15px;
}

.vacature-kaart .elementor-widget-heading a {
	color: inherit;
	text-decoration: none;
}

.vacature-kaart .elementor-widget-heading a:hover {
	color: #ffa600;
}

/* specs-rij (locatie + uren) — HTML-widget met <ul class="vacature-specs"> */
.vacature-specs {
	list-style: none;
	margin: 0 0 15px;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
	font-size: 1.1875rem;
}

.vacature-specs li {
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .5em;
}

.vacature-specs li svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: currentColor;
}

.vacature-kaart .Content,
.vacature-kaart .Content p {
	font-size: 1.1875rem;
	margin: 0;
}

/* tekst afkappen op 3 regels met "…" */
.vacature-kaart .Content p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* ronde "lees verder"-pijl rechtsboven (oud.css .Vacancy.Item nav .more) */
.vacature-kaart .lees-verder {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #ffa600;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 1;
	transition: background .3s ease;
}

.vacature-kaart .lees-verder::after {
	content: "\2192"; /* → */
	font-size: 20px;
	line-height: 1;
}

.vacature-kaart .lees-verder:hover {
	background: #e94c00;
	color: #fff;
}

/* de "lees verder"-icon-widget rechtsboven in de kaart (alleen positie;
   het uiterlijk komt van de .more-knop, die in de kaart rond wordt gemaakt) */
.vacature-kaart > .elementor-widget-icon {
	position: absolute;
	top: 30px;
	right: 30px;
	width: auto;
}

/* vacaturekaart: .more wordt een rond knopje i.p.v. de brede pil.
   (oud.css .Vacancy.Item>.inner>nav .more — width/height 35px, border-radius 100%) */
.vacature-kaart .elementor-widget-icon.more .elementor-icon {
	width: 35px !important;
	height: 35px !important;
	min-width: 0 !important;
	border-radius: 100% !important;
	padding: 0 !important;
	background: var(--button_background-gradient) !important;
	border: none !important;
}

.vacature-kaart .elementor-widget-icon.more .elementor-icon:hover,
.vacature-kaart:hover .elementor-widget-icon.more .elementor-icon {
	background: #5A8900 !important;
}

@media only screen and (max-width: 767px) {
	.vacature-kaart {
		padding: 25px 25px 60px;
	}

	.vacature-kaart .lees-verder,
	.vacature-kaart > .elementor-widget-icon {
		top: auto;
		bottom: 20px;
		right: 25px;
	}
}

/* ── Basis-knop ".more" ───────────────────────────────────────────────
   Groene gradient-knop uit oud.css (met --button_*-variabelen, regels 39-72).
   Scope: NIET op icon-widgets (die houden het ronde oranje pijltje hierboven). */
:root {
	--button_minwidth: 0;
	--button_height: 46;
	--button_fontsize: 12;
	--button_lineheight: 15;
	--button_radius: 25;
	--button_fontweight: bold;
	--button_background: #4C9600;
	--button_background-gradient: linear-gradient(45deg, #5A8900 0%, #DEDF60 100%);
	--button_border: #4C9600;
	--button_borderwidth: 2px;
	--button_color: #fff;
	--button_textdecoration: none;
	--button_texttransform: uppercase;
	--button_letterspacing: 0.1em;
	--button_hpadding: calc(calc(25 / var(--button_fontsize)) * 1em);
	--button_vpadding: calc(calc(calc(calc(var(--button_height) - var(--button_lineheight)) / 2) / var(--button_fontsize)) * 1em);
}

.more:not(.elementor-widget-icon):not(.elementor-widget) {
	position: relative;
	overflow: hidden;
	z-index: 2;
	min-width: var(--button_minwidth);
	line-height: calc(calc(var(--button_lineheight) / var(--button_fontsize)) * 1em);
	font-weight: var(--button_fontweight);
	background: var(--button_background);
	border: var(--button_borderwidth) solid var(--button_border);
	color: var(--button_color);
	text-decoration: var(--button_textdecoration);
	text-transform: var(--button_texttransform);
	padding: var(--button_vpadding, calc(calc(calc(calc(var(--button_height) - var(--button_lineheight)) / 2) / var(--button_fontsize)) * 1em)) var(--button_hpadding);
	letter-spacing: var(--button_letterspacing, 0);
	display: inline-block;
	cursor: pointer;
}

/* hover: gradient (oud.css .more:hover) */
.more:not(.elementor-widget-icon):not(.elementor-widget):hover {
	background: var(--button_background-gradient);
	color: var(--button_color);
	text-decoration: none;
}

/* ".more" op een Elementor icon-widget (chevron) → dezelfde groene knop.
   De styling zit op .elementor-icon met !important, want Elementor's eigen
   icoon-CSS wint anders. font-size wordt hier wél gezet: de em-padding en
   line-height rekenen t.o.v. --button_fontsize (12), dus die is nodig. */
.elementor-widget-icon.more .elementor-icon {
	position: relative !important;
	overflow: hidden !important;
	z-index: 2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	min-width: var(--button_minwidth);
	font-size: calc(var(--button_fontsize) * 1px) !important;
	line-height: calc(calc(var(--button_lineheight) / var(--button_fontsize)) * 1em) !important;
	font-weight: var(--button_fontweight) !important;
	background: var(--button_background) !important;
	border: var(--button_borderwidth) solid var(--button_border) !important;
	color: var(--button_color) !important;
	text-transform: var(--button_texttransform) !important;
	letter-spacing: var(--button_letterspacing, 0) !important;
	padding: var(--button_vpadding) var(--button_hpadding) !important;
	transition: background .3s ease;
}

.elementor-widget-icon.more .elementor-icon svg {
	fill: var(--button_color) !important;
	width: auto !important;
	height: 1em !important;
}

.elementor-widget-icon.more:hover .elementor-icon {
	background: var(--button_background-gradient) !important;
}

/* ── Steps-variant "werkenbij" ────────────────────────────────────────
   Voeg class "steps-werkenbij" toe naast "snippet-steps". Geen nummers,
   kleinere koppen, geen bleed-marges. (oud.css .Steps.Overview.werkenbij) */
.steps-werkenbij .steps-item .elementor-widget-heading .elementor-heading-title {
	font-size: min(4.1666666667vw, 3.75rem);
	line-height: 1.05;
	margin-bottom: 15px;
}

.steps-werkenbij .steps-item .elementor-widget-heading .elementor-heading-title::before {
	content: none;
}

.steps-werkenbij .steps-item .elementor-widget-image img {
	margin-top: 0;
	margin-bottom: 0;
}

.steps-werkenbij .steps-item > .e-con,
.steps-werkenbij .steps-item > .e-con-inner > .e-con {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* stap 1 (werkenbij): "dec-opzoek"-decoratie boven de afbeelding.
   (oud.css .werkenbij li:nth-child(1) .Steps.Item>figure + figure::before)
   De 140px padding-top reserveert ruimte zodat de decoratie boven de foto valt. */
.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-image {
	position: relative;
	align-self: flex-end;
	padding-top: 140px;
}

.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-image::before {
	content: "";
	font-size: min(41.6666666667vw, 37.5rem);
	width: .7em;
	height: .6566666667em;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: 6.9444444444vw;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	background: url(assets/images/dec-opzoek.webp) no-repeat center center / 100% auto;
	display: block;
	opacity: 1;
	z-index: 2;
	pointer-events: none;
}

/* Duitse variant: zelfde plek en maat, andere decoratie. */
.steps-werkenbij.de .steps-item:nth-child(1) .elementor-widget-image::before {
	background-image: url(assets/images/dec-opzoek-de.png);
}

/* Belgische variant: idem, met de banaan uit de BE-huisstijl. Zet de class "be"
   naast "steps-werkenbij" op de stappen-container. */
.steps-werkenbij.be .steps-item:nth-child(1) .elementor-widget-image::before {
	background-image: url(assets/images/dec-opzoek-be.png);
}

/* Franse variant: idem, class "fr" naast "steps-werkenbij". */
.steps-werkenbij.fr .steps-item:nth-child(1) .elementor-widget-image::before {
	background-image: url(assets/images/dec-opzoek-fr.png);
}

/* stap 1 (werkenbij): kop steekt over de foto heen (oud.css li:nth-child(1) .inner>h3) */
.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-heading .elementor-heading-title {
	margin-right: max(-25vw, -360px);
}

/* stap 2 (werkenbij): "dec-toffeperen"-decoratie links naast de tekst.
   (oud.css li:nth-child(2) .Steps.Item>.inner::before) — upload dec-toffeperen.webp
   naar assets/images/. */
.steps-werkenbij .steps-item:nth-child(2) > .e-con,
.steps-werkenbij .steps-item:nth-child(2) > .e-con-inner > .e-con {
	position: relative;
	z-index: 2; /* tekst + peren-decoratie boven de foto-sibling (die later in de DOM staat) */
}

.steps-werkenbij .steps-item:nth-child(2) > .e-con::before,
.steps-werkenbij .steps-item:nth-child(2) > .e-con-inner > .e-con::before {
	content: "";
	font-size: min(15.6944444444vw, 14.125rem);
	width: 1em;
	height: 1.1269230769em;
	position: absolute;
	left: -1.4em;
	top: 50%;
	transform: translate(-50%, -90%);
	transform-origin: center center;
	background: url(assets/images/dec-toffeperen.webp) no-repeat center center / 100% auto;
	display: block;
	pointer-events: none;
}

/* Duitse variant: zelfde plek en maat, andere decoratie. */
.steps-werkenbij.de .steps-item:nth-child(2) > .e-con::before,
.steps-werkenbij.de .steps-item:nth-child(2) > .e-con-inner > .e-con::before {
	background-image: url(assets/images/dec-toffeperen-de.png);
}

@media only screen and (max-width: 767px) {
	/* op mobiel geen gereserveerde ruimte + kleinere decoratie */
	.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-image {
		padding-top: 60px;
	}

	.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-image::before {
		font-size: 90vw;
	}

	/* kop-overhang terug naar 0 op mobiel (anders valt 'ie buiten beeld) */
	.steps-werkenbij .steps-item:nth-child(1) .elementor-widget-heading .elementor-heading-title {
		margin-right: 0;
	}

	/* toffeperen-decoratie verbergen op mobiel (staat ver links buiten de kolom) */
	.steps-werkenbij .steps-item:nth-child(2) > .e-con::before,
	.steps-werkenbij .steps-item:nth-child(2) > .e-con-inner > .e-con::before {
		display: none;
	}
}


/* ── Intro-rij (steps-view mainrow) ───────────────────────────────────
   Elementor import (fruitkalender.json). Sectie-class "snippet-introrow".
   Grote kop + intro + PDF-knop, gestapeld links. (oud.css .view.steps .mainrow) */
.snippet-introrow {
	margin-top: 70px;
	margin-bottom: 70px;
}

.snippet-introrow > .e-con-inner {
	align-items: flex-start;
}

.snippet-introrow .elementor-widget-heading .elementor-heading-title {
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	line-height: 1;
	font-size: 3.4375rem;
}

.snippet-introrow .Intro {
	max-width: 708px;
	margin-bottom: 30px;
}

.snippet-introrow .Intro,
.snippet-introrow .Intro p {
	font-size: 1.3125rem;
	line-height: 1.6;
}

.snippet-introrow .Intro a {
	color: #ffa600;
}

@media only screen and (max-width: 767px) {
	.snippet-introrow {
		margin: 30px 0;
	}

	.snippet-introrow .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	.snippet-introrow .Intro {
		max-width: 100%;
	}

	.snippet-introrow .Intro,
	.snippet-introrow .Intro p {
		font-size: 1.0625rem;
	}
}

/* ── Steps-variant "kalender" (default steps) ─────────────────────────
   Voeg class "steps-kalender" toe naast "snippet-steps". Kleinere koppen
   (3.125rem), geen nummers, geen bleed, afgeronde hoeken. Afwisselend
   links/rechts stel je per stap in Elementor in. (oud.css .Steps.Overview.default) */
/* Structureel (geen "steps-item"-class nodig — die stript Elementor bij import).
   Elke stap-rij = directe .e-con onder de inner; beeld-widget + tekst-container. */
.steps-kalender {
	position: relative;
}

/* peer-decoratie links, diep in de lijst (oud.css .Steps.Overview.default::before) */
.steps-kalender::before {
	content: "";
	font-size: min(33.125vw, 29.8125rem);
	width: 1em;
	height: 1em;
	position: absolute;
	top: 1520px;
	left: 0;
	transform: translate(-60%, -50%) rotate(-20deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* de twee kolommen (beeld + tekst) elk 48% */
.steps-kalender > .e-con-inner > .e-con > .elementor-widget-image,
.steps-kalender > .e-con-inner > .e-con > .e-con {
	flex: 0 0 48%;
	width: 48%;
	max-width: 48%;
}

/* tekstkolom */
.steps-kalender > .e-con-inner > .e-con > .e-con {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 20px;
	margin-bottom: 20px;
}

.steps-kalender .elementor-widget-heading .elementor-heading-title {
	font-size: min(3.4722222222vw, 3.125rem);
	line-height: 1.1;
	margin-bottom: 15px;
}

.steps-kalender .elementor-widget-image img {
	border-radius: 7px;
	display: block;
}

@media only screen and (max-width: 767px) {
	.steps-kalender > .e-con-inner > .e-con {
		flex-direction: column !important;
	}

	.steps-kalender > .e-con-inner > .e-con > .elementor-widget-image,
	.steps-kalender > .e-con-inner > .e-con > .e-con {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.steps-kalender .elementor-widget-heading .elementor-heading-title {
		font-size: 2rem;
	}

	.steps-kalender::before {
		display: none;
	}
}

/* ── Steps-variant "grapes" (grote steps, staande beelden, geen nummers) ──
   Structureel (geen steps-item-class nodig — Elementor stript die bij import).
   Uit oud.css .Steps.Overview.grapes. Voeg class "steps-grapes" toe naast
   "snippet-steps". Decoraties: stap 1 druiven, stap 2 banaan + mandarijn. */
.steps-grapes > .e-con-inner > .e-con {
	position: relative;
	align-items: center;
	gap: 35px;
}

.steps-grapes > .e-con-inner > .e-con > .elementor-widget-image,
.steps-grapes > .e-con-inner > .e-con > .e-con {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
}

/* tekstkolom */
.steps-grapes > .e-con-inner > .e-con > .e-con {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 105px;
	margin-bottom: 105px;
	max-width: 535px;
}

/* staand beeld bloedt boven/onder uit */
.steps-grapes > .e-con-inner > .e-con > .elementor-widget-image img {
	display: block;
	margin-top: -105px;
	margin-bottom: -105px;
}

/* grote kop */
.steps-grapes .elementor-widget-heading .elementor-heading-title {
	font-size: min(4vw, 5.75rem);
	line-height: .8152173913em;
	margin-bottom: .3260869565em;
}

/* stap 1: druiven-decoratie rechtsboven + ruimte bovenaan de tekst.
   Tekst boven de decoratie (z-index 2 > 1). */
.steps-grapes > .e-con-inner > .e-con:nth-child(1) > .e-con {
	padding-top: 119px;
	margin-top: -105px;
	margin-bottom: 0;
	position: relative;
	z-index: 2;
}

/* druif over de afbeelding (z-index 1) maar achter de tekst (z-index 2) */
.steps-grapes > .e-con-inner > .e-con:nth-child(1)::after {
	content: "";
	font-size: min(26.1805555556vw, 23.5625rem);
	width: 1em;
	height: .8885941645em;
	position: absolute;
	top: 10%;
	left: 46%;
	transform: translate(-75%, -15%) rotate(-20deg);
	transform-origin: center center;
	background: url(assets/images/dec-justgrape.webp) no-repeat center center / contain;
	display: block;
	z-index: 1;
	pointer-events: none;
}

/* stap 2: banaan + mandarijn achter de stap */
.steps-grapes > .e-con-inner > .e-con:nth-child(2)::after {
	content: "";
	font-size: min(49.375vw, 44.4375rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-7%, -50%) rotate(-15deg);
	transform-origin: center center;
	background: url(assets/images/dec-banana.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

.steps-grapes > .e-con-inner > .e-con:nth-child(2)::before {
	content: "";
	font-size: min(65.625vw, 59.0625rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-55%, -60%) rotate(12deg) scaleX(-1);
	transform-origin: center center;
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* stap 3: tekst rechts uitgelijnd */
.steps-grapes > .e-con-inner > .e-con:nth-child(3) > .e-con {
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}

@media only screen and (max-width: 767px) {
	.steps-grapes > .e-con-inner > .e-con {
		flex-direction: column !important;
	}

	.steps-grapes > .e-con-inner > .e-con > .elementor-widget-image,
	.steps-grapes > .e-con-inner > .e-con > .e-con {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.steps-grapes > .e-con-inner > .e-con > .e-con {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.steps-grapes > .e-con-inner > .e-con > .elementor-widget-image img {
		margin-top: 0;
		margin-bottom: 0;
	}

	.steps-grapes .elementor-widget-heading .elementor-heading-title {
		font-size: 2.5rem;
	}

	.steps-grapes > .e-con-inner > .e-con:nth-child(1) > .e-con {
		padding-top: 0;
		margin-top: 20px;
	}

	.steps-grapes > .e-con-inner > .e-con::after,
	.steps-grapes > .e-con-inner > .e-con::before {
		display: none;
	}

	/* stap 1: grape-decoratie wél tonen op mobiel */
	.steps-grapes > .e-con-inner > .e-con:nth-child(1)::after {
		display: block;
		width: 50vw;
		top: 25%;
	}

	.steps-grapes > .e-con-inner > .e-con:nth-child(3) > .e-con {
		align-items: flex-start;
		text-align: left;
	}
}

/* ── Werkwijze met video (i.p.v. bus): rechterkolom met video + tekst ──
   Structureel op de container-kolom naast de kop (class "werkwijze-media"
   stript Elementor bij import, dus daar niet op leunen). */
.snippet-werkwijze > .e-con-inner > .e-con > .e-con {
	flex: 1 1 auto;
	max-width: 640px;
}

.embed-responsive-16by9 {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 20px;
}

.embed-responsive-16by9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Mobiel menu ──────────────────────────────────────────────────────
   Voor het mobiele (off-canvas) menu in Elementor. Twee classes:
   - "mobielmenu"       → op de menu-container: achtergrond-gradient + zwarte tekst
   - "mobielmenu-deco"  → op het ONDERSTE blok (met de CTA-knoppen): rode appel +
                          druiventros die erboven uitsteken, achter de inhoud.
   Overgenomen van #headerFancyNav uit oud.css. */
.mobielmenu {
	background: linear-gradient(to bottom, rgba(174, 174, 174, 0.1) -10%, rgba(0, 0, 0, 0.1) 100%), #fff;
	color: #000;
}

.mobielmenu-deco {
	position: relative;
}

/* druiventros — rechtsboven, steekt boven het blok uit */
.mobielmenu-deco::after {
	content: "";
	position: absolute;
	width: 75.6756756757%;
	padding-bottom: 75.6756756757%;
	bottom: calc(100% - 20px);
	right: -100px;
	transform-origin: center center;
	background: url(assets/images/banner-grapes.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* inhoud van het blok bóven de decoraties houden */
.mobielmenu-deco > * {
	position: relative;
	z-index: 1;
}

/* ── Nieuws-detail ────────────────────────────────────────────────────
   Werkt op de losse component-classes, zodat het óók in een Theme Builder
   single-post-template zonder wrapper werkt. Classes:
   - "nieuws-kop"        → titel + intro (gecentreerd, met gradient + peer)
   - "nieuws-afbeelding" → uitgelichte foto
   - "Text"             → artikeltekst (ook de theme-post-content-widget)
   Aangepast van .News.view.default uit oud.css. */

/* titel + intro gecentreerd, 850px kolom */
.nieuws-kop {
	position: relative;
	text-align: center;
	max-width: 850px;
	margin: 0 auto 40px;
}

.nieuws-kop .elementor-heading-title {
	font-weight: bold;
	font-size: min(3.8194444444vw, 3.4375rem);
	line-height: 1.1;
}

.nieuws-kop .Intro {
	max-width: 75%;
	margin: 20px auto 0;
}

/* gradient-vlak bovenaan, volle breedte, achter de content
   (oud.css .News.view.default::before) */
.nieuws-kop::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 700px;
	z-index: -1;
	background: linear-gradient(176deg, rgba(174, 174, 174, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	pointer-events: none;
}

/* peer-decoratie links van de titel (oud.css .titlecolumn::before) */
.nieuws-kop::before {
	content: "";
	/* gecapt op de ontwerpbreedte (49vw van 1440px) */
	font-size: min(49vw, 706px);
	width: 1em;
	height: 1em;
	position: absolute;
	top: 200px;
	transform: translate(-80%, 0) rotate(22deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
}

/* uitgelichte afbeelding, 850px kolom */
.nieuws-afbeelding {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

.nieuws-afbeelding img {
	display: block;
	width: 100%;
}

/* tussenkoppen: h2 (wp-block-heading) + h4 */
.Text h2,
.Text h4,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h4 {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 35px 0 10px;
}

/* gecentreerde italic-quote (h3, gebruikt in sommige artikelen) */
/* blockquote (wp-block-quote): dik-gestippelde scheiding, groot bold,
   met quote-icoon links (oud.css .Main blockquote + blockquote::before) */
.Text blockquote {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 1.875rem;
	font-weight: bold;
	color: #000;
	margin: 35px 0;
	padding: 35px 0;
	border-top: 4px dotted #c2c2c2;
	border-bottom: 4px dotted #c2c2c2;
}

/* zelfde quote-opmaak binnen nieuws-content (zonder font-size-override) */
.nieuws-content blockquote {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 30px;
	font-weight: bold;
	color: #000;
	margin: 23.3333333333px 0;
	border-top: 4px dotted #c2c2c2;
	border-bottom: 4px dotted #c2c2c2;
	padding: 35px 0;
}

@media only screen and (max-width: 767px) {
	.Text blockquote,
	.nieuws-content blockquote {
		font-size: 22px;
	}
}

.Text blockquote::before,
.nieuws-content blockquote::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 27px;
	margin-right: 30px;
	margin-top: 10px;
	background: url(assets/images/quote.webp) no-repeat center center / 100% 100%;
}

.Text blockquote p,
.nieuws-content blockquote p {
	margin: 0;
}

.Text a,
.elementor-widget-theme-post-content a {
	color: #ffa600;
	text-decoration: underline;
}

.Text ul,
.elementor-widget-theme-post-content ul {
	padding-left: 1.2em;
}

.Text ul li,
.elementor-widget-theme-post-content ul li {
	margin-bottom: 15px;
}

/* terug-knop onderaan, gecentreerd (losse <a class="more outline">) */
.nieuws-terug {
	text-align: center;
	margin-top: 40px;
}

/* onderste blok met druiven-decoratie links (oud.css .mainrow .bottom::before).
   Voeg class "nieuws-bottom" toe aan het blok onder het artikel (knop/share).
   Upload dec-grapes.svg naar assets/images/. */
.nieuws-bottom {
	position: relative;
	z-index: 0;
}

/* layout van het onderste blok: knop links, (share) rechts (oud.css .bottom) */
.nieuws-bottom > .e-con-inner {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-top: 23.3333333333px;
}

.nieuws-bottom::before {
	content: "";
	font-size: min(49.375vw, 44.4375rem);
	width: 1em;
	height: 1em;
	position: absolute;
	right: 100%;
	top: -700px;
	transform: translate(-60%, 0) rotate(-10deg) scaleX(-1);
	transform-origin: center center;
	background: url(assets/images/dec-grapes.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.nieuws-kop .elementor-heading-title {
		font-size: 2rem;
	}

	.nieuws-kop .Intro,
	.Text,
	.elementor-widget-theme-post-content {
		max-width: 100%;
	}

	.nieuws-kop::before,
	.nieuws-bottom::before {
		display: none;
	}

	/* Het gradient-vlak staat op desktop op een vaste 700px. Op mobiel hangt
	   de hoogte van de kop af van hoe ver titel en intro afbreken, dus die
	   700px valt willekeurig uit: op een teler-pagina 44px te lang, op een
	   nieuwsbericht 4px te kort. 100% volgt de werkelijke hoogte van
	   .nieuws-kop, dat hiervoor al position: relative heeft. */
	.nieuws-kop::after {
		height: 100%;
	}

	/* Telerpagina: lange samenstellingen als "snackkomkommerteler" passen
	   niet op één regel en steken buiten de kolom. hyphens:auto zet er een
	   koppelteken bij op een taalkundig juiste plek; de pagina staat op
	   lang="nl-NL", dus het Nederlandse woordenboek wordt gebruikt.
	   -webkit- is nodig voor Safari, en dus voor iPhone. */
	.title-teler h1 {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* ── Knop-variant ".more.outline" (transparant, gevulde hover) ─────────
   Voor losse <a class="more outline">-knoppen (niet Elementor-widgets). */
.more.outline:not(.elementor-widget-icon):not(.elementor-widget) {
	background: transparent;
	color: #000;
	border: 2px solid #000;
}

.more.outline:not(.elementor-widget-icon):not(.elementor-widget):hover {
	background: #000;
	color: #fff;
}

/* ── Lijst-markers: chevron-right ─────────────────────────────────────
   Vervangt de FontAwesome-bullet uit oud.css (.Intro/.Text/.Content ul>li).
   CSS-chevron (borders) i.p.v. een icoon-font. */
.Intro ul,
.Text ul,
.Content ul,
.elementor-widget-theme-post-content ul {
	list-style: none;
	padding-left: 0;
}

.Intro ul > li,
.Text ul > li,
.Content ul > li,
.elementor-widget-theme-post-content ul > li {
	position: relative;
	padding-left: 1.2em;
}

.Intro ul > li::before,
.Text ul > li::before,
.Content ul > li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.5em;
	width: 0.4em;
	height: 0.4em;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	transform-origin: center center;
}

/* geen chevron-bullet binnen een icon-list-widget */
.Intro .elementor-widget-icon-list ul > li::before,
.Text .elementor-widget-icon-list ul > li::before,
.Content .elementor-widget-icon-list ul > li::before,
.elementor-widget-theme-post-content .elementor-widget-icon-list ul > li::before,
.elementor-widget-icon-list ul > li::before {
	content: none;
}

/* ── Nieuws-overzicht: hover-overlay op de kaart-afbeelding ───────────
   Bij hover over een .nieuws-item verschijnt more_apple.webp over de foto.
   (oud.css .News.Item:hover>figure>nav) */
.nieuws-item,
.nieuws-item a {
	text-decoration: none !important;
}

.nieuws-item .nieuws-image {
	position: relative;
	overflow: hidden;
}

.nieuws-item .nieuws-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.12) url(assets/images/more_apple.webp) no-repeat center center;
	background-size: 68px 88px;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	pointer-events: none;
}

.nieuws-item:hover .nieuws-image::after {
	opacity: 1;
}

/* Zonder hover (telefoon, tablet) altijd tonen, zoals bij de
   referentie-kaarten: anders zie je niet dat de kaart klikbaar is. */
@media (hover: none), only screen and (max-width: 767px) {
	.nieuws-item .nieuws-image::after {
		opacity: 1;
	}
}

/* ── Tekstblok (lange SEO-tekst met h2-koppen) ────────────────────────
   Sectie-class "snippet-tekstblok". */
.snippet-tekstblok .Content {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.snippet-tekstblok .Content h2 {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 35px 0 10px;
}

.snippet-tekstblok .Content p {
	margin-bottom: 15px;
}

.snippet-tekstblok .Content a {
	color: #ffa600;
	text-decoration: underline;
}

/* ── CTA-banner (afbeelding + tekst + knop) ───────────────────────────
   Sectie-class "snippet-cta". Afbeelding links, tekst + knop rechts. */
.snippet-cta {
	background: linear-gradient(176deg, rgba(174, 174, 174, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	border-radius: 10px;
}

.snippet-cta > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

.snippet-cta > .e-con-inner > .elementor-widget-image {
	flex: 0 0 40%;
	max-width: 40%;
}

.snippet-cta .elementor-widget-heading .elementor-heading-title,
.snippet-cta .Content {
	font-size: 1.5rem;
	font-weight: 700;
}

@media only screen and (max-width: 767px) {
	.snippet-cta > .e-con-inner {
		flex-direction: column;
	}

	.snippet-cta > .e-con-inner > .elementor-widget-image {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ── Fruitbox-inhoudstabel (in de intro) ──────────────────────────────
   Sectie "snippet-introrow" met een tabel in .Intro. De klant plakt de
   tabel elke week zelf in de teksteditor (soort / ras / herkomst, soms een
   vierde kolom met "Nieuwe oogst!", en soms meer tabellen onder elkaar).
   Aan die HTML komen we niet; alles gebeurt hier.
   Zelfde stippellijnen als de voedingswaarden (.product-specs) verderop op
   de pagina, zodat de tekst niet meer zweeft en de tabel bij de rest hoort. */
.snippet-introrow .Intro table,
.snippet-introrow .Intro table tr,
.snippet-introrow .Intro table td {
	border: none;
	background: transparent;
}

.snippet-introrow .Intro table {
	/* !important: de editor zet width="1012" als attribuut op de tabel */
	width: 100% !important;
	border-collapse: collapse;
	margin-bottom: 25px;
	/* Zonder table-layout meet elke tabel zijn eigen inhoud op: de tabel met
	   "Snacktomaatjes" erin krijgt een bredere eerste kolom dan die zonder, en
	   dan staan de kolommen van de tabellen onder elkaar niet op één lijn.
	   Vast maakt ze allemaal even breed, ongeacht wat erin staat. */
	table-layout: fixed;
	/* De editor zet een vaste hoogte in het style-attribuut. Die rekt de
	   tabel uit, waardoor zijn rijen hoger staan dan die van de rest.
	   !important want inline wint anders. */
	height: auto !important;
}

.snippet-introrow .Intro table tr,
.snippet-introrow .Intro table td {
	height: auto !important;
}

/* Bij table-layout: fixed komen de kolombreedtes uit de eerste rij. Die heeft
   in elke tabel dezelfde drie cellen (soort / ras / herkomst); de vierde kolom
   met "Nieuwe oogst!" staat pas in latere rijen en krijgt wat overblijft. Dat
   is voor elke tabel hetzelfde restant, dus ook die kolom lijnt uit. */
.snippet-introrow .Intro table td:nth-child(1) {
	width: 20%;
}

.snippet-introrow .Intro table td:nth-child(2) {
	width: 27%;
}

.snippet-introrow .Intro table td:nth-child(3) {
	width: 26%;
}

.snippet-introrow .Intro table td {
	padding: 10px 15px;
	font-size: 1.0625rem;
	line-height: 1.4;
	vertical-align: top;
	border-top: 2px dotted #c2c2c2;
	/* Een vaste kolom kan niet meegroeien, dus een lange herkomst als
	   "Colombia / Costa Rica" moet binnen de kolom kunnen afbreken. */
	overflow-wrap: break-word;
}

.snippet-introrow .Intro table tr:last-child td {
	border-bottom: 2px dotted #c2c2c2;
}

/* verticale stippellijn tussen de kolommen */
.snippet-introrow .Intro table td + td {
	border-left: 2px dotted #c2c2c2;
}

.snippet-introrow .Intro table tr td:first-child {
	padding-left: 0;
	font-weight: 700;
}

/* Op mobiel past een rij van drie kolommen niet: per regel de soort links,
   en rechts het ras met daaronder de herkomst (en een eventuele vierde
   kolom), tussen dezelfde stippellijnen. */
@media only screen and (max-width: 767px) {
	.snippet-introrow .Intro table,
	.snippet-introrow .Intro table tbody {
		display: block;
	}

	.snippet-introrow .Intro table tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 15px;
		padding: 10px 0;
		border-top: 2px dotted #c2c2c2;
	}

	.snippet-introrow .Intro table tr:last-child {
		border-bottom: 2px dotted #c2c2c2;
	}

	/* :nth-child(n) zodat ook de kolombreedtes van desktop vervallen */
	.snippet-introrow .Intro table td:nth-child(n),
	.snippet-introrow .Intro table tr:last-child td,
	.snippet-introrow .Intro table td + td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.snippet-introrow .Intro table td:first-child {
		grid-row: span 3;
	}

	.snippet-introrow .Intro table td + td {
		grid-column: 2;
		text-align: right;
	}

	.snippet-introrow .Intro table td:nth-child(n+3) {
		font-size: .9375rem;
		color: var(--e-global-color-primary, #5A8900);
	}

	/* een lege cel (soms laat de editor er een staan) neemt geen regel in */
	.snippet-introrow .Intro table td:empty {
		display: none;
	}
}

/* tabel zonder opmaak */
.table-no-styling table td {
	padding: 0;
	border: none;
	background: none !important;
}

.snippet-introrow .Intro em a {
	color: #ffa600;
}

/* ── De voordelen van fruit (benefits-overzicht) ───────────────────────
   Elementor-rebuild van .Steps.Overview.benefits. De layout (beeld/tekst-
   arrangement per voordeel) bouw je in Elementor; hier de gedeelde opmaak:
   koppen, benefit-tekst en responsieve beelden. */
.voordelen-container .elementor-heading-title {
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 800;
	font-size: 5.0625rem;
	line-height: 1.2;
}

/* genummerde cirkel-badge vóór elke benefit-kop (oud.css counter(li)).
   Nu een eigen counter, want de <li>-structuur is weg. h1-pagetitel telt niet. */
.voordelen-container {
	counter-reset: benefit;
}

.voordelen-container h3.elementor-heading-title {
	counter-increment: benefit;
	position: relative;
}

.voordelen-container h3.elementor-heading-title::before {
	content: counter(benefit);
	position: absolute;
	text-align: center;
	font-weight: 800;
	border-radius: 50%;
	left: unset;
	margin-right: 15px;
	top: 10px;
	transform: translate(calc(-100% - 15px), -10%);
	background: none transparent;
	color: inherit;
	border: 2px solid currentColor;
	font-size: 3.4347222222vw;
	line-height: 1;
	min-width: 1.1518987342em;
	height: 1.1518987342em;
	padding: .0253164557em;
}

/* grote banaan-decoratie achter het laatste voordeel (oud.css nth-child(9)
   .inner::after). Werkt op het laatste blok via z'n Elementor-ID, of via
   class "voordelen-banana" als je die in Elementor toevoegt. */
.voordelen-container .voordelen-banana,
.voordelen-container .elementor-element-19dbb97 {
	position: relative;
}

.voordelen-container .voordelen-banana::after,
.voordelen-container .elementor-element-19dbb97::after {
	content: "";
	position: absolute;
	font-size: 37.5vw;
	width: 1em;
	height: 1em;
	left: auto;
	right: -100px;
	top: 50%;
	transform: translate(-7%, -58%) rotate(-15deg) scaleX(1);
	transform-origin: center center;
	background: url(assets/images/dec-banana.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

.voordelen-container .Content,
.voordelen-container .Content p,
.voordelen-container .Intro,
.voordelen-container .Intro p {
	font-size: 1.1875rem;
}

.voordelen-container .elementor-widget-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 767px) {
	.voordelen-container .elementor-heading-title {
		font-size: 2.5rem;
	}

	/* badge inline vóór de tekst op mobiel; vierkant houden */
	.voordelen-container h3.elementor-heading-title::before {
		position: relative;
		display: inline-block;
		transform: none;
		top: 0;
		width: 1.1518987342em;
		height: 1.1518987342em;
	}
}

/* ── Spotlight-blok ───────────────────────────────────────────────────
   Sectie-class "snippet-spotlight": gecentreerde kop + afbeelding. */
.snippet-spotlight {
	text-align: center;
}

.snippet-spotlight .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	line-height: .9em;
	font-size: min(4.1666666667vw, 3.75rem);
}

.snippet-spotlight .elementor-heading-title span {
	font-size: 1.5333333333em;
}

/* ── Product-detail (fruit in de spotlight) ───────────────────────────
   Sectie-class "snippet-product": afbeelding links, tekst + specs + knop rechts. */
.snippet-product {
	position: relative;
	/* fruit-decoratie voor deze productsoort (apple). Voor een andere soort
	   overschrijf je deze variabele met bv. dec-pear.svg of dec-mandarin.svg. */
	--product_background: url(assets/images/dec-apple-red.svg) no-repeat center center / 100% 100%;
}

/* de foto-wrapper "product-afbeelding" is het anker voor de figurecontainer-decoraties */
.snippet-product .product-afbeelding {
	position: relative;
}

/* figurecontainer::before — grotere peer linksonder */
.snippet-product .product-afbeelding::before {
	content: "";
	font-size: min(23.75vw, 21.375rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	top: 100%;
	transform: translate(-85%, -35%) rotate(3deg) scaleX(-1);
	transform-origin: center center;
	background: var(--product_background);
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* figurecontainer::after — kleine vrucht rechtsonder */
.snippet-product .product-afbeelding::after {
	content: "";
	font-size: min(9.0625vw, 8.15625rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 100%;
	top: 100%;
	transform: translate(-130%, 0%) rotate(-12deg) scaleX(-1);
	transform-origin: center center;
	background: var(--product_background);
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* de image-widget in de wrapper draagt de figure-decoraties */
.snippet-product .product-afbeelding .elementor-widget-image {
	position: relative;
}

/* figure::before — vrucht gecentreerd áchter de foto */
.snippet-product .product-afbeelding .elementor-widget-image::before {
	content: "";
	width: 75%;
	padding-bottom: 75%;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	background: var(--product_background);
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* figure::after — kleine vrucht rechtsboven */
.snippet-product .product-afbeelding .elementor-widget-image::after {
	content: "";
	width: 20%;
	padding-bottom: 20%;
	position: absolute;
	left: 83%;
	top: 0;
	transform: translate(-15%, -30%) rotate(15deg);
	transform-origin: center center;
	background: var(--product_background);
	z-index: -1;
	display: block;
	pointer-events: none;
}

/* grijze volle-breedte band erachter (oud.css .Product.Detail.default::before) */
.snippet-product::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 100.2vw;
	transform: translateX(-50%);
	background: linear-gradient(141deg, #f6f6f6 -10%, #e5e5e5 100%);
	z-index: -1;
	pointer-events: none;
}

/* kolommen regel je zelf in Elementor; hier alleen het anker voor de decoratie */
.snippet-product > .e-con-inner {
	position: relative;
}

/* fruit-decoratie rechts van de content-kolom (oud.css .Product.Detail.default::after) */
.snippet-product > .e-con-inner::after {
	content: "";
	font-size: min(17.5vw, 15.75rem);
	width: 1em;
	height: 1em;
	position: absolute;
	left: 110%;
	top: 50%;
	transform: translate(-40%, -50%) rotate(-22deg);
	transform-origin: center center;
	background: var(--product_background);
	z-index: -1;
	display: block;
	pointer-events: none;
}

.snippet-product .Intro h2 {
	font-size: min(4.1666666667vw, 3.125rem);
	font-weight: 800;
	margin-bottom: 15px;
}

/* voedingswaarde-specs */
.product-specs {
	column-count: 2;
	column-gap: 30px;
	font-size: 1.0625rem;
	margin: 20px 0 5px;
}

.product-specs > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	position: relative;
	border-top: 2px dotted #c2c2c2;
	padding: 10px 0;
	break-inside: avoid;
}

/* verticale stippellijn tussen de twee kolommen */
.product-specs > div::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 5px;
	bottom: 5px;
	width: 2px;
	border-left: 2px dotted #c2c2c2;
}

.product-specs label {
	width: 50%;
	padding-right: 15px;
	font-weight: 700;
	margin: 0;
}

.product-specs var {
	width: 50%;
	padding-right: 15px;
	text-align: center;
	font-style: normal;
}

/* note onderaan de specs ("Gegevens per 100 gram") — volle breedte */
.product-specs > p,
.product-note {
	column-span: all;
	font-size: .8125rem;
	color: #888;
	margin: 10px 0 0;
}

@media only screen and (max-width: 767px) {
	.snippet-product > .e-con-inner {
		flex-direction: column;
	}

	.snippet-product > .e-con-inner > .elementor-widget-image {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* specs in één kolom op mobiel */
	.product-specs {
		column-count: 1;
	}
}

/* introrow: h2-subtitel (bijv. "Week 30") klein houden */
.snippet-introrow .elementor-widget-heading h2.elementor-heading-title {
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 700;
	margin-top: -10px;
	margin-bottom: 30px;
}

/* ── Banner-CTA overlay (over de hero, rechtsonder) ───────────────────
   Sectie-class "snippet-bannercta" direct NA de hero. Twee kaarten
   (pear-cta + apple-cta) die met een negatieve marge over de hero-onderkant
   vallen. Uit oud.css .bannercta / .Snippet.PearCTA / .Snippet.AppleCTA. */
.snippet-bannercta {
	position: relative;
	z-index: 570;
}

.snippet-bannercta > .e-con-inner {
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: max(-15.625vw, -225px); /* trekt de kaarten over de hero */
}

.snippet-bannercta .pear-cta,
.snippet-bannercta .apple-cta {
	position: relative;
	flex: 0 0 auto;
	width: min(15.2777777778vw, 220px); /* compacte kaart, stabiele basis voor de vrucht */
	text-align: center;
	color: #fff;
}

.snippet-bannercta .pear-cta {
	z-index: 3;
}

.snippet-bannercta .apple-cta {
	z-index: 2;
}

/* tekst/knop boven de vrucht */
.snippet-bannercta .pear-cta > *,
.snippet-bannercta .apple-cta > * {
	position: relative;
	z-index: 1;
}

.snippet-bannercta .elementor-widget-heading .elementor-heading-title {
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.0434782609em;
	line-height: .8333333333em;
	color: #fff;
}

.snippet-bannercta .pear-cta .elementor-heading-title {
	font-size: 1.375rem;
}

.snippet-bannercta .apple-cta .elementor-heading-title {
	font-size: min(2.2916666667vw, 2.0625rem);
}

/* peer achter de pear-cta — vaste vw-maat (geen procent-van-kaart, die klapt).
   De peer is smaller dan de appel en zijn tekst langer; op 25vw en -63% viel
   de tekst over de hals en de zijkanten. Iets groter en lager, zodat de tekst
   in het dikke deel staat en peer en appel even zwaar ogen. */
.snippet-bannercta .pear-cta::before {
	content: "";
	position: absolute;
	width: min(28vw, 400px);
	height: min(28vw, 400px);
	left: 50%;
	top: 50%;
	transform: translate(-52.5%, -60%) scale(-1, 1) rotate(10deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: 0;
	pointer-events: none;
	transition: transform .3s ease-in-out;
}

.snippet-bannercta .pear-cta:hover::before {
	transform: translate(-52.5%, -60%) scale(-1.1, 1.1) rotate(12deg);
}

/* de peer is smaller dan zijn kaart: de kop wat inspringen zodat hij binnen
   de vrucht blijft */
.snippet-bannercta .pear-cta .elementor-widget-heading {
	padding: 0 min(2.2vw, 32px);
}

/* groene appel achter de apple-cta — vaste vw-maat */
.snippet-bannercta .apple-cta::before {
	content: "";
	position: absolute;
	width: min(26vw, 375px);
	height: min(26vw, 375px);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -65%) scale(-1, 1);
	transform-origin: center center;
	background: url(assets/images/apple-home.svg) no-repeat center center / 100% 100%;
	z-index: 0;
	pointer-events: none;
	transition: transform .3s ease-in-out;
}

.snippet-bannercta .apple-cta:hover::before {
	transform: translate(-50%, -65%) scale(-1.05, 1.05) rotate(3deg);
}

/* witte outline-knop in de pear-cta */
.snippet-bannercta .more.outline:not(.elementor-widget) {
	background: #fff;
	border-color: #fff;
	color: #000;
}

.snippet-bannercta .more.outline:not(.elementor-widget):hover {
	background: transparent;
	color: #fff;
}

/* Tablet: de kaarten staan op 15vw (zo'n 125px) en de kop blijft 22px,
   dus de tekst liep over de vruchten heen. Bredere kaarten, grotere vruchten
   en een iets kleinere kop. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.snippet-bannercta .pear-cta,
	.snippet-bannercta .apple-cta {
		width: 22vw;
	}

	.snippet-bannercta .pear-cta::before {
		width: 42vw;
		height: 42vw;
	}

	.snippet-bannercta .apple-cta::before {
		width: 36vw;
		height: 36vw;
	}

	.snippet-bannercta .pear-cta .elementor-heading-title,
	.snippet-bannercta .apple-cta .elementor-heading-title {
		font-size: 1.25rem;
	}

	.snippet-bannercta .pear-cta .elementor-widget-heading {
		padding: 0 14px;
	}
}

@media only screen and (max-width: 767px) {
	.snippet-bannercta {
		margin-top: 200px;
	}

	/* Twee kaarten naast elkaar die samen de breedte delen. Met elk 50vw plus
	   de tussenruimte paste het niet: de peer schoof links buiten beeld en
	   zijn tekst viel eraf. */
	.snippet-bannercta .pear-cta,
	.snippet-bannercta .apple-cta {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.snippet-bannercta .pear-cta::before {
		width: 78vw;
		height: 78vw;
	}

	.snippet-bannercta .apple-cta::before {
		width: 64vw;
		height: 64vw;
	}

	/* appel-kop niet in vw (werd ~8px), gelijk aan de peer-kop */
	.snippet-bannercta .pear-cta .elementor-heading-title,
	.snippet-bannercta .apple-cta .elementor-heading-title {
		font-size: 1.25rem;
	}

	.snippet-bannercta .pear-cta .elementor-widget-heading {
		padding: 0 12px;
	}
}

/* ── Vaste CTA-balk op mobiel ─────────────────────────────────────────
   "Gratis proefbox" en "Offerte aanvragen" vast onderaan het scherm. De
   inhoud is de Elementor-template "mobiele-cta-balk"; includes/cta-balk.php
   zet hem in .cta-balk en includes/cta-balk.js schuift hem in na wat
   scrollen (class "is-zichtbaar"). Alleen op mobiel: op tablet en desktop
   staan de knoppen al in de header. */
.cta-balk {
	display: none;
}

@media only screen and (max-width: 767px) {
	.cta-balk {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* boven de pagina, onder de Elementor-popups (mobiel menu) */
		z-index: 900;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #fff;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
		transform: translateY(100%);
		transition: transform .3s ease;
	}

	.cta-balk.is-zichtbaar {
		transform: translateY(0);
	}

	/* De knoppen delen de breedte. */
	.cta-balk .elementor-widget-button {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Tekst op één regel. "Boîte d'essai gratuite" (FR) is de langste en
	   past op 375px pas zonder de letterafstand van de kit en met wat minder
	   padding; op smallere telefoons krimpt de letter mee. !important: de
	   kit en de widget zetten deze waarden met specifiekere selectors. */
	.cta-balk .elementor-button {
		width: 100%;
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: min(12px, 3.2vw) !important;
		letter-spacing: .02em !important;
		white-space: nowrap;
	}

	/* ruimte onderaan, zodat de footer niet achter de balk verdwijnt */
	body.cta-balk-zichtbaar {
		padding-bottom: var(--cta-balk-hoogte, 70px);
	}

	/* de cookie-knop van Cookiebot (linksonder) boven de balk houden */
	body.cta-balk-zichtbaar #CookiebotWidget {
		bottom: calc(var(--cta-balk-hoogte, 70px) + 10px) !important;
		transition: bottom .3s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-balk,
	body.cta-balk-zichtbaar #CookiebotWidget {
		transition: none;
	}
}

/* ── Referentie-kaart (loop item) ─────────────────────────────────────
   Loop-item = boxed container "referentie-kaart" met een image-widget +
   een absoluut-gepositioneerde heading (via Elementor onderin). Ik voeg de
   donkere gradient toe voor leesbaarheid. (oud.css .Reference.Item.featured) */
.referentie-kaart {
	position: relative;
	color: #fff;
}

/* beeld vult de kaart netjes */
.referentie-kaart .elementor-widget-image {
	position: relative;
}

.referentie-kaart .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* donkere multiply-gradient over de afbeelding (oud.css .Reference.Item figure::before) */
.referentie-kaart .elementor-widget-image::before {
	content: "";
	position: absolute;
	top: 20%;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	opacity: .4;
	mix-blend-mode: multiply;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
	pointer-events: none;
}

/* titel boven de gradient */
.referentie-kaart .elementor-widget-heading {
	z-index: 2;
}

.referentie-kaart .elementor-heading-title {
	line-height: 1.15;
}

.referentie-kaart .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

/* pijltje rechtsonder — verschijnt bij hover (oud.css .Reference.Item nav) */
.referentie-kaart .elementor-widget-icon {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 2;
	opacity: 0;
	transition: opacity .3s ease-in-out;
}

.referentie-kaart:hover .elementor-widget-icon {
	opacity: 1;
}

/* Op een telefoon of tablet bestaat hover niet: daar verscheen de pijl pas
   bij het aantikken, als de pagina al wegging, en dus leek de kaart niet
   klikbaar. Daar staat hij altijd aan. De breedte-grens vangt telefoons op
   die zich toch als hover-apparaat melden. */
@media (hover: none), only screen and (max-width: 767px) {
	.referentie-kaart .elementor-widget-icon {
		opacity: 1;
	}
}

.referentie-kaart .elementor-widget-icon .elementor-icon {
	color: #fff;
}

.referentie-kaart .elementor-widget-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

/* brandbook-graphic achter de pijl (oud.css .Reference.Item nav::before) */
.referentie-kaart .elementor-widget-icon::before {
	content: "";
	position: absolute;
	width: 100px;
	height: 100px;
	top: 75%;
	left: 75%;
	transform: translate(-50%, -50%);
	background: url(assets/images/brandbook.svg) no-repeat center center / contain;
	z-index: -1;
	pointer-events: none;
}

/* ── Referentie-overzicht: peer-decoratie rechtsboven ─────────────────
   Zet class "snippet-referenties" op de sectie met de kop + loop grid.
   (oud.css .Reference.Overview.featured::before) */
.snippet-referenties {
	position: relative;
}

.snippet-referenties::before {
	content: "";
	font-size: min(55.5555555556vw, 800px);
	width: 1em;
	height: 1em;
	position: absolute;
	right: -300px;
	top: 10px;
	transform: translate(20%, 0) rotate(22deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	display: block;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.snippet-referenties::before {
		display: none;
	}
}

/* ── Referentie-overzicht: eerste kaart groot (featured) ──────────────
   De loop-grid-widget heeft class "snippet-referenties". Het eerste
   loop-item wordt 2 kolommen breed en 2 rijen hoog. */
.snippet-referenties .elementor-loop-container > .e-loop-item:first-of-type {
	grid-column: span 2;
	grid-row: span 2;
}

/* kaarten vullen hun grid-cel (zodat de grote kaart hoog wordt) */
.snippet-referenties .e-loop-item,
.snippet-referenties .e-loop-item > .referentie-kaart,
.snippet-referenties .referentie-kaart > .e-con-inner,
.snippet-referenties .referentie-kaart .elementor-widget-image,
.snippet-referenties .referentie-kaart .elementor-widget-image > .elementor-widget-container {
	height: 100%;
}

.snippet-referenties .referentie-kaart .elementor-widget-image img {
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 767px) {
	.snippet-referenties .elementor-loop-container > .e-loop-item:first-of-type {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ── Nieuws-detail: druiven-decoratie linksonder bij het artikel ──────
   De sectie met de post-content + terug-knop heeft class "nieuws-content".
   (oud.css .News ... .mainrow .bottom::before) */
.nieuws-content {
	position: relative;
}

.nieuws-content::before {
	content: "";
	font-size: min(49.375vw, 44.4375rem);
	width: 1em;
	position: absolute;
	right: 100%;
	bottom: 40px;
	transform: translate(-60%, 0) rotate(-10deg) scaleX(-1);
	transform-origin: center center;
	background: url(assets/images/dec-grapes.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	display: block;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	.nieuws-content::before {
		display: none;
	}
}

/* ── Referentie-detail: quote ─────────────────────────────────────────
   Voeg de class "referentie-quote" toe aan het TEXT-EDITOR-widget met de
   quote-tekst (Elementor wikkelt de tekst niet in <blockquote>, dus we
   stylen het widget zelf). Uit oud.css .Reference.view.default … blockquote
   (stippellijn boven/onder + quote-icoon). Werkt ook als er wél een
   <blockquote> in staat. */
.referentie-quote {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.2;
	color: #000;
	margin: 23.3333333333px 0;
	border-top: 4px dotted #c2c2c2;
	border-bottom: 4px dotted #c2c2c2;
	padding: 35px 0;
}

.referentie-quote > * {
	width: 80%;
	margin: 0;
}

/* het text-widget pakt z'n eigen Elementor-lettergrootte → forceren */
.referentie-quote .elementor-widget-text-editor,
.referentie-quote .elementor-widget-container,
.referentie-quote .elementor-widget-text-editor p {
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.2;
	color: #000;
	margin: 0;
}

/* Zit er een échte <blockquote> in (bijv. uit de WYSIWYG-content), dan wordt
   díe het quote-blok en blijft de container plat — geen dubbele rand.
   Spiegelt .Reference.view.default … blockquote uit oud.css. */
.referentie-quote:has(blockquote) {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
}

.referentie-quote:has(blockquote) > * {
	width: 100%;
}

.referentie-quote blockquote {
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.2;
	color: #000;
	margin: 23.3333333333px 0;
	border-top: 4px dotted #c2c2c2;
	border-bottom: 4px dotted #c2c2c2;
	padding: 35px 0;
}

.referentie-quote blockquote > * {
	margin: 0;
}

/* ── Vacature-detail (Theme Builder single-post) ──────────────────────
   Secties: "vacature-detail-kop" (grijze band: titel + meta + intro +
   solliciteer-knop), "vacature-tekst" (tekst + afbeelding op een gradient-
   band), "vacature-formulier". Vertaald uit oud.css .Vacancy.view:not(.Form). */

/* Kop: grijze band over de volle breedte (oud .titlecolumn::before #efefef) */
.vacature-detail-kop {
	position: relative;
}

.vacature-detail-kop > .e-con-inner {
	align-items: flex-start;
}

.vacature-detail-kop .elementor-widget-heading h1.elementor-heading-title {
	font-size: 3.75rem;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	margin-bottom: 15px;
}

/* meta-lijst: locatie · uren · datum, gescheiden door een streep */
.vacature-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0 0 15px;
	padding: 0;
}

.vacature-meta li {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0 15px;
}

.vacature-meta li:first-child {
	padding-left: 0;
}

.vacature-meta li:not(:last-child) {
	border-right: 2px solid #000;
}

.vacature-detail-kop .Intro {
	font-size: 1.25rem;
	margin-bottom: 25px;
}

/* solliciteer-knop = .more.bg3 (oranje gradient) */
.vacature-detail-kop .elementor-widget-button .elementor-button {
	background: linear-gradient(45deg, #FFA600 0%, #E94C00 100%);
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 0;
	border-radius: 25px;
	padding: 18px 30px;
	font-size: 12px;
	line-height: 15px;
}

.vacature-detail-kop .elementor-widget-button .elementor-button:hover {
	background: #FFA600;
	color: #fff;
}

/* Tekst-band: gradient over de volle breedte, tekst + afbeelding naast elkaar */
.vacature-tekst {
	position: relative;
	overflow: hidden;
}

/* twee kolommen (classes op de inner-containers worden bij import gestript
   → structureel op positie targeten). Laatste = afbeelding, onderaan uitgelijnd */
.vacature-tekst > .e-con-inner {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
}

.vacature-tekst > .e-con-inner > .e-con:last-child {
	align-self: flex-end;
}

.vacature-tekst > .e-con-inner > .e-con:last-child img {
	border-radius: 10px;
	display: block;
}

/* Formulier-band */
.vacature-formulier {
	position: relative;
}

.vacature-formulier .elementor-widget-heading h3.elementor-heading-title {
	font-size: 1.875rem;
	font-weight: 800;
	margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
	.vacature-detail-kop .elementor-widget-heading h1.elementor-heading-title {
		font-size: 2.5rem;
	}

	.vacature-meta li {
		font-size: 1.0625rem;
		padding: 0 10px;
	}

	.vacature-tekst > .e-con-inner {
		flex-direction: column;
		gap: 25px;
	}
}

/* Vacature-detail: deelknoppen met rand */
.vacature-share .elementor-share-btn {
	border: 1px solid #000;
}

/* ── Voordelen (benefits-collage) — zie blok onderaan style.css ───────── */

/* ── Voordelen (benefits) — exacte collage, 1:1 geport uit oud.css ────
   Originele markup in een HTML-widget onder sectie-class "voordelen-benefits":
     .voordelen-benefits > .Steps.Overview.benefits > ul.block-grid.one-up
       > li > article.Steps.Item > figure>img  +  .inner > h3 + .Content
   (prefix .fullcolumn/.bottomBlokken uit oud.css vervangen door .voordelen-benefits) */
.voordelen-benefits .Steps.Overview {
	position: relative;
}

.voordelen-benefits .Steps.Overview.benefits {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 1300px;
	max-width: calc(100vw - 60px);
}

.voordelen-benefits .block-grid {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: visible;
	list-style: none;
	counter-reset: li;
}

.voordelen-benefits .block-grid > li {
	padding: 0;
	list-style: none;
	counter-increment: li;
}

.voordelen-benefits .Steps.Item {
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	background: none transparent;
	color: #000;
	position: relative;
}

.voordelen-benefits .Steps.Item > figure {
	width: 50%;
	margin: 0;
	padding-left: 17.5px;
	padding-right: 17.5px;
}

.voordelen-benefits .Steps.Item > figure img {
	display: block;
	max-width: 100%;
}

.voordelen-benefits .Steps.Item > .inner {
	width: 50%;
	position: relative;
}

.voordelen-benefits .Steps.Item > .inner > h3 {
	font-size: 4vw;
	line-height: .8152173913em;
	margin-bottom: .3260869565em;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
}

.voordelen-benefits .Steps.Item > .inner > .Content p {
	margin: 0;
}

/* afwisselend links/rechts (generiek) */
.voordelen-benefits .Steps.Overview > .block-grid > li:nth-of-type(2n-1) .Steps.Item {
	flex-direction: row-reverse;
}

.voordelen-benefits .Steps.Overview > .block-grid > li:nth-of-type(2n-1) .Steps.Item > .inner:first-child {
	margin-right: auto;
}

.voordelen-benefits .Steps.Overview > .block-grid > li:nth-of-type(2n) .Steps.Item {
	flex-direction: row;
}

.voordelen-benefits .Steps.Overview > .block-grid > li:nth-of-type(2n) .Steps.Item > .inner {
	padding-right: 0;
}

.voordelen-benefits .Steps.Overview > .block-grid > li:nth-of-type(2n) .Steps.Item > .inner:first-child {
	margin-left: auto;
}

/* benefits: kop-grootte + content */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li .Steps.Item > figure:not(.without-before) + .inner > h3 {
	font-size: 5.0625rem;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li .Steps.Item > .inner > .Content {
	font-size: 1.1875rem;
}

/* genummerde cirkel bij items mét figuur */
.voordelen-benefits .Steps.Overview .Steps.Item > figure:not(.without-before) + .inner > h3 {
	width: auto;
	position: relative;
}

.voordelen-benefits .Steps.Overview .Steps.Item > figure:not(.without-before) + .inner > h3::before {
	content: counter(li);
	position: absolute;
	text-align: center;
	font-weight: 800;
	border-radius: 50%;
	left: -15px;
	top: 0;
	transform: translate(-100%, -10%);
	background: none transparent;
	color: inherit;
	border: 2px solid currentColor;
	font-size: 3.4347222222vw;
	line-height: 1;
	min-width: 1.1518987342em;
	height: 1.1518987342em;
	padding: .0253164557em;
}

/* item 1 & 3 */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > .inner {
	margin-top: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > figure > img {
	margin-top: -425px !important;
	width: calc(100% + 150px);
	max-width: calc(100% + 150px);
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > figure:not(.without-before) + .inner > h3::before,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item > figure:not(.without-before) + .inner > h3::before {
	position: relative;
	width: 90px;
	height: 90px;
	display: inline-block;
	transform: none;
	top: -20px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > .inner,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item > .inner {
	margin-bottom: 0;
	position: relative;
	right: -80px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > .inner > h3,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item > .inner > h3,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(1) .Steps.Item > .inner > .Content,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item > .inner > .Content {
	text-align: right;
}

/* item 2 */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(2) .Steps.Item > .inner {
	margin-bottom: 0;
}

/* item 3 */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item {
	margin-top: 20px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item .inner > h3 {
	position: relative;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(3) .Steps.Item .inner > h3::before {
	content: counter(li);
	position: absolute;
	text-align: center;
	font-weight: 800;
	border-radius: 50%;
	top: 0;
	transform: translate(-100%, -10%);
	background: none transparent;
	color: inherit;
	border: 2px solid currentColor;
	font-size: 3.4347222222vw;
	line-height: 1;
	min-width: 1.1518987342em;
	height: 1.1518987342em;
	padding: .0253164557em;
}

/* item 4 (mandarijn-deco, overlap) */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) {
	z-index: -1;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item {
	margin-top: -380px;
	flex-direction: row-reverse;
	margin-bottom: -35px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item > figure {
	align-self: flex-end;
	padding-left: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item > figure img {
	margin-bottom: 0;
	width: calc(100% + 150px);
	max-width: calc(100% + 150px);
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item > .inner {
	align-self: flex-end;
	margin-top: 0;
	padding-top: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item::before {
	content: "";
	font-size: 89.375vw;
	width: 1em;
	height: 1em;
	position: absolute;
	left: -140px;
	bottom: 0;
	background: url(assets/images/dec-mandarin2.svg) no-repeat;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* item 5 (donkere balk over volle breedte) */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5) .Steps.Item.colored {
	z-index: 4;
	position: relative;
	color: #fff;
	background: none transparent;
	margin-bottom: 0;
	flex-direction: row;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5) .Steps.Item.colored > figure {
	align-self: stretch;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5) .Steps.Item.colored > figure img {
	margin-top: 0;
	margin-bottom: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5) .Steps.Item.colored > .inner {
	align-self: flex-start;
	padding-left: 3.125vw;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5)::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 35px;
	bottom: 35px;
	width: 100.2vw;
	max-width: 100.2vw;
	background: #212a31;
	z-index: -1;
}

/* item 6 */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(6) .Steps.Item {
	flex-direction: row-reverse;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(6) .Steps.Item > .inner {
	margin-bottom: 0;
	margin-top: 0;
	padding-right: 3.125vw;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(6) .Steps.Item > figure {
	padding-left: 3.125vw;
}

/* item 7 (geen foto) */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(7) .Steps.Item > .inner {
	margin-top: 0;
	padding-left: 3.125vw;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(7) .Steps.Item > figure,
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(8) .Steps.Item > figure {
	display: none;
}

/* item 8 (overlap omhoog, geen foto) */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(8) .Steps.Item {
	margin-top: -580px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(8) .Steps.Item > .inner {
	padding-right: 3.125vw;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(8) .Steps.Item > .inner > .Content {
	text-align: justify;
}

/* item 9 (banaan-deco) */
.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item {
	flex-direction: row;
	margin-bottom: -70px;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item > figure {
	margin-top: -250px;
	align-self: flex-end;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item > figure img {
	margin-bottom: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item > .inner {
	align-self: flex-end;
	padding-left: 3.125vw;
	margin-bottom: 0;
	margin-top: 0;
}

.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item > .inner::after {
	content: "";
	font-size: 37.5vw;
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	left: auto;
	right: -100px;
	top: 50%;
	transform: translate(-7%, -58%) rotate(-15deg) scaleX(1);
	background: url(assets/images/dec-banana.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
}

/* mobiel: collage netjes stapelen */
@media only screen and (max-width: 767px) {
	.voordelen-benefits .Steps.Overview.benefits {
		width: 100%;
		max-width: 100%;
	}

	.voordelen-benefits .Steps.Overview.benefits .block-grid > li .Steps.Item {
		flex-direction: column !important;
		margin-top: 0 !important;
		margin-bottom: 30px !important;
	}

	.voordelen-benefits .Steps.Item > figure,
	.voordelen-benefits .Steps.Item > .inner {
		width: 100%;
	}

	.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(7) .Steps.Item > figure,
	.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(8) .Steps.Item > figure {
		display: block;
	}

	.voordelen-benefits .Steps.Item > figure img {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.voordelen-benefits .Steps.Item > .inner {
		right: auto !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.voordelen-benefits .Steps.Item > .inner > h3,
	.voordelen-benefits .Steps.Overview.benefits .block-grid > li .Steps.Item > figure:not(.without-before) + .inner > h3 {
		font-size: 2.5rem;
		text-align: left !important;
	}

	.voordelen-benefits .Steps.Item > .inner > h3,
	.voordelen-benefits .Steps.Item > .inner > .Content {
		text-align: left !important;
	}

	.voordelen-benefits .Steps.Item > .inner > h3::before {
		position: relative !important;
		transform: none !important;
		left: 0 !important;
		display: inline-block;
		width: 60px;
		height: 60px;
		font-size: 30px;
		margin-right: 12px;
	}

	.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(4) .Steps.Item::before,
	.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(5)::after,
	.voordelen-benefits .Steps.Overview.benefits .block-grid > li:nth-child(9) .Steps.Item > .inner::after {
		display: none;
	}
}

/* ── Grapes-pagina: kiwi linksonder de eerste content-sectie ──────────
   Uit oud.css body .view.grapes .mainrow::before. Voeg de class
   "mainrow-grapes" toe aan de eerste content-sectie ná de hero. */
.mainrow-grapes {
	position: relative;
}

.mainrow-grapes::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	top: auto;
	width: min(23.125vw, 333px);
	height: min(23.125vw, 333px);
	transform: translate(-55%, 0) rotate(50deg);
	transform-origin: center center;
	background: url(assets/images/dec-kiwi.svg) no-repeat center center / 100% 100%;
	display: block;
	pointer-events: none;
}

/* ── Grapes-pagina: druiventros rechtsboven de sectie ná de mainrow ───
   Uit oud.css body .view.grapes .mainrow+.fullwidth.white::after.
   Voeg de class "grapes-tros" toe aan de sectie die DIRECT ná de
   "mainrow-grapes"-sectie komt. */
.grapes-tros {
	position: relative;
}

.grapes-tros::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 45%;
	width: min(49.375vw, 711px);
	height: min(49.375vw, 711px);
	transform: translate(-15%, 0);
	transform-origin: center center;
	background: url(assets/images/dec-grapes.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* ── Zero Waste-stappen ───────────────────────────────────────────────
   Sectie-class "zerowaste-steps": 4 rijen, elk tekst + afbeelding afwisselend
   links/rechts (volgorde staat al in de DOM). Sub-containers/widgets worden bij
   import gestript → structureel getarget. Uit oud.css .Steps.Overview/.Steps.Item. */
.zerowaste-steps > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* rij-layout (2 kolommen) wordt in Elementor geregeld;
   breedte van de kolommen ook */

.zerowaste-steps .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px;
}

/* grote kop */
.zerowaste-steps .elementor-widget-heading .elementor-heading-title {
	position: relative;
	font-size: min(4vw, 5.75rem);
	line-height: .8152173913em;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	margin-bottom: .3260869565em;
}

/* genummerde cirkel vóór de kop (oud.css .Steps.Item … h3::before, counter(li)) */
.zerowaste-steps > .e-con-inner {
	counter-reset: li;
}

.zerowaste-steps > .e-con-inner > .e-con {
	counter-increment: li;
}

.zerowaste-steps .elementor-widget-heading .elementor-heading-title::before {
	content: counter(li);
	position: absolute;
	left: -15px;
	top: 0;
	transform: translate(-100%, -10%);
	text-align: center;
	font-weight: 800;
	border-radius: 50%;
	background: none transparent;
	color: inherit;
	border: 2px solid currentColor;
	font-size: min(3.4347222222vw, 79px);
	line-height: 1;
	min-width: 1.1518987342em;
	height: 1.1518987342em;
	padding: .0253164557em;
	box-sizing: content-box;
}

/* subtitel (h5 em) */
.zerowaste-steps .Content h5 {
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
	margin: 0 0 1rem;
}

.zerowaste-steps .Content,
.zerowaste-steps .Content p {
	font-size: 16px;
	line-height: 1.5;
}

.zerowaste-steps .Content p {
	margin: 0 0 1em;
}

@media only screen and (max-width: 767px) {
	.zerowaste-steps .elementor-widget-heading .elementor-heading-title {
		font-size: 3rem;
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.zerowaste-steps .elementor-widget-heading .elementor-heading-title::before {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 35px;
		height: 35px;
		align-items: center;
		display: flex;
		justify-content: center;
	}
}

/* ── Pilot-steps (tekst-stappen, kop + tekst) ─────────────────────────
   Sectie-class "pilot-steps". Alleen koppen + tekst (geen afbeeldingen).
   Widgets direct getarget (stap 1 zit een niveau dieper genest). */
.pilot-steps > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 45px;
}

.pilot-steps .elementor-widget-heading .elementor-heading-title {
	font-size: 3.125rem;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	margin-bottom: 15px;
}

.pilot-steps .Content,
.pilot-steps .Content p,
.pilot-steps .Content li {
	font-size: 16px;
	line-height: 1.6;
}

.pilot-steps .Content p {
	margin: 0 0 1em;
}

.pilot-steps .Content ul {
	font-size: 16px;
}

@media only screen and (max-width: 767px) {
	.pilot-steps .elementor-widget-heading .elementor-heading-title {
		font-size: 2rem;
	}
}

/* pilot-steps: grote peer-decoratie (oud.css .Steps.Overview.default::before).
   Op de .e-con-inner (die is de "block-grid" van de stappen). */
.pilot-steps > .e-con-inner {
	position: relative;
}

.pilot-steps > .e-con-inner::before {
	content: "";
	position: absolute;
	top: 1520px;
	left: 0;
	width: min(33.125vw, 530px);
	height: min(33.125vw, 530px);
	transform: translate(-60%, -50%) rotate(-20deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	pointer-events: none;
}

/* introrow: blockquote (oud.css .Intro blockquote) */
.snippet-introrow .Intro blockquote {
	padding-left: 25px;
	border-left: 10px solid rgba(0, 0, 0, .1);
	font-style: italic;
	margin: 0 0 1em;
}

/* ── Van grond tot mond-stappen ───────────────────────────────────────
   Sectie-class "grondmond-steps": rijen (grondmond-item) met tekst + afbeelding
   afwisselend links/rechts (volgorde staat al in de DOM). Uit .Steps.Overview.default. */
.grondmond-steps > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.grondmond-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.grondmond-item > * {
	flex: 1 1 50%;
	width: 50%;
	max-width: 50%;
}

.grondmond-item .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px;
}

.grondmond-steps .elementor-widget-heading .elementor-heading-title {
	font-size: 3.125rem;
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.0434782609em;
	margin-bottom: 15px;
}

.grondmond-steps .Content,
.grondmond-steps .Content p {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.grondmond-steps .Content p {
	margin: 0 0 1em;
}

@media only screen and (max-width: 767px) {
	.grondmond-item {
		flex-direction: column;
		gap: 20px;
	}

	.grondmond-item > * {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.grondmond-steps .elementor-widget-heading .elementor-heading-title {
		font-size: 2rem;
	}
}

/* genummerde kleurcirkel op de stap-afbeelding
   (oud.css .Steps.Overview.default … figure::before, counter(li) + kleurcyclus per 5) */
.grondmond-steps > .e-con-inner {
	counter-reset: li;
}

.grondmond-item {
	counter-increment: li;
}

.grondmond-item .elementor-widget-image {
	position: relative;
}

.grondmond-item .elementor-widget-image::before {
	content: counter(li);
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(227deg, #68b900 0%, #003300 120%);
}

/* badge aan de tekst-kant: afbeelding-links → badge rechts */
.grondmond-item > .elementor-widget-image:first-child::before {
	left: 100%;
}

/* kleurcyclus per 5 stappen (oud.css 5n-3 / 5n-2 / 5n-1 / 5n) */
.grondmond-item:nth-child(5n-3) .elementor-widget-image::before {
	background: linear-gradient(137deg, #ffa600 -10%, #e94c00 100%);
}

.grondmond-item:nth-child(5n-2) .elementor-widget-image::before {
	background: linear-gradient(153deg, #fcee21 -10%, #dcae22 100%);
}

.grondmond-item:nth-child(5n-1) .elementor-widget-image::before {
	background: linear-gradient(153deg, #862e83 -10%, #3b1078 100%);
}

.grondmond-item:nth-child(5n) .elementor-widget-image::before {
	background: linear-gradient(153deg, #dedf60 -10%, #5a8900 100%);
}

/* grondmond-steps: grote peer-decoratie (oud.css .Steps.Overview.default::before) */
.grondmond-steps > .e-con-inner {
	position: relative;
}

.grondmond-steps > .e-con-inner::before {
	content: "";
	position: absolute;
	top: 1520px;
	left: 0;
	width: min(33.125vw, 530px);
	height: min(33.125vw, 530px);
	transform: translate(-60%, -50%) rotate(-20deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	pointer-events: none;
}

/* ── Kiwi-pagina: grote peer linksboven de eerste content-sectie ──────
   Uit oud.css body .view.kiwi .mainrow::before. Voeg class "mainrow-kiwi"
   toe aan de eerste content-sectie (naast snippet-introrow). */
.mainrow-kiwi {
	position: relative;
}

.mainrow-kiwi::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: min(43.125vw, 621px);
	height: min(43.125vw, 621px);
	transform: translate(-80%, -5%) rotate(-15deg);
	transform-origin: center center;
	background: url(assets/images/dec-pear.svg) no-repeat center center / 100% 100%;
	z-index: -1;
	pointer-events: none;
}

/* ── Sponsor-tekst: tekst links + afbeelding rechts ───────────────────
   Voeg class "sponsor-tekst" toe aan de sectie met de .Intro + afbeelding. */
.sponsor-tekst > .e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 50px;
}

.sponsor-tekst > .e-con-inner > .e-con {
	flex: 1 1 55%;
}

.sponsor-tekst > .e-con-inner > .elementor-widget-image {
	flex: 0 0 40%;
	max-width: 40%;
}

.sponsor-tekst .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sponsor-tekst .Intro h2 {
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 12px;
}

.sponsor-tekst .Intro h2:not(:first-child) {
	margin-top: 28px;
}

.sponsor-tekst .Intro,
.sponsor-tekst .Intro p,
.sponsor-tekst .Intro li {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sponsor-tekst .Intro p {
	margin: 0 0 1em;
}

@media only screen and (max-width: 767px) {
	.sponsor-tekst > .e-con-inner {
		flex-direction: column;
	}

	.sponsor-tekst > .e-con-inner > .e-con,
	.sponsor-tekst > .e-con-inner > .elementor-widget-image {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* Gravity Forms: checkbox-vinkje = oranje vierkantje (uit oude site) */
.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
	content: "";
	position: absolute;
	line-height: 16px;
	left: 1px;
	top: 1px;
	width: 16px;
	height: 16px;
	background: var(--form-radiocheckbox_background, #E94C00);
	border-radius: 2px;
	display: block;
	transition: all .2s ease-in-out;
}

/* WordPress admin-bar: absolute header + de hele content onder de adminbar
   vandaan schuiven. De header-container staat absoluut (t.o.v. de viewport),
   dus die offset ik apart; de content (.page-content) schuift mee omlaag. */
body.admin-bar .elementor-location-header > .e-con {
	top: 32px;
}

body.admin-bar {
	margin-top: 0 !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .elementor-location-header > .e-con {
		top: 46px;
	}
}

/* Site-icoon in de adminbalk. WordPress stylet alleen img.site-icon, maar
   Imagify verpakt die in een <picture> en zet de class daarop. De img zelf
   heeft dan geen class, krijgt geen maat en blijft 0×0 — en laadt door
   loading="lazy" daardoor nooit. Daarom beide hier op 20px. */
#wpadminbar .site-icon,
#wpadminbar .site-icon img {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 2px;
}

/* Apple-CTA: altijd volledig zichtbaar (geen opacity/animatie die 'm laat doorschijnen).
   Ook de ouder-container forceren, want opacity op een voorouder laat de hele
   subtree doorschijnen — daar helpt opacity:1 op het kind niet tegen. */
.snippet-applecta,
.snippet-applecta > .e-con-inner,
.snippet-applecta.e-con-full,
.snippet-applecta > .e-con-inner::before,
.snippet-applecta.e-con-full::before,
.snippet-applecta .elementor-widget,
.snippet-applecta .elementor-heading-title,
.snippet-applecta .elementor-button,
.e-con:has(.snippet-applecta) {
	opacity: 1 !important;
}

/* Elementor entrance-animatie die 'm onzichtbaar/half zichtbaar laat: uitschakelen */
.snippet-applecta.elementor-invisible,
.snippet-applecta .elementor-invisible,
.e-con:has(.snippet-applecta).elementor-invisible {
	opacity: 1 !important;
	animation: none !important;
}

/* Nieuws-overzicht (pagina 317): decoratie naast "Overzicht" niet op mobiel */
@media only screen and (max-width: 767px) {
	.page-id-317 .dec-kiwi::after {
		display: none;
	}
}

/* ── Offerte-formulier: FTE-slider ────────────────────────────────────
   GF-veld met class "fte-field" wordt via includes/offerte-slider.js een
   slider. Opmaak uit offerte-voorbeeld.html (groen thema). */
.offerte-form .fte-field input.fte-source {
	position: absolute !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

.offerte-form .fte-slider-ui {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	background: #fff;
	border: 1.5px solid #e2e8dd;
	border-radius: 14px;
	padding: 16px 18px;
}

.offerte-form .fte-controls {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* gebouwtje rechts: antenne, dak en 2–14 verdiepingen (via JS). Geen
   vaste hoogte: het vak groeit mee zodra het gebouw hoger wordt dan het
   getal en de balk ernaast. */
.offerte-form .fte-building {
	width: 96px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.offerte-form .fte-building-antenna {
	width: 2px;
	height: 14px;
	background: #b9c2b3;
}

.offerte-form .fte-building-roof {
	width: 34px;
	height: 6px;
	background: #5a6b52;
	border-radius: 3px 3px 0 0;
}

.offerte-form .fte-building-floors {
	width: 72px;
	display: flex;
	flex-direction: column;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35);
}

.offerte-form .fte-floor {
	height: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(90deg, #63788f, #7c92aa);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.offerte-form .fte-floor i {
	width: 8px;
	height: 5px;
	border-radius: 1px;
	background: rgba(255, 255, 255, .35);
}

.offerte-form .fte-floor.is-lit i {
	background: #f4e58a;
}

.offerte-form .fte-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* !important: de algemene GF-veldregel hierboven zet deze ook met !important */
.offerte-form .fte-slider-ui input.fte-num {
	width: 3ch !important;
	min-width: 1ch;
	height: auto;
	margin: 0;
	padding: 0 0 2px !important;
	border: 0 !important;
	border-bottom: 2px dashed transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 32px;
	font-weight: 800;
	color: #4C9600;
	line-height: 1;
	box-sizing: content-box;
}

/* laten zien dat het getal ook te typen is */
.offerte-form .fte-slider-ui input.fte-num:hover,
.offerte-form .fte-slider-ui input.fte-num:focus {
	border-bottom-color: #4C9600 !important;
	outline: none;
}

/* de GF-instructie ("Voer een getal groter dan…") zegt de schaal al */
.offerte-form .fte-field .gfield_description.instruction {
	display: none;
}

.offerte-form .fte-slider:focus-visible {
	outline: 2px solid #4C9600;
	outline-offset: 6px;
}

.offerte-form .fte-unit {
	font-size: 13px;
	font-weight: 600;
	color: #7a857b;
}

.offerte-form .fte-scale {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 600;
	color: #9aa39a;
}

/* range met geel-naar-groen verloop over de hele balk */
.offerte-form .fte-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	margin: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #DEDF60 0%, #5A8900 100%);
	outline: none;
	cursor: pointer;
}

.offerte-form .fte-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #4C9600;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.offerte-form .fte-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #4C9600;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
}

/* ── Offerte-formulier stap 2: keuzekaarten "Type fruit" ──────────────
   Radioveld met class "fruit-cards" (GF 47); includes/offerte-stap2.js
   bouwt elk label om tot rondje + titel + uitleg. Opmaak uit
   offerte-voorbeeld.html, zonder de foto's. */
.offerte-form .fruit-cards .gfield_radio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.offerte-form .fruit-cards .gchoice.fruit-card {
	position: relative;
	margin: 0;
	border: 2px solid #e2e8dd;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: border-color .15s, box-shadow .15s;
}

.offerte-form .fruit-cards .gchoice.fruit-card.is-gekozen {
	border-color: #4C9600;
	box-shadow: 0 8px 20px -8px rgba(76, 150, 0, .45);
}

.offerte-form .fruit-cards .gchoice.fruit-card:has(input:focus-visible) {
	outline: 2px solid #4C9600;
	outline-offset: 2px;
}

/* het echte rondje onzichtbaar, maar bereikbaar met toetsenbord en
   schermlezer; !important tegen de GF-rondjesregel hierboven */
.offerte-form .fruit-cards .fruit-card input.gfield-choice-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.offerte-form .fruit-cards .fruit-card label {
	display: grid;
	grid-template-columns: 18px 1fr;
	column-gap: 10px;
	align-items: start;
	height: 100%;
	margin: 0;
	padding: 14px 14px 16px;
	box-sizing: border-box;
	cursor: pointer;
}

.offerte-form .fruit-cards .fruit-card__rondje {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	box-sizing: border-box;
	border: 2px solid #c4ccbf;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s;
}

.offerte-form .fruit-cards .fruit-card__rondje::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4C9600;
	transform: scale(0);
	transition: transform .15s;
}

.offerte-form .fruit-cards .gchoice.is-gekozen .fruit-card__rondje {
	border-color: #4C9600;
}

.offerte-form .fruit-cards .gchoice.is-gekozen .fruit-card__rondje::after {
	transform: scale(1);
}

.offerte-form .fruit-cards .fruit-card__tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.offerte-form .fruit-cards .fruit-card__titel {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #12241a;
}

.offerte-form .fruit-cards .fruit-card__sub {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	color: #7a857b;
}

/* "Hoeveel fruit" (keuzelijst met class "fruit-aantal") als schuif; de
   opmaak van de schuif zelf komt van de medewerkersschuif (.fte-*) */
.offerte-form .fruit-aantal select.fruit-aantal-bron {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

.offerte-form .fruit-aantal-ui .fruit-aantal-getal {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: #4C9600;
}

.offerte-form .fruit-aantal-ui .fte-controls {
	padding-bottom: 0;
}

.offerte-form .fruit-aantal-ui.is-uit .fte-value,
.offerte-form .fruit-aantal-ui.is-uit .fte-slider,
.offerte-form .fruit-aantal-ui.is-uit .fte-scale {
	opacity: .35;
}

.offerte-form .fruit-aantal-ui.is-uit .fte-slider {
	cursor: not-allowed;
}

.offerte-form .fruit-aantal-weetniet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #2f3d31;
	cursor: pointer;
}

.offerte-form .fruit-aantal-weetniet input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #4C9600;
	cursor: pointer;
}

/* tekstvak "Wil je nog iets extra's…" (grootte Klein in GF): een paar
   regels is genoeg; GF zet er standaard bijna 300px voor */
.offerte-form .gform_wrapper textarea.small {
	height: 110px !important;
	min-height: 0 !important;
	block-size: 110px !important;
	resize: vertical;
}

/* verzendknop links, met "Nee, bedankt" ernaast */
.offerte-form .gform_footer:has(.offerte-stap2-skip) {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.offerte-form .offerte-stap2-skip {
	padding: 15px 4px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6d7a6f;
	cursor: pointer;
}

.offerte-form .offerte-stap2-skip:hover,
.offerte-form .offerte-stap2-skip:focus-visible {
	color: #4C9600;
	background: none;
}

/* bevestiging na verzenden of "Nee, bedankt" */
.offerte-stap2-klaar {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 30px;
	border: 1.5px solid #d4ead9;
	border-radius: 20px;
	background: #f2faf4;
}

.offerte-stap2-klaar__vink {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #2e9e57;
	color: #fff;
	font-size: 20px;
}

.offerte-stap2-klaar__titel {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: #12241a;
}

.offerte-stap2-klaar__tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #57634f;
}

/* Stap-nummer (bijv. in de offerte-stapindicator) */
.step-number {
	width: 25px;
	height: 25px;
	text-align: center;
}

/* ── Facts / cijfers ("Samen maken we impact") ────────────────────────
   Sectie-class "snippet-facts": kop + grid met fact-items (label h4 +
   Elementor counter-widget). Nieuw blok (geen oud.css-referentie). */
.snippet-facts .elementor-widget-heading h3.elementor-heading-title {
	position: relative;
	display: flex;
	margin: 0;
	justify-content: center;
	align-items: center;
	max-width: 450px;
	padding: 0 50px;
	transform: rotate(-10deg);
	font-family: "Big John", "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
}

.snippet-facts .elementor-widget-heading h3.elementor-heading-title::after {
	content: "";
	/* gecapt op de ontwerpbreedte (32.125vw van 1440px) */
	font-size: min(32.125vw, 463px);
	width: 1em;
	height: 1em;
	position: absolute;
	transform-origin: center center;
	top: 50%;
	left: 50%;
	transform: translate(-41%, -55%);
	background: url(assets/images/dec-mandarin.svg) no-repeat center center / 100% 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.snippet-facts .elementor-widget-heading h3.elementor-heading-title::after {
		font-size: 50vw;
	}
}

@media only screen and (max-width: 767px) {
	.snippet-facts .elementor-widget-heading h3.elementor-heading-title::after {
		font-size: 95vw;
	}
}

/* ── Counter als lopende tekst ────────────────────────────────────────
   Voeg de class "logo-slider-title" toe aan de counter-widget (of aan een
   container eromheen). Elementor maakt van .elementor-counter-number-wrapper
   een flexbox en geeft het voor- en achtervoegsel flex-grow:1 met
   text-align end/start; daardoor staan de drie delen als losse kolommen
   naast elkaar. Hier lopen ze als één zin door en breken ze normaal af. */
.logo-slider-title .elementor-counter .elementor-counter-number-wrapper {
	display: block;
	/* Elementor zet line-height 1; te krap zodra de zin over meerdere regels loopt */
	line-height: 1.2;
}

.logo-slider-title .elementor-counter .elementor-counter-number-prefix,
.logo-slider-title .elementor-counter .elementor-counter-number,
.logo-slider-title .elementor-counter .elementor-counter-number-suffix {
	display: inline;
	flex-grow: 0;
	text-align: inherit;
	/* pre-wrap zou de inspringing uit de broncode als spaties tonen */
	white-space: normal;
}

/* Taalwisselaar, de shortcode [langselect]. Alleen het open- en dichtklappen:
   het thema heeft geen Bootstrap, dus data-toggle="dropdown" doet uit zichzelf
   niets. Vormgeving staat hier bewust niet in, die komt uit de oude stylesheet. */
.elementLangselect {
	position: relative;
}

.elementLangselect.dropdown > button.btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
	border: none;
	color: inherit;
	background: none transparent;
	padding: 0;
}

.elementLangselect.dropdown span.lang {
	font-weight: 700;
	font-size: 15px;
}

/* Het pijltje van Bootstrap. Bewust binnen .elementLangselect gehouden: een kale
   .dropdown-toggle::after zou ook op knoppen van plugins slaan. */
.elementLangselect .dropdown-toggle::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

/* Op de oude site stond de positionering deels in een inline stijl van Bootstrap;
   die zit hier in de regel zelf, dus top hoeft geen !important. */
.elementLangselect .dropdown-menu {
	display: none;
	position: absolute;
	top: 15px;
	left: 0;
	right: auto;
	bottom: auto;
	transform: translate3d(0, 24px, 0);
	will-change: transform;
	z-index: 1000;
	float: left;
	min-width: auto;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	color: #212529;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 0;
	border-radius: 0;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}

/* Openklappen gebeurt op een klik; includes/langselect.js zet de class "show". */
.elementLangselect .dropdown-menu.show {
	display: block;
}

.elementLangselect .block-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementLangselect .dropdown-menu li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 15px;
	text-decoration: none;
	list-style-type: none;
	color: #000;
}

/* De taal waar je op staat, oranje. Op de link gezet en niet op de li: de regel
   hierboven kleurt de link zelf, dus een kleur op de li komt er nooit doorheen. */
.elementLangselect .dropdown-menu li.active > a {
	color: #FFA600;
}

/* ── Mega-menu in drie kolommen ────────────────────────────────────────
   Voeg de class "menu-big" toe aan de Elementor menu-widget (nav-menu, niet
   de nested-menu). De drie hoofditems zijn koppen zonder link; ze komen naast
   elkaar te staan met hun subitems eronder.

   De grid staat op de bovenste ul en niet op elke ul, zodat de subitems
   binnen hun eigen kolom blijven en niet zelf in drieën worden geknipt.
   Alleen de hoofd-nav wordt aangesproken: de widget rendert daarnaast een
   tweede nav (--dropdown) voor mobiel, en die laten we met rust. */
.menu-big nav.elementor-nav-menu--main > ul.elementor-nav-menu {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 6px;
	align-items: start;

	/* De nav is zelf een flexbox (--layout-horizontal) waarin de ul tot zijn
	   inhoud krimpt. Met deze twee regels vult hij de volle breedte, zodat de
	   drie kolommen elk een derde krijgen. De minmax(0, …) hierboven houdt een
	   kolom binnen dat derde, ook bij een lang woord. */
	flex: 1;
	width: 100%;
}

/* Elk hoofditem is een kolom: de kop bovenaan, het submenu daaronder.
   position: static haalt het submenu los van dit item als houvast, zodat het
   in de kolom meeloopt in plaats van als losse dropdown eroverheen te vallen. */
.menu-big nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item {
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;

	/* Geen bodembreedte: die zou een kolom breder maken dan zijn derde deel. */
	min-width: 0;
}

/* De koppen zijn geen echte link (href="#"), dus ook niet aanklikbaar. */
.menu-big nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item > a.elementor-item-anchor {
	pointer-events: none;
	cursor: default;

	/* Elementor zet nowrap; een lange kop als "Beleid, Certificeringen &
	   Logistiek" mag hier afbreken. white-space werkt overal, text-wrap is
	   de moderne vorm — beide komen op hetzelfde uit. */
	white-space: normal;
	text-wrap: unset;
}

/* Submenu's altijd open in de kolom. SmartMenus (de dropdown-motor van de
   widget) zet ze dicht met een inline display-stijl; een !important-regel uit
   het stylesheet gaat daar wél voorheen. */
.menu-big nav.elementor-nav-menu--main ul.sub-menu {
	display: block !important;
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	box-shadow: none;
	background: transparent;
}

/* Het pijltje achter een kop heeft geen functie meer nu het submenu openstaat. */
.menu-big nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item > a .sub-arrow {
	display: none;
}

/* Geen lijntjes tussen de subitems: in een kolom onder een kop hoort de reeks
   als één lijst te lezen. !important omdat de widget-CSS van Elementor ná het
   themabestand wordt ingeladen. */
.menu-big .elementor-nav-menu--dropdown .elementor-sub-item {
	border: none !important;
}

/* ── Divider als USP-streepje (".usp-line") ───────────────────────────
   Voeg de class "usp-line" toe aan een divider-widget; de lijn krijgt dan
   ronde uiteinden in plaats van vierkante. */
.usp-line .elementor-divider-separator {
	border-radius: 100px;
}

/* ── Aandachtsstreepjes bij ".usp-title" ──────────────────────────────
   Zet de handgetekende streepjes rechtsboven het <span> in de kop, dus bij
   markup als: <h2 class="usp-title">Werkfruit zonder <span>zorgen</span></h2>.
   De breedte staat in em, dus de streepjes schalen mee met de kop; de hoogte
   volgt de beeldverhouding van de PNG (80 × 83). */
.usp-title span {
	position: relative;
}

.usp-title span::after {
	--streepjes-breedte: 0.7em;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: var(--streepjes-breedte);
	height: calc(var(--streepjes-breedte) * 83 / 80);
	transform: translate(82%, -92%);
	background: url(assets/images/aandachtsstreepjes.png) no-repeat center center / contain;
	pointer-events: none;
}

/* ── USP-blok: links en alinea's (".usp-container") ───────────────────
   Binnen het USP-blok zijn de links onderdeel van de kaart zelf, dus zonder
   onderstreping; de alinea's staan al op hun plek via de flex-gap van de
   container en hebben geen eigen marge nodig. */
.usp-container a {
	text-decoration: none;
}

.usp-container p {
	margin: 0;
}

/* ── USP-blok: icoonafbeeldingen (".usp-icon") ────────────────────────
   De USP-iconen zijn losse PNG's die niet allemaal even hoog zijn. Dwing ze
   in een vierkant vak en laat de tekening daarbinnen passen, zodat de rij
   iconen even hoog blijft en niets wordt bijgesneden. */
.usp-icon img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* ── Aanbod: pijltje van "Fruit op maat" naar het variantenpaneel ─────
   Voeg de class "container-aanbod-fruitopmaat" toe aan de omkaderde
   container met de Fruit op maat-varianten. Het ::before is een vierkantje
   op z'n punt dat de bovenrand van het paneel openbreekt, zodat het paneel
   uit de gekozen kaart lijkt te komen. De witte vulling dekt de bovenrand
   van het paneel af; alleen de twee buitenste zijden houden de groene lijn.
   De horizontale positie komt van JavaScript: dat meet het midden van de
   gekozen kaart en zet het als --pijl-x op het paneel (zie
   includes/aanbod-fruitboxen.js). De waarde erachter is de terugval als het
   script niet draait — het midden van de derde kolom van zes, dus
   2,5 × kolombreedte + twee gaps met een kolombreedte van
   (100% - 5 × 20px) / 6. */
.container-aanbod-fruitopmaat {
	position: relative;
}

.container-aanbod-fruitopmaat::before {
	content: "";
	position: absolute;
	left: var(--pijl-x, calc(41.6666666667% - 1.6666666667px));
	top: -1px;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%) rotate(45deg);
	transform-origin: center center;
	background: #fff;
	/* 2px i.p.v. de 1px van het paneel: een schuine lijn wordt door
	   anti-aliasing over twee pixels uitgesmeerd en oogt op 1px lichter dan
	   de rechte bovenrand ernaast. Op 2px staan ze even zwaar. De -1px erboven
	   hoort erbij: de voetjes worden 1px dikker naar onderen en vallen zo weer
	   gelijk met de 1px-rand van het paneel. */
	border-top: 2px solid #5A8900;
	border-left: 2px solid #5A8900;
	border-right: 0;
	border-bottom: 0;
	/* Elementor gebruikt het ::before van een container zelf al voor de
	   achtergrond-overlay en geeft 'm daar de border-radius van de container
	   (hier 20px) en een overlay-afbeelding. Zonder deze resets wordt het
	   vierkantje een bolletje. De 3px op de linkerbovenhoek is na de draaiing
	   de punt van de pijl: net zo zacht als de ronde hoeken van het paneel. */
	border-radius: 3px 0 0 0;
	background-image: none;
	opacity: 1;
	z-index: 1;
	pointer-events: none;
}

/* Vanaf tablet staan de kaarten op twee kolommen (en mobiel op één), dus dan
   staat "Fruit op maat" niet meer in de onderste rij: het pijltje zou naar de
   verkeerde kaart wijzen. Daarom alleen op de vierkolomsweergave tonen —
   behalve als het paneel direct onder de kaart is gezet (class
   "is-ingeschoven"), want dan wijst hij wél naar de goede. */
@media only screen and (max-width: 1024px) {
	.container-aanbod-fruitopmaat::before {
		content: none;
	}

	.container-aanbod-fruitopmaat.is-ingeschoven::before {
		content: "";
	}
}

/* ── Bedrijfsnaam-suggesties (offerteformulier, Gravity Forms 46) ──────
   De lijst hangt onder het invoerveld; de wrapper eromheen komt uit
   includes/bedrijfsnaam-suggest.js. z-index hoog genoeg om over de velden
   eronder te vallen, en een eigen max-hoogte zodat tien voorstellen het
   formulier niet uit elkaar duwen. */
.bedrijfsnaam-suggest {
	position: relative;
}

.bedrijfsnaam-suggest-lijst {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #5A8900;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.bedrijfsnaam-suggest-lijst > li {
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}

/* geen chevron-bullet zoals bij de gewone lijsten in .Content/.Intro */
.bedrijfsnaam-suggest-lijst > li::before {
	content: none;
}

.bedrijfsnaam-suggest-lijst > li.is-actief {
	background: #F0F5E6;
}

/* plaats of domein achter de naam, iets rustiger */
.bedrijfsnaam-suggest-extra {
	display: block;
	font-size: 13px;
	color: #6b6b6b;
}

/* ── Aanbod: fruitbox-kaarten schakelen het paneel eronder ─────────────
   Opbouw en gedrag staan in includes/aanbod-fruitboxen.js. Een kaart met
   class "aanbod-kaart-<sleutel>" hoort bij het paneel met class
   "aanbod-paneel-<sleutel>". */

/* Elementor zet op elke container display:flex via een eigen variabele, en
   die wint van het display:none dat bij het hidden-attribuut hoort. Zonder
   deze regel blijven alle panelen dus gewoon staan. */
.aanbod-paneel[hidden] {
	display: none !important;
}

/* Elke kaart is een lichtgrijze kolom, zoals in het ontwerp: zonder vlak
   erachter zweefden beeld, tekst en vinkje los op de pagina. Een tint
   donkerder dan de kaarten onder "Extra hulp nodig?" (#F9FAF8): op dat grijs
   verdwijnt de kolom tegen het wit bijna. */
.aanbod-kaart {
	padding: 20px;
	border-radius: 20px;
	background-color: #F4F5F1;
}

/* De foto van de krat loopt tot over de zijranden van de kaart en het fruit
   steekt er bovenuit: speelser dan een foto die netjes binnen de padding
   blijft. De PNG's (3:2) hebben boven de krat ongeveer 14% lege ruimte; de
   bovenmarge is zo gekozen dat het fruit met ~10% van de beeldhoogte boven
   de kaart uitkomt. Omdat de marge in % van de kaartbreedte staat, schaalt
   dat mee op tablet en mobiel, waar de kaarten breder zijn.
   Alleen de foto zelf: de labels ("Schilt een hoop!", "Klant favoriet", …)
   zijn ook afbeeldingswidgets, maar absoluut gepositioneerd, en houden hun
   eigen breedte en positie uit Elementor. */
.aanbod-kaart .elementor-widget-image:not(.elementor-absolute) {
	/* !important: Elementor zet de breedte van een widget via zijn eigen,
	   specifiekere regel. */
	width: calc(100% + 60px) !important;
	max-width: none !important;
	margin: calc(-30px - 16%) -30px 0 !important;
}

.aanbod-kaart .elementor-widget-image:not(.elementor-absolute) img {
	display: block;
	width: 100%;
	max-width: none;
}

/* Ruimte voor het fruit dat boven de kaarten uitsteekt: erboven, en tussen
   de rijen zodra de kaarten over meer rijen staan. */
.e-grid:has(> .aanbod-kaart) {
	padding-top: 40px;
}

@media only screen and (max-width: 1024px) {
	.e-grid:has(> .aanbod-kaart) {
		row-gap: 70px;
	}
}

/* Alleen kaarten die echt iets openklappen voelen aan als knop; de class
   zet het script erop zodra het een bijbehorend paneel vindt. Bij hover
   komt de kolom iets naar voren: omhoog, een tikje groter en met schaduw
   eronder. De gekozen kaart blijft zo staan en wordt wit. */
.aanbod-kaart.is-schakelbaar {
	cursor: pointer;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background-color .25s ease;
}

.aanbod-kaart.is-schakelbaar:hover,
.aanbod-kaart.is-actief {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .08) !important;
}

.aanbod-kaart.is-actief {
	background-color: #fff;
}

/* Even indrukken bij de klik, daarna veert hij terug naar voren. */
.aanbod-kaart.is-schakelbaar:active {
	transform: translateY(-3px) scale(.99);
	transition-duration: .08s;
}

@media (prefers-reduced-motion: reduce) {
	.aanbod-kaart.is-schakelbaar,
	.aanbod-kaart.is-schakelbaar:hover,
	.aanbod-kaart.is-schakelbaar:active,
	.aanbod-kaart.is-actief {
		transform: none;
		transition: background-color .2s ease, box-shadow .2s ease;
	}
}

/* Zichtbare focus voor wie met het toetsenbord door de kaarten loopt. */
.aanbod-kaart.is-schakelbaar:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #5A8900);
	outline-offset: 4px;
}

/* De gekozen kaart: de kop in het huisstijlgroen. Het pijltje op het paneel
   wijst al naar deze kaart, dit maakt het ook duidelijk zonder dat je de
   twee naast elkaar hoeft te leggen. */
.aanbod-kaart.is-actief .elementor-widget-heading .elementor-heading-title {
	color: var(--e-global-color-primary, #5A8900);
}

/* "Meer informatie" onderaan elke kaart die iets openklapt; het script zet
   hem erin. Zonder die regel zag niemand dat de kaarten aanklikbaar zijn.
   margin-top: auto duwt hem naar de onderkant, zodat hij in een rij kaarten
   overal op dezelfde hoogte staat. Is de kaart uitgeklapt, dan draait het
   pijltje om.
   Alleen op tablet en mobiel: op desktop staan alle kaarten op één rij en
   opent het paneel er direct onder, dus daar is de hint overbodig. */
.aanbod-meer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--e-global-color-primary, #5A8900);
}

.aanbod-meer svg {
	flex: none;
	transition: transform .25s ease;
}

.aanbod-kaart[aria-expanded="true"] .aanbod-meer svg {
	transform: rotate(180deg);
}

@media only screen and (min-width: 1025px) {
	.aanbod-meer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aanbod-meer svg {
		transition: none;
	}
}

/* Op tablet en mobiel verhuist het paneel naar het raster, direct onder de
   rij van de gekozen kaart (zie includes/aanbod-fruitboxen.js). Daar beslaat
   het de hele breedte. De rij-afstand van het raster (70px, voor het fruit
   dat boven de kaarten uitsteekt) is boven het paneel te veel: het hoort bij
   de kaart erboven. */
.aanbod-paneel.is-ingeschoven {
	grid-column: 1 / -1;
	margin-top: -45px;
}

/* De handgeschreven krabbels uit het ontwerp ("Goed voor jou én de planeet!").
   Er zit geen schrijfletter in het theme — alleen Big John, Open Sans en Red
   Hat Display — dus dit is een benadering: schuin en in het groen. Wil je het
   echte handschrift, dan moet die webfont eerst toegevoegd worden. */
.aanbod-handschrift p {
	margin: 0;
	font-style: italic;
	font-weight: 600;
	line-height: 1.25;
	color: var(--e-global-color-primary, #5A8900);
}

/* ── Aanbod: regels in het paneel "Box met 1 fruitsoort" ──────────────
   Een regel is een flexrij van beeld, naam en aantallen, alle drie verticaal
   gecentreerd. Toch stond het aantal 20px hoger dan de naam: de kop en de
   alinea nemen hun eigen ondermarge mee, en die telt bij het centreren mee.
   Vandaar dat die marges hier uit gaan; de container zet de ruimte al met
   zijn flex-gap. Alleen in deze rijen, want in de blokken erboven is die
   ondermarge juist de ruimte tussen kop en tekst. */
.aanbod-regel .elementor-heading-title,
.aanbod-regel .elementor-widget-text-editor p {
	margin: 0;
}

/* ── Aanbod: USP-lijstje met vinkjes onder de intro ───────────────────
   In Elementor staat de lijst op "inline", zodat de punten op desktop naast
   elkaar staan. Op mobiel liepen ze daardoor door elkaar: twee op een regel,
   dan weer één. Daar altijd onder elkaar. Elementor kent geen
   responsive-instelling voor de lay-out van een lijst, vandaar hier.
   Zet de class "usp-list-icons" op de lijst-widget. */
@media only screen and (max-width: 767px) {
	.usp-list-icons .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 6px;
		margin-inline: 0;
	}

	.usp-list-icons .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 0;
	}

	/* het scheidingsstreepje tussen inline-items hoort niet bij een lijst */
	.usp-list-icons .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item::after {
		content: none;
	}
}

/* ── Aanbod: "Onze extra's" in dezelfde grijze kolommen ───────────────
   Dezelfde vlakken als de fruitbox-kaarten erboven, zodat fruitboxen en
   extra's samen als één assortiment lezen en de blokken daaronder als losse
   onderdelen. Geen hover: deze kaarten klikken nergens heen.
   Het hangt aan de class "aanbod-extras" op de grid-container, niet aan het
   element-ID: WPML geeft elke vertaling nieuwe ID's, dus op BE en DE zou een
   ID-selector niets raken. Bouw je het blok opnieuw op, zet de class er dan
   weer op. */
.aanbod-extras > .e-con {
	padding: 20px 15px;
	border-radius: 20px;
	background-color: #F4F5F1;
}

/* De foto's steken net als de kratten bij de fruitboxen over het vlak heen:
   10px buiten de zijkanten en met de bovenkant boven de kaart uit. Ook hier
   staat de bovenmarge in % van de kaartbreedte, zodat het meeschaalt.
   !important op de breedte: Elementor zet de foto in de widget zelf op 56px,
   met een specifiekere selector. */
.aanbod-extras > .e-con > .elementor-widget-image:not(.elementor-absolute) {
	width: calc(100% + 50px) !important;
	max-width: none !important;
	margin: calc(-20px - 16%) -25px 0 !important;
}

.aanbod-extras > .e-con > .elementor-widget-image:not(.elementor-absolute) img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
}

/* ruimte voor de foto's die boven de kaarten uitsteken */
.aanbod-extras {
	padding-top: 40px;
}

@media only screen and (max-width: 1024px) {
	.aanbod-extras {
		row-gap: 70px;
	}
}

/* ── USP-koppen: handgetekende streep onder het gemarkeerde woord ──────
   De vier koppen in het USP-blok op de homepage hebben elk hun eigen streep.
   De bestandsnaam volgt de class: .usp-title-1 hoort bij usp-title-1.png.
   Markeer het woord met een <span> in de kop, dan komt de streep daaronder.

   De streep is zo breed als het <span> en houdt via aspect-ratio de
   verhouding van de tekening aan. Zo groeit hij bij een langer woord in zijn
   geheel mee in plaats van uitgerekt te worden — bij een handgetekende lijn
   valt uitrekken meteen op.

   Let op: dit is een ander streepje dan dat bij .usp-title (de schuine
   aandachtsstreepjes rechtsboven). Die twee bijten elkaar niet, want een
   element heeft óf .usp-title óf .usp-title-<n>. */
.usp-title-1 span,
.usp-title-2 span,
.usp-title-3 span,
.usp-title-4 span {
	position: relative;
}

.usp-title-1 span::after,
.usp-title-2 span::after,
.usp-title-3 span::after,
.usp-title-4 span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	top: 100%;
	/* Iets omhoog getrokken: top:100% is de onderkant van het woordvak en dat
	   ligt .295em onder de basislijn, terwijl de staart van de g in
	   "ontzorgd" op .240em stopt. Met -.05em zit de streep dus net onder die
	   staart — verder omhoog en hij loopt door de letters heen. */
	margin-top: -.05em;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 100%;
	pointer-events: none;
}

/* Per kop de eigen streep, met de verhouding van het bestand zelf. */
.usp-title-1 span::after {
	aspect-ratio: 228 / 18;
	background-image: url(assets/images/usp-title-1.png);
}

.usp-title-2 span::after {
	aspect-ratio: 203 / 14;
	background-image: url(assets/images/usp-title-2.png);
}

.usp-title-3 span::after {
	aspect-ratio: 121 / 10;
	background-image: url(assets/images/usp-title-3.png);
}

.usp-title-4 span::after {
	aspect-ratio: 159 / 13;
	background-image: url(assets/images/usp-title-4.png);
}

/* ── Topborden-accordeon (presentatiepagina, "Jullie boodschap verdient
   aandacht!") ──────────────────────────────────────────────────────────
   Zet de class "topborden" op de accordeonwidget (Geavanceerd → CSS-classes).
   Elk item wordt een kaart in de stijl van de pagina: de zachte achtergrond
   van de kick-off-kaart met de groene rand van de aanbodpanelen. Binnenin
   krijgt het topbord twee derde van de breedte en de quote één derde.
   De selectors zijn bewust een tikje zwaarder dan Elementors eigen
   per-element-CSS (die op element-ID stylet), zodat dit op NL, BE en DE
   gelijk uitpakt. */
.topborden .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 15px;
	/* Elementor kleurt titel en plus/min-icoon via deze variabelen */
	--n-accordion-title-normal-color: var(--e-global-color-text, #000);
	--n-accordion-title-hover-color: var(--e-global-color-primary, #5A8900);
	--n-accordion-title-active-color: var(--e-global-color-primary, #5A8900);
	--n-accordion-icon-normal-color: var(--e-global-color-primary, #5A8900);
	--n-accordion-icon-hover-color: var(--e-global-color-primary, #5A8900);
	--n-accordion-icon-active-color: var(--e-global-color-primary, #5A8900);
}

.topborden .e-n-accordion .e-n-accordion-item {
	background-color: #f9faf8;
	border: 2px solid #5A8900;
	border-radius: 20px;
	overflow: hidden;
}

.topborden .e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title {
	padding: 18px 30px;
	border: 0;
	background-color: transparent;
	gap: 15px;
}

.topborden .e-n-accordion .e-n-accordion-item-title-text {
	font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.topborden .e-n-accordion .e-n-accordion-item-title-icon svg {
	width: 16px;
	height: 16px;
}

/* de inhoud: topbord 2/3, quote 1/3 */
.topborden .e-n-accordion .e-n-accordion-item > .e-con.e-grid {
	--e-con-grid-template-columns: 2fr 1fr;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	gap: 40px;
	padding: 0 30px 30px;
	border: 0;
	background-color: transparent;
}

.topborden .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.topborden .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title {
	font-size: 24px;
	line-height: 1.35;
	text-align: left;
}

@media only screen and (max-width: 1024px) {
	.topborden .e-n-accordion .e-n-accordion-item > .e-con.e-grid {
		gap: 25px;
	}

	.topborden .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title {
		font-size: 20px;
	}
}

/* mobiel: onder elkaar, quote onder het topbord */
@media only screen and (max-width: 767px) {
	.topborden .e-n-accordion .e-n-accordion-item > .e-n-accordion-item-title {
		padding: 15px 20px;
	}

	.topborden .e-n-accordion .e-n-accordion-item-title-text {
		font-size: 16px;
	}

	.topborden .e-n-accordion .e-n-accordion-item > .e-con.e-grid {
		--e-con-grid-template-columns: 1fr;
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 20px 20px;
	}

	.topborden .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title {
		font-size: 18px;
		text-align: center;
	}
}

/* ── Rekentool ────────────────────────────────────────────────────────
   De pagina is in Elementor gebouwd (container met class "rekentool");
   includes/rekentool.js maakt de kaarten aanklikbaar. Hier alleen wat
   Elementor niet zelf kan: de gekozen/uitgegrijsde staat van de kaarten,
   de stappenbalk, de schuif en de plekken die de tool invult. Kleuren,
   letters, randen en ruimtes staan in Elementor. */
.rekentool {
	--rt-groen: var(--e-global-color-primary, #5A8900);
	--rt-groen-donker: #2F5A12;
	--rt-groen-licht: #F3F8EC;
	--rt-rand: #E1E6DB;
	--rt-grijs: #5F6B61;
	--rt-oranje: #E94C00;
}

.rekentool .rt-verborgen {
	display: none !important;
}

/* het thema geeft koppen en alinea's marges; de ruimtes staan hier in Elementor */
.rekentool .elementor-heading-title {
	margin: 0;
}

.rekentool .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* keuzekaarten */
.rekentool .rt-optie {
	position: relative;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.rekentool .rt-optie:hover {
	box-shadow: 0 6px 20px rgba(29, 42, 31, .06);
}

.rekentool .rt-optie.is-gekozen {
	border-color: var(--rt-groen) !important;
	background-color: var(--rt-groen-licht) !important;
	box-shadow: inset 0 0 0 1px var(--rt-groen);
}

.rekentool .rt-optie:focus-visible {
	outline: 3px solid rgba(90, 137, 0, .35);
	outline-offset: 2px;
}

.rekentool .rt-optie.is-uit {
	cursor: not-allowed;
	opacity: .55;
	box-shadow: none;
}

/* rondje rechtsboven, met vinkje als gekozen */
.rekentool .rt-optie::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	border: 1.5px solid #CFD5CA;
	border-radius: 50%;
	background: #fff center / 12px no-repeat;
	transition: background-color .2s, border-color .2s;
	pointer-events: none;
}

.rekentool .rt-optie.is-gekozen::after,
.rekentool .rt-groep-extras .rt-optie.is-gekozen .rt-naam .elementor-heading-title::before {
	border-color: var(--rt-groen);
	background-color: var(--rt-groen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* niet te kiezen (bijv. de XXL display onder het minimum): geen rondje */
.rekentool .rt-optie.is-uit::after {
	display: none;
}

/* extra's: geen rondje, maar een vierkant vakje voor de naam */
.rekentool .rt-groep-extras .rt-optie::after {
	display: none;
}

.rekentool .rt-groep-extras .rt-naam .elementor-heading-title {
	position: relative;
	padding-left: 28px;
}

.rekentool .rt-groep-extras .rt-naam .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 1.5px solid #CFD5CA;
	border-radius: 4px;
	background: #fff center / 11px no-repeat;
}

.rekentool .rt-melding {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--rt-oranje);
}

/* nummer voor elke vraag */
.rekentool .rt-nummer {
	flex: none;
}

.rekentool .rt-nummer .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--rt-groen-donker);
}

.rekentool .rt-stap {
	scroll-margin-top: 140px;
}

/* stappenbalk */
.rekentool .rt-stap-link {
	position: relative;
	text-decoration: none;
}

/* verbindingslijn naar de volgende stap */
.rekentool .rt-stap-link:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 15px;
	left: calc(50% + 20px);
	right: calc(-50% + 20px);
	height: 2px;
	background: var(--rt-rand);
}

.rekentool .rt-stap-link.is-klaar::after {
	background: var(--rt-groen);
}

.rekentool .rt-stap-nr .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--rt-rand);
	border-radius: 50%;
	background: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}

.rekentool .rt-stap-link.is-klaar .rt-stap-nr .elementor-heading-title {
	border-color: var(--rt-groen);
	color: var(--rt-groen);
}

.rekentool .rt-stap-link.is-actief .rt-stap-nr .elementor-heading-title {
	border-color: var(--rt-groen-donker);
	background: var(--rt-groen-donker);
	color: #fff;
}

.rekentool .rt-stap-link.is-actief .rt-stap-label .elementor-heading-title {
	color: var(--rt-groen-donker);
	font-weight: 600;
}

.rekentool .rt-stap-label .elementor-heading-title {
	text-align: center;
}

.rekentool .rt-bel {
	text-decoration: none;
}

/* schuif ([rekentool_schuif]) */
.rt-schuif {
	--pct: calc((var(--waarde) - var(--min)) / (var(--max) - var(--min)) * 100%);
	position: relative;
	padding-top: 34px;
}

.rt-schuif-bubbel {
	position: absolute;
	top: 0;
	/* volgt de duim (22px breed) */
	left: calc(11px + (100% - 22px) * (var(--waarde) - var(--min)) / (var(--max) - var(--min)));
	transform: translateX(-50%);
	padding: 3px 12px;
	border-radius: 6px;
	background: var(--rt-groen, #5A8900);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.rt-schuif input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rt-schuif input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(to right, var(--rt-groen, #5A8900) var(--pct), #E2E6DC var(--pct));
}

.rt-schuif input[type="range"]::-moz-range-track {
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(to right, var(--rt-groen, #5A8900) var(--pct), #E2E6DC var(--pct));
}

.rt-schuif input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -6px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--rt-groen-donker, #2F5A12);
	box-shadow: 0 0 0 2px var(--rt-groen, #5A8900), 0 2px 6px rgba(0, 0, 0, .2);
}

.rt-schuif input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--rt-groen-donker, #2F5A12);
	box-shadow: 0 0 0 2px var(--rt-groen, #5A8900), 0 2px 6px rgba(0, 0, 0, .2);
}

.rt-schuif input[type="range"]:focus-visible {
	outline: none;
}

.rt-schuif input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 2px var(--rt-groen, #5A8900), 0 0 0 7px rgba(90, 137, 0, .3);
}

.rt-schuif-schaal {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 12px 0 0;
	padding: 0 3px;
	font-size: 13px;
	color: var(--rt-grijs, #5F6B61);
}

.rt-schuif-schaal li {
	width: 16px;
	text-align: center;
	cursor: pointer;
}

/* indicatieblok */
@media only screen and (min-width: 768px) {
	.rekentool .rt-indicatie {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}

	/* een rt-indicatie binnen een rt-indicatie (bijv. het groene blok in een
	   kolom met de goede doelen eronder): alleen de buitenste plakt, dan
	   scrollt alles erin mee */
	.rekentool .rt-indicatie .rt-indicatie {
		position: static;
	}
}

.rekentool .rt-bedrag {
	margin: 0 .15em;
	font-size: 30px;
	font-weight: 800;
	white-space: nowrap;
}

.rekentool .rt-per {
	color: #1D2A1F;
}

.rekentool .rt-uit-afb {
	position: relative;
}

.rekentool .rt-badge {
	position: absolute;
	top: -40px;
	right: -30px;
	width: auto;
}

.rekentool .rt-badge .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 60px;
	height: 78px;
	/* de appel heeft bovenaan een blaadje: tekst in het ronde deel eronder */
	padding: 26px 6px 4px;
	background: url(assets/images/dec-apple-green.svg) no-repeat center / contain;
	text-align: center;
	transform: rotate(-8deg);
}

.rekentool .rt-uit-meer {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--rt-rand);
}

.rekentool .rt-meer-regel {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.rekentool .rt-doel {
	text-decoration: none;
}

.rekentool .rt-doel:hover .elementor-heading-title {
	color: var(--rt-groen-donker);
	text-decoration: underline;
}

.rekentool .rt-doel-logo img {
	height: 40px;
	object-fit: contain;
}

.rekentool .rt-knop-onder .fa-lock {
	margin-right: 4px;
	color: var(--rt-groen-donker);
}

/* USP's */
.rekentool .rt-usp {
	max-width: 220px;
}

.rekentool .rt-usp .elementor-icon {
	border-width: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
	.rekentool .rt-optie,
	.rekentool .rt-optie::after,
	.rekentool .rt-stap-nr .elementor-heading-title {
		transition: none;
	}
}

@media only screen and (max-width: 1024px) {
	.rekentool .rt-stappen {
		max-width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	/* op mobiel alleen de cijfers, met het label van de huidige stap eronder */
	.rekentool .rt-stappen {
		padding-bottom: 18px;
	}

	.rekentool .rt-stap-label {
		display: none;
	}

	.rekentool .rt-stap-link.is-actief .rt-stap-label {
		display: block;
		position: absolute;
		top: 36px;
		white-space: nowrap;
	}

	.rekentool .rt-usp {
		max-width: none;
	}

	.rekentool .rt-hero-img img {
		max-height: 200px;
		object-fit: contain;
	}

	/* meubels onder elkaar: plaatje links */
	.rekentool .rt-groep-meubel .rt-optie {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		align-content: center;
		column-gap: 16px;
		padding-right: 44px !important;
	}

	.rekentool .rt-groep-meubel .rt-optie > .elementor-widget-image {
		grid-row: span 3;
	}

	.rekentool .rt-groep-meubel .rt-optie img {
		height: 90px !important;
	}

	.rekentool .rt-schuif-schaal {
		font-size: 12px;
	}
}