Ticker (Laufschrift) in Shopware

{$esmxHeaderTickerContent = "{s name='headerTickerContent' namespace='frontend/index/index'}+ + +   Von 19 auf 16%:  Wir geben die MwSt.-Senkung auf alle regulären Preise direkt an Sie weiter!   + + +   Ab sofort bei jedem Einkauf:  16% MwSt.   + + +   Weniger Steuern.  Gleiche Qualität.   + + +   Fair & Transparent!   + + +{/s}"}
{if $esmxHeaderTickerContent}
<style>
.esmx--ticker {
max-width: 100vw;
white-space: nowrap;
overflow: hidden;
background: #33338e;
color:white;
line-height: 2;
}

.esmx--ticker span {
display: inline-block;
padding-left: 100%;
animation: ticker 10s linear infinite;
}

.esmx--ticker span:hover {
animation-play-state: paused;
}

@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
<div id="esmx--news-ticker" class="esmx--ticker"><span>{$esmxHeaderTickerContent}</span></div>
<script>
if (document.getElementById("esmx--news-ticker")) {
var ticker = document.getElementById("esmx--news-ticker");
len = ticker.innerHTML.length;
ticker.firstElementChild.style.animationDuration = len/6 +"s";
ticker.firstElementChild.style.animationDelay = "2s";
}
</script>
{/if}