<mbr-parameters>

<header>Logo</header>

<input type="checkbox" title="Logo anzeigen" name="showLogo" checked>

<input type="range" title="Logo Größe" inline name="logoSize" min="3" max="8" step="0.1" value="4.6" condition="showLogo">

<header>Offcanvas Einstellungen</header>

<select title="Menü Position" name="offcanvasPosition">

<option value="offcanvas-end">Rechts</option>

<option value="offcanvas-start" selected>Links</option>

</select>

<input type="range" title="Menü Breite (px)" name="offcanvasWidth" min="250" max="1000" step="10" value="520">

<header>Farben</header>

<input type="color" title="Offcanvas Hintergrund" name="offcanvasColor" value="#000000">

<input type="color" title="Menü Hintergrund" name="menuBgColor" value="#353535">

<input type="color" title="Menü Text" name="menuTextColor" value="#40b0bf">

<input type="color" title="Menü Hover" name="menuHoverColor" value="#e6c63b">

<input type="color" title="Akzentfarbe" name="accentColor" value="#22a5e5">

<input type="color" title="Untermenu Hintergrund" name="submenuBgColor" value="#2299aa">

<header>Hamburger Button</header>

<input type="color" title="Hamburger Farbe" name="hamburgerColor" value="#22a5e5">

<input type="color" title="Hamburger BG 1" name="hamburgerBg1" value="#37ee5b">

<input type="color" title="Hamburger BG 2" name="hamburgerBg2" value="#40ff3b">

<input type="checkbox" name="hamburgerShadow" title="Hamburger Schatten" checked>

<input type="color" title="Schatten Farbe 1" name="hamburgerColor1" value="#e6c63b" condition="hamburgerShadow">

<input type="color" title="Schatten Farbe 2" name="hamburgerColor2" value="#23272B" condition="hamburgerShadow">

<header>Social Media</header>

<input type="checkbox" title="Social anzeigen" name="showSocial" checked>

<select title="Icons Ausrichtung" name="contentAlign" condition="showSocial">

<option value="justify-content-start" selected>Links</option>

<option value="justify-content-center">Mitte</option>

<option value="justify-content-end">Rechts</option>

</select>

<input type="color" title="Social Farbe" name="socialColor" value="#ffffff" condition="showSocial">

<input type="color" title="Social BG 1" name="socialBgColor1" value="#000000" condition="showSocial">

<input type="color" title="Social BG 2" name="socialBgColor2" value="#23272b" condition="showSocial">

<input type="checkbox" name="socialShadow" title="Social Schatten" checked condition="showSocial">

<input type="color" title="Schatten Farbe 1" name="socialShadow1" value="#191b1f" condition="socialShadow && showSocial">

<input type="color" title="Schatten Farbe 2" name="socialShadow2" value="#23272B" condition="socialShadow && showSocial">

<input type="range" name="socialCount" title="Social Anzahl" min="1" max="6" step="1" value="6" condition="showSocial">

<header>Weitere Einstellungen</header>

<input type="checkbox" title="Sticky" name="sticky" checked>

<input type="checkbox" title="Transparent" name="transparent" checked>

<input type="range" title="Transparenz" name="opacity" min="0" max="1" step="0.1" value="0.5" condition="transparent">

<input type="checkbox" title="Text anzeigen" name="showText" checked>

<input type="checkbox" title="Footer Menü" name="showFooterMenu">

<input type="range" title="Menü Schriftgröße" name="menuFontSize" min="20" max="60" step="2" value="26">

</mbr-parameters>

<nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky, 'flex-row-reverse': offcanvasPosition == 'offcanvas-start'}" style="background: transparent !important; box-shadow: none !important;">

<div class="container-fluid" mbr-class="{'flex-row-reverse': offcanvasPosition == 'offcanvas-start'}">

<div class="navbar-brand"></div>

<div class="offcanvas_box">

<button class="btn_offcanvas" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">

<div class="offcanvas-button-content">

<span class="menu-text">MENÜ</span>

<div class="hamburger-offcanvas">

<span></span><span></span><span></span><span></span>

</div>

</div>

</button>

<div class="offcanvas {{offcanvasPosition}}" tabindex="-1" id="offcanvasRight" mbr-style="{'width': offcanvasWidth + 'px', 'background-color': offcanvasColor}">

<div class="offcanvas-body">

<div class="offcanvas_head">

<div class="offcanvas_head_container">

<div class="navbar-brand">

<span mbr-if="showLogo" class="navbar-logo">

<a href="index.html">

<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-01-26_121129/assets/images/logo.png" alt="Logo" mbr-style="{'height': logoSize + 'rem'}">

</a>

</span>

</div>

<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">

<div class="hamburger-offcanvas">

<span></span><span></span><span></span><span></span>

</div>

</button>

</div>

<p class="mbr-text mbr-fonts-style mb-0" mbr-if="showText" mbr-theme-style="display-5" data-app-selector=".mbr-text">niederastroth.de</p>

</div>

<div class="offcanvas_link">

<ul mbr-menu class="navbar-nav nav-dropdown" mbr-theme-style="display-5"><li class="nav-item"><a class="nav-link link bebas text-white" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">START</a></li>

<li class="nav-item dropdown"><a class="nav-link link bebas dropdown-toggle text-white" href="#" data-app-placeholder="Type Text" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Punkt1</a><div class="dropdown-menu" aria-labelledby="dropdown-330"><a class="bebas dropdown-item text-white" href="#" data-app-placeholder="Type Text">test</a></div></li><li class="nav-item dropdown"><a class="nav-link link bebas dropdown-toggle text-white" href="#" data-app-placeholder="Type Text" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Punkt2</a><div class="dropdown-menu" aria-labelledby="dropdown-677"><a class="bebas dropdown-item text-white" href="#" data-app-placeholder="Type Text">New Item</a></div></li><li class="nav-item"><a class="nav-link link bebas text-white" href="#" data-app-placeholder="Type Text">Punkt3</a></li><li class="nav-item"><a class="nav-link link bebas text-white" href="#" data-app-placeholder="Type Text">Punkt4</a></li><li class="nav-item"><a class="nav-link link bebas text-white" href="#" data-app-placeholder="Type Text">Punkt5</a></li>

<li class="nav-item"><a class="nav-link link bebas text-white" href="#" data-app-placeholder="Type Text">KONTAKT</a></li></ul>

</div>

<div class="social-container" mbr-if="showSocial">

<div class="social-list {{contentAlign}}">

<div class="soc-item" mbr-if="socialCount>0">

<a href="https://www.niederastroth.de/" target="_blank"><span mbr-icon class="mbr-iconfont mbr-iconfont-social icon54-v2-telephone" style="font-size: 30px;"></span></a>

</div>

<div class="soc-item" mbr-if="socialCount>1">

<span mbr-icon class="mbr-iconfont mbr-iconfont-social ti-email" style="font-size: 30px;"></span>

</div>

<div class="soc-item" mbr-if="socialCount>2">

<span mbr-icon class="mbr-iconfont mbr-iconfont-social mbri-info" style="font-size: 30px;"></span>

</div>

<div class="soc-item" mbr-if="socialCount>3">

<span mbr-icon class="mbr-iconfont mbr-iconfont-social socicon-googlemaps socicon" style="font-size: 30px; color: @socialColor"></span>

</div>

<div class="soc-item" mbr-if="socialCount>4">

<span mbr-icon class="mbr-iconfont mbr-iconfont-social socicon-behance socicon" style="font-size: 30px; color: @socialColor"></span>

</div>

<div class="soc-item" mbr-if="socialCount>5">

<span mbr-icon class="mbr-iconfont mbr-iconfont-social mobi-mbri-camera mobi-mbri" style="font-size: 30px; color: @socialColor"></span>

</div>

</div>

</div>

<div class="offcanvas_btn" mbr-if="showFooterMenu">

<div mbr-buttons mbr-theme-style="display-7" class="mbr-section-btn" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove">

<a class="btn-footer-link" href="impressum.html" data-app-placeholder="Link Text">IMPRESSUM</a>

<a class="btn-footer-link" href="datenschutz.html" data-app-placeholder="Link Text">DATENSCHUTZ</a>

</div>

</div>

</div>

</div>

</div>

</div>

</nav>

<script>

document.addEventListener('DOMContentLoaded', function() {

document.querySelectorAll('[data-submenu]').forEach(item => {

item.addEventListener('click', function(e) {

e.preventDefault();

this.parentElement.classList.toggle('active');

});

});

});

</script>

</section>