<$
var Font = article.value("font","");
var FontW = article.value("fontw","");
var Left = article.value("left","");
var Top = article.value("top","");
var Corner = article.value("corner","");
var ZIndex = article.value("z-index","");

   var headstyle = "";
   headstyle += '.WZP-Artikel_' + article.id + '.sidenavbut a {';
   headstyle += ' text-align: right;';
   headstyle += ' font-size:' + Font + ' !important;';
   headstyle += ' font-weight:' + FontW + ' !important;';
   headstyle += ' top:' + Top + '% !important;';
   headstyle += ' left:-' + Left + 'px !important;';
   headstyle += ' border-top-right-radius:' + Corner + 'px !important;';
   headstyle += ' border-bottom-right-radius:' + Corner + 'px !important;';
   headstyle += ' z-index:' + ZIndex + ' !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var LeftHov = article.value("left-hov","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.sidenavbut a:hover {';
   headstyle += ' left:-' + LeftHov + 'px !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var TextTop = article.value("text-top","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.sidenavbut span {';
   headstyle += ' vertical-align:' + TextTop + 'px !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var IconGr = article.value("icon-gr","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.sidenavbut i {';
   headstyle += ' font-size:' + IconGr + 'px !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>


<$
var ColBE = article.value("col-b1","");
var BgColBE = article.value("bg-col-b1","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.sidebut1 {';
   headstyle += ' color:' + ColBE + ' !important;';
   headstyle += ' background-color:' + BgColBE + ' !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var HovColBE = article.value("hov-col-b1","");
var HovBgColBE = article.value("hov-bg-col-b1","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.sidebut1:hover {';
   headstyle += ' color:' + HovColBE + ' !important;';
   headstyle += ' background-color:' + HovBgColBE + ' !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<$
var MobSize = article.value("mob-size","");
     	var headstyle = "";
   		headstyle += '.WZP-Artikel_' + article.id + '.spalten-sidenavbut-mob {';
   headstyle += ' font-size:' + MobSize + 'px !important;';
   headstyle += ' width: 100% !important;';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break = article.value("mobile","");
var headstyle = '@media (max-width: calc(' + Break + 'px - 1px)) {';
   headstyle += '.sidenavbut {';
   headstyle += 'display: none;';
   headstyle += '}';
   headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break = article.value("mobile","");
var headstyle = '@media (min-width: ' + Break + 'px) {';
   headstyle += '.sidenavbut-mob {';
   headstyle += 'display: none;';
   headstyle += '}';
   headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
/* Einstellung fuer mobiles Verhalten */
var Break = article.value("mobile","");
var headstyle = '@media (max-width: calc(' + Break + 'px - 1px)) {';
var MobileBehavior = article.value("mobileBehavior", "bottom");
if (MobileBehavior === 'hide'){
   headstyle += '.sidenavbut, .sidenavbut-mob {';
   headstyle += 'display: none;';
   headstyle += '}}';
   system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
}
$>
<$
var Break = article.value("mobile","");
var MobSize = article.value("mob-size","");
var headstyle = '@media (max-width: ' + Break + 'px) {';
   		headstyle += 'body {';
   headstyle += ' margin-bottom: calc(' + MobSize + 'px + 10px);';
   headstyle += '}';
   headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->

<$=system.partial("article-begin.html")$>

<div class="sidenavbut WZP-Artikel_<$=article.id$>">
  <a class="sidebut1 WZP-Artikel_<$=article.id$>" <$= system.partial('zplink-expanded.html', 'link-1') $>><span><$= article.value("text-1") $></span> <i class="fa <$= article.value("icon-1") $>" style="margin-right:<$= article.value("icon-abst-1") $>px;"></i></a>
</div>

<div class="sidenavbut-mob WZP-Artikel_<$=article.id$>">
<a style="color:<$= article.value("col-b1") $>; background-color:<$= article.value("bg-col-b1") $>;" class="spalten-sidenavbut-mob WZP-Artikel_<$=article.id$>" <$= system.partial('zplink-expanded.html', 'link-1') $>><i class="fa <$= article.value("icon-1") $>"></i></a>
</div>

<$ if ( system.preview ) { $>
    <!-- Preview-Code nur f�r internen Vorschau -->
<div style="background-color:#d7daee; padding:15px; border-radius: 10px; box-shadow: inset 0px 0px 20px rgba(0, 51, 255, 0.99);">
<img src="https://www.zella.de/widget/bilder/wzp.png" style="float:left; margin-right:33px;">
    <p style="font-size: 1.2em; font-weight: bold; color:#0371df">Sidenav Button</p>
   	<p style="color:#0371df">Hier k&#246;nnen Sie das Widget &#246;ffnen oder l&#246;schen. Dieser Hinweis wird nur in der internen Vorschau angezeigt.</p>
</div>
<$ } else { $>
<$ } $>

<$=system.partial("article-end.html")$>