<$
var MargTop = article.value('marg-top', '');
var MargBot = article.value('marg-bot', '');
var columnGap = article.value('columnGap', '0');

var BildHov = article.value('bild-hov', '');

var HeadFam = article.value('head-fam', '');
var HeadSize = article.value('head-size', '');
var HeadW = article.value('head-w', '');
var HeadShad = article.value('head-shad', '');
var HeadTransf = article.value('head-transf', '');
var HeadLet = article.value('head-let', '');
var HeadFsizeFallb = article.value('head-fsize-fallb', '');
var HeadFsize = article.value('head-fsize', '');
var HeadFsizeMax = article.value('head-fsize-max', '');
var HeadFsizeMin = article.value('head-fsize-min', '');
var HeadMargB = article.value('head-margb', '');
var HeadMargT = article.value('head-margt', '');

var TxtFam = article.value('txt-fam', '');
var TxtSize = article.value('txt-size', '');
var TxtW = article.value('txt-w', '');
var TxtShad = article.value('txt-shad', '');
var TxtTransf = article.value('txt-transf', '');
var TxtLet = article.value('txt-let', '');
var TxtFsizeFallb = article.value('txt-fsize-fallb', '');
var TxtFsize = article.value('txt-fsize', '');
var TxtFsizeMax = article.value('txt-fsize-max', '');
var TxtFsizeMin = article.value('txt-fsize-min', '');

var BtnFam = article.value('btn-fam', '');
var BtnSize = article.value('btn-size', '');
var BtnW = article.value('btn-w', '');
var BtnShad = article.value('btn-shad', '');
var BtnTransf = article.value('btn-transf', '');
var BtnLet = article.value('btn-let', '');
var BtnFsizeFallb = article.value('btn-fsize-fallb', '');
var BtnFsize = article.value('btn-fsize', '');
var BtnFsizeMax = article.value('btn-fsize-max', '');
var BtnFsizeMin = article.value('btn-fsize-min', '');

var BtnPosU = article.value('btn-posu', '');
var BtnTransl = article.value('btn-transl', '');

var HgOne = article.value('hg1', '');
var HgOneHov = article.value('hg1-hov', '');
var HeadColOne = article.value('headcol1', '');
var HeadColOneHov = article.value('headcol1-hov', '');
var TxtColOne = article.value('txtcol1', '');
var BtnColOne = article.value('btncol1', '');
var BtnColOneHov = article.value('btncol1-hov', '');

var headstyle = "";



// ARTIKELABSTAND
headstyle += '#a' + article.id + ' {';
headstyle += 'margin-top:' + MargTop + ';';
headstyle += ' margin-bottom:' + MargBot + ';';
headstyle += '}\n';

// Spaltenabstand & Breite Spalten
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex {';
headstyle += 'margin-right: ' + columnGap + ';';
headstyle += 'max-width:calc(100% - ' + columnGap + ');';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex:first-of-type {';
headstyle += 'max-width:100%;';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex:last-of-type {';
headstyle += 'margin-right: 0;';
headstyle += 'max-width:100%;';
headstyle += '}\n';

// IMG HOVER
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex:hover img {';
headstyle += '' + BildHov + '';
headstyle += '}\n';
// ÜBERSCHRIFT
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex .wzp-contflex_head {';
headstyle += 'font-family:' + HeadFam + ';';
headstyle += ' font-weight:' + HeadW + ';';
headstyle += ' text-shadow:' + HeadShad + ';';
headstyle += ' text-transform:' + HeadTransf + ';';
headstyle += ' letter-spacing:' + HeadLet + ';';
headstyle += ' font-size:' + HeadFsizeFallb + ';';
headstyle += ' font-size:clamp(' + HeadFsizeMin + ', ' + HeadFsize + ', ' + HeadFsizeMax + ');';
headstyle += ' margin-bottom:' + HeadMargB + ';';
headstyle += ' margin-top:' + HeadMargT + ';';
headstyle += ' line-height:1;';
headstyle += '}\n';

// TEXT
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex .wzp-contflex_text {';
headstyle += 'font-family:' + TxtFam + ';';
headstyle += ' font-weight:' + TxtW + ';';
headstyle += ' text-shadow:' + TxtShad + ';';
headstyle += ' text-transform:' + TxtTransf + ';';
headstyle += ' letter-spacing:' + TxtLet + ';';
headstyle += ' font-size:' + TxtFsizeFallb + ';';
headstyle += ' font-size:clamp(' + TxtFsizeMin + ', ' + TxtFsize + ', ' + TxtFsizeMax + ');';
headstyle += '}\n';

// BUTTON
headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex .wzp-contflex_btn {';
headstyle += 'font-family:' + BtnFam + ';';
headstyle += ' font-weight:' + BtnW + ';';
headstyle += ' text-shadow:' + BtnShad + ';';
headstyle += ' text-transform:' + BtnTransf + ';';
headstyle += ' letter-spacing:' + BtnLet + ';';
headstyle += ' font-size:' + BtnFsizeFallb + ';';
headstyle += ' font-size:clamp(' + BtnFsizeMin + ', ' + BtnFsize + ', ' + BtnFsizeMax + ');';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex .wzp-contflex_btn {';
headstyle += 'bottom:' + BtnPosU + ';';
headstyle += ' transform:translate(-50%, -' + BtnTransl + ');';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-contflex:hover .wzp-contflex_btn {';
headstyle += 'transform:translate(-50%, 0);';
headstyle += '}\n';


// SPALTE 1
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex_one {';
headstyle += 'background-color:' + HgOne + ';';
if (!isNull(article.value('outlineColor-1'))) {
    headstyle += 'border: 3px solid' + article.value('outlineColor-1') + ';';
}
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex_inner.wzp-contflex_one:hover {';
headstyle += 'background-color:' + HgOneHov + ';';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex_one .wzp-contflex_head {';
headstyle += 'color:' + HeadColOne + ';';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex:hover .wzp-contflex_one .wzp-contflex_head {';
headstyle += 'color:' + HeadColOneHov + ';';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex_one .wzp-contflex_text {';
headstyle += 'color:' + TxtColOne + ';';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex_one .wzp-contflex_btn {';
headstyle += 'color:' + BtnColOne + ';';
headstyle += '}\n';
headstyle += '.WZP-Artikel_' + article.id + ' .wzp-contflex:hover .wzp-contflex_one .wzp-contflex_btn {';
headstyle += 'color:' + BtnColOneHov + ';';
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 class="wzp-contflex-container WZP-Artikel_<$=article.id$>">
    <div class="wzp-contflex WZP-Artikel_<$=article.id$> wzp-anifade wzp-anifade_<$= article.value("anifade-sp1") $>">
        <$
        var imageOne = project.getImage(article.value("bild1-1"));
        if ( !isNull(imageOne) ){
            var altText = system.htmlEncode(system.removeHtmlTags(imageOne.altText));
            var beschreibung = imageOne.description;
            var title = system.htmlEncode(system.removeHtmlTags(imageOne.description));
            var imgsrc = imageOne.contentCopyPath;
            var fullsrc = imageOne.workingCopyPath;
        $>
        <img src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>">
        <$ } $>
        
        <$ var BtnOne = article.value("btn1-1");
        if (!isNull(article.value("link1-1")) && isNull(BtnOne)){ $><a <$= system.partial('zplink-expanded.html', "link1-1") $>> <$ } $>
        <div class="wzp-contflex_inner wzp-contflex_one" style="justify-content:<$= article.value("textf-pos") $>;">
            <$
            var HeadOne = (article.value("head1-1"));
            if ( !isNull(HeadOne ) ){ $>
                <h3 class="wzp-contflex_head"><$= HeadOne $></h3>
            <$ } $>
            
            <$
            var TextOne = (article.value("text1-1"));
            if ( !isNull(TextOne ) ){ $>
                <h4 class="wzp-contflex_text"><$= TextOne $></h4>
            <$ } $>
            
            <$
            var LinkOne = "link1-1";
            if ( !isNull(BtnOne ) ){ $>
                <a <$= system.partial('zplink-expanded.html',  LinkOne) $>><p class="wzp-contflex_btn"><$= BtnOne $><$= article.value("arrow") $></p></a>
            <$ } $>
        </div>
        <$ if (!isNull(article.value("link1-1"))){ $></a><$ } $>
    </div>
</div>

<$=system.partial("article-end.html")$>