{config_load file="$language/lang_$language.conf" section="index"}

{yes_vars assign="YES" contents=1}

<script type="text/javascript">
{literal}
$('*[data-equalizer] img').on('load', function() {
new Foundation.Equalizer($("body"));
});
//{/literal}
</script> 


<style type="text/css">
{literal}
  .gms_sliderbox {position:relative;}
  #gms_slider_nav {left: 60px; z-index:2; position:absolute; display:block; top:100%; margin:0; margin-top:-28px; padding: 0!important; list-style-type: none; font-weight: normal;  line-height: 1.0em;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; overflow:hidden;display:none;}
  #gms_slider_nav  li {margin:0; padding:0; float: left; text-align:center; line-height: 1.0em; }
  #gms_slider_nav li a {display: none!Important;background:#444; display: block; font-size:12px; font-weight:normal; padding: 2px 6px; text-decoration: none; color: #fff; transition: all 0.3s;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s; margin-right: 4px; border-radius:8px;-moz-border-radius:8px; border-radius:8px;}
  #gms_slider_nav li.current a {background-color:blue; }
  #gms_slider_nav li a:hover {background-color:red; transition: all 0.3s;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s; }
  .gms_slider_offstage {visibility:hidden;display:none;}
  .gms_slider_default {visibility:visible;}
{/literal}

.carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 50vh; /* Set max height of the slider */
	min-height: 400px;
}

.carousel-item {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	color: white;
	text-align: left; /* Align text to the left */
	padding: calc(10px + 2vw); /* Use calc to scale padding based on viewport width */
}

.carousel-item.active {
	display: block;
}

.carousel-item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); /* Black overlay with transparency */
	z-index: 1; /* Ensure overlay is above the background */
}

.content-box {
	position: relative; /* Position relative to allow overlay */
	z-index: 2; /* Ensure content is above the overlay */
	padding: calc(5px + 1vw); /* Use calc to scale padding based on viewport width */
	border-radius: 10px;
}

.logo {
	max-width: calc(100px + 4vw); /* Use calc to scale logo size */
	padding-bottom: calc(10px + 1vw); /* Use calc for bottom padding */
}

.h1-carousel {
	font-family: 'Tahoma', sans-serif; /* Set font for h1 */
	font-weight: bold; /* Bold font */
	font-size: calc(1.5em + 1vw); /* Use calc to scale font size */
	margin: 0; /* Decrease space below h1 (adjust as needed) */
}

.p-carousel {
	font-family: 'Titillium Web', sans-serif; /* Set font for p */
	margin: 0; /* Increase space below p (adjust as needed) */
	padding-bottom: 20px;
}

.button {
	background-color: #69c314; /* Button color */
	color: white;
	padding: 10px 20px; /* Use calc for button padding */
	text-decoration: none;
	border-radius: 5px;
}

.progress-bar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px; /* Progress bar width */
	height: 5px;
	background-color: #9d9d9d; /* Progress bar color */
	overflow: hidden; /* Hide overflow for animation */
}

.progress-bar-inner {
	height: 100%;
	background-color: #ffffff; /* Color of the progress */
	width: 0; /* Start with 0 width */
	animation: progress-animation 5s linear forwards; /* Animation for progress */
}

@keyframes progress-animation {
	from {
		width: 0;
	}
	to {
		width: 100px; /* Final width of the progress bar */
	}
}

</style>


<script src="/templates/yes-system/js/vendor/foundation.js"></script>
<!-- Fuer schnellen Switch -->

<script type="text/javascript">
$(document).foundation();
</script>

<script>
$(document).ready(function(){
$("table").wrap('<div class="table-scrollable"></div>');
});
</script>

<script type="text/javascript">
{literal}
var text_cart_select_product_property = '{#text_cart_select_product_property#}';
var product_properties_price_adds = {};
$().ready(function(){
	$('#properties input.ppv').each(function(){
		$(this).click(function(){
			ppID_parts = $(this).attr('name').split('pp_');
			ppID = ppID_parts[1];
			new_pp_price = parseFloat($(this).attr('value'));
			
			product_properties_price_adds[ ppID ] = new_pp_price;
			pp_price_add = 0;
			for(var pp in product_properties_price_adds){
				pp_price_add += product_properties_price_adds[pp];
			}
			pp_price = product_properties_original_price_raw+pp_price_add;
			pp_price = pp_price.toFixed(2);
			pp_price = pp_price.replace('.',',') + ' '+product_properties_currency;
			$('.prodPrize').each(function(){
				$(this).html(pp_price);
			});
		});
	});
	$('a.prod_buy').click(function(){
		var ppv_distinct = [];
		var distinct_props = 0;
		var dp = [];
		$('#properties div#property input.ppv').each(function(){
			if( dp.indexOf( $(this).attr('name') ) == -1 ){
				distinct_props++;
				dp.push($(this).attr('name'));
			}
		});
		var qty = parseInt($('form.prod_form .addcart_qty input[name="products_qty"]').val());
		if(qty < 1) return false;
		$('#properties input.ppv:checked').each(function(){
				ppv_distinct.push( $(this).attr('id') );
		});
		if(ppv_distinct.length == distinct_props){
			var url = $(this).attr('id');
			params = '';
			for(i=0;i<ppv_distinct.length;i++){
				
				let url_param_ppvID = ppv_distinct[i];
				if($('input[name="input_span_value_'+url_param_ppvID+'"]').length){
					url_param_ppvID += ':'+$('input[name="input_span_value_'+url_param_ppvID+'"]').val();
				}
	
				params += '&ppvID[]='+url_param_ppvID;
			}
			console.log(url+params+'&products_qty='+qty);
			//window.location.href=url+params+'&products_qty='+qty;
		}else{
			alert(text_cart_select_product_property);
		}
	});
});
{/literal}
</script>

<!--  Start Modalfenster Aufruf   -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!--  Ende  Modalfenster Aufruf   -->

<div class="reveal" id="modalAjax" data-reveal>
    <div class="modalContent">

    </div>
    <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<nav id="mobiMenu"></nav>
<div class="background">

    <header id="mainHead">
        <div class="smallSpacer show-for-small-only"></div>
        <nav id="miniTopNav">
            <div class="show-for-small-only">
                <a href="{$yes.HTTP_SERVER}" title="{$yes.HTTP_SERVER}"><img class="item" src="/files/Logos/logo.png" alt="{$yes.HTTP_SERVER}" rel="nofollow"> </a>
                <a href="#" class="button secondary show-for-small hide-for-large mediumCaller callMobiNav"><i class="fi-list size-24"></i></a>
                <a href="#" class="button primary show-for-small hide-for-large mediumCaller callSearchBox"><i class="fi-magnifying-glass size-24"></i></a>
                {$box_CART}
            </div>

        </nav>
        <section id="mainTop" class="row align-spaced " >
            <div class="show-for-small hide-for-large" id="mediumSearch">
                <form class="searchbar" id="searchform" method="get" action="advanced_search_result.php" name="search">
                <input type="search" name="keywords" class="mediumSearchbar " placeholder="Suchbegriff">
                <button type="submit" class="mediumSearcher button primary" href="#"><i class="fi-magnifying-glass size-36"></i></button>
                <a class="mediumCloser button hollow hide-for-small-only" href="#"><i class="fi-x size-24"></i></a>
                    </form>
            </div>
            <div id="test4" class="breakpoint4 columns medium-6 large-4 hide-for-small-only">
				<div id="test1" class="breakpoint1 logo">
					<!--<a href="{$yes.HTTP_SERVER}"> </a>-->
					<a href="{$yes.HTTP_SERVER}" title="{$yes.HTTP_SERVER}"><img class="item" src="/files/Logos/logo.png" alt="{$yes.HTTP_SERVER}" rel="nofollow"> </a>
				
				</div>
            </div>
			
			
            <div class="columns hide-for-medium-only large-6 hide-for-small-only">
                {$box_SEARCH}
            </div>
            <div id="test5" class="breakpoint5 cart columns medium-6 large-2 hide-for-small-only">
                <a href="#" class="button secondary show-for-medium-only mediumCaller callMobiNav"><i class="fi-list size-24"></i></a>
                <a href="#" class="button primary show-for-medium-only mediumCaller callSearchBox"><i class="fi-magnifying-glass size-24"></i></a>
				<div class="cartdropdown">
				{$box_CART}
				</div>
				
				<div id="account_scroll" class="breakpoint7 hider2 account_scroll"><a class="button mediumButton" href="account.php"><i class="fi-folder size-18"></i></a></div>
				{if $logoff}
				<div id="login_scroll" class="breakpoint7 hider2 login_scroll"><a class="button mediumButton" href="{$logoff}"><i class="fi-x size-18"></i></a></div>
				{else}
				<div id="login_scroll" class="breakpoint7 hider2 login_scroll"><a class="button mediumButton" href="login.php"><i class="fi-torso size-18"></i></a></div>
				{/if}
				
            </div>
			



	

        </section>
<section class="nav_head_border">
			
		<nav id="nav_main">
			<div class="container">
				<div class="row">
					<div id="nav-inner" class="large-12 show-for-large">
					
						<ul id="nav">
						
						<li class="first"><a href="/KONFIGURATOR---5650.html" style="color: red;">KONFIGURATOR</a></li>
						
						<li class="first"><a href="/FENSTER---5646.html">FENSTER/BALKONE</a></li>
						
						<li class="first"><a href="/TÜREN---5651.html">TÜREN</a></li>
						
						<li class="first"><a href="/BESCHATTUNG---5652.html">BESCHATTUNG</a></li>
						
						<li class="first"><a href="/GARAGENTORE---5653.html">GARAGENTORE</a></li>
						
						<li class="first"><a href="/ZUBEHÖR---5654.html">ZUBEHÖR</a></li>
						
						<li class="first"><a href="/SERVICE---5655.html">SERVICE</a></li>
						
						<li class="first"><a href="/NEWS---5999.html">NEWS</a></li>
						
						<li class="first"><a href="/Kontakt-_-7.html">KONTAKT</a></li>

						</ul>
					</div>
				</div>
			</div>
		</nav>	

		
			
		</section>
		<nav id="mainNav" class="row hider">
              <ul class="menu expanded bemobile" data-name="Navigation">
				  <li><a style="color:#64655e;" href="#">Startseite</a></li><br>
                    {assign var="exit0" value="0"}  {*<!-- Oberkat 1 Ebene -->*}
					{assign var="exit1" value="0"}  {*<!-- 2 Ebene -->*}
					{assign var="exit2" value="0"}  {*<!-- 3 Ebene -->*}
					{assign var="exit3" value="0"}  {*<!-- 4 Ebene -->*}
					{assign var="newexit1" value="0"} {*<!-- 2 Ebene -->*}
					{assign var="newexit2" value="0"} {*<!-- 3 Ebene -->*}
					{assign var="newexit3" value="0"} {*<!-- 4 Ebene -->*}
					{assign var="newexit4" value="0"} {*<!-- 5 Ebene -->*}
					<span style="font-weight: bold;text-decoration: none;color: #64655e;text-transform: uppercase;font-size: 1em;margin-top: 30px;">KATEGORIEN</span>
                    {foreach item=module_cat from=$CATEGORIES_STRUCT}
						{if $smarty.get.cPath == $module_cat.categories_id} 
							{assign var="exit0" value=$module_cat.categories_id}
							{assign var="newexit1" value=$module_cat.categories_id}
						{/if}
						{if $module_cat.children}
							{foreach item=module_cat2 from=$module_cat.children}
								{if $smarty.get.cPath == $module_cat2.categories_id}
									{assign var="exit0" value=$module_cat.categories_id}
									{assign var="exit1" value=$module_cat2.categories_id}
									{assign var="newexit1" value=$module_cat.categories_id}
								{/if}
								{if $module_cat2.children}
									{foreach item=module_cat3 from=$module_cat2.children}
										{if $smarty.get.cPath == $module_cat3.categories_id}
											{assign var="exit0" value=$module_cat.categories_id}
											{assign var="exit1" value=$module_cat2.categories_id}
											{assign var="exit2" value=$module_cat3.categories_id}
											{assign var="newexit1" value=$module_cat.categories_id}
											{assign var="newexit2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
										{/if}
										{if $module_cat3.children}
											{foreach item=module_cat4 from=$module_cat3.children}
												{if $smarty.get.cPath == $module_cat4.categories_id}
													{assign var="exit0" value=$module_cat.categories_id}
													{assign var="exit1" value=$module_cat2.categories_id}
													{assign var="exit2" value=$module_cat3.categories_id}
													{assign var="exit3" value=$module_cat4.categories_id}
													{assign var="newexit1" value=$module_cat.categories_id}
													{assign var="newexit2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
													{assign var="newexit3" value=$module_cat.categories_id|cat:"_"|cat:$module_cat3.categories_id}
												{/if}
											{/foreach}
										{/if}
									{/foreach}
								{/if}
							{/foreach}
						{/if}
                    {/foreach}
                    {foreach item=module_cat from=$CATEGORIES_STRUCT}
                    <li class="first_stage_{$k}">
                        <a href="{$module_cat.categories_name}---{$module_cat.categories_id}.html">
							{if $module_cat.categories_id == $newexit1}<b>{/if}
								{$module_cat.categories_name}
							{if $module_cat.categories_id == $newexit1}</b>{/if}
                        </a>
                        {if $module_cat.children}
                        <ul class="dropdown-menu">
                            {foreach item=module_cat2 from=$module_cat.children}
                            <li>
                                <a href="{$module_cat2.categories_name}---{$module_cat2.categories_id}.html">
                                    {$module_cat2.categories_name}
                                </a>
                                {if $module_cat2.children}
                                <ul class="dropdown-menu">
                                    {foreach item=module_cat3 from=$module_cat2.children}
                                    <li>
                                        <a href="{$module_cat3.categories_name}---{$module_cat3.categories_id}.html">
                                            {$module_cat3.categories_name}
                                        </a>
                                        {if $module_cat3.children}
                                        <ul class="dropdown-menu">
                                            {foreach item=module_cat4 from=$module_cat3.children}
                                            <li>
                                                <a href="{$module_cat4.categories_name}---{$module_cat4.categories_id}.html">
                                                    {$module_cat4.categories_name}
                                                </a>
                                            </li>
                                            {/foreach}
                                        </ul>
                                        {/if}
                                    </li>
                                    {/foreach}
                                </ul>
                                {/if}
                            </li>
                            {/foreach}
                        </ul>
                        {/if}
                    </li>
                    {/foreach}
				
                </ul> 
        </nav>
	</header>

	<div class="wrapper">
	<div class="wrapper_inner">
       

    <!-- NAVTRAIL START -->
    {if $smarty.server.REQUEST_URI != "/index.php"
    AND $smarty.server.REQUEST_URI != "/yes/index.php"
    AND $smarty.server.REQUEST_URI != "/yes/"
    AND $smarty.server.REQUEST_URI != "/"
    AND $smarty.server.REQUEST_URI != ""
    }
    <nav class="breadcrumb hide-for-small-only row">
        <a class="breadcrumb_home" href="{$yes.HTTP_SERVER}"><i class="fi-home size-24"></i> </a>    {$navtrail|replace:'&raquo;':'/ '|replace:'Auf Wiedersehen':''|replace:'Kasse':'<span class="lst_bread">Bestellung'|replace:'Erfolg':'erfolgreich</span>'|replace:'<a href="#" class="headerNavigation">Katalog</a>':''}
    </nav>
    {/if}
    <!-- NAVTRAIL ENDE -->
    {$box_POPCART}
     {if $smarty.server.REQUEST_URI == "/index.php"
    OR $smarty.server.REQUEST_URI == "/yes/index.php"
    OR $smarty.server.REQUEST_URI == "/yes/"
    OR $smarty.server.REQUEST_URI == "/"
    OR $smarty.server.REQUEST_URI == ""
    }
		
		<!--  SLIDER + BUTTON -->
	
	<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					<div class="carousel">			
						<div class="carousel-item active bg1" style="background-image: url('https://fensterbauprofi.de/files/NEWS/fensterbauprofi-fenster-aus-hamburg.jpg');">
							<div class="overlay"></div>
							<div class="content-box">
								<img src="https://fensterbauprofi.de/files/Logos/fbp_logo_icon_w.png" alt="Logo" class="logo">
								<h1 class="h1-carousel">FENSTERBAUPROFI.DE</h1>
								<p class="p-carousel">Die Saison kann Starten! Fenster, Türen und Mehr!</p>
								<a href="https://fensterbauprofi.de/KONFIGURATOR---5650.html" class="button">Jetzt konfigurieren und sparen</a>
							</div>
						</div>						
						<div class="carousel-item bg2" style="background-image: url('https://fensterbauprofi.de/files/intro-image/fbp_2025.jpg');">
							<div class="overlay"></div> <!-- Black overlay -->
							<div class="content-box">
								<img src="https://fensterbauprofi.de/files/Logos/fbp_logo_icon_w.png" alt="Logo" class="logo">
								<h1 class="h1-carousel">FENSTERBAUPROFI.DE</h1>
								<p class="p-carousel">Ihr Profi für Fensterbau aus Hamburg</p>
								<a href="https://fensterbauprofi.de/KONFIGURATOR---5650.html" class="button">Konfigurieren Sie hier Ihr Fenster</a>
							</div>
						</div>
						<div class="carousel-item bg3" style="background-image: url('https://fensterbauprofi.de/files/product-image/fbp_mood_8.jpg');">
							<div class="overlay"></div> <!-- Black overlay -->
							<div class="content-box">
								<img src="https://fensterbauprofi.de/files/Logos/fbp_logo_icon_w.png" alt="Logo" class="logo">
								<h1 class="h1-carousel">MEHR LICHT, MEHR LEBEN</h1>
								<p class="p-carousel">Bringen Sie mehr Helligkeit in Ihr Zuhause.</p>
								<a href="https://fensterbauprofi.de/FENSTER---5646.html" class="button">Jetzt Entdecken</a>
							</div>
						</div>
						<div class="carousel-item bg4" style="background-image: url('https://fensterbauprofi.de/files/product-image/fensterbauprofi-quality.jpg');">
							<div class="overlay"></div> <!-- Black overlay -->
							<div class="content-box">
								<img src="https://fensterbauprofi.de/files/Logos/fbp_logo_icon_w.png" alt="Logo" class="logo">
								<h1 class="h1-carousel">WIR SIND FÜR SIE DA</h1>
								<p class="p-carousel">Lassen Sie uns gemeinsam Ihr Projekt realisieren.</p>
								<a href="https://fensterbauprofi.de/Kontakt-_-7.html" class="button">Jetzt anfragen</a>
							</div>
						</div>
						<!-- Add more carousel items as needed -->
						<div class="progress-bar">
							<div class="progress-bar-inner"></div> <!-- Inner progress bar for animation -->
						</div>
					</div>

				{if $YES.CONTENT.ID_57.text}{$YES.CONTENT.ID_57.text}{/if}
				</div>
			</div>
		</div>
	</div>	
		<script>
			let currentIndex = 0;
			const items = document.querySelectorAll('.carousel-item');
			const totalItems = items.length;
			const progressBarInner = document.querySelector('.progress-bar-inner');

			function showNextItem() {
				items[currentIndex].classList.remove('active');
				currentIndex = (currentIndex + 1) % totalItems;
				items[currentIndex].classList.add('active');
				
				// Reset and animate the progress bar
				progressBarInner.style.width = '0'; // Reset width
				progressBarInner.style.animation = 'none'; // Remove animation
				void progressBarInner.offsetWidth; // Trigger reflow to restart animation
				progressBarInner.style.animation = 'progress-animation 5s linear forwards'; // Add animation
			}

			setInterval(showNextItem, 10000); // Change slide every 5 seconds
		</script>

		
		<!--<section id="fbp">
		   <div class="fbp-img"></div>
			<div class="title">
			<p class="cl-panel-header-main">ERLEBEN SIE FENSTER NEU</p>
		  </div>
		 </section>-->
		  <div class="clearfix">
			<div class="float-center">
				<div class="row contentHolder2">
					<div class="cl-panel-background-info-red small-12 large-expand columns">
						<div class="container-fluid">
							<div class="small-12 medium-12 columns">
								<div>
								<p class="cl-panel-header-main">ERELBEN SIE FENSTER NEU</p>
								
								</div>
							</div>
						</div>
					</div>				
				</div>
			</div>
			</div>
		  <div class="clearfix">
			<div class="float-center">
				<div class="row contentHolder2">
					<!--<div class="row borderBox">-->
						<div class="categoryHolder small-12 medium-4 large-4  columns" style="position: relative;text-align: center;">
							<a href="https://fensterbauprofi.de/Konfigurator/Fenster-Konfigurator---5650_5671.html">
							<img class="categoryImage" alt="Fenster Konfigurator" src="images/categories/5671.jpg" title="Fenster Konfigurator" style="width: 100%;padding: 15px;">
							<span class="categoryTitle">Fenster Konfigurator</span>
							</a>
						</div>
						<div class="categoryHolder small-12 medium-4 large-4  columns" style="position: relative;text-align: center;">
							<a href="https://fensterbauprofi.de/Konfigurator/Vorkonfigurierte-Fenster---5650_5672.html">
							<img class="categoryImage" alt="Vorkonfigurierte Fenster" src="images/categories/5672.jpg" title="Vorkonfigurierte Fenster" style="width: 100%;padding: 15px;">
							<span class="categoryTitle">Vorkonfigurierte Fenster</span>
							</a>
						</div>
						<div class="categoryHolder small-12 medium-4 large-4  columns" style="position: relative;text-align: center;">
							<a href="https://fensterbauprofi.de/Fenster/Vorgefertigte-System-Fenster---5646_6021.html">
							<img class="categoryImage" alt="Vorgefertigte System-Fenster" src="images/categories/6022.jpg" title="Vorgefertigte System-Fenster" style="width: 100%;padding: 15px;">
							<span class="categoryTitle">Vorgefertigte System-Fenster</span>
							</a>
						</div>
					<!--</div>-->
				</div>
			</div>
		</div>
		
		{$main_content}
		<div class="clearfix">
 		<div class="float-center">
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_66.text}{$YES.CONTENT.ID_66.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		<div class="clearfix">
 		<div class="float-center">
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_41.text}{$YES.CONTENT.ID_41.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		
		
		
		<section id="new">
		  <div class="new-img"></div>
		  <div class="title">
			<p class="cl-panel-header-main">MEHR ALS NUR EIN FENSTER</p>
		  </div>
		</section>
		
		
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_46.text}{$YES.CONTENT.ID_46.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		
		
		<section id="emotion">
		  <div class="emotion-img"></div>
		  <div class="title">
			<p class="cl-panel-header-main">WOHNQUALITÄT STEIGERN</p>
		  </div>
		</section>
		
		
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_48.text}{$YES.CONTENT.ID_48.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		<section id="vision">
		  <div class="vision-img"></div>
		  <div class="title">
			<p class="cl-panel-header-main">IHRE VISION - UNSERE EXPERTISE</p>
		  </div>
		</section>
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_47.text}{$YES.CONTENT.ID_47.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_56.text}{$YES.CONTENT.ID_58.text}{/if}
				</div>
			</div>
		</div>
		</div>
		
		<!--
		
		
		<section id="colorframe">
		  <div class="colorframe-img"></div>
		  <div class="title">
			<p class="cl-panel-header-main">FENSTER FÜR DEN AUSBLICK, TÜREN FÜR DEN EINBLICK</p>
		  </div>
		</section>
		
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					
					
				{if $YES.CONTENT.ID_105.text}{$YES.CONTENT.ID_105.text}{/if}
					
					
				</div>
			</div>
		</div>
		</div>
		
		-->
		
		<section id="socialmedia">
		  <div class="socialmedia-img"></div>
		  <div class="title">
			<p class="cl-panel-header-main">TÜREN AUF, EMOTIONEN REIN:<br>WILKOMMEN ZU HAUSE</p>
		  </div>
		</section>
		
		
		
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
				
				{if $YES.CONTENT.ID_107.text}{$YES.CONTENT.ID_107.text}{/if}

										
				</div>
			</div>
		</div>
		</div>		
		
			
		
		<!--  NEWS -->
		<div class="clearfix">
 		<div class="float-center" >
	 		<div class="row contentHolder2">
				<div class="columns">
					{if $YES.CONTENT.ID_109.text}{$YES.CONTENT.ID_109.text}{/if}
				</div>
			</div>
		</div>
		</div>
		<!--  NEWS -->
		
		
		<!--<div class="contentHolder small-12 medium-12 large-12 columns row align-justify ">
		{* marketing_box|replace:"Keine Artikel in der Marketingbox zum anzeigen.":"" box=1 template="boxes/box_marketing.html" *}
		{* $box_BESTSELLERS *}
		</div>-->
   				
		
	{/if}


	{if $smarty.server.REQUEST_URI == "/index.php" 
			OR $smarty.server.REQUEST_URI == "/yes/index.php"
			OR $smarty.server.REQUEST_URI == "/yes/"
			OR $smarty.server.REQUEST_URI == "/"
			OR $smarty.server.REQUEST_URI == ""
			}
			
				<!-- KATEGORIEN BOX START -->
		<div class="row contentHolder">	
			
					{foreach item=module_cat from=$CATEGORIES_STRUCT}
                    <div class="small-12 medium-3 large-3" style="padding-left: 15px">
                        {if $module_cat.categories_additional_image}
						<a href="{$module_cat.categories_name}---{$module_cat.categories_id}.html">
							<img src="../images/categories/{$module_cat.categories_additional_image}" style="padding: 20px"/>
                        </a>
						{/if}
                        
                    </div>
                    {/foreach}				
		</div>
	
	{elseif $YES.FILENAME eq "login.php" AND $YES.GET_PARAMETER[0] == "" 
			OR $YES.FILENAME eq "product_info.php"
			OR $YES.FILENAME == "shop_content.php"
			OR $YES.FILENAME == "address_book_process.php"
			OR $YES.FILENAME == "account.php"
			OR $YES.FILENAME == "account_notifications.php"
			OR $YES.FILENAME == "account_history.php"
			OR $YES.FILENAME == "account_history_info.php"
			OR $YES.FILENAME == "contact_us.php"
			OR $YES.FILENAME == "address_book.php"
			OR $YES.FILENAME == "login.php" 
			OR $YES.FILENAME == "logoff.php" 
			OR $YES.FILENAME == "shopping_cart.php" 
			OR $YES.FILENAME == "admin_product_info.php" 
			OR $YES.FILENAME == "advanced_search.php"  
			OR $YES.FILENAME == "create_account.php"  
			OR $YES.FILENAME == "create_guest_account.php"  
			OR $YES.FILENAME == "password_double_opt.php"  
			OR $YES.FILENAME == "password_double_opt_in.php"  
			OR $YES.FILENAME == "account_edit.php"  
			OR $YES.FILENAME == "account_password.php"  	 
			OR $YES.FILENAME == "advanced_search.php"
			OR $YES.FILENAME == "checkout_shipping.php"  
			OR $YES.FILENAME == "checkout_shipping_address.php"  
			OR $YES.FILENAME == "checkout_payment.php" 
			OR $YES.FILENAME == "checkout_payment_address.php" 
			OR $YES.FILENAME == "checkout_confirmation.php"
			OR $YES.FILENAME == "newsletter.php" 
			OR $YES.FILENAME == "wishlist.php" 
			OR $YES.FILENAME == "checkout_paypal.php" 
			OR $YES.FILENAME == "checkout_success.php" 
			OR $YES.FILENAME == "paypal_checkout.php"
			OR $YES.FILENAME == "specials.php"
			OR $YES.FILENAME == "products_new.php"

			} 
	

	{$main_content}
	{else}
	<div class="contentHolder row">
		<div class="leftNav  columns show-for-large large-3" style="display:none">
			<nav class="nav borderBox" role="navigation">
				<ul class="vertical menu" data-accordion-menu>
					
				{assign var="newexit1" value="0"} {*<!-- 2 Ebene -->*}
				{assign var="newexit2" value="0"} {*<!-- 3 Ebene -->*}
				{assign var="newexit3" value="0"} {*<!-- 4 Ebene -->*}
				{assign var="newexit4" value="0"} {*<!-- 5 Ebene -->*}
				<span style="font-weight: bold;text-decoration: none;color: #64655e;text-transform: uppercase;font-size: 1em;">KATEGORIEN</span>
				{foreach item=module_cat from=$CATEGORIES_STRUCT}
					{if $smarty.get.cPath == $module_cat.categories_id} 
						{assign var="newexit1" value=$module_cat.categories_id}
					{/if}
					{if $module_cat.children}
						{foreach item=module_cat2 from=$module_cat.children}
							{if $smarty.get.cPath == $module_cat2.categories_id}
								{assign var="newexit1" value=$module_cat.categories_id}
								{assign var="newexit2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
							{/if}
							{if $module_cat2.children}
								{foreach item=module_cat3 from=$module_cat2.children}
									{if $smarty.get.cPath == $module_cat3.categories_id}
										{assign var="newexit1" value=$module_cat.categories_id}
										{assign var="newexit2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
										{assign var="newexit3" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id|cat:"_"|cat:$module_cat3.categories_id}
									{/if}
									{if $module_cat3.children}
										{foreach item=module_cat4 from=$module_cat3.children}
											{if $smarty.get.cPath == $module_cat4.categories_id}
												{assign var="newexit1" value=$module_cat.categories_id}
												{assign var="newexit2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
												{assign var="newexit3" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id|cat:"_"|cat:$module_cat3.categories_id}{assign var="newexit3" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id|cat:"_"|cat:$module_cat3.categories_id|cat:"_"|cat:$module_cat4.categories_id}
												
											{/if}
										{/foreach}
									{/if}
								{/foreach}
							{/if}
						{/foreach}
					{/if}
				{/foreach}
				{foreach item=module_cat from=$CATEGORIES_STRUCT}
				
				<li>
				
				<a {if $module_cat.categories_id == $newexit1}class="current"{/if} href="{$module_cat.categories_name}---{$module_cat.categories_id}.html">
					{$module_cat.categories_name}
				</a>
				{if $module_cat.children}
					<ul class="menu vertical nested {if $module_cat.categories_id == $newexit1}is-active{/if}">
						{foreach item=module_cat2 from=$module_cat.children}
						{assign var="katid2" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id}
						<li>
						<a {if $katid2 == $newexit2}class="current"{/if} href="{$module_cat2.categories_name}---{$module_cat2.categories_id}.html">
							&nbsp;&nbsp;> {$module_cat2.categories_name}
						</a>
						{if $module_cat2.children}
						<ul class="menu vertical nested {if $katid2 == $newexit2}is-active{/if} {$module_cat2.categories_id} {$newexit2}">
							{foreach item=module_cat3 from=$module_cat2.children}
							{assign var="katid3" value=$module_cat.categories_id|cat:"_"|cat:$module_cat2.categories_id|cat:"_"|cat:$module_cat3.categories_id}
							<li>
								<a {if $katid3 == $newexit3}class="current"{/if} href="{$module_cat3.categories_name}---{$module_cat3.categories_id}.html">
								   &nbsp;&nbsp;&nbsp;> {$module_cat3.categories_name}
								</a>
							</li>
							{/foreach}
						</ul>
						{/if}
						
						</li>
						{/foreach}
									
					</ul>
				{/if}
				</li>
				{/foreach}
					
					
				</ul>
				
			</nav>
		</div>

			
			
			{$main_content}

	<!-- /* Nachfolgende div schliesst contentHolder */-->
	</div>
	{/if}
	
	
	
	
	
	
	
	{if $YES.FILENAME eq "product_info.php"}
	<!--.<div class="contentHolder row">
		{$box_WHATSNEW}
		{$box_LAST_VIEWED}
	</div>-->
	{/if} 

	


</div> <!-- Wrapper_inner Ende -->
		
	

		
</div> <!-- Wrapper Ende -->
	
	
<div style="border-top: 4px solid #73746c;padding-bottom:5px"></div>	
<footer id="mainFooter">
	<div class="row">
		<article class="footerInfo small-12 medium-6 large-3 columns">
			{if $YES.CONTENT.ID_50.text}
				{$YES.CONTENT.ID_50.text}
			{/if}
		</article>
		<article class="footerInfo small-12 medium-6 large-3 columns">
			<!--{* $box_INFORMATION|replace:"yes-a378134":"fensterbauprofi" *}-->
			<h4 class="footerhead">Informationen</h4>
			<ul class="contentlist bemobile boxinfo" data-name="Hinweise">
			<li><img src="templates/yes-system/img/" alt=""> <a href="https://fensterbauprofi.de/Kooperationen-_-11.html">Kooperationen</a></li>
			<li><img src="templates/yes-system/img/" alt=""> <a href="https://fensterbauprofi.de/Datenschutz-_-2.html">Datenschutz</a></li>
			<li><img src="templates/yes-system/img/" alt=""> <a href="https://fensterbauprofi.de/Impressum-_-4.html">Impressum</a></li>
			<li><img src="templates/yes-system/img/" alt=""> <a href="https://fensterbauprofi.de/Widerrufsbelehrung-_-9.html">Widerrufsbelehrung</a></li>
			</ul>
		</article>
		<article class="footerInfo small-12 medium-6 large-3 columns">
			<h4 class="footerhead">Kundenkonto</h4>
			<ul class="contentlist bemobile boxinfo" data-name="Kundenkonto">
			<li><img src="templates/yes-system/img/" alt=""><a href="account.php">{#link_account#}</a></li>
			<li><img src="templates/yes-system/img/" alt=""><a href="shopping_cart.php">{#link_cart#}</a></li>
			{if !$logoff}
			<li><img src="templates/yes-system/img/" alt=""><a href="login.php">Anmelden</a>
			{else}
			<li><img src="templates/yes-system/img/" alt=""><a href="logoff.php">Abmelden</a>
			{/if}</li>
			<li><a href="wishlist.php">Merkzettel</a></li>
			<li><img src="templates/yes-system/img/" alt=""> <a href="/Wir-ueber-uns-_-10.html">Wir über uns</a></li>
			<li><img src="templates/yes-system/img/" alt=""> <a href="/Kontakt-_-7.html">Kontakt</a></li>
			{if $box_ADMIN}{$box_ADMIN}{/if}
			</ul>
		</article>

		{if $YES.CONTENT.ID_51.text}
		<article class="footerInfo small-12 medium-6 large-3 columns">
			{if $YES.CONTENT.ID_51.heading}<h4 class="footerhead">{$YES.CONTENT.ID_51.heading}</h4>{/if}
			{$YES.CONTENT.ID_51.text}
			
		</article>	
        {/if}
		{if $YES.CONTENT.ID_52.text}
		<article class="footerInfo small-12 medium-6 large-3 columns">
			{if $YES.CONTENT.ID_52.heading}<h4 class="footerhead">{$YES.CONTENT.ID_52.heading}</h4>{/if}
			{$YES.CONTENT.ID_52.text}
		</article>	
		{/if}
				
		
		<div class="footerInfo small-12 medium-12 large-12 columns space10top">&nbsp;</div>
		{if $YES.CONTENT.ID_53.text}
		<article class="small-12 medium-12 medium-centered large-12 large-centered columns">		
			<div class="">
				<div class="row">
					<div class=" small-12 medium-12 large-12 columns nwsltr_txt">
					{if $YES.CONTENT.ID_53.text}
						{$YES.CONTENT.ID_53.text}
					{/if}
					</div>	
				</div>
			</div>			
		</article>
		{/if}
	</div>
</footer>

	
	<div class="scroll-top-wrapper ">
		<span class="scroll-top-inner">
			<i class="fa fa-2x fi-arrow-up"></i>
		</span>
	</div>
    <div class="copyright" style="color:#f1f1f1;"><a href="https://yes-system.de" target="_blank">YES-System - ERP Software für den Onlinehandel</a></div>
	
</div>


{literal}
<script type="text/javascript">
$(document).ready(function () {
    var menu = $('.breakpoint1');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
			
            <!-- $('.breakpoint1').addClass('logo2'); -->
            <!-- $('.breakpoint1').removeClass('logo1'); -->
           <!--  $('.breakpoint2').addClass('searchbar2'); -->
            <!-- $('.breakpoint2').removeClass('searchbar1'); -->
            $('.breakpoint3').addClass('hider');
           <!--  $('.breakpoint4').addClass('large-2'); -->
            <!-- $('.breakpoint4').removeClass('large-4'); -->
           <!--  $('.breakpoint5').addClass('large-5'); -->
           <!--  $('.breakpoint5').removeClass('large-3'); -->
            <!-- $('.breakpoint5').addClass('cart_breaker'); -->
            <!-- $('.breakpoint5').removeClass('cart'); -->
           <!--  $('.breakpoint6').addClass('hider'); -->
            <!-- $('.breakpoint6').removeClass('showing'); -->
           <!--  $('.breakpoint7').addClass('showing2'); -->
           <!--  $('.breakpoint7').removeClass('hider2'); -->
            


			
        } else {
            <!-- $('.breakpoint1').addClass('logo1'); -->
            <!-- $('.breakpoint1').removeClass('logo2'); -->
			<!-- $('.breakpoint2').addClass('searchbar1'); -->
            <!-- $('.breakpoint2').removeClass('searchbar2'); -->
            $('.breakpoint3').removeClass('hider');
			<!-- $('.breakpoint4').removeClass('large-2'); -->
			<!-- $('.breakpoint4').addClass('large-4'); -->
			<!-- $('.breakpoint5').removeClass('large-5'); -->
			<!-- $('.breakpoint5').addClass('large-3'); -->
			<!-- $('.breakpoint5').removeClass('cart_breaker'); -->
			<!-- $('.breakpoint5').addClass('cart'); -->
			<!-- $('.breakpoint6').removeClass('hider'); -->
			<!-- $('.breakpoint6').addClass('showing'); -->
			<!-- $('.breakpoint7').removeClass('showing2'); -->
			<!-- $('.breakpoint7').addClass('hider2'); -->
			

        }
    }

    document.onscroll = scroll;
});

jQuery(document).ready(function(){
    $(".dropdown_m").hover(
        function() { $('.dropdown-menu_m', this).stop().slideDown("fast");
        },
        function() { $('.dropdown-menu_m', this).stop().slideUp("fast");
    });
});


</script>
{/literal}



<script src="/templates/yes-system/js/vendor/what-input.js"></script>
<script src="/templates/yes-system/js/imagelightbox.min.js"></script>
<script src="/templates/yes-system/js/bemobile.js"></script>
<script src="/templates/yes-system/js/app.js"></script>



<!--    Modalfenster Dateien   -->

<div id="ex1" class="modal" style="min-width:1400px; padding-top:20px;">
	{config_load file="$language/lang_$language.conf" section="index"}

{yes_vars assign="YES" contents=1}

		
			<div class="contentHolder small-12 medium-12 large-12 row ">
				
				<div class="small-12 medium-12 large-12 columns" style="margin-top:-15px">&nbsp;</div>
				<div class="row" ><h1>Wählen Sie ihren Wunsch-Hersteller und konfigurieren Sie ihre eigenen Fenster</h1></div>
				<div class="row contentHolder">	
				
					<div class="small-12 medium-4 large-4" style="padding-left: 15px">
                    	<a href="ALUPLAST---71.html">
							<img src="../images/categories/71_2.jpg" style="padding: 20px">
							<span style="display:block; text-align: center"><button class="button prod_buy cartSubmit greenhov" type="submit" style="font-size: 24px">Konfigurieren</button></span>
                        </a>                    
                    </div>
                    <div class="small-12 medium-4 large-4" style="padding-left: 15px">
                    	<a href="SALAMANDER---142.html">
							<img src="../images/categories/142_2.jpg" style="padding: 20px">
							<span style="display:block; text-align: center"><button class="button prod_buy cartSubmit greenhov" type="submit" style="font-size: 24px">Konfigurieren</button></span>
                        </a>                    
                    </div>
                    <!--<div class="small-12 medium-3 large-3" style="padding-left: 15px">
                    	<a href="VEKA---146.html">
							<img src="../images/categories/146_2.jpg" style="padding: 20px">
							<span style="display:block; text-align: center"><button class="button prod_buy cartSubmit greenhov" type="submit" style="font-size: 24px">Konfigurieren</button></span>
                        </a>	                        
                    </div>-->
                    <div class="small-12 medium-4 large-4" style="padding-left: 15px">
                    	<a href="GEALAN---155.html">
							<img src="../images/categories/155_2.jpg" style="padding: 20px">
							<span style="display:block; text-align: center"><button class="button prod_buy cartSubmit greenhov" type="submit" style="font-size: 24px">Konfigurieren</button></span>
                        </a>	                        
                    </div>
                </div>
					
					
				<div class="small-12 medium-12 large-12 columns" style="margin-top:-30px">&nbsp;</div>
			</div>
				
		
  </div>
  
  
  


<script>
function showDetails(animal) {
  var animalType = animal.getAttribute("data-welchedatei");
  document.getElementById("pdfanzeigen").innerHTML = '<iframe src=' + animalType + '  style="width: 100%; height: 100%"></iframe>';
}
</script>
<div class="reveal" id="exampleModal1" data-reveal data-animation-in="fade-in" data-animation-out="spin-out" style="width: 80%; height: 90%">
<div id="pdfanzeigen" style="width: 100%; height: 100%"></div>
 <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!--  Ende  Modalfenster Dateien   -->