<$
var AbstOben = article.value('abst-oben', '');
var AniZeit = article.value('ani-zeit', '');
var TextAbstUnten = article.value('text-abst-unten', '');
var TShad = article.value('col-schatten', '');
var ColPfeil = article.value('col-pfeil', '');
var Pshad = article.value('shad-pfeil', '');
var Zoom = article.value('zoom', '');
var AbstPfeil = article.value('abst-pfeil', '');

var headstyle = "";

headstyle += '.wzp-headerbild-zoom {';
headstyle += 'margin-top:-' + AbstOben + 'em;';
headstyle += '}\n';

headstyle += '.wzp-headerbild-zoom img {';
headstyle += 'animation:wzp-headerbild-zoom ' + AniZeit + 's ease-out forwards;';
headstyle += '-webkit-animation:wzp-headerbild-zoom ' + AniZeit + 's ease-out forwards;';
headstyle += '}\n';

headstyle += '@-webkit-keyframes wzp-headerbild-zoom {';
headstyle += '0% { transform: scale(1.0); -webkit-transform: scale(1.0);} 100% { transform: scale(' + Zoom + '); -webkit-transform: scale(' + Zoom + '); }';
headstyle += '}\n';

headstyle += '.wzp-headerbild-zoom-text {';
headstyle += 'bottom:' + TextAbstUnten + '%;';
headstyle += ' text-shadow:' + TShad + ' 3px 0px 0px, ' + TShad + ' 2.83487px 0.981584px 0px, ' + TShad + ' 2.35766px 1.85511px 0px, ' + TShad + ' 1.62091px 2.52441px 0px, ' + TShad + ' 0.705713px 2.91581px 0px, ' + TShad + ' -0.287171px 2.98622px 0px, ' + TShad + ' -1.24844px 2.72789px 0px, ' + TShad + ' -2.07227px 2.16926px 0px, ' + TShad + ' -2.66798px 1.37182px 0px, ' + TShad + ' -2.96998px 0.42336px 0px, ' + TShad + ' -2.94502px -0.571704px 0px, ' + TShad + ' -2.59586px -1.50383px 0px, ' + TShad + ' -1.96093px -2.27041px 0px, ' + TShad + ' -1.11013px -2.78704px 0px, ' + TShad + ' -0.137119px -2.99686px 0px, ' + TShad + ' 0.850987px -2.87677px 0px, ' + TShad + ' 1.74541px -2.43999px 0px, ' + TShad + ' 2.44769px -1.73459px 0px, ' + TShad + ' 2.88051px -0.838247px 0px;';
headstyle += '}\n';

headstyle += '.wzp-headerbild-zoom-pfeil span {';
headstyle += 'box-shadow: 5px 5px 0px ' + ColPfeil + ', 10px 10px 5px ' + Pshad + ';';
headstyle += ' margin: ' + AbstPfeil + 'px 0 30px 0;';
headstyle += '}\n';

var AbstObenMob = article.value('abst-oben', '');
var AniZeitMob = article.value('ani-zeit', '');
var ZoomMob = article.value('zoom', '');
var AbstTextMob = article.value('abst-text-mob', '');

headstyle += '.wzp-headerbild-zoom-mobile {';
headstyle += 'margin-top:-' + AbstObenMob + 'em;';
headstyle += '}\n';

headstyle += '.wzp-headerbild-zoom-mobile img {';
headstyle += 'animation:wzp-headerbild-zoom-mob ' + AniZeitMob + 's ease-out forwards;';
headstyle += '-webkit-animation:wzp-headerbild-zoom-mob ' + AniZeitMob + 's ease-out forwards;';
headstyle += '}\n';

headstyle += '@-webkit-keyframes wzp-headerbild-zoom-mob {';
headstyle += '0% { transform: scale(1.0); -webkit-transform: scale(1.0);} 100% { transform: scale(' + ZoomMob + '); -webkit-transform: scale(' + ZoomMob + '); }';
headstyle += '}\n';

headstyle += '.wzp-headerbild-zoom-text-mobile {';
headstyle += 'margin-top:' + AbstTextMob + 'em;';
headstyle += '}\n';

var BreakPfeil = article.value("pfeil-ausbl","");
headstyle += '@media (max-width: ' + BreakPfeil + 'px) {';
headstyle += '.wzp-headerbild-zoom-pfeil span {';

headstyle += 'display:' + 'none;';
headstyle += '}';
headstyle += '}';

var Break = article.value("break","");
headstyle += '@media (max-width: calc(' + Break + 'px - 1px)) {';
headstyle += '.wzp-headerbild-zoom {';
headstyle += 'display: none;';
headstyle += '}';
headstyle += '}';

headstyle += '@media (min-width: ' + Break + 'px) {';
headstyle += '.wzp-headerbild-zoom-mobile {';
headstyle += 'display: none;';
headstyle += '}';
headstyle += '}';

headstyle += '@media (max-width: calc(' + Break + 'px - 1px)) {';
headstyle += '.wzp-headerbild-zoom-text {';
headstyle += 'display: none;';
headstyle += '}';
headstyle += '}';

headstyle += '@media (min-width: ' + Break + 'px) {';
headstyle += '.wzp-headerbild-zoom-text-mobile {';
headstyle += 'display: none;';
headstyle += '}';
headstyle += '}';

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<$
var imageEins = project.getImage(article.value("bild-desk"));
var altTextEins = system.htmlEncode(system.removeHtmlTags(imageEins.altText));
var beschreibung = imageEins.description;
var titleEins = system.htmlEncode(system.removeHtmlTags(imageEins.description));
var imgsrc = imageEins.contentCopyPath;
var fullsrc = imageEins.workingCopyPath;
$>
<$
var imageZwei = project.getImage(article.value("bild-mob"));
var altTextZwei = system.htmlEncode(system.removeHtmlTags(imageZwei.altText));
var beschreibung = imageZwei.description;
var titleZwei = system.htmlEncode(system.removeHtmlTags(imageZwei.description));
var imgsrc = imageZwei.contentCopyPath;
var fullsrc = imageZwei.workingCopyPath;
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial("article-begin.html")$>

<div class="wzp-headerbild-zoom zpBreakout">
 <img src="<$= imageEins.contentCopyPath $>" alt="<$= altTextEins $>" title="<$= titleEins $>" />
<div class="wzp-headerbild-zoom-text">
<$= article.value("text") $>
   <a style="border-bottom:none;" class="wzp-headerbild-zoom-pfeil" href="#sprung-wzp-headzoom-<$=article.id$>" aria-label="Nach unten scrollen"><span></span></a>
</div>
   <div id="sprung-wzp-headzoom-<$=article.id$>"></div>
</div>

<div class="wzp-headerbild-zoom-mobile zpBreakout">
 <img src="<$= imageZwei.contentCopyPath $>" alt="<$= altTextZwei $>" title="<$= titleZwei $>" />
</div>
<div class="wzp-headerbild-zoom-text-mobile">
  <$= article.value("text-mob") $>
</div>

<$=system.partial("article-end.html")$>