<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var BreiteBild = article.value('breite-bild', '');
  var FarbeHov = article.value('farbe-hover', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902 ';
		var headstyle = "";
	
	if ( BreiteBild !== "" ){headstyle += cssselector + "{max-width: " + BreiteBild + "px !important;}\n";}
	if ( FarbeHov !== "" ){headstyle += cssselector + "{background: " + FarbeHov + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var FarbeCorner1 = article.value('farbe-corner', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902:before ';
		var headstyle = "";
	
	if ( FarbeCorner1 !== "" ){headstyle += cssselector + "{background-color: " + FarbeCorner1 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var FarbeCorner2 = article.value('farbe-corner', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902:after ';
		var headstyle = "";
	
	if ( FarbeCorner2 !== "" ){headstyle += cssselector + "{background-color: " + FarbeCorner2 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var Opacity = article.value('opacity-hover', '');
  var OpacityWebkit = article.value('opacity-hover', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902:hover img,.hover1902.hover img ';
		var headstyle = "";
	
	if ( Opacity !== "" ){headstyle += cssselector + "{opacity:0." + Opacity + " !important;}\n";}
	if ( OpacityWebkit !== "" ){headstyle += cssselector + "{-webkit-opacity:0." + OpacityWebkit + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var ColorH3 = article.value('color-h3', '');
  var SizeH3 = article.value('size-h3', '');
  var GewichtH3 = article.value('gewicht-h3', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902 h3 ';
		var headstyle = "";
	
	if ( ColorH3 !== "" ){headstyle += cssselector + "{color: " + ColorH3 + " !important;}\n";}
	if ( SizeH3 !== "" ){headstyle += cssselector + "{font-size: " + SizeH3 + "em !important;}\n";}
	if ( GewichtH3 !== "" ){headstyle += cssselector + "{font-weight: " + GewichtH3 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var ColorH4 = article.value('color-h4', '');
  var SizeH4 = article.value('size-h4', '');
  var GewichtH4 = article.value('gewicht-h4', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902 h4 ';
		var headstyle = "";
	
	if ( ColorH4 !== "" ){headstyle += cssselector + "{color: " + ColorH4 + " !important;}\n";}
	if ( SizeH4 !== "" ){headstyle += cssselector + "{font-size: " + SizeH4 + "em !important;}\n";}
	if ( GewichtH4 !== "" ){headstyle += cssselector + "{font-weight: " + GewichtH4 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "hover1902 " + cssClass;}
	else {cssClass = "hover1902";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var ColorLink = article.value('color-link', '');
  var BgColorLink = article.value('bg-color-link', '');
  var OutlineColor = article.value('outline-color-link', '');
  var SizeLink = article.value('size-link', '');
  var GewichtLink = article.value('gewicht-link', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.hover1902 p a ';
		var headstyle = "";
	
	if ( ColorLink !== "" ){headstyle += cssselector + "{color: " + ColorLink + " !important;}\n";}
	if ( BgColorLink !== "" ){headstyle += cssselector + "{background-color: " + BgColorLink + " !important;}\n";}
	if ( OutlineColor !== "" ){headstyle += cssselector + "{outline: 1px solid " + OutlineColor + " !important;}\n";}
	if ( SizeLink !== "" ){headstyle += cssselector + "{font-size: " + SizeLink + "em !important;}\n";}
	if ( GewichtLink !== "" ){headstyle += cssselector + "{font-weight: " + GewichtLink + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Breakpoint = article.value("breakpoint","");
var MobileFont = article.value("mobile-font","");
var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';
   headstyle += '.WZP-Artikel_' + article.id + '.hover1902 {';
   headstyle += 'font-size: ' + MobileFont + '% !important;';
   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="hover1902-container <$= article.value("breite-widget") $>">
    <$
    for ( var i = 1; i <= 9; i++){
        var image = project.getImage(article.value("bild-" + i));
        if ( isNull(image) ){
            continue;
        }
    
        var altText = system.htmlEncode(system.removeHtmlTags(image.altText));
        var beschreibung = image.description;
        var title = system.htmlEncode(system.removeHtmlTags(image.description));
        var imgsrc = image.contentCopyPath;
        var fullsrc = image.workingCopyPath;
        var HeadDrei = article.value("h3-" + i, "");
        var HeadVier = article.value("h4-" + i, "");
        var linkname = "link-" + i;
        var linktext = article.value("linktext-" + i, "");
        
        $>

<figure class="hover1902 WZP-Artikel_<$=article.id$>">
   <img src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>">
       <figcaption>
          <h3><$= HeadDrei $></h3>
          <h4><$= HeadVier $></h4>
          <p><a <$= system.partial('zplink-expanded.html',  linkname) $>><$= linktext $></a></p>
       </figcaption>
</figure>

        <$
    }
    $>
		</div>

<$=system.partial("article-end.html")$>