/* ----------------------------------------------------------------
	General
-----------------------------------------------------------------*/

/* Filson Pro Book (400) — zelf gehost; de Adobe-kit (rib8xfz) levert alleen
   700/800/900. Zelfde family-naam, dus de browser voegt de gewichten samen. */
@font-face {
	font-family: 'filson-pro';
	src: url('../fonts/FilsonPro-Book.woff2?v=5ef02282') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--cnvs-themecolor: #583ca3;
	--cnvs-themecolor-rgb: 88, 60, 163;;

	--cnvs-themecolor-darker: #473083;

	--cnvs-body-bg: var(--cnvs-themecolor-darker);

	--cnvs-body-font: "area-normal", sans-serif;
	/* Was "campaign-serif": een schreefletter uit het template-ontwerp die
	   nergens anders op de site voorkomt. Hij raakte alleen .font-primary, en
	   dus de vier opsommingen in de hero van /rent -- die daardoor als enige
	   tekst op de site met schreef stonden. */
	--cnvs-primary-font: "area-normal", sans-serif;

	--cnvs-side-header-width: 300px;

	--cnvs-side-panel-size: 360px;
}

.shape-divider-fill {
	fill: var(--bs-white);
}

#content {
	background-color: var(--bs-white);
}

.dark {
	--cnvs-header-bg: #583ca3;
	--cnvs-header-sticky-bg: #583ca3;
	--cnvs-footer-bg: var(--cnvs-themecolor-darker);
}

#header {
	--cnvs-primary-menu-font: var(--cnvs-body-font);
	--cnvs-primary-menu-font-weight: 600;
	/* --cnvs-primary-menu-color: #9b87d1; */
	--cnvs-primary-menu-color: #b9a3f5;
	--cnvs-primary-menu-hover-color: var(--cnvs-contrast-1000);
	--cnvs-primary-menu-tt:	none;
	--cnvs-primary-menu-ls:	0;
	--cnvs-primary-menu-font-size: 0.95rem;
	--cnvs-header-misc-icons-size: 1.5rem;
}

.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 20px;
}

.slider-element {
	margin-top: -1px;
	background-color: var(--cnvs-themecolor-darker);
}

#header-wrap .container {
	background-color: var(--cnvs-themecolor);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /* --bs-gutter-x: 40px; */
}

#side-panel {
	--cnvs-side-panel-bg: var(--cnvs-themecolor);
}

.hero-diagonal {
	position: absolute;
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
	clip-path: polygon(0 82%, 100% 0, 100% 100%, 0% 100%);
	background-color: var(--cnvs-themecolor);;
}

.iconlist li i {
	--cnvs-iconlist-size: 1.5rem;
	--cnvs-iconlist-offset: 4px;
	font-size: var(--cnvs-iconlist-size);
}

.header-misc-element,
.header-misc-icon {
	margin: 0 12px;
}

/* Twee regels die het sjabloon overal nodig heeft, maar die los stonden in
   home.css, rent.css, zakelijk.css en contact.css. Een pagina die geen van die
   vier laadt miste ze allebei -- vandaar dat ze hier staan, voor alle pagina's.

   1. "Contact" en het telefoonnummer staan op smalle schermen al in het
      uitklapmenu; de kopregel-variant verdubbelt ze en maakt de kop 50px hoger.
   2. De actiebalk is op desktop position:fixed. Op smalle schermen mag hij
      meegroeien met twee regels tekst, en dan moet hij wél ruimte innemen --
      anders schuift hij over de eerste kop van de pagina heen. */
@media (max-width: 991px) {
	.header-misc {
		display: none !important;
	}

	.rent-bar {
		position: relative !important;
	}
}

.side-panel-trigger a {
	background-color: #FFF;
	color: var(--cnvs-themecolor);;
	display: block;
    width: 24px;
    height: 24px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
}

body:not(.is-expanded-menu) .side-panel-trigger a {
	margin-right: 0.5rem;
}

.swiper-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition-timing-function: linear !important;
}

:not(.active) .tab-icon-active img:last-child,
.active .tab-icon-active img:first-child {
	display: none;
}

.active .tab-icon-active img:last-child {
	display: block;
}

.testimonial .flex-control-nav {
	position: relative;
	justify-content: flex-start;
	top: 0;
	left: 0;
	right: auto;
	margin-top: 20px;
}

.nav-link span {
	font-weight: 600;
}

.nav-link.active span {
	font-weight: 700;
}

.canvas-alt-tabs.tabs-bb .nav-link.active {
	position: relative;
	border-bottom: 0;
	padding-bottom: 1rem;
}

.canvas-alt-tabs.tabs-bb .nav-link.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 10%;
	height: 0.25rem;
	border-radius: 2rem;
	background-color: var(--cnvs-themecolor);
	transform: translateX(-50%);
}









@media (min-width: 576px) {
  #telefoon {
	display:visible !important;
  }
  #contact-mobiel{
	display:visible;
  }
}
@media (min-width: 768px) {
  #telefoon {
	display:visible !important;
  }
  #contact-mobiel{
	display:visible;
  }
}
@media (min-width: 992px) {
  #telefoon {
	display:none !important;
  }
  #contact-mobiel{
	display:none;
  }
}
@media (min-width: 1200px) {
  #telefoon {
	display:none !important;
  }
  #contact-mobiel{
	display:none;
  }
}
@media (min-width: 1400px) {
  #telefoon {
	display:none !important;
  }
  #contact-mobiel{
	display:none;
  }
}





.btn-blue {
  /* On-brand primary CTA: filled themecolor pill (purple site-wide, blue on the
     rent pages via --cnvs-themecolor) with white text and a darker hover. */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cnvs-themecolor);
  --bs-btn-border-color: var(--cnvs-themecolor);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cnvs-themecolor-darker);
  --bs-btn-hover-border-color: var(--cnvs-themecolor-darker);
  --bs-btn-focus-shadow-rgb: 88, 60, 163;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cnvs-themecolor-darker);
  --bs-btn-active-border-color: var(--cnvs-themecolor-darker);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--cnvs-themecolor);
  --bs-btn-disabled-border-color: var(--cnvs-themecolor);
  --bs-btn-border-width: 2px;
}


.btn-blue-2 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #659bdc;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #659bdc;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #659bdc;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-btn-border-width: 5px !important;
}


/* Keep the Bootstrap primary button (contact/rent forms) on the page's own
   theme colour — purple site-wide, blue on the rent pages — instead of the
   default Bootstrap blue, so form buttons match the rest of the site. */
.btn-primary {
  --bs-btn-bg: var(--cnvs-themecolor);
  --bs-btn-border-color: var(--cnvs-themecolor);
  --bs-btn-hover-bg: var(--cnvs-themecolor-darker);
  --bs-btn-hover-border-color: var(--cnvs-themecolor-darker);
  --bs-btn-active-bg: var(--cnvs-themecolor-darker);
  --bs-btn-active-border-color: var(--cnvs-themecolor-darker);
}






/*----------------------------
@media (min-width: 576px) {
  #airco-bg {
	background-size: auto;
	background-size: contain;
  }
 
}
@media (min-width: 768px) {
  #airco-bg {
	background-size: auto;
	background-size: contain;
  }
 
}
@media (min-width: 992px) {
  #airco-bg {
	
  }
 
}
@media (min-width: 1200px) {
  #airco-bg {
	
  }
  
}
@media (min-width: 1400px) {
  #airco-bg {
	
  }
----------------------------*/





#header-wrap {
  border-bottom: 1px solid #00000061 !important;
}







#footer-line-primary-menu {
	display: visible;
}

@media (min-width:768px) {
	#footer-line-primary-menu {
		display: none;
	}
	#footer-primary-menu {
		width: 25%;
	}
}

#logo-footer {
	margin-top: 0;
	margin-bottom: 20px;
}

@media (min-width:585px) {
	#logo-footer {
		margin-top: 15px;
		margin-bottom: 0;
	}
}










.contact-number:hover {
	color: #fff;
}



.testimonials-rating {
	color: bisque;
}


.injected-svg {
	
}


.modal-header h4 {
	font-family: 'area-normal', sans-serif;
}




@media (max-width:767px) {
	.certified-installers {
		width: 100% !important;
	}
	
	.certified-logo {
		width: 25% !important;
	}
	
	.hero-diagonal {
    	background-size: auto 100%;
   		background-position: bottom;
		/* display: none; */
		/* box-shadow: none !important; */
		
	}
}




.footer-big-contacts a {
		color: var(--cnvs-heading-color);
	}




.deel-ons-btns {
	width: 170px;
	color: #2a314e !important;
}

.deel-ons-btns:hover {
	width: 200px;
	color: #fff !important;
}




/* --------------------------------------------------------------------------
   Summer-promo bar ("Deze zomer een airco …"): a light sheen that sweeps
   across the bar every few seconds — a gentle "cool glint", not a marquee.
   The sheen sits over the bar rather than inside the letters, so the text
   stays solid white and legibility never suffers. Holds still for
   prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.rent-bar {
	overflow: hidden;
}

.rent-bar::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 38%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .18) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translateX(-160%);
	animation: rent-bar-sheen 7s ease-in-out infinite;
	pointer-events: none;
}

@keyframes rent-bar-sheen {
	0%, 40%   { transform: translateX(-160%); }  /* rest: sheen parked off the left */
	75%, 100% { transform: translateX(360%); }   /* sweep left → right, off the right */
}

@media (prefers-reduced-motion: reduce) {
	.rent-bar::after {
		animation: none;
		display: none;
	}
}




/* Soft drop-shadow for white hero/section titles that sit over photos or
   gradients, so they stay legible over busy backgrounds. Single source of
   truth for every such title (see .title-shadow usages across the pages). */
.title-shadow {
	text-shadow: 0 1px 6px rgba(0, 0, 0, .28);
}




/* Text selection: keep the on-brand themecolor highlight (purple site-wide,
   blue on the rent pages) but force readable white text. The template used
   color:var(--cnvs-body-bg), which turns dark inside data-bs-theme="dark"
   sections (e.g. the "Airco verkoelt én verwarmt." block), making selected
   text nearly unreadable. White on the themecolor stays legible everywhere. */
::-moz-selection {
	background: var(--cnvs-themecolor);
	color: #fff;
	text-shadow: none;
}
::selection {
	background: var(--cnvs-themecolor);
	color: #fff;
	text-shadow: none;
}


/* Summer-promo bar: on narrow phones the single line overflows the fixed-height
   bar, so let it wrap and give the bar auto height (it is position:relative on
   mobile, so it can grow without covering content). */
@media (max-width: 575px) {
	.rent-bar {
		height: auto !important;
		min-height: 35px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.rent-bar-promo {
		white-space: normal !important;
		font-size: 0.75rem;
		line-height: 1.25;
		text-align: center;
	}
}

/* Cookiebanner (koelgemak-consent.js) */
#kg-consent {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 10000;
	max-width: 430px;
	margin-right: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(32, 20, 63, 0.28);
	padding: 18px 20px;
	font-size: 0.9rem;
	line-height: 1.45;
}

#kg-consent .kg-consent-tekst {
	margin: 0 0 12px;
	color: #333;
}

#kg-consent .kg-consent-tekst a {
	color: var(--cnvs-themecolor, #583ca3);
	text-decoration: underline;
}

#kg-consent .kg-consent-knoppen {
	display: flex;
	gap: 10px;
}

#kg-consent .kg-consent-knop {
	flex: 1 1 0;
	border: 0;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

#kg-consent .kg-consent-accepteer {
	background: var(--cnvs-themecolor, #583ca3);
	color: #fff;
}

#kg-consent .kg-consent-weiger {
	background: #e9e6f2;
	color: #2a2140;
}

/* --------------------------------------------------------------------------
   Water-cinemagraph (verademend): statische luchtfoto waarvan alleen de zee
   beweegt. Twee lagen dragen elk een vast SVG-rimpelfilter (dat wordt dus
   eenmalig gerasterd); de animatie zelf is uitsluitend opacity + transform,
   zodat de compositor het werk doet en er niets per frame herberekend wordt.
   -------------------------------------------------------------------------- */
.water-cinemagraph {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.water-cinemagraph .water-base {
	display: block;
	width: 100%;
	height: auto;
}

/* Glinstering: het zeeoppervlak is een vrijwel egaal verloop, waardoor
   vervorming er nauwelijks op te zien is. Wat wél leest als bewegend water is
   licht. Deze laag schuift een tileable lichtpatroon over de zee; soft-light
   laat middengrijs ongemoeid, dus alleen de lichte en donkere banen komen door.
   De verschuiving is exact één tegel, dus de lus is naadloos. */
.water-cinemagraph .water-shimmer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 45%;
	overflow: hidden;
	mix-blend-mode: soft-light;
	-webkit-mask-image: linear-gradient(to right, transparent 7%, #000 35%);
	mask-image: linear-gradient(to right, transparent 7%, #000 35%);
}

/* De binnenlaag steekt ruim buiten beeld en verschuift met transform (de
   compositor doet dat werk). background-position animeren gaf schokken:
   Chrome tekent die eigenschap niet elke frame opnieuw. */
.water-cinemagraph .water-shimmer-move {
	position: absolute;
	top: -540px;
	right: -540px;
	bottom: -540px;
	left: -540px;
	background-image: url(../images/noise-tile.webp?v=8d87f374);
	background-repeat: repeat;
	will-change: transform;
}

/* Twee patronen van verschillend formaat die verschillende kanten op drijven:
   waar ze elkaar kruisen lijkt het oppervlak te veranderen in plaats van te
   schuiven. Elke lus verplaatst exact een hele tegel, dus naadloos. */
.water-cinemagraph .water-shimmer-1 { opacity: .3; }

.water-cinemagraph .water-shimmer-1 .water-shimmer-move {
	background-size: 500px 500px;
	animation: water-shimmer-1 26s linear infinite;
}

.water-cinemagraph .water-shimmer-2 { opacity: .26; }

.water-cinemagraph .water-shimmer-2 .water-shimmer-move {
	background-size: 380px 380px;
	animation: water-shimmer-2 37s linear infinite;
}

@keyframes water-shimmer-1 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-500px, 500px, 0); }
}

@keyframes water-shimmer-2 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-380px, -380px, 0); }
}






	

/* --------------------------------------------------------------------------
   Verfrissend: video in plaats van een foto. Bootstrap geeft alleen img een
   vloeiende breedte, dus dat regelen we hier zelf. De wrapper snijdt het beeld
   op de afgeronde hoeken bij; Safari klipt een video niet altijd op een
   border-radius van het element zelf.
   -------------------------------------------------------------------------- */
.shower-video {
	/* Zonder deze begrenzing groeit de wrapper naar de eigen breedte van de
	   video (1280px) en steekt hij buiten de kolom: Bootstrap begrenst alleen
	   img, niet video. */
	max-width: 100%;
	overflow: hidden;
	line-height: 0;
}

.shower-video .shower-video-el {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Zonlicht door de wolken (verkwikkend): over deze luchtopname trekken
   wolkenschaduwen. Twee lagen met hetzelfde wolkenpatroon schuiven in een
   andere richting en op een ander tempo over de foto; waar ze elkaar kruisen
   ontstaan steeds nieuwe licht- en schaduwplekken, zodat het beeld nooit
   herkenbaar herhaalt. soft-light laat middengrijs ongemoeid: lichte delen
   van het patroon zetten de zon aan, donkere brengen schaduw.
   Elke lus verschuift een heel aantal tegels, dus naadloos.
   -------------------------------------------------------------------------- */
.sunlight-photo {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.sunlight-photo .sunlight-base {
	display: block;
	width: 100%;
	height: auto;
}

.sunlight-photo .sunlight-clouds {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

/* De laag steekt precies zover buiten beeld als hij verschuift — naar rechts
   en naar boven, want beide lagen drijven naar linksonder. Ruimer maken kost
   alleen maar geheugen. */
.sunlight-photo .sunlight-clouds-move {
	position: absolute;
	background-image: url(../images/clouds-tile.webp?v=af901d32);
	background-repeat: repeat;
	bottom: 0;
	left: 0;
}

.sunlight-photo .sunlight-clouds-1 { opacity: .45; }

.sunlight-photo .sunlight-clouds-1 .sunlight-clouds-move {
	top: -900px;
	right: -900px;
	background-size: 900px 900px;
	animation: sunlight-drift-1 22s linear infinite;
}

.sunlight-photo .sunlight-clouds-2 { opacity: .35; }

.sunlight-photo .sunlight-clouds-2 .sunlight-clouds-move {
	top: -620px;
	right: -1240px;
	background-size: 620px 620px;
	animation: sunlight-drift-2 31s linear infinite;
}

/* De verschuiving is een exact veelvoud van de tegelmaat (1x900 en 2x620 /
   1x620), anders springt het patroon zichtbaar bij het herstarten van de lus. */
@keyframes sunlight-drift-1 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-900px, 900px, 0); }
}

@keyframes sunlight-drift-2 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-1240px, 620px, 0); }
}

/* --------------------------------------------------------------------------
   Verantwoord: het blad wiegt alsof het in stilstaande lucht hangt. Het is uit
   zijn witte achtergrond gesneden en staat op een witte kaart, zodat alleen
   het blad beweegt en het kader stil blijft. Zweven en kantelen hebben een
   verschillende omlooptijd, waardoor de beweging zich niet herkenbaar
   herhaalt. Alleen transform, dus de compositor doet het werk.
   -------------------------------------------------------------------------- */
.leaf-card {
	background: #fff;
	overflow: hidden;
	width: 100%;
	line-height: 0;
}

.leaf-card .leaf-drift {
	display: block;
	animation: leaf-drift 11s ease-in-out infinite;
}

.leaf-card .leaf-card-img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 62% 58%;
	animation: leaf-tilt 17s ease-in-out infinite;
}

@keyframes leaf-drift {
	0%, 100% { transform: translate3d(0, -7px, 0); }
	50%      { transform: translate3d(0, 7px, 0); }
}

@keyframes leaf-tilt {
	0%, 100% { transform: rotate(-1.3deg); }
	50%      { transform: rotate(1.3deg); }
}

/* --------------------------------------------------------------------------
   Uitschakelaars voor de fotoanimaties. Staan bewust achteraan en met een
   specificiteit die minstens gelijk is aan die van de animatieregels: die
   gebruiken de animation-shorthand, en die zet animation-play-state weer op
   running. Een zwakkere of eerdere regel verliest het daardoor.
   -------------------------------------------------------------------------- */

/* Pauzeren zolang de foto buiten beeld is (js/koelgemak-reveal.js). */
.water-cinemagraph.motion-paused .water-shimmer-move,
.sunlight-photo.motion-paused .sunlight-clouds-move,
.leaf-card.motion-paused .leaf-drift,
.leaf-card.motion-paused .leaf-card-img {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	/* Toegankelijkheid: zonder animatie blijven de stilstaande foto's staan. */
	.water-cinemagraph .water-shimmer,
	.sunlight-photo .sunlight-clouds {
		display: none;
	}

	/* Het blad is hier de inhoud zelf en blijft dus staan; alleen stil. */
	.leaf-card .leaf-drift,
	.leaf-card .leaf-card-img {
		animation: none;
	}
}