<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var Breite = article.value('breite', '');
  var Ausrichtung = article.value('ausrichtung', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 ';
		var headstyle = "";
	
	if ( Breite !== "" ){headstyle += cssselector + "{max-width: " + Breite + "px !important;}\n";}
	if ( Ausrichtung !== "" ){headstyle += cssselector + "{text-align: " + Ausrichtung + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var SchriftGroesse = article.value('title1-size', '');
  var SchriftFarbe = article.value('title1-color', '');
  var SchriftGewicht = article.value('title1-gew', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 .title1 ';
		var headstyle = "";
	
	if ( SchriftGroesse !== "" ){headstyle += cssselector + "{font-size: " + SchriftGroesse + "em !important;}\n";}
	if ( SchriftFarbe !== "" ){headstyle += cssselector + "{color: " + SchriftFarbe + " !important;}\n";}
	if ( SchriftGewicht !== "" ){headstyle += cssselector + "{font-weight: " + SchriftGewicht + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var SchriftGroesse2 = article.value('title2-size', '');
  var SchriftFarbe2 = article.value('title2-color', '');
  var SchriftGewicht2 = article.value('title2-gew', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 .title2 ';
		var headstyle = "";
	
	if ( SchriftGroesse2 !== "" ){headstyle += cssselector + "{font-size: " + SchriftGroesse2 + "em !important;}\n";}
	if ( SchriftFarbe2 !== "" ){headstyle += cssselector + "{color: " + SchriftFarbe2 + " !important;}\n";}
	if ( SchriftGewicht2 !== "" ){headstyle += cssselector + "{font-weight: " + SchriftGewicht2 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var SchriftGroesse3 = article.value('title3-size', '');
  var SchriftFarbe3 = article.value('title3-color', '');
  var SchriftGewicht3 = article.value('title3-gew', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 .title3 ';
		var headstyle = "";
	
	if ( SchriftGroesse3 !== "" ){headstyle += cssselector + "{font-size: " + SchriftGroesse3 + "em !important;}\n";}
	if ( SchriftFarbe3 !== "" ){headstyle += cssselector + "{color: " + SchriftFarbe3 + " !important;}\n";}
	if ( SchriftGewicht3 !== "" ){headstyle += cssselector + "{font-weight: " + SchriftGewicht3 + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var Farbverlauf = article.value('farbverlauf', '');
  var FarbverlaufWebkit = article.value('farbverlauf', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 figcaption ';
		var headstyle = "";
	
	if ( Farbverlauf !== "" ){headstyle += cssselector + "{background-image: linear-gradient(to top, " + Farbverlauf + " 0%, transparent 100%) !important;}\n";}
	if ( FarbverlaufWebkit !== "" ){headstyle += cssselector + "{background-image: -webkit-linear-gradient(to top, " + FarbverlaufWebkit + " 0%, transparent 100%) !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
	var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";
	
	if ( cssClass ) {cssClass = "wzp-bildhov-1901 " + cssClass;}
	else {cssClass = "wzp-bildhov-1901";}
	if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}
	
  var AusrichtungWidget = article.value('ausrichtung-widget', '');

		var cssselector = '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901-container ';
		var headstyle = "";
	
	if ( AusrichtungWidget !== "" ){headstyle += cssselector + "{text-align: " + AusrichtungWidget + " !important;}\n";}
	system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Breakpoint = article.value("breakpoint","");
var MobileFontTitle1 = article.value("mobile-font-title1","");
var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';
   headstyle += '.WZP-Artikel_' + article.id + '.wzp-bildhov-1901 {';
   headstyle += 'font-size: ' + MobileFontTitle1 + '% !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="wzp-bildhov-1901-container WZP-Artikel_<$=article.id$> <$= 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 TitelEins = article.value("title1-" + i, "");
        var TitelZwei = article.value("title2-" + i, "");
        var linkname = "link-" + i;
        
        $>

<a <$= system.partial('zplink-expanded.html',  linkname) $>>
  <figure class="wzp-bildhov-1901 WZP-Artikel_<$=article.id$>">
      <img src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>">
        <figcaption>
    	  <h3 class="title1"><$= TitelEins $></h3>
    	  <h3 class="title2"><$= TitelZwei $></h3>
        </figcaption>
  </figure>
</a>
        <$
    }
    $>
		</div>

<$=system.partial("article-end.html")$>