<$
var ContBgBild = article.value('cont-bgbild', '');
var ContMinH = article.value('cont-h', '');

var TextfAbstOU = article.value('textf-abst-ou', '');
var TextfAbstRL = article.value('textf-abst-rl', '');
var TextfBlur = article.value('textf-blur', '');
var TextfHgCol = article.value('textf-hgcol', '');
var TextfAusr = article.value('textf-ausr', '');
var PosOMU = article.value('textf-pos-omu', '');

var TextFontZ = article.value('text-fontz', '');
var TextFontFam = article.value('text-font-fam', '');
var TextFontW = article.value('text-fontw', '');
var TextFontCol = article.value('text-col', '');
var TextLineH = article.value('text-lineh', '');
var TShad = article.value('textf-shad', '');
var TextStil = article.value('text-stil', '');

var headstyle = "";

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para {';
headstyle += 'background-image: url("' + ContBgBild + '");';
headstyle += ' min-height:' + ContMinH + ';';
headstyle += ' position:relative;';
headstyle += ' background-size:cover;';
headstyle += ' background-repeat:no-repeat;';
headstyle += ' background-position:50% 50%;';
headstyle += ' z-index:1;';
headstyle += ' margin-bottom:2.5em;';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-table {';
headstyle += 'min-height:' + ContMinH + ';';
headstyle += ' display:table;';
headstyle += ' width:100%;';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-text {';
headstyle += 'text-align:' + TextfAusr + ';';
headstyle += ' backdrop-filter: blur(' + TextfBlur + ');';
headstyle += ' -webkit-backdrop-filter: blur(' + TextfBlur + ');';
headstyle += ' background-color:' + TextfHgCol + ';';
headstyle += ' padding:' + TextfAbstOU + ' ' + TextfAbstRL + ';';
headstyle += ' vertical-align:' + PosOMU + ';';
headstyle += ' display:table-cell;';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-text h1, .WZP-Artikel_' + article.id + '.wzp-para-text h2, .WZP-Artikel_' + article.id + '.wzp-para-text h3, .WZP-Artikel_' + article.id + '.wzp-para-text h4, .WZP-Artikel_' + article.id + '.wzp-para-text p {';
headstyle += 'font-size:' + TextFontZ + ';';
headstyle += ' color:' + TextFontCol + ';';
headstyle += ' font-weight:' + TextFontW + ';';
headstyle += ' font-family:' + TextFontFam + ';';
headstyle += ' line-height:' + TextLineH + ';';
headstyle += ' text-shadow: 0 0 3px ' + TShad + ';';
headstyle += ' font-style:' + TextStil + ';';
headstyle += '}';

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<$
var Break = article.value("break","");
var MobContMinH = article.value('mob-cont-h', '');
var MobTextfAbstOU = article.value('mob-textf-abst-ou', '');
var MobTextfAbstRL = article.value('mob-textf-abst-rl', '');
var MobTextFontZ = article.value('mob-text-fontz', '');

var headstyle = '@media (max-width: ' + Break + 'px) {\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para {';
headstyle += 'min-height:' + MobContMinH + ';';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-table {';
headstyle += 'min-height:' + MobContMinH + ';';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-text {';
headstyle += 'padding:' + MobTextfAbstOU + ' ' + MobTextfAbstRL + ';';
headstyle += '}\n';

headstyle += '.WZP-Artikel_' + article.id + '.wzp-para-text h1, .WZP-Artikel_' + article.id + '.wzp-para-text h2, .WZP-Artikel_' + article.id + '.wzp-para-text h3, .WZP-Artikel_' + article.id + '.wzp-para-text h4, .WZP-Artikel_' + article.id + '.wzp-para-text p {';
headstyle += 'font-size:' + MobTextFontZ + ';';
headstyle += '}\n';

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-para WZP-Artikel_<$=article.id$>">
    <$ for ( var i = 1; i <= 1; i++){
        var Text = (article.value("text-" + i));
        if ( isNull(Text) ){
            continue;
        }
        var TextAusz = article.value("text-ausz-" + i, "");
    $>
        <div class="wzp-para-table WZP-Artikel_<$=article.id$>">
            <div class="wzp-para-text WZP-Artikel_<$=article.id$>">
                <<$= TextAusz $>><$= Text $></<$= TextAusz $>>
            </div>
        </div>
    <$ } $>
</div>

<script>
    $('.wzp-para').jarallax({
        speed: <$= article.value("speed", "0.5") $>
    })
</script>
<$=system.partial("article-end.html")$>