<$
var CardMaxW = article.value('card-maxw', '');	
var CardMinW = article.value('card-minw', '');	
var CardBg = article.value('card-bg', '');	
var CardShad = article.value('card-shad', '');	

var PrFfam = article.value('pr-ffam', '');
var PrFw = article.value('pr-fw', '');
var PrFsize = article.value('pr-fsize', '');
var PrCol = article.value('pr-col', '');
var PrHg = article.value('pr-hg', '');
var PrLineH = article.value('pr-lineh', '');

var HeadFfam = article.value('head-ffam', '');
var HeadFw = article.value('head-fw', '');
var HeadFsize = article.value('head-fsize', '');
var HeadCol = article.value('head-col', '');
var HeadHg = article.value('head-hg', '');
var HeadLineH = article.value('head-lineh', '');

var LinkFfam = article.value('link-ffam', '');
var LinkFw = article.value('link-fw', '');
var LinkFsize = article.value('link-fsize', '');
var LinkCol = article.value('link-col', '');
var LinkHg = article.value('link-hg', '');
var LinkLineH = article.value('link-lineh', '');

var LinkHov = article.value('link-hov', '');

var PFfam = article.value('p-ffam', '');
var PFw = article.value('p-fw', '');
var PFsize = article.value('p-fsize', '');
var PCol = article.value('p-col', '');
var PLineH = article.value('p-lineh', '');

var CardHov = article.value('c-hov', '');

var headstyle = "";


// CARD
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 {';
headstyle += 'max-width:' + CardMaxW + ';';
headstyle += ' min-width:' + CardMinW + ';';
headstyle += ' box-shadow: 0 0 5px ' + CardShad + ';';
headstyle += '}\n';

// HINTERGRUND
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 figcaption {';
headstyle += ' background-color:' + CardBg + ' !important;';
headstyle += '}\n';

// UEBERSCHRIFT OBEN RECHTS
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 h4 {';
headstyle += 'font-family:' + PrFfam + ';';
headstyle += ' font-weight:' + PrFw + ';';;
headstyle += ' font-size:' + PrFsize + ';';
headstyle += ' color:' + PrCol + ';';
headstyle += ' background-color:' + PrHg + ';';
headstyle += ' line-height: ' + PrLineH + ';';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 h4:before {';
headstyle += 'border-color: transparent ' + PrHg + ' transparent;';
headstyle += ' border-width: 0 12px ' + PrLineH + ' 0;';
headstyle += '}\n';

// UEBERSCHRIFT UNTEN LINKS
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 h3 {';
headstyle += 'font-family:' + HeadFfam + ';';
headstyle += ' font-weight:' + HeadFw + ';';;
headstyle += ' font-size:' + HeadFsize + ';';
headstyle += ' color:' + HeadCol + ';';
headstyle += ' background-color:' + HeadHg + ';';
headstyle += ' line-height: ' + HeadLineH + ';';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 h3::before {';
headstyle += 'border-color: transparent ' + HeadHg + ' transparent;';
headstyle += ' border-width:' + HeadLineH + ' 0 0 12px;';
headstyle += '}\n';


// LINK BTN
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 .wzp-linkcard-7__btn {';
headstyle += 'font-family:' + LinkFfam + ';';
headstyle += ' font-weight:' + LinkFw + ';';;
headstyle += ' font-size:' + LinkFsize + ';';
headstyle += ' color:' + LinkCol + ' !important;';
headstyle += ' background-color:' + LinkHg + ';';
headstyle += ' line-height: ' + LinkLineH + ';';
headstyle += '}\n';


headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 .wzp-linkcard-7__btn::before {';
headstyle += 'border-color: transparent transparent ' + LinkHg + ';';
headstyle += ' border-width:0 0 ' + LinkLineH + ' 12px;';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 .wzp-linkcard-7__btn:hover {';
headstyle += 'letter-spacing:' + LinkHov + ';';
headstyle += '}\n';


// TEXT
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 p {';
headstyle += 'font-family:' + PFfam + ';';
headstyle += ' font-weight:' + PFw + ';';;
headstyle += ' font-size:' + PFsize + ';';
headstyle += ' color:' + PCol + ';';
headstyle += ' line-height: ' + PLineH + ';';
headstyle += '}\n';

// CARD HOVER
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7:hover img {';
headstyle += 'transform:' + CardHov + ';';
headstyle += ' -webkit-transform:' + CardHov + ';';
headstyle += '}';


// MOBILE
var CardMaxW = article.value('card-maxw', '');	
headstyle += '@media (max-width:calc(' + CardMaxW + ' + 80px)) {\n';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-linkcard-7 {';
headstyle += 'margin: 10px 0 30px 0 !important;';
headstyle += '}\n';

headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>


<$
    if ( article.value('vollebreite') == "1" ){ var myClassName = "zpBreakout"; }
    else{ var myClassName = ""; }
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->

<$=system.partial('article-begin.html', myClassName)$>

<div style="text-align:<$= article.value("ausr-widget") $>;">
    <$
    var linkWholeCard = parseInt(article.value("linkWholeCard", "0"));
    
    for ( var i = 1; i <= 10; 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 HEADO = article.value("head-o-" + i, "");
        var HEAD = article.value("head-" + i, "");
        var TEXT = article.value("text-" + i, "");
        var LINKTEXT = article.value("linktext-" + i, "");
        var linkname = "link-" + i;
    $>
    <$ if (linkWholeCard) { $><a <$= system.partial('zplink-expanded.html',  linkname) $> class="wzp-linkcard-7__wrapperLink"><$ } $>
    <figure class="wzp-linkcard-7 WZP-Artikel_<$=article.id$>">
        <img src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>">
        <h4><$= HEADO $></h4>
        <figcaption>
            <h3><$= HEAD $></h3>
            <p><$= TEXT $></p>
            <$ if (!linkWholeCard) { $><a <$= system.partial('zplink-expanded.html',  linkname) $> class="wzp-linkcard-7__btn"><$= LINKTEXT $></a><$ } else { $>
                <span class="wzp-linkcard-7__btn"><$= LINKTEXT $></span>
            <$ } $>
        </figcaption>
    </figure>
    <$ if (linkWholeCard) { $> </a> <$ } $>
    <$ } $>
</div>

<$=system.partial("article-end.html")$>