<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Favicon -->
	<link rel="icon" href="project-files/img/favicon.ico?{{ Timestamp }}" />


	<!-- Meta -->
	{% block meta %}
	<title>{{ Meta.Title }}</title>
    <meta name="description" content="{{ Meta.Description }}" />
    <meta name="keywords" content="{{ Meta.Keywords }}" />
	{% endblock meta %}

	<link rel="stylesheet" type="text/css" href="project-files/css/preloader.css?{{ Timestamp }}">

	{% include "partials/matomo.html" with siteId=Data.matomoSiteId %}
</head>

<body>

	<div id="preloader">
	    <div class="spinner">
		  <div class="double-bounce1"></div>
		  <div class="double-bounce2"></div>
		</div>
	</div>

	<header id="header">
		<div class="container">
			<div class="logo" {% if not Data.slider and not Data.details.slider and not Data.details.firstimg %}style="max-width: 400px;"{% endif %}>
				<a href="{{ "/"|relative_path }}">
					<picture>
						<source media="(max-width: 768px)" srcset="project-files/img/logo_text.png">
						<img src="project-files/img/logo{% if not Data.slider and not Data.details.slider and not Data.details.firstimg %}_text{% endif %}.png" alt="mark2web Logo">
					</picture>
				</a>
			</div>
			<a id="pull">
				<span class="pull_button">
					<span></span>
					<span></span>
					<span></span>
				</span>
				<span class="text">Menu</span>	
			</a>
		</div>
	</header>

	<!-- ========== Slider ========== -->
	<section class="slider white_arrows" data-dots="true" data-arrows="true">
	{% block slider %}
	{% for sl in Data.slider %}
		<div class="slide">
			<img 
				src="{{ sl.img|image_process:"p=fill,w=1440,h=600,q=60,t=/img" }}" 
				srcset="{{ sl.img|image_process:"p=fill,w=768,h=384,q=60,t=/img" }} 768w,
						{{ sl.img|image_process:"p=fill,w=1440,h=600,q=60,t=/img" }} 1440w,
						{{ sl.img|image_process:"p=fill,w=1920,h=800,q=60,t=/img" }} 1920w"
				alt="{{ sl.alt }}" style="opacity:{{ sl.opacity|default:1 }}">
		</div>
	{% endfor %}
	{% endblock slider %}
	</section>

	<!-- ========== Navigation ========== -->
	<div class="navholder" id="nav">
		<div class="container">
			<nav id="mainmenu">
				<ul>
					{% for nav in NavActive.0.SubSlice.0.SubSlice %}
					<li {% if nav.Active %}class="active"{% endif %}>
						<a href="{{ nav.GoTo }}">{{ nav.Navname }}</a>
						{% if nav.SubSlice %}
						<span class="trigger"></span>
						<ul class="sub-menu">
						 {% for nav2 in nav.SubSlice %}
							<li {% if nav2.Active %}class="active"{% endif %}><a href="{{ nav2.GoTo }}">{{ nav2.Navname }}</a></li>
						 {% endfor %}
						</ul>
						{% endif %}
					</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>


	<!-- ========== Content First ========== -->
	<div class="contentfirst section_padding white_color ">
		<div class="container">
	{% block part0 %}
			{{ BodyParts.0 }}
	{% endblock part0 %}
		</div>
	</div>

	<!-- ========== Main Content ========== -->
	<div class="maincontent">
	{% block bg %}
		{% if Data.background %}
			<img 
				src="{{ Data.background|image_process:"p=fill,w=1440,h=810,q=30,t=/img" }}" 
				srcset="{{ Data.background|image_process:"p=fill,w=768,h=768,q=30,t=/img" }} 768w,
						{{ Data.background|image_process:"p=fill,w=1440,h=810,q=30,t=/img" }} 1440w,
						{{ Data.background|image_process:"p=fill,w=1920,h=1020,q=30,t=/img" }} 1920w"
				alt="{{ Meta.Title }}" class="img2bg">
		{% endif %}
	{% endblock bg %}
		<div class="white_section section_padding">
			<div class="container">
	{% block part1 %}
				{{ BodyParts.1 }}
	{% endblock part1 %}

	{% if Data.debug %}
		<hr>
		<h2>DEBUG</h2>

		<h3>This</h3>
		<pre>{{ This|json:"pretty" }}</pre>

		<h3>Data</h3>
		<pre>{{ Data|json:"pretty" }}</pre>

		<h3>NavMap</h3>
		<pre>{{ NavMap|json:"pretty" }}</pre>

	{% endif %}

			</div>
		</div>

		{% if NavActive.2.SubSlice %}
		<div class="section_padding" style="border-top: 1px solid #888;">
			<div class="container">
				<h2>{{ NavActive.2.Navname }}</h2>

				<div class="row boxen">
				{% for nav in NavActive.2.SubSlice %}
					<div class="col-sm-6">
						<div class="box">
							<header><h3>{{ nav.Navname }}</h3></header>
							<div class="content">
								<p>{{ nav.This.Data.teaser }}
								</p>
								<a href="{{ nav.GoTo }}" class="btn">mehr lesen &raquo;</a>
							</div>
						</div>
					</div>
				{% endfor %}
				</div>
			</div>
		</div>
		{% endif %}

	</div>
	

	<!-- ========== Footer ========== -->
	<footer id="footer">
		<div class="container">
			<div class="row">
				<div class="col">
					<h3>Adresse</h3>

					<img style="margin-bottom:10px;" src="project-files/img/logo_small.png" alt=""><br>
					Basiskonfiguration<br>
					Frank &amp; Prade GbR<br><br>

					Schwabhäußer Straße 16<br>
					99867 Gotha
				</div>
				{% for nav in NavActive.0.SubSlice %}
				<div class="col">
					<h3>{{ nav.Navname }}</h3>
					<ul class="footmenu">
					{% for nav2 in nav.SubSlice %}
						<li {% if nav2.Active %}class="active"{% endif %}><a href="{{ nav2.GoTo }}">{{ nav2.Navname }}</a></li>
					{% endfor %}
					</ul>
				</div>
				{% endfor %}
			</div>
		</div>
	</footer>
	<section class="footer_info">
		<div class="container">
			&copy; Basiskonfiguration, Frank &amp; Prade GbR
		</div>
	</section>


	<!-- ========== SCROLL TOP ========== -->
	<div class="scrolltop">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</div>


	<!-- Style -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="project-files/css/grid.css?{{ Timestamp }}">
	<link rel="stylesheet" type="text/css" href="project-files/css/main.css?{{ Timestamp }}">
	<link rel="stylesheet" type="text/css" href="project-files/css/menu.css?{{ Timestamp }}">
	<link rel="stylesheet" type="text/css" href="project-files/css/slider.css?{{ Timestamp }}">
	<link rel="stylesheet" type="text/css" href="project-files/fonts/font-awesome/font-awesome.css?{{ Timestamp }}">
	<link rel="stylesheet" type="text/css" href="project-files/js/slick/slick.css?{{ Timestamp }}">

	<!-- Javascript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="project-files/js/slick/slick.min.js?{{ Timestamp }}"></script>
	<script src="project-files/js/slick/slick-custom.js?{{ Timestamp }}"></script>

	<script src="project-files/js/preloader.js?{{ Timestamp }}"></script>
	<script src="project-files/js/functions.js?{{ Timestamp }}"></script>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>

</body>
</html>