{yes_vars assign="YES" contents=1}

{config_load file="$language/lang_$language.conf" section="categorie_listing"}
	
	<div class="rightContent columns small-12 medium-12 large-12">
	<div class="row">
			<h1 class="h1_plist">Türen von Fensterbauprofi.de</h1>
		</div>
		
		{* $MODULE_products_in_category *}
		{* $MODULE_new_products *}
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_78.text}{$YES.CONTENT.ID_78.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		<section id="quality">
		  <div class="quality-img"></div>
			<div class="title">
				<p class="cl-panel-header-main">QUALITÄT AUS EINER HAND</p>
			</div>
		</section>
		
				
					
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_74.text}{$YES.CONTENT.ID_74.text}{/if}
				</div>
			</div>
		</div>
		</div>
		

		
		<div class="cl-panel-background-info small-12 large-expand columns">
			<div class="container-fluid" style="padding-left: 10px; padding-right: 10px; padding-bottom: 15px;">
				<div class="featured-image-block-grid">
					  <div class="row large-up-4 small-up-2">
					  
						<div class="featured-image-block column">
	
							<img src="https://fensterbauprofi.de/files/product-image/innotherm-tueren-konfigurator-fensterbauprofi-1.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innotherm-tueren-konfigurator-fensterbauprofi-2.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innotherm-tueren-konfigurator-fensterbauprofi-3.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innotherm-tueren-konfigurator-fensterbauprofi-4.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
					  </div>
				</div>
			</div>
		</div>


	
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_77.text}{$YES.CONTENT.ID_77.text}{/if}
				</div>
			</div>
		</div>
		</div>
		

		
		<div class="cl-panel-background-info small-12 large-expand columns">
			<div class="container-fluid" style="padding-left: 10px; padding-right: 10px; padding-bottom: 15px;">
				<div class="featured-image-block-grid">
					  <div class="row large-up-4 small-up-2">
					  
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innentueren-fensterbauprofi-1.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innentueren-fensterbauprofi-2.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innentueren-fensterbauprofi-3.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/innentueren-fensterbauprofi-4.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
					  </div>
				</div>
			</div>
		</div>
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_75.text}{$YES.CONTENT.ID_75.text}{/if}
				</div>
			</div>
		</div>
		</div>
		

		
		<div class="cl-panel-background-info small-12 large-expand columns">
			<div class="container-fluid" style="padding-left: 10px; padding-right: 10px; padding-bottom: 15px;">
				<div class="featured-image-block-grid">
					  <div class="row large-up-4 small-up-2">
					  
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/schiebetueren-fensterbauprofi-1.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/schiebetueren-fensterbauprofi-2.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/schiebetueren-fensterbauprofi-3.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
						<div class="featured-image-block column">

							<img src="https://fensterbauprofi.de/files/product-image/schiebetueren-fensterbauprofi-4.jpg" />
							<!----- <p class="text-center featured-image-block-title"></p> -->

						</div>
						
					  </div>
				</div>
			</div>
		</div>
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_76.text}{$YES.CONTENT.ID_76.text}{/if}
				</div>
			</div>
		</div>
		</div>
		

		
		<script>
		document.addEventListener('DOMContentLoaded', function() {
			const loadPdfButtons = document.querySelectorAll('.load-pdf-btn');

			loadPdfButtons.forEach(button => {
				button.addEventListener('click', loadPDF);
			});

			function loadPDF(event) {
				event.preventDefault();

				const button = event.currentTarget;
				const pdfPlaceholder = button.closest('.pdf-placeholder');
				const loadingText = pdfPlaceholder.querySelector('.loading-text');
				const pdfUrl = button.getAttribute('data-pdf-url');

				button.style.display = 'none';
				loadingText.style.display = 'block';

				const iframe = document.createElement('iframe');
				iframe.src = pdfUrl + "#view=FitH";
				iframe.style.width = "100%";
				iframe.style.height = "100%";
				iframe.style.border = "none";

				iframe.onload = function() {
					loadingText.style.display = 'none';
				};

				pdfPlaceholder.innerHTML = '';
				pdfPlaceholder.appendChild(iframe);
			}
		});
		</script>