initial checkin

2 лет назад · dd68ccb2e4
--- a/newsletter/img/button-left.png
+++ b/newsletter/img/button-left.png
--- a/newsletter/img/button-right.png
+++ b/newsletter/img/button-right.png
--- a/newsletter/img/debug.log
+++ b/newsletter/img/debug.log
@@ -0,0 +1,2 @@
 [0908/130620.649:INFO:CONSOLE(1)] "Long rAF frame-time", source: file:///C:/Program%20Files/Adobe/Adobe%20Photoshop%202020/Required/www-rich-tooltips/build/external.js (1)
 [0924/181548.792:INFO:CONSOLE(1)] "Long rAF frame-time", source: file:///C:/Program%20Files/Adobe/Adobe%20Photoshop%202020/Required/www-rich-tooltips/build/external.js (1)
--- a/newsletter/img/dummy-teaser.jpg
+++ b/newsletter/img/dummy-teaser.jpg
--- a/newsletter/img/logo.png
+++ b/newsletter/img/logo.png
--- a/newsletter/img/redesign-anchor.png
+++ b/newsletter/img/redesign-anchor.png
--- a/newsletter/img/redesign-facebook.png
+++ b/newsletter/img/redesign-facebook.png
--- a/newsletter/img/redesign-fax.png
+++ b/newsletter/img/redesign-fax.png
--- a/newsletter/img/redesign-gradient-small.jpg
+++ b/newsletter/img/redesign-gradient-small.jpg
--- a/newsletter/img/redesign-gradient.jpg
+++ b/newsletter/img/redesign-gradient.jpg
--- a/newsletter/img/redesign-instagram.png
+++ b/newsletter/img/redesign-instagram.png
--- a/newsletter/img/redesign-linkedin.png
+++ b/newsletter/img/redesign-linkedin.png
--- a/newsletter/img/redesign-mail.png
+++ b/newsletter/img/redesign-mail.png
--- a/newsletter/img/redesign-phone.png
+++ b/newsletter/img/redesign-phone.png
--- a/newsletter/img/redesign-twitter.png
+++ b/newsletter/img/redesign-twitter.png
--- a/newsletter/img/redesign-youtube.png
+++ b/newsletter/img/redesign-youtube.png
--- a/newsletter/img/trennlinie-verlauf.jpg
+++ b/newsletter/img/trennlinie-verlauf.jpg
--- a/newsletter/img/twitter.jpg
+++ b/newsletter/img/twitter.jpg
--- a/newsletter/index.html
+++ b/newsletter/index.html
@@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
 <script>
 function loadXMLDoc(filename)
 {
 if (window.ActiveXObject)
  {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 else
  {
  xhttp = new XMLHttpRequest();
  }
 xhttp.open("GET", filename, false);
 try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
 xhttp.send("");
 return xhttp.responseXML;
 }


 function displayResult()
 {
 xml = loadXMLDoc("inxmail-Testmandant_1_3/inxmail/newsletter.xml");
 xsl = loadXMLDoc("inxmail-Testmandant_1_3/inxmail/htmlversion_redesign.xsl");
 // code for IE
 if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
 // code for Chrome, Firefox, Opera, etc.
 else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
 }
 </script>
 </head>
 <body onload="displayResult()">
 <div id="example" />
 </body>
 </html>



--- a/newsletter/inxmail-Testmandant_1_3.zip
+++ b/newsletter/inxmail-Testmandant_1_3.zip
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/description.xml
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/description.xml
@@ -0,0 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE templates SYSTEM "description.dtd">
 <templates descriptionVersion="3">
  <name>IHK24 Vorlage Testmandant Redesign</name>
  <displayname>IHK24 Vorlage Testmandant Redesign</displayname>
    <vendor>
      <name>GfI</name>
      <url>http://www.ihk-gfi.de</url>
    </vendor>
  <version>1.3</version>

  <template>
    <name>Newsletter IHK24</name>
    <infoPage>
      <file>info.html</file>
      <image>gfi_logo.gif</image>
    </infoPage>
    <templatefile>newsletter.xml</templatefile>
    <ignorewhitespaces>true</ignorewhitespaces>

    <xsl>
      <type>text</type>
      <name>Text_TEXT</name>
      <file>textversion.xsl</file>
      <image>text_vorschau.gif</image>
    </xsl>

    <xsl>
      <type>html</type>
      <name>Hauptvorlage</name>
      <file>htmlversion.xsl</file>
      <image>html_vorschau.gif</image>
    </xsl>

    <xsl>
      <type>html</type>
      <name>Nebenvorlage Redesign</name>
      <file>htmlversion_redesign.xsl</file>
      <image>html_vorschau.gif</image>
    </xsl>
  </template>

 </templates>
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/gfi_logo.gif
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/gfi_logo.gif
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/html_vorschau.gif
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/html_vorschau.gif
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/htmlversion.xsl
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/htmlversion.xsl
@@ -0,0 +1,857 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#160;">
  <!ENTITY br  "&#10;">
  <!ENTITY amp "&#38;#38;">
  <!ENTITY lt  "&#38;#60;">
  <!ENTITY gt  "&#62;">
  <!ENTITY Auml  "&#196;">
  <!ENTITY Ouml  "&#214;">
  <!ENTITY Uuml  "&#220;">
  <!ENTITY auml  "&#228;">
  <!ENTITY ouml  "&#246;">
  <!ENTITY uuml  "&#252;">
  <!ENTITY bull  "&#8226;">
 ]>

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>

 <xsl:template match="ihknewsletter">
 <html class="pl" lang="de-DE">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css;charset=UTF-8" />

  <title></title>
  <style type="text/css">
 /*<![CDATA[*/
  span{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:12px;font-weight:normal;text-decoration:none;color:#767676;}a{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:underline;color:#3399CC;}ul{margin-top:0;margin-bottom:0;}ol{margin-top:0;margin-bottom:0;}li{margin:0;}
  /*]]>*/
  </style>
  <style media="only screen and (max-width:479px), only screen and (max-width:479px) and (-webkit-min-device-pixel-ratio: 1.5)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:300px;height:auto}body[inx] img[width="300"]{width:150px;height:auto}body[inx] img[width="200"]{width:100px;height:auto}body[inx] img[width="180"]{width:94px;height:auto}body[inx] img[width="280"]{width:135px;height:auto}body[inx] img[width="170"]{width:90px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:300px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:300px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:300px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:290px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:288px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:288px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:188px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:280px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:145px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:135px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:93px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:150px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:100px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width:480px) and (max-width:639px) and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:320px;height:auto}body[inx] img[width="300"]{width:160px;height:auto}body[inx] img[width="200"]{width:106px;height:auto}body[inx] img[width="180"]{width:101px;height:auto}body[inx] img[width="280"]{width:145px;height:auto}body[inx] img[width="170"]{width:96px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:320px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:320px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:320px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:310px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:308px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:308px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:202px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:300px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:155px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:145px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:99px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:160px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:106px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (min-width:640px) and (max-width:719px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width:480px) and (max-width:599px)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:480px;height:auto}body[inx] img[width="300"]{width:240px;height:auto}body[inx] img[width="200"]{width:160px;height:auto}body[inx] img[width="180"]{width:154px;height:auto}body[inx] img[width="280"]{width:225px;height:auto}body[inx] img[width="170"]{width:150px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:480px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:480px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:480px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:470px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:468px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:468px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:308px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:460px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:235px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:225px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:153px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:240px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:160px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width: 2px) and (max-width:1px)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:600px;height:auto}body[inx] img[width="300"]{width:300px;height:auto}body[inx] img[width="200"]{width:200px;height:auto}body[inx] img[width="180"]{width:180px;height:auto}body[inx] img[width="280"]{width:280px;height:auto}body[inx] img[width="170"]{width:170px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:820px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:640px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:600px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:580px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:568px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:578px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:20px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:17px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:16px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:10px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:368px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:380px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:280px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:270px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:180px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:300px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:200px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (device-width:320px) and (device-height:480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1), only screen and (device-width:320px) and (device-height:480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2), only screen and (device-aspect-ratio:40/71) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:320px;height:auto}body[inx] img[width="300"]{width:160px;height:auto}body[inx] img[width="200"]{width:106px;height:auto}body[inx] img[width="180"]{width:310px;height:auto}body[inx] img[width="280"]{width:308px;height:auto}body[inx] img[width="170"]{width:308px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:320px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:320px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:320px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:310px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:308px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:308px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:308px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:308px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:308px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:308px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:308px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (device-width:320px) and (device-height:480px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 1), only screen and (device-width:320px) and (device-height:480px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:480px;height:auto}body[inx] img[width="300"]{width:240px;height:auto}body[inx] img[width="200"]{width:160px;height:auto}body[inx] img[width="180"]{width:470px;height:auto}body[inx] img[width="280"]{width:468px;height:auto}body[inx] img[width="170"]{width:468px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:480px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:480px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:480px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:470px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:468px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:468px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:468px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:468px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:468px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:468px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:468px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (device-aspect-ratio:40/71) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2)" type=
  "text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:568px;height:auto}body[inx] img[width="300"]{width:284px;height:auto}body[inx] img[width="200"]{width:189px;height:auto}body[inx] img[width="180"]{width:558px;height:auto}body[inx] img[width="280"]{width:556px;height:auto}body[inx] img[width="170"]{width:556px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:568px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:568px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:568px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:558px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:556px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:556px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:556px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:556px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:556px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:556px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:556px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width: 2px) and (max-width:1px)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:run-in;min-height:auto}body[inx] td[width="180"]{display:inline}body[inx] td[width="380"]{display:inline}body[inx] td[width="368"]{display:inline}body[inx] td[width="280"]{display:inline}body[inx] td[width="180"]{display:inline}body[inx] td[width="270"]{display:inline}body[inx] img[width="600"]{width:600px;height:auto}body[inx] img[width="300"]{width:300px;height:auto}body[inx] img[width="200"]{width:200px;height:auto}body[inx] img[width="180"]{width:180px;height:auto}body[inx] img[width="280"]{width:280px;height:auto}body[inx] img[width="170"]{width:170px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:820px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:640px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:600px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:580px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:568px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:578px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:20px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:17px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:16px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:10px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:368px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:380px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:280px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:270px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:180px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:300px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:200px;overflow:visible}
  /*]]>*/
  </style>
  <style>
 <![CDATA[
  table {border-collapse:separate;}
  table td {border-collapse:collapse;}
  table td img {vertical-align: middle;}
  a, a:link, a:visited {text-decoration: none; color: #00788a} 
  a:hover {text-decoration: underline;}
  h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important; color: black; line-height: 100%; }
   p {margin:0; padding:0; margin-bottom:0;}
  .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
  .ExternalClass {width: 100%;}   
  body {margin: 0; padding: 0; min-width: 100%!important;}
  .content {width: 100%; max-width: 600px;}                      
  a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  ]]>
  </style>
 </head>

 <body inx="inx" bgcolor="#FFFFFF" text="#000000" link="#337ab7" alink="#337ab7" vlink="#337ab7" style="background-color:#FFFFFF;color:#000000;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:12px;font-weight:normal;text-decoration:none;">
  <xsl:if test="news">
    <xsl:call-template name="targets"/>
  </xsl:if>
  <a name="top" id="top"></a>
  <!-- fuer die HTML-Version--><center><p style="font-size:12px; color:#333333; margin:0 0 8px 0; padding:0; font-family:Arial, Helvetica, sans-serif;">Wenn dieser Newsletter nicht richtig angezeigt wird, klicken Sie bitte <a style="color:#003366; text-decoration:underline;" href="[%application-url]/html_mail.jsp?params=[%online_params]" target="_blank">hier.</a></p></center>
  <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#4f6987" style="table-layout:fixed;text-align:center;">
    <tr>
      <td style="vertical-align:top;" valign="top" align="left">
        <div align="center">
          <table align="center" cellspacing="0" cellpadding="0" border="0" width="640" bgcolor="#4f6987" style="text-align:center;">
            <tr>
              <td style="vertical-align:top;" valign="top" align="left" width="640">
                <table cellspacing="0" cellpadding="0" border="0" width="640">
                  <tr>
                    <td style="vertical-align:top;" width="20"></td>
                    <td style="vertical-align:top;" valign="top" align="right" width="600">
                      <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#4f6987" id="header">
                        <tr>
                          <td style="vertical-align:top;" height="10" width="600"></td>
                        </tr>
                        <tr>
                          <td valign="top" width="600" align="right" bgcolor="#4f6987" style="vertical-align:top;">
                            <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:16px;font-weight:normal;text-decoration:none;color:#FFFFFF;">
                            <xsl:if test="string-length(salutation/issue) > 0">
                              <xsl:value-of select="salutation/issue"/> 
                            </xsl:if>
                            </span>
                          </td>
                        </tr>
                        <tr>
                          <td valign="top" width="600" align="left" bgcolor="#4f6987" style="vertical-align:top;">
                            <table>
                              <tr>
                                <td valign="top" align="left" bgcolor="#4f6987" style="vertical-align:top;">
                                  <xsl:call-template name="logo"/>
                                </td>
                                <td valign="top" width="600" align="left" bgcolor="#4f6987" style="vertical-align:top;">
                                  <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:24px;line-height:1.4;font-weight:normal;text-decoration:none;color:#FFFFFF;">
                                    <xsl:value-of select="imprint/logoname"/>
                                  </span>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td style="vertical-align:top;" height="20" width="600"></td>
                        </tr>
                      </table>
                    </td>
                    <td style="vertical-align:top;" width="20"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
  <xsl:call-template name="salutation"/>
  <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="table-layout:fixed;text-align:center;">
    <tr>
      <td style="vertical-align:top;" valign="top" align="left">
        <div align="center">
          <table align="center" cellspacing="0" cellpadding="0" border="0" width="640" bgcolor="#ffffff" style="text-align:center;">
            <tr>
              <td style="vertical-align:top;" valign="top" align="left" width="640">
                <table cellspacing="0" cellpadding="0" border="0" width="640">
                  <tr>
                    <td style="vertical-align:top;" width="20"></td>
                    <td style="vertical-align:top;" valign="top" align="left" width="600">
                      <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" id="news">
                        <tr>
                          <td style="vertical-align:top;" height="57" width="600"></td>
                        </tr>
                        <tr>
                          <td valign="top" width="600" align="left" bgcolor="#ffffff" style="vertical-align:top;">
                            <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:42px;font-weight:normal;text-decoration:none;color:#2f3133;">
                              Newsletter
                            </span>
                          </td>
                        </tr>
                        <tr>
                          <td style="vertical-align:top;" height="76" width="600"></td>
                        </tr>
                        <xsl:if test="allg_Infos/index_show = 'ja'">
                          <xsl:call-template name="index"/>
                        </xsl:if>
                        <!-- falls erster Artikel nicht angezeigt wird... -->
                        <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
                        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="600"&gt;</xsl:text>
                        <xsl:text disable-output-escaping="yes">&lt;table cellspacing="0" cellpadding="0" border="0" width="600"&gt;</xsl:text>
                        <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
                        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="600"&gt;</xsl:text>
                        <xsl:for-each select="news">
                          <xsl:call-template name="news"/>
                        </xsl:for-each>
                        <tr>
                          <td style="vertical-align:top;" height="60" width="600"></td>
                        </tr>
                        <xsl:call-template name="trenner">
                          <xsl:with-param name="height">15</xsl:with-param>
                        </xsl:call-template>
                        <tr>
                          <td valign="top" width="600" align="right" bgcolor="#ffffff" style="vertical-align:top;">
                            <a href="[%application-url]/benutzerprofil.jsp?email=[email]&amp;id=[%id]">
                              <span style="font-size:17px;color:#4a90ca;">Abonnement ändern</span>
                            </a> | <xsl:value-of disable-output-escaping="yes" select="footer/unsubscribe"/>
                          </td>
                        </tr>
                        <xsl:call-template name="trenner">
                          <xsl:with-param name="height">15</xsl:with-param>
                        </xsl:call-template>
                        <tr>
                          <td valign="top" width="600" align="right" bgcolor="#ffffff" style="vertical-align:top;">
                          	Besuchen Sie uns bei:&nbsp;
                          	<a href="https://www.facebook.com/ihkaachen" class="fb" target="_blank" title="Facebook">
                              <img src="[%embedded-image(3544);facebook.png]" alt="Facebook" width="32" height="32" border="0" />
                          	</a>&nbsp;
                          	<a href="https://www.youtube.com/user/ihkacvidpub" class="yt" target="_blank" title="Youtube">
                              <img src="[%embedded-image(3546);youtube.png]" alt="Youtube" width="32" height="32" border="0" />
                          	</a>&nbsp;
                          	<a href="https://twitter.com/ihkaachen" class="tw" target="_blank" title="Twitter">
                              <img src="[%embedded-image(3545);twitter.png]" alt="Twitter" width="32" height="32" border="0" />
                          	</a>
                          </td>
                        </tr>
                        <tr>
                          <td style="vertical-align:top;" height="30" width="600"></td>
                        </tr>
                        <tr>
                          <td valign="top" width="600" align="left" bgcolor="#ffffff" style="vertical-align:top;">
                            <xsl:apply-templates select="imprint"/>
                            <xsl:apply-templates select="footer"/>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td style="vertical-align:top;" width="20"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
  <xsl:if test="settings/openingrate='ja'">
    <xsl:text>&lt;img src="[%url:unique-count;"http://news.inxmail.de/open.gif"; ; ; "Opening rate"]" width="1" height="1" style="border:0" /&gt;</xsl:text>
  </xsl:if>
  </body>
  </html>
 </xsl:template>


 <xsl:template name="targets">
  <xsl:text>[%if </xsl:text>
  <xsl:for-each select="news">
    <xsl:if test="position()!=1">
      <xsl:text> AND </xsl:text>
    </xsl:if>
    <xsl:choose>
      <xsl:when test="target">
        <xsl:for-each select="target">
          <xsl:if test="position()!=1">
            <xsl:text> AND </xsl:text>
          </xsl:if>
          <xsl:choose>
            <xsl:when test="string-length(.) > 0">
              <xsl:text>BelongsNotToGroup("</xsl:text><xsl:value-of disable-output-escaping="yes" select="."/><xsl:text>")</xsl:text>
            </xsl:when>
            <xsl:otherwise>
              <xsl:text> FALSE </xsl:text>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:for-each>
      </xsl:when>
      <xsl:otherwise>
        <xsl:text> FALSE </xsl:text>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:for-each>
  <xsl:text>] [%no-mail] </xsl:text>
  <xsl:text> [%endif] </xsl:text>
 </xsl:template>


 <xsl:template name="logo">
 <xsl:if test="string-length(header/logo) > 0">
  <xsl:choose>
    <xsl:when test="string-length(//ihknewsletter/imprint/website) > 0">
      <a>
        <xsl:attribute name="href">http://<xsl:value-of select="//ihknewsletter/imprint/website"/></xsl:attribute>
        <img alt="Logo" class="logo" width="108" height="54" border="0">
          <xsl:attribute name="src"><xsl:value-of select="header/logo"/></xsl:attribute>
        </img>
      </a>
    </xsl:when>
    <xsl:otherwise>
      <img alt="Logo" calss="logo" width="108" height="54" border="0">
        <xsl:attribute name="src"><xsl:value-of select="header/logo"/></xsl:attribute>
      </img>
    </xsl:otherwise>
  </xsl:choose>
 </xsl:if>
 </xsl:template>


 <xsl:template name="salutation">
  <table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#dfe4ea" style="table-layout:fixed;text-align:center;" id="salutation">
    <tr>
      <td style="vertical-align:top;" valign="top" align="left">
        <div align="center">
          <table align="center" cellspacing="0" cellpadding="0" border="0" width="640" bgcolor="#dfe4ea" style="text-align:center;">
            <tr>
              <td style="vertical-align:top;" valign="top" align="left" width="640">
                <table cellspacing="0" cellpadding="0" border="0" width="640">
                  <tr>
                    <td style="vertical-align:top;" width="20"></td>
                    <td style="vertical-align:top;" valign="top" align="right" width="600">
                      <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#dfe4ea">
                        <tr>
                          <td style="vertical-align:top;" height="30" width="600"></td>
                        </tr>
                        <tr>
                          <td valign="top" width="600" align="left" bgcolor="#dfe4ea" style="vertical-align:top;">
                            <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#000000;">
                            <xsl:value-of select="salutation/address"/><br /><br />
                            <xsl:if test="string-length(salutation/paragraph) > 0">
                              <xsl:for-each select="salutation/paragraph">
                                <xsl:call-template name="insert_break">
                                  <xsl:with-param name="text" select="."/>
                                </xsl:call-template>
                                <br /><br />
                              </xsl:for-each>
                            </xsl:if>
                            <xsl:if test="string-length(salutation/greeting) > 0">
                              <xsl:value-of select="salutation/greeting"/><br /><br />
                            </xsl:if>
                            <xsl:if test="string-length(salutation/sig_name) > 0">
                              <xsl:value-of select="salutation/sig_name"/>
                            </xsl:if>
                            </span>
                          </td>
                        </tr>
                        <tr>
                          <td style="vertical-align:top;" height="30" width="600"></td>
                        </tr>
                      </table>
                    </td>
                    <td style="vertical-align:top;" width="20"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
 </xsl:template>


 <xsl:template name="index">
    <xsl:for-each select="news">
      <xsl:variable name="feld">
        <xsl:choose>
          <xsl:when test="string-length(//ihknewsletter/all_gesch_feld/gesch_feld) > 0">
            <xsl:value-of select="//ihknewsletter/all_gesch_feld/gesch_feld"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:value-of select="news_gesch_feld"/>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>
      
      <xsl:if test="target">
        <xsl:call-template name="start_target"/>
      </xsl:if>
      <xsl:choose>
        <xsl:when test="//ihknewsletter/allg_Infos/index_only_themes = 'ja'">
          <xsl:if test="title_show = 'ja'">
            <xsl:if test="string-length($feld) > 0">
            <tr>
              <td valign="top" width="600" align="left" bgcolor="#ffffff" style="vertical-align:top;">
                <table cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="30" align="center" valign="top">&bull;</td>
                    <td width="570" align="left" valign="top">
                      <a>
                      <xsl:attribute name="href">#anchor<xsl:value-of select="position()"/></xsl:attribute>
                      <xsl:attribute name="title"><xsl:value-of select='normalize-space($feld)'/></xsl:attribute>
                        <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#4a90ca;">
                          <xsl:value-of select='normalize-space($feld)'/>
                        </span>
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <xsl:call-template name="trenner" />
            </xsl:if>
          </xsl:if>
        </xsl:when>
        <xsl:otherwise>
        <tr>
          <td valign="top" width="600" align="left" bgcolor="#ffffff" style="vertical-align:top;">
            <table cellspacing="0" cellpadding="0">
              <tr>
                <td width="30" align="center" valign="top">&bull;</td>
                <td width="570" align="left" valign="top">
                  <a>
                  <xsl:attribute name="href">#anchor<xsl:value-of select="position()"/></xsl:attribute>
                  <xsl:attribute name="title"><xsl:value-of select='normalize-space(title)'/></xsl:attribute>
                    <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#4a90ca;">
                      <xsl:value-of select='normalize-space(title)'/>
                    </span>
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <xsl:call-template name="trenner" />
        </xsl:otherwise>
      </xsl:choose>
      <xsl:if test="target">
        <xsl:call-template name="end_target"/>
      </xsl:if>    
    </xsl:for-each>
 </xsl:template>

 <xsl:template name="trenner">
  <xsl:param name="height">10</xsl:param>
  <xsl:param name="width">600</xsl:param>
  <tr>
    <td valign="top" width="{$width}" height="{$height}" align="left" bgcolor="#ffffff" style="vertical-align:top;"></td>
  </tr>
  <tr>
    <td valign="top" width="{$width}" height="1" align="left" bgcolor="#ffffff" style="vertical-align:top;">
      <img width="{$width}" height="1" alt="Trennlinie">
        <xsl:attribute name="src"><xsl:value-of select="//ihknewsletter/header/trenner"/></xsl:attribute>
      </img>
    </td>
  </tr>
  <tr>
    <td valign="top" width="{$width}" height="{$height}" align="left" bgcolor="#ffffff" style="vertical-align:top;"></td>
  </tr>
 </xsl:template>
    
 <xsl:template name="news">
  <xsl:variable name="feld">
    <xsl:choose>
      <xsl:when test="string-length(//ihknewsletter/all_gesch_feld/gesch_feld) > 0">
        <xsl:value-of select="//ihknewsletter/all_gesch_feld/gesch_feld"/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="news_gesch_feld"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="oneRow">
    <xsl:choose>
      <xsl:when test="string-length(//ihknewsletter/allg_Infos/one_row) > 0">
        <xsl:value-of select="//ihknewsletter/allg_Infos/one_row"/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="one_row_article"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="colWidth">
    <xsl:choose>
      <xsl:when test="$oneRow = 'ja'">600</xsl:when>
      <xsl:otherwise>290</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="picHeight">
    <xsl:choose>
      <xsl:when test="$colWidth = '600'">400</xsl:when>
      <xsl:otherwise>192</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="nextNews" select="following-sibling::*[1]" />
  <xsl:variable name="titleShowCount" select="count(//ihknewsletter/news[title_show = 'ja'])" />
  <xsl:variable name="countPrevTitle" select="position() - count(preceding-sibling::news[title_show = 'ja'][1]/preceding-sibling::news) - 1" />
  <xsl:variable name="countPrevBig" select="position() - count(preceding-sibling::news[one_row_article = 'ja'][1]/preceding-sibling::news) - 1" />
  <xsl:variable name="countNews" select="count(preceding-sibling::news[one_row_article = 'ja' or title_show = 'ja'][1]/preceding-sibling::news)" />
  <xsl:variable name="countBig" select="count(preceding-sibling::news[one_row_article = 'ja'])" />
  <xsl:variable name="lastRow">
    <xsl:choose>
      <xsl:when test="$countNews = 0 and $countBig = 0">
        <xsl:value-of select="position()"/>
      </xsl:when>
      <xsl:when test="$countPrevBig > $countPrevTitle">
        <xsl:value-of select="$countPrevTitle - 1"/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="$countPrevBig"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:if test="title_show = 'ja'">
    <xsl:if test="string-length($feld) > 0">
      <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;/table&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
      <xsl:if test="target">
        <xsl:call-template name="start_target"/>
      </xsl:if>
      <tr>
        <td style="vertical-align:top;" width="600" height="123"></td>
      </tr>
      <tr>
        <td valign="top" width="600" align="left" bgcolor="#ffffff" style="vertical-align:top;">
          <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:28px;font-weight:normal;text-decoration:none;color:#2f3133;">
            <xsl:value-of select="$feld"/>
          </span>
        </td>
      </tr>
      <xsl:if test="target">
        <xsl:call-template name="end_target"/>
      </xsl:if>
      <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="600"&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;table cellspacing="0" cellpadding="0" border="0" width="600"&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
      <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="</xsl:text><xsl:value-of select="$colWidth"/><xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
      <xsl:if test="target">
        <xsl:call-template name="start_target"/>
      </xsl:if>
      <table>
        <xsl:call-template name="trenner">
          <xsl:with-param name="height">20</xsl:with-param>
          <xsl:with-param name="width" select="$colWidth - 6"/>
        </xsl:call-template>
      </table>
      <xsl:if test="target">
        <xsl:call-template name="end_target"/>
      </xsl:if>
    </xsl:if>
  </xsl:if>
  <xsl:if test="not(title_show) or title_show = 'nein'">
    <xsl:choose>
      <xsl:when test="($lastRow mod 2 = 1) or ($titleShowCount = 0 and position() = 1) or $oneRow = 'ja'">
        <xsl:if test="position() > 1 or $oneRow = 'nein'">
          <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;/table&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
          <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
          <xsl:if test="target">
            <xsl:call-template name="start_target"/>
          </xsl:if>
            <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" width="600" height="54"&gt;</xsl:text>
            <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
          <xsl:if test="target">
            <xsl:call-template name="end_target"/>
          </xsl:if>
          <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
        </xsl:if>
        <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="600"&gt;</xsl:text>
        <xsl:text disable-output-escaping="yes">&lt;table cellspacing="0" cellpadding="0" border="0" width="600"&gt;</xsl:text>
        <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="</xsl:text><xsl:value-of select="$colWidth"/><xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
        <xsl:if test="target">
          <xsl:call-template name="start_target"/>
        </xsl:if>
        <table>
          <xsl:call-template name="trenner">
            <xsl:with-param name="height">20</xsl:with-param>
            <xsl:with-param name="width" select="$colWidth - 6"/>
          </xsl:call-template>
        </table>
        <xsl:if test="target">
          <xsl:call-template name="end_target"/>
        </xsl:if>
      </xsl:when>
      <xsl:otherwise>
        <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
        <td style="vertical-align:top;" width="20"></td>
        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="</xsl:text><xsl:value-of select="$colWidth"/><xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
        <xsl:if test="target">
          <xsl:call-template name="start_target"/>
        </xsl:if>
        <table>
          <xsl:call-template name="trenner">
            <xsl:with-param name="height">20</xsl:with-param>
            <xsl:with-param name="width" select="$colWidth - 6"/>
          </xsl:call-template>
        </table>
        <xsl:if test="target">
          <xsl:call-template name="end_target"/>
        </xsl:if>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:if>
  <xsl:if test="target">
    <xsl:call-template name="start_target"/>
  </xsl:if>
  <a>
    <xsl:attribute name="id">anchor<xsl:value-of select="position()"/></xsl:attribute>
    <xsl:attribute name="name">anchor<xsl:value-of select="position()"/></xsl:attribute>
  </a>
  <xsl:if test="group_picture">
      <xsl:call-template name="picture">
        <xsl:with-param name="source" select="group_picture/picture"/>
        <xsl:with-param name="alt" select="group_picture/picture_alt"/>
        <xsl:with-param name="copyright" select="group_picture/picture_copyright"/>
        <xsl:with-param name="width"><xsl:value-of select="$colWidth"/></xsl:with-param>
        <xsl:with-param name="height"><xsl:value-of select="$picHeight"/></xsl:with-param>
      </xsl:call-template>
    <br style="font-size:10px;" />
  </xsl:if>
  <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:15px;font-weight:normal;text-decoration:none;color:#5f6266;line-height:1.5;">
    <xsl:value-of select="headline"/>
  </span>
  <br style="font-size:15px;" />
  <br style="font-size:7px;" />
  <xsl:if test="link">
    <xsl:if test="string-length(link) > 0">
      <xsl:text disable-output-escaping="yes">&lt;a href="</xsl:text>
        <xsl:call-template name="tracklinktitle">
          <xsl:with-param name="url" select="link" />
        </xsl:call-template>
      <xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
        <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:22px;font-weight:normal;text-decoration:none;color:#2d76b2;">
          <xsl:value-of select="title" />
        </span>
      <xsl:text disable-output-escaping="yes">&lt;/a&gt;</xsl:text>
    </xsl:if>
  </xsl:if>
  <xsl:if test="not(link)">
    <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:22px;font-weight:normal;text-decoration:none;color:#2d76b2;">
      <xsl:value-of select="title" />
    </span>
  </xsl:if>
  <br style="font-size:22px;" />
  <br style="font-size:10px;" />
  <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:16px;font-weight:normal;text-decoration:none;color:#5f6266;line-height:1.4;">
    <xsl:for-each select="paragraph">
      <xsl:call-template name="insert_break">
        <xsl:with-param name="text" select="."/>
      </xsl:call-template>
    </xsl:for-each>
  </span>

  <xsl:if test="target">
    <xsl:call-template name="end_target"/>
  </xsl:if>

  <xsl:choose>
    <xsl:when test="(title_show = 'ja' and (position() = last() or $nextNews/one_row_article = 'ja' or $nextNews/title_show = 'ja')) or (position() = 1 and position() = last()) and ($oneRow = 'nein' or $oneRow = '')">
      <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
      <td style="vertical-align:top;" width="20"></td>
      <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="</xsl:text><xsl:value-of select="$colWidth"/><xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
    </xsl:when>
    <xsl:when test="$lastRow mod 2 = 0 or ($titleShowCount = 0 and position() = 1) or $oneRow = 'ja'">
    </xsl:when>
    <xsl:otherwise>
      <xsl:if test="$nextNews/title_show = 'ja' or $nextNews/one_row_article = 'ja' or position() = last()">
        <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
        <td style="vertical-align:top;" width="20"></td>
        <xsl:text disable-output-escaping="yes">&lt;td style="vertical-align:top;" valign="top" align="left" width="</xsl:text><xsl:value-of select="$colWidth"/><xsl:text disable-output-escaping="yes">"&gt;</xsl:text>
      </xsl:if>
    </xsl:otherwise>
  </xsl:choose>

  <xsl:if test="position() = last()">
    <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
    <xsl:text disable-output-escaping="yes">&lt;/table&gt;</xsl:text>
    <xsl:text disable-output-escaping="yes">&lt;/td&gt;</xsl:text>
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
  </xsl:if>
  
 </xsl:template>


 <xsl:template match="imprint">
  <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:22px;font-weight:normal;text-decoration:none;color:#2f3133;">
    <b>Ihr Kontakt zu uns:</b>
  </span>
  <table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" id="imprint">
    <tr>
      <td style="vertical-align:top;" valign="top" width="400" height="20"></td>
      <td style="vertical-align:top;" valign="top" width="200" height="20"></td>
    </tr>
    <tr>
      <td valign="top" width="400" align="left" bgcolor="#ffffff" style="vertical-align:top;">
        
 <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#5f6266;">
          <xsl:value-of select="name"/><br />
          <xsl:value-of select="street"/><br />
          <xsl:value-of select="city"/><br />
        </span>
 		<span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#5f6266;">
          <xsl:if test="phone and string-length(phone) > 0">
 			<xsl:value-of select="phone"/><br />
          </xsl:if>
          <xsl:if test="fax and string-length(fax) > 0">
 			<xsl:value-of select="fax"/><br />
          </xsl:if>
          <a href="mailto:{email}">
            <span style="font-size:17px;">			
              E-Mail: <xsl:value-of select="email"/>
            </span>
          </a>
        </span>
      </td>
      <td valign="top" width="200" align="left" bgcolor="#ffffff" style="vertical-align:top;">
        
      </td>
    </tr>
    <tr>
      <td style="vertical-align:top;" valign="top" width="200" height="20"></td>
      <td style="vertical-align:top;" valign="top" width="400" height="20"></td>
    </tr>
    <tr>
      <td valign="top" width="200" align="left" bgcolor="#ffffff" style="vertical-align:top;">
        <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#5f6266;">
        </span>
      </td>
      <td valign="top" width="400" align="left" bgcolor="#ffffff" style="vertical-align:top;">
        <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#5f6266;">
 		</span>
      </td>
    </tr>
    <tr>
      <td style="vertical-align:top;" valign="top" width="200" height="20"></td>
      <td style="vertical-align:top;" valign="top" width="400" height="20"></td>
    </tr>
  </table>
 </xsl:template>


 <xsl:template match="footer">
  <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:none;color:#5f6266;" id="footer">
    <xsl:for-each select="paragraph">
      <xsl:call-template name="insert_break">
        <xsl:with-param name="text" select="."/>
      </xsl:call-template>
      <br /><br />
    </xsl:for-each>
    <xsl:call-template name="insert_break">
      <xsl:with-param name="text" select="copyright"/>
    </xsl:call-template>
  </span>
 </xsl:template>


 <xsl:template name="picture">
  <xsl:param name="source"></xsl:param>
  <xsl:param name="alt"></xsl:param>
  <xsl:param name="copyright"><xsl:text></xsl:text></xsl:param>
  <xsl:param name="width">280</xsl:param>
  <xsl:param name="height">186</xsl:param>
  <xsl:text disable-output-escaping="yes">&lt;img src="</xsl:text>
    <xsl:if test="not(contains($source, '[%embedded-image'))">
      <xsl:value-of disable-output-escaping="yes" select="$source"/>
    </xsl:if>
    <xsl:if test="contains($source, '[%embedded-image')">        
      <xsl:variable name="embed_part" select="substring-after($source, 'src=')"/>
      <xsl:variable name="embed" select="substring-before($embed_part, 'alt=')"/>
      <xsl:value-of select="$embed"/>
    </xsl:if>
   " border="0" width="<xsl:value-of select="$width"/>" height="<xsl:value-of select="$height"/>" alt="<xsl:value-of select="$alt"/>"<xsl:text disable-output-escaping="yes">/&gt;</xsl:text>
  <xsl:if test="string-length($copyright) > 0">
    <br style="font-size:10px;"/>
    <span style="font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:12px;font-weight:normal;text-decoration:none;color:#5f6266;text-align:right;display:block;">
      <xsl:value-of select="$copyright" />
    </span>
  </xsl:if>
  <br style="font-size:10px;"/>
 </xsl:template>


 <xsl:template name="insert_break">
   <xsl:param name="text"/>
   <xsl:choose>
    <xsl:when test="contains($text,'&#10;')">
      <xsl:value-of select="substring-before($text,'&#10;')"/>
      <xsl:text>&lt;br&gt;</xsl:text>
      <xsl:call-template name="insert_break">
        <xsl:with-param name="text" select="substring-after($text,'&#10;')"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$text"/>
    </xsl:otherwise>
  </xsl:choose>
 </xsl:template>


 <xsl:template name="tracklinktitle">
  <xsl:param name="url" />
  <xsl:param name="title">
  </xsl:param>
  <xsl:value-of select="substring-before($url,']')" /><xsl:text>; "</xsl:text>
  <xsl:value-of select="$title"/>
  <xsl:text>"]</xsl:text>
 </xsl:template>


 <xsl:template name="start_target">
  <xsl:variable name="ending">
    <xsl:for-each select="target">
      <xsl:sort select="." data-type="text" order="descending" />
      <xsl:if test="position()=1">
        <xsl:if test="string-length(.) > 0">]
        </xsl:if>
      </xsl:if>
    </xsl:for-each>
  </xsl:variable>
  <xsl:for-each select="target">
    <xsl:sort select="." data-type="text" order="descending" />
    <xsl:if test="string-length(.) > 0">
      <xsl:if test="position() = 1">
        <xsl:text>
 [%if </xsl:text>
      </xsl:if>
      <xsl:if test="position() != 1">
        <xsl:text> OR </xsl:text>
      </xsl:if>
      <xsl:text>BelongsToGroup("</xsl:text><xsl:value-of disable-output-escaping="yes" select="."/><xsl:text>")</xsl:text>
    </xsl:if>
    <xsl:if test="position()=last()">
      <xsl:value-of select="$ending"/>
    </xsl:if>
  </xsl:for-each>
 </xsl:template>


 <xsl:template name="end_target">
  <xsl:for-each select="target">
    <xsl:sort select="." data-type="text" order="descending" />
    <xsl:if test="string-length(.) > 0">
      <xsl:if test="position() = 1">
        <xsl:text>
 [%endif]
 </xsl:text>
      </xsl:if>
    </xsl:if>
  </xsl:for-each>
 </xsl:template>
  
 </xsl:stylesheet>
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/htmlversion_redesign.xsl
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/htmlversion_redesign.xsl
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/info.html
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/info.html
@@ -0,0 +1,62 @@
 <html
 	<head>
 		<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<style type="text/css">
 				.style_0 { font-family: Arial,Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; text-indent: 0em; text-align: left; letter-spacing: normal; word-spacing: normal; text-transform: none; white-space: normal; color: black; orphans: 2; widows: 2; page-break-inside: auto; line-height: normal;}
 		</style>
 	</head>

 <body class="style_0">

 <p align="center">
 	<img src="gfi_logo.gif"/>
 </p>

 <p style="background-color:#F1F2F2" align="center">
 	&nbsp;<br/>
 	<b>About this template</b><br/>
 	&nbsp;
 </p>

 <span style="text-decoration:underline;">Introduction</span><br/>
 Add a personal touch with your <span style="color:#A97C38">signature as scanned image</span>. Order your mailings
 with the <span style="color:#A97C38">issue</span> information as enumeration or date.<br/><br/>

 <span style="text-decoration:underline;">Article</span><br/>
 Control who receives an article by adding the <span style="color:#A97C38">target group</span> element. 
 If your headlines are too long for the table of contents, add a shorter version in the <span style="color:#A97C38">short headline</span> element.<br/><br/>

 <span style="text-decoration:underline;">Imprint</span><br/>
 Legally correct imprints depend on your local law. German companies need to add <span style="color:#A97C38">Tax ID</span>, <span style="color:#A97C38">CEO</span> and other fields.<br/><br/>

 <span style="text-decoration:underline;">Footer</span><br/>
 Add the <span style="color:#A97C38">Unsubscription link</span>.<br/><br/>

 <span style="text-decoration:underline;">Settings</span><br/>
 Here, define the <span style="color:#A97C38">image path</span> and active 
 <span style="color:#A97C38">tracking of openings</span>.

 <br/>

 <p style="background-color:#F1F2F2" align="center">
 	&nbsp;<br/>
 	<b>Impressum</b><br/>
 	&nbsp;
 </p>

 <p align="center">
  IHK Gesellschaft für Informationsverarbeitung mbH<br/>
  Hörder Hafenstraße 5<br/>
  44263 Dortmund<br/>
  <br/>
  Telefon: +49 231 97 46 - 0<br/>
  Telefax: +49 231 97 46 - 3800<br/>
  E-Mail: <a href="mailto:info@gfi.ihk.de">info@gfi.ihk.de</a><br/>
 	Website: <a href="www.ihk-gfi.de">www.ihk-gfi.de</a><br/><br/>

 	<small>&copy; IHK Gesellschaft für Informationsverarbeitung mbH</small><br/>
 	&nbsp;
 </p>

 </body>
 </html>
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/lang_en.xml
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/lang_en.xml
@@ -0,0 +1,42 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <content>	
 	<text id="TOC_ALIGNMENT_LEFT_SELECTION">left</text>
 	<text id="TOC_ALIGNMENT_RIGHT_SELECTION">right</text>
 	<text id="TOC_SHOW_YES_SELECTION">yes</text>
 	<text id="TOC_SHOW_NO_SELECTION">no</text>
 	
 	<text id="OPENINGRATE_YES_SELECTION">yes</text>
 	<text id="OPENINGRATE_LABEL">Opening rate</text>	

 	<text id="ALTERNATIVE_BANNERTEXT_LABEL">[Image: Banner]</text>
 	<text id="ALTERNATIVE_LOGOTEXT_LABEL">[Image: Logo]</text>
 	<text id="ALTERNATIVE_SIGNATURETEXT_LABEL">[Image: Signature]</text>
 	<text id="ALTERNATIVE_TOP_ICON_LABEL">^ top</text>	
 	<text id="GENERAL_ALTERNATIVETEXT_LABEL">Image</text>	
 	
 	<text id="PICTURE_POSITION_LEFT_SELECTION">left</text>
 	<text id="PICTURE_POSITION_RIGHT_SELECTION">right</text>
 	
 	<text id="LISTTYPE_UNORDERED_SELECTION">unordered</text>
 	
 	<text id="IMPRINT_LABEL">Contact and Imprint</text>
 	<text id="IMPRINT_CEO_LABEL">CEO:</text>			
 	<text id="IMPRINT_EDITOR_LABEL">Editor:</text>
 	
 	<text id="IMPRINT_PHONE_LABEL">Phone:</text>
 	<text id="IMPRINT_FAX_LABEL">Fax:</text>
 	<text id="IMPRINT_EMAIL_LABEL">Email:</text>
 	<text id="IMPRINT_WEBSITE_LABEL">Web site:</text>
 	
 	<text id="IMPRINT_REGISTER_LABEL">Register:</text>
 	<text id="IMPRINT_TAX_LABEL">Tax ID:</text>
 	
 	<text id="SALUTATION_PS_LABEL">P.S.:</text>
 			
 	<!-- HTML-Version only -->
 	<text id="FOOTER_EMAIL_LABEL">Contact</text>
 			
 	<!-- Text-Version only -->
 	<text id="TOC_LABEL">Contents</text>	
 </content>
 	
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/newsletter.xml
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/newsletter.xml
@@ -0,0 +1,521 @@
 <!DOCTYPE ihknewsletter [

  <!ELEMENT ihknewsletter (header, allg_Infos?, salutation, news+, imprint, footer, settings)>

 <!-- HEADER -->
  <!ELEMENT header (logo, trenner, trenner_verlauf, newsletter_title?)>
  <!ATTLIST header
    lang CDATA "Kopf">

  <!ELEMENT logo (#PCDATA)>
  <!ATTLIST logo
    lines CDATA "1"
    lang CDATA "Logo-Grafik"
    help CDATA "Angabe der Webadresse">

  <!ELEMENT trenner (#PCDATA)>
  <!ATTLIST trenner
    lines CDATA "1"
    lang CDATA "Trenner-Grafik"
    help CDATA "Angabe der Webadresse">

  <!ELEMENT trenner_verlauf (#PCDATA)>
  <!ATTLIST trenner_verlauf
    lines CDATA "1"
    lang CDATA "Trenner-Grafik Verlauf"
    help CDATA "Angabe der Webadresse">

  <!ELEMENT newsletter_title (#PCDATA)>
  <!ATTLIST newsletter_title
    lines CDATA "1"
    lang CDATA "Newsletter Überschrift">

 <!-- ALLG_INFOS -->
  <!ELEMENT allg_Infos (gesch_feld, index_show, index_only_themes, one_row?)>
  <!ATTLIST allg_Infos
  lang CDATA "Zusatzoptionen">

  <!ELEMENT gesch_feld (#PCDATA)>
  <!ATTLIST gesch_feld
    lines CDATA "1"
    lang CDATA "Geschäftsfeld für alle News"
    help CDATA "Bitte dieses Feld nur füllen, wenn die automatische Geschäftsfelder-Bezeichnung der News nicht korrekt ist.">

  <!ELEMENT index_show (#PCDATA)>
  <!ATTLIST index_show
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Index anzeigen?">

  <!ELEMENT index_only_themes (#PCDATA)>
  <!ATTLIST index_only_themes
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Index nur aus Rubriken?">

  <!ELEMENT one_row (#PCDATA)>
  <!ATTLIST one_row
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Soll der Newsletter einspaltig angezeigt werden?">

 <!-- SALUTATION -->
  <!ELEMENT salutation (issue, address, paragraph+, greeting, sig_name)>
  <!ATTLIST salutation
    lang CDATA "Begrüßung">

  <!ELEMENT issue (#PCDATA)>
  <!ATTLIST issue
    lines CDATA "1"
    lang CDATA "Ausgabe">

  <!ELEMENT address (#PCDATA)>
  <!ATTLIST address
    lines CDATA "1"
    lang CDATA "Anrede">

  <!ELEMENT paragraph (#PCDATA)>
  <!ATTLIST paragraph
    lines CDATA "4"
    lang CDATA "Absatz">

  <!ELEMENT greeting (#PCDATA)>
  <!ATTLIST greeting
    lines CDATA "1"
    lang CDATA "Grußformel">

  <!ELEMENT sig_name (#PCDATA)>
  <!ATTLIST sig_name
    default CDATA "Ihre IHK24"
    lines CDATA "1"
    lang CDATA "Unterschrift">

 <!-- NEWS -->
  <!ELEMENT news (target*, headline?, title, title_show?, news_gesch_feld?, link?, paragraph+, group_picture?, dihk, net, oid?, one_row_article?, is_infobanner?, is_chart_teaser?, chart_teaser_text?, infobanner_cta_text?)>
  <!ATTLIST news
    lang CDATA "Artikel"
    count CDATA "1"
    summary CDATA "title">

  <!ELEMENT headline (#PCDATA)>
  <!ATTLIST headline
    lines CDATA "1"
    limit CDATA "255"
    lang CDATA "Dachzeile">

  <!ELEMENT title (#PCDATA)>
  <!ATTLIST title
    lines CDATA "1"
    limit CDATA "255"
    lang CDATA "Überschrift">

  <!ELEMENT title_show (#PCDATA)>
  <!ATTLIST title_show
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Geschäftsfeld über News anzeigen?">

  <!ELEMENT news_gesch_feld (#PCDATA)>
  <!ATTLIST news_gesch_feld
    lines CDATA "1"
    lang CDATA "Geschäftsfeld für diese News">

  <!ELEMENT oid (#PCDATA)>
  <!ATTLIST oid
    lines CDATA "1"
    limit CDATA "10"
    lang CDATA "Oid"
    help CDATA "Bitte nicht verändern! Beim nächsten Update würde sonst eine neue News angelegt!">

  <!ELEMENT dihk (#PCDATA)>
  <!ATTLIST dihk
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "nein"
    lang CDATA "DIHK-Meldung?">

  <!-- GROUP_PICTURE -->
    <!ELEMENT group_picture (picture, picture_alt, picture_height?, picture_pos?, picture_copyright?)>
    <!ATTLIST group_picture
      lang CDATA "Bild"
      orientation CDATA "vertical">

    <!ELEMENT picture (#PCDATA)>
    <!ATTLIST picture
      component CDATA "url"
      lines CDATA "1"
      lang CDATA "Bildquelle"
      help CDATA "maximale Breite 115 Pixel">

    <!ELEMENT picture_alt (#PCDATA)>
    <!ATTLIST picture_alt
      lines CDATA "1"
      limit CDATA "128"
      lang CDATA "Alternativtext">

    <!ELEMENT picture_height (#PCDATA)>
    <!ATTLIST picture_height
      lines CDATA "1"
      limit CDATA "5"
      lang CDATA "Bildhöhe"
      help CDATA "Bildbreite wird auf 115 Pixel festgelegt! Bildhöhe ggf. entsprechend angeben.">

    <!ELEMENT picture_pos (#PCDATA)>
    <!ATTLIST picture_pos
      component CDATA "combobox"
      combocontent CDATA "(links,rechts)"
      default CDATA "links"
      lang CDATA "Soll das Bild links oder rechts angezeigt werden?">

    <!ELEMENT picture_copyright (#PCDATA)>
    <!ATTLIST picture_copyright
      lines CDATA "1"
      limit CDATA "128"
      lang CDATA "Urheberrechte (Copyright)">

  <!ELEMENT net (#PCDATA)>
  <!ATTLIST net
    component CDATA "combobox"
    combocontent CDATA "(Internet,Extranet)"
    lang CDATA "Freigabe">

  <!ELEMENT link (#PCDATA)>
  <!ATTLIST link
    component CDATA "url"
    default CDATA "%5b%25url%3aunique-count%3b+%22http%3a%2f%2f%22%5d"
    default-decode CDATA "true"
    default-charset CDATA "UTF-8"
    lines CDATA "1"
    lang CDATA "Link"
    help CDATA "Bitte keinen zusätzlichen Linktext einfügen! Die Überschrift wird automatisch hinzugefügt.">

  <!ELEMENT target (#PCDATA)>
    <!ATTLIST target
    component CDATA "simpletargetgroup"
    labelallignment CDATA "left"
    lang CDATA "Zielgruppe">

  <!ELEMENT one_row_article (#PCDATA)>
  <!ATTLIST one_row_article
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Soll der Artikel einspaltig angezeigt werden?">

  <!ELEMENT is_infobanner (#PCDATA)>
  <!ATTLIST is_infobanner
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Soll der Artikel als Infobanner angezeigt werden?">

  <!ELEMENT is_chart_teaser (#PCDATA)>
  <!ATTLIST is_chart_teaser
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Soll der Artikel als Chartteaser angezeigt werden?">

  <!ELEMENT chart_teaser_text (#PCDATA)>
  <!ATTLIST chart_teaser_text
    lines CDATA "1"
    limit CDATA "255"
    lang CDATA "Chartteaser Text">

  <!ELEMENT infobanner_cta_text (#PCDATA)>
  <!ATTLIST infobanner_cta_text
    lines CDATA "1"
    limit CDATA "255"
    lang CDATA "Infobanner Call to Action Text">

 <!-- IMPRINT -->
  <!ELEMENT imprint (name, logoname, street, city, phone?, email, fax?, ceo?, register?, editorial_office?, tax?, website?)>
  <!ATTLIST imprint
    lang CDATA "Impressum">

  <!ELEMENT email (#PCDATA)>
  <!ATTLIST email
    lines CDATA "1"
    lang CDATA "E-Mail">

  <!ELEMENT fax (#PCDATA)>
  <!ATTLIST fax
    lines CDATA "1"
    lang CDATA "Telefax">

  <!ELEMENT name (#PCDATA)>
  <!ATTLIST name
    lines CDATA "1"
    lang CDATA "Firmenname">

  <!ELEMENT logoname (#PCDATA)>
  <!ATTLIST logoname
    lines CDATA "1"
    lang CDATA "Firmenname für das Logo">

  <!ELEMENT ceo (#PCDATA)>
  <!ATTLIST ceo
    lines CDATA "1"
    lang CDATA "Geschäftsleitung">

  <!ELEMENT register (#PCDATA)>
  <!ATTLIST register
    lines CDATA "1"
    lang CDATA "Handels-/Vereinsregister">

  <!ELEMENT city (#PCDATA)>
  <!ATTLIST city
    lines CDATA "1"
    lang CDATA "PLZ und Ort">

  <!ELEMENT editorial_office (#PCDATA)>
  <!ATTLIST editorial_office
    lines CDATA "1"
    lang CDATA "Redaktion">

  <!ELEMENT street (#PCDATA)>
  <!ATTLIST street
    lines CDATA "1"
    lang CDATA "Straße und Hausnummer">

  <!ELEMENT phone (#PCDATA)>
  <!ATTLIST phone
    lines CDATA "1"
    lang CDATA "Telefon">

  <!ELEMENT tax (#PCDATA)>
  <!ATTLIST tax
    lines CDATA "1"
    lang CDATA "Umsatzsteuer-ID">

  <!ELEMENT website (#PCDATA)>
  <!ATTLIST website
    component CDATA "url"
    lines CDATA "1"
    lang CDATA "Webseite">

 <!-- FOOTER -->
  <!ELEMENT footer (paragraph+, unsubscribe, email, website, copyright)>
  <!ATTLIST footer
    lang CDATA "Fuß">

  <!ELEMENT unsubscribe (#PCDATA)>
  <!ATTLIST unsubscribe
    component CDATA "url"
    lines CDATA "1"
    lang CDATA "Abmelde-Link">

  <!ELEMENT copyright (#PCDATA)>
  <!ATTLIST copyright
    lines CDATA "1"
    lang CDATA "Copyright-Hinweis">

 <!-- SETTINGS -->
  <!ELEMENT settings (openingrate)>
  <!ATTLIST settings
    lang CDATA "Einstellungen">

  <!ELEMENT openingrate (#PCDATA)>
  <!ATTLIST openingrate
    component CDATA "combobox"
    combocontent CDATA "(ja,nein)"
    default CDATA "ja"
    lang CDATA "Öffnungsrate tracken?">

 <!ENTITY lt   "&#38;#60;">
  <!ENTITY gt   "&#62;">
  <!ENTITY br   "&#10;">
  <!ENTITY nbsp "&#160;">
  <!ENTITY amp  "&#38;#38;">
  <!ENTITY Auml "&#196;">
  <!ENTITY Ouml "&#214;">
  <!ENTITY Uuml "&#220;">
  <!ENTITY auml "&#228;">
  <!ENTITY ouml "&#246;">
  <!ENTITY uuml "&#252;">
  <!ENTITY copy "&#169;">
  <!ENTITY euro "&#8364;">
  <!ENTITY szlig "&#223;">
  <!ENTITY eacute "&#201;">
  <!ENTITY nbsp "&#160;">
  <!ENTITY iexcl "&#161;">
  <!ENTITY cent "&#162;">
  <!ENTITY pound "&#163;">
  <!ENTITY curren "&#164;">
  <!ENTITY yen "&#165;">
  <!ENTITY brvbar "&#166;">
  <!ENTITY sect "&#167;">
  <!ENTITY uml "&#168;">
  <!ENTITY copy "&#169;">
  <!ENTITY ordf "&#170;">
  <!ENTITY laquo "&#171;">
  <!ENTITY not "&#172;">
  <!ENTITY shy "&#173;">
  <!ENTITY reg "&#174;">
  <!ENTITY macr "&#175;">
  <!ENTITY deg "&#176;">
  <!ENTITY plusmn "&#177;">
  <!ENTITY sup2 "&#178;">
  <!ENTITY sup3 "&#179;">
  <!ENTITY acute "&#180;">
  <!ENTITY micro "&#181;">
  <!ENTITY para "&#182;">
  <!ENTITY middot "&#183;">
  <!ENTITY cedil "&#184;">
  <!ENTITY sup1 "&#185;">
  <!ENTITY ordm "&#186;">
  <!ENTITY raquo "&#187;">
  <!ENTITY frac14 "&#188;">
  <!ENTITY frac12 "&#189;">
  <!ENTITY frac34 "&#190;">
  <!ENTITY iquest "&#191;">
  <!ENTITY Agrave "&#192;">
  <!ENTITY Aacute "&#193;">
  <!ENTITY Acirc "&#194;">
  <!ENTITY Atilde "&#195;">
  <!ENTITY Auml "&#196;">
  <!ENTITY Aring "&#197;">
  <!ENTITY AElig "&#198;">
  <!ENTITY Ccedil "&#199;">
  <!ENTITY Egrave "&#200;">
  <!ENTITY Eacute "&#201;">
  <!ENTITY Eacute "&#202;">
  <!ENTITY Ecirc "&#203;">
  <!ENTITY Euml "&#204;">
  <!ENTITY Igrave "&#205;">
  <!ENTITY Iacute "&#206;">
  <!ENTITY Icirc "&#207;">
  <!ENTITY Iuml "&#208;">
  <!ENTITY ETH "&#209;">
  <!ENTITY Ntilde "&#210;">
  <!ENTITY Ograve "&#211;">
  <!ENTITY Oacute "&#212;">
  <!ENTITY Ocirc "&#213;">
  <!ENTITY Otilde "&#214;">
  <!ENTITY Ouml "&#215;">
  <!ENTITY times "&#216;">
  <!ENTITY Oslash "&#217;">
  <!ENTITY Ugrave "&#218;">
  <!ENTITY Uacute "&#219;">
  <!ENTITY Ucirc "&#220;">
  <!ENTITY Uuml "&#221;">
  <!ENTITY Yacute "&#222;">
  <!ENTITY THORN "&#223;">
  <!ENTITY szlig "&#224;">
  <!ENTITY agrave "&#225;">
  <!ENTITY aacute "&#226;">
  <!ENTITY acirc "&#227;">
  <!ENTITY atilde "&#228;">
  <!ENTITY auml "&#229;">
  <!ENTITY aring "&#230;">
  <!ENTITY aelig "&#231;">
  <!ENTITY ccedil "&#232;">
  <!ENTITY egrave "&#233;">
  <!ENTITY eacute "&#234;">
  <!ENTITY ecirc "&#235;">
  <!ENTITY euml "&#236;">
  <!ENTITY igrave "&#237;">
  <!ENTITY iacute "&#238;">
  <!ENTITY icirc "&#239;">
  <!ENTITY iuml "&#240;">
  <!ENTITY eth "&#241;">
  <!ENTITY ntilde "&#242;">
  <!ENTITY ograve "&#243;">
  <!ENTITY oacute "&#244;">
  <!ENTITY ocirc "&#245;">
  <!ENTITY otilde "&#246;">
  <!ENTITY ouml "&#247;">
  <!ENTITY divide "&#248;">
  <!ENTITY oslash "&#249;">
  <!ENTITY ugrave "&#250;">
  <!ENTITY ucirc "&#251;">
  <!ENTITY uuml "&#252;">
  <!ENTITY yacute "&#253;">
  <!ENTITY thorn "&#254;">
  <!ENTITY yuml "&#255;">
  <!ENTITY ndash "&#8211;">
  <!ENTITY mdash "&#8212;">
  <!ENTITY lsquo "&#8216;">
  <!ENTITY rsquo "&#8217;">
  <!ENTITY sbquo "&#8218;">
  <!ENTITY ldquo "&#8220;">
  <!ENTITY rdquo "&#8221;">
  <!ENTITY bdquo "&#8222;">
  <!ENTITY dagger "&#8224;">
  <!ENTITY Dagger "&#8225;">
  <!ENTITY hellip "&#8230;">
  <!ENTITY permil "&#8240;">
  <!ENTITY lsaquo "&#8249;">
  <!ENTITY rsaquo "&#8250;">
  <!ENTITY ndash "&#8211;">
  <!ENTITY mdash "&#8212;">
  <!ENTITY lsquo "&#8216;">
  <!ENTITY rsquo "&#8217;">
  <!ENTITY sbquo "&#8218;">
  <!ENTITY ldquo "&#8220;">
  <!ENTITY rdquo "&#8221;">
  <!ENTITY bdquo "&#8222;">
  <!ENTITY dagger "&#8224;">
  <!ENTITY Dagger "&#8225;">
  <!ENTITY hellip "&#8230;">
  <!ENTITY permil "&#8240;">
  <!ENTITY lsaquo "&#8249;">
  <!ENTITY rsaquo "&#8250;">
 ]>

 <ihknewsletter>
 <!-- BEGIN -->
  <header>
    <logo>[%embedded-image(3547);logo_ihk.png]</logo>
    <trenner>[%embedded-image(3443);Trennlinie.jpg]</trenner>
    <trenner_verlauf>[%embedded-image(3548);trennlinie-verlauf.jpg]</trenner_verlauf>
  </header>
  <allg_Infos>
    <gesch_feld></gesch_feld>
    <index_show>ja</index_show>
    <index_only_themes>nein</index_only_themes>
    <one_row></one_row>
  </allg_Infos>
  <salutation>
    <issue>&lt;strong&gt;IHK-Newsletter | [%=Format(SendDate(), "dd.MM.yyyy")]&lt;/strong&gt;</issue>
    <address>Guten Tag[%if Column("Anrede") = "Herr" AND Column("Nachname") NOT_IS_EMPTY] Herr [Titel,postfix( ),firstcap][Nachname,firstcap][%elseif Column("Anrede") = "Frau" AND Column("Nachname") NOT_IS_EMPTY] Frau [Titel,postfix( ),firstcap][Nachname,firstcap][%endif],</address>
    <paragraph>in unserem IHK-Newsletter haben wir für Sie die neuesten Wirtschaftsinformationen aus den von Ihnen gewählten Themengebieten zusammengestellt.</paragraph>
    <greeting>Freundliche Grüße</greeting>
    <sig_name>Ihre Industrie- und Handelskammer XXX</sig_name>
  </salutation>

  <news>
    <headline>Dachzeile</headline>
    <title>Dummy-Artikel 1</title>
    <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
    <dihk>nein</dihk>
    <net>Internet</net>
  </news>

  <imprint>
    <name>Industrie- und Handelskammer XXX</name>
    <logoname>XXX</logoname>
    <street>Musterweg 11</street>
 	<city>11111 Musterstadt</city>
    <phone>Telefon: +49 123 4567-0</phone>
    <email>info@xxx.ihk.de</email>
 	<fax>Telefax: +49 123 123-5678</fax>
  <editorial_office>Musterweg 11, 11111 Musterstadt</editorial_office>
  </imprint>
  <footer>
    <paragraph>Sie erhalten diesen Newsletter an die Adresse [email].</paragraph>
    <unsubscribe>[%url:unsubscribe; "https://www.gfi.ihk.de"; "Abonnement beenden"; "style=\"font-size:17px;color:#4a90ca;\""; "Footer: Unsubscription"]</unsubscribe>
    <email></email>
    <website></website>
    <copyright><![CDATA[Copyright [%=Format( SendDate(), "yyyy")] © Industrie- und Handelskammer xxx<br/>Der Versand erfolgt entsprechend unserer <a href="https://www.gfi.ihk.de">Datenschutzerklärung</a>. Wenn Sie den Newsletter künftig nicht mehr erhalten möchten, können Sie ihn jederzeit
 abbestellen, indem Sie oben auf "Abonnement beenden" klicken.<br/>]]></copyright>
  </footer>
  <settings>
    <openingrate>ja</openingrate>
  </settings>
 <!-- END -->
 </ihknewsletter>
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/text_vorschau.gif
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/text_vorschau.gif
--- a/newsletter/inxmail-Testmandant_1_3/inxmail/textversion.xsl
+++ b/newsletter/inxmail-Testmandant_1_3/inxmail/textversion.xsl
@@ -0,0 +1,274 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE xsl:stylesheet [
 	<!ENTITY nbsp "&#160;">
 	<!ENTITY br "&#10;">
 	<!ENTITY dot  "&#149;">
 	<!ENTITY raquote  "&#187;">
 	<!ENTITY lsbracket  "&#91;">	
 	<!ENTITY Auml  "&#196;">
 	<!ENTITY Ouml  "&#214;">
 	<!ENTITY Uuml  "&#220;">
 	<!ENTITY auml  "&#228;">
 	<!ENTITY ouml  "&#246;">
 	<!ENTITY uuml  "&#252;">
 ]>

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="text" encoding="ISO-8859-1"/>

  <xsl:template match="ihknewsletter">
    <xsl:call-template name="targets"/>
    <xsl:call-template name="browserlink"/>
    <xsl:call-template name="salutation"/>

    <xsl:for-each select="news">
      <xsl:call-template name="news"/>
    </xsl:for-each>

    <xsl:apply-templates select="imprint"/>
    <xsl:apply-templates select="footer"/>
  </xsl:template>

  <xsl:template name="targets">
    <xsl:text>[%if </xsl:text>
    <xsl:for-each select="news">
      <xsl:if test="position()!=1">
        <xsl:text> AND </xsl:text>
      </xsl:if>
      <xsl:choose>
        <xsl:when test="target">
          <xsl:for-each select="target">
            <xsl:if test="position()!=1">
              <xsl:text> AND </xsl:text>
            </xsl:if>
            <xsl:choose>
              <xsl:when test="string-length(.)&gt;0">
                <xsl:text>BelongsNotToGroup("</xsl:text><xsl:value-of disable-output-escaping="yes" select="."/><xsl:text>")</xsl:text>
              </xsl:when>
              <xsl:otherwise>
                <xsl:text> FALSE </xsl:text>
              </xsl:otherwise>
            </xsl:choose>
          </xsl:for-each>
        </xsl:when>
        <xsl:otherwise>
          <xsl:text> FALSE </xsl:text>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
    <xsl:text>] [%no-mail] </xsl:text>
    <xsl:text> [%endif] </xsl:text>
  </xsl:template>
  
  <xsl:template name="browserlink">
    <xsl:text>M&ouml;chten Sie diesen Newsletter mit Bildern betrachten? Zur Webseitenansicht&br;</xsl:text>
    <xsl:text>[%application-url]/html_mail.jsp?params=[%online_params]&br;</xsl:text>
  </xsl:template>


  <xsl:template name="salutation">
    <xsl:text>[%hr(=)]&br;</xsl:text>
    <xsl:value-of select="salutation/address"/>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:for-each select="salutation/paragraph">
      <xsl:choose>
        <xsl:when test="position()=last()">
          <xsl:value-of select="."/>
          <xsl:text>&br;</xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="."/>
          <xsl:text>&br;&br;</xsl:text>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
    <xsl:text>&br;</xsl:text>
    <xsl:value-of select="salutation/greeting"/>
    <xsl:text>&br;</xsl:text>
    <xsl:value-of select="salutation/sig_name"/>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:text>Abonnement &auml;ndern? </xsl:text>
    <xsl:text>[%application-url]/benutzerprofil.jsp?email=[email]&amp;id=[%id]</xsl:text>
    <xsl:text>&br;&br;</xsl:text>
  </xsl:template>


  <xsl:template name="news">
    <xsl:if test="target">
      <xsl:call-template name="start_target"/>
    </xsl:if>
    <xsl:variable name="feld">
      <xsl:choose>
        <xsl:when test="string-length(//ihknewsletter/all_gesch_feld/gesch_feld) > 0">
          <xsl:value-of select="//ihknewsletter/all_gesch_feld/gesch_feld"/>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="news_gesch_feld"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    <xsl:variable name="underline_len">
      <xsl:if test="string-length(title) >= 75">75</xsl:if>
      <xsl:if test="string-length(title) &lt; 75"><xsl:value-of select="string-length(title)"/></xsl:if>
    </xsl:variable>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:if test="title_show = 'ja'">
      <xsl:if test="string-length($feld) > 0">
        <xsl:text>&br;</xsl:text>
        <xsl:value-of select="$feld"/>
        <xsl:text>[%hr(=)] &br;</xsl:text>
      </xsl:if>
    </xsl:if>
    <xsl:value-of select="title"/>
    <xsl:text>&br;</xsl:text>
    <xsl:call-template name="underline">
      <xsl:with-param name="count" select="$underline_len"/>
    </xsl:call-template>
    <xsl:text>&br;</xsl:text>
    <xsl:for-each select="paragraph">
      <xsl:choose>
        <xsl:when test="position()=last()">
          <xsl:if test="string-length(.) > 0">
            <xsl:value-of select="."/>
            <xsl:text>&br;</xsl:text>
          </xsl:if>
        </xsl:when>
        <xsl:otherwise>
          <xsl:if test="string-length(.) > 0">
            <xsl:value-of select="."/>
            <xsl:text>&br;&br;</xsl:text>
          </xsl:if>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
    <xsl:if test="link">
      <xsl:value-of disable-output-escaping="yes" select="link"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:if test="target">
      <xsl:call-template name="end_target"/>
    </xsl:if>
  </xsl:template>


  <xsl:template match="imprint">
    <xsl:text>&br;[%hr(=)] &br;&br;</xsl:text>
    <xsl:text>Impressum&br;</xsl:text>
    <xsl:call-template name="underline">
      <xsl:with-param name="count" select="string-length('Impressum')"/>
    </xsl:call-template>
    <xsl:text>&br;</xsl:text>
    <xsl:value-of select="name"/>
    <xsl:text>&br;</xsl:text>
    <xsl:value-of select="street"/>
    <xsl:text>&br;</xsl:text>
    <xsl:value-of select="city"/>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:text>Telefon: </xsl:text>
    <xsl:value-of select="phone"/>
    <xsl:text>&br;</xsl:text>
    <xsl:if test="fax">
      <xsl:text>Telefax: </xsl:text>
      <xsl:value-of select="fax"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:if test="website">
      <xsl:text>Website: </xsl:text>
      <xsl:value-of select="website"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:text>E-Mail: </xsl:text>
    <xsl:value-of select="email"/>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:if test="ceo">
      <xsl:text>Gesch&auml;ftsf&uuml;hrer: </xsl:text>
      <xsl:value-of select="ceo"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:if test="editorial_office">
      <xsl:text>Redaktion: </xsl:text>
      <xsl:value-of select="editorial_office"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:if test="register">
      <xsl:text>Register: </xsl:text>
      <xsl:value-of select="register"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
    <xsl:if test="tax">
      <xsl:text>Umsatzsteuer-ID: </xsl:text>
      <xsl:value-of select="tax"/>
      <xsl:text>&br;</xsl:text>
    </xsl:if>
  </xsl:template>


  <xsl:template match="footer">
    <xsl:text>&br;</xsl:text>
    <xsl:for-each select="paragraph">
      <xsl:value-of select="."/>
      <xsl:text>&br;&br;</xsl:text>
    </xsl:for-each>
    <xsl:text>Newsletter-Abonnement beenden? </xsl:text>
    <xsl:value-of disable-output-escaping="yes" select="unsubscribe"/>
    <xsl:text>&br;&br;</xsl:text>
    <xsl:if test="string-length(copyright)&gt;0">
      <xsl:text/>
      <xsl:value-of select="copyright"/>
      <xsl:text>&br;[%hr(=)]</xsl:text>
    </xsl:if>
  </xsl:template>


  <xsl:template name="underline" xml:space="default">
    <xsl:param name="count"/>
    <xsl:if test="number($count) > 0">-<xsl:call-template name="underline">
        <xsl:with-param name="count" select="number($count) - 1"/>
      </xsl:call-template>
    </xsl:if>
  </xsl:template>


  <xsl:template name="start_target">
    <xsl:variable name="ending">
      <xsl:for-each select="target">
        <xsl:sort select="." data-type="text" order="descending" />
        <xsl:if test="position()=1">
          <xsl:if test="string-length(.) > 0">]
          </xsl:if>
        </xsl:if>
      </xsl:for-each>
    </xsl:variable>
    <xsl:for-each select="target">
      <xsl:sort select="." data-type="text" order="descending" />
      <xsl:if test="string-length(.) > 0">
        <xsl:if test="position() = 1">
          <xsl:text>
  [%if </xsl:text>
        </xsl:if>
        <xsl:if test="position() != 1">
          <xsl:text> OR </xsl:text>
        </xsl:if>
        <xsl:text>BelongsToGroup("</xsl:text><xsl:value-of disable-output-escaping="yes" select="."/><xsl:text>")</xsl:text>
      </xsl:if>
      <xsl:if test="position()=last()">
        <xsl:value-of select="$ending"/>
      </xsl:if>
    </xsl:for-each>
  </xsl:template>
  
  
  <xsl:template name="end_target">
    <xsl:for-each select="target">
      <xsl:sort select="." data-type="text" order="descending" />
      <xsl:if test="string-length(.) > 0">
        <xsl:if test="position() = 1">
          <xsl:text>
  [%endif]
  </xsl:text>
        </xsl:if>
      </xsl:if>
    </xsl:for-each>
  </xsl:template>

 </xsl:stylesheet>
--- a/newsletter/more-new.xml
+++ b/newsletter/more-new.xml
@@ -0,0 +1,49 @@
 <news>
  <headline>Dachzeile</headline>
  <title>Dummy-Artikel 1</title>
  <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
  <dihk>nein</dihk>
  <net>Internet</net>
  <is_infobanner>ja</is_infobanner>
  <infobanner_cta_text>Hallo Welt</infobanner_cta_text>
  <link>www.google.de</link>
 </news>
 <news>
  <headline>Dachzeile</headline>
  <title>Dummy-Artikel 1</title>
  <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
  <dihk>nein</dihk>
  <net>Internet</net>
  <link>www.google.de</link>
 </news>
 <news>
  <headline>Dachzeile</headline>
  <title>Dummy-Artikel 1</title>
  <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
  <dihk>nein</dihk>
  <net>Internet</net>
  <link>www.google.de</link>
  <group_picture>
    <picture>http://woodagency.space/ihk24/dummy/teaser_01.jpg</picture>
    <picture_copyright>&copy; Lorem ipsum dolor sit amet consectetur, adipisicing elit.</picture_copyright>
    <picture_alt>Lorem</picture_alt>
  </group_picture>
 </news>
 <news>
  <headline>Dachzeile</headline>
  <title>Dummy-Artikel 1</title>
  <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
  <dihk>nein</dihk>
  <net>Internet</net>
  <link>www.google.de</link>
  <is_chart_teaser>ja</is_chart_teaser>
  <chart_teaser_text>Lorem ipsum dolor sit</chart_teaser_text>
 </news>
 <news>
  <headline>Dachzeile</headline>
  <title>Dummy-Artikel 1</title>
  <paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit rerum corrupti pariatur odio non deserunt reiciendis quam eum. Eveniet explicabo eligendi harum? Sunt, libero? Ullam suscipit sunt quas doloremque eligendi.</paragraph>
  <dihk>nein</dihk>
  <net>Internet</net>
  <link>www.google.de</link>
 </news>
--- a/newsletter/newsletter.html
+++ b/newsletter/newsletter.html
@@ -0,0 +1,524 @@
 <!DOCTYPE html>
 <html lang="de" dir="ltr" xml:lang="de">

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
      html, body {
        padding: 0;
        margin: 0;
        font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
        color: #003366;
        font-size: 18px;
        line-height: 1.4;
      }
      table {
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
      }
      td {
        border: 0;
        padding: 0;
      }
      .outer {
        width: 100%;
        text-align: center;
        overflow: hidden;
      }
      .inner {
        display: block;
        width: 600px;
        max-width: 100%;
      }
      .half {
        max-width: 100%;
      }
      .logo {
        width: 80%;
        display: block;
        margin: 0;
      }
      .copyright {
        position: relative;
        top: -30px;
        color: white;
        margin-bottom: -20px;
        padding-right: 10px;
        text-shadow: 0 0 10px black;
      }
      @media(max-width: 540px) {
        .sm-block {
          display: block;
          width: 100%;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        .offset-large {
          height: 40px !important;
        }
        .offset-medium {
          height: 30px !important;
        }
      }
      @media(max-width: 400px) {
        .xs-block {
          display: block;
          max-width: 100%;
        }
        .issue span {
          display: block;
          text-align: left !important;
          padding-top: 12px;
          padding-left: 1px;
        }
        .h1 {
          font-size: 38px !important;
          line-height: 44px !important;
        }
        .h2 {
          font-size: 32px !important;
          line-height: 36px !important;
        }
        .h3 {
          font-size: 24px !important;
          line-height: 28px !important;
        }
        .p {
          font-size: 18px !important;
          line-height: 26px !important;
        }
        .p.title {
          padding-bottom: 6px;
          display: block;
        }
        .social {
          padding-bottom: 16px;
        }
        .social + .xs-block {
          text-align: left !important;
        }
      }
    </style>
  </head>
  <body>
    <table id="header" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td width="300" class="xs-block">
                <img src="img/logo.png" alt="Logo" class="logo">
              </td>
              <td width="300" class="xs-block issue" valign="top" style="padding-top: 6px;">
                <span style="font-size: 14px; line-height: 18px; font-weight: 600; display: block; text-align: right;">IHK Newsletter &middot; Ausgabe 01 &middot; 13.05.2020</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="salutation" class="outer" width="100" style="border-top: 1px solid #ccd6e0;">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px;" class="p">Sehr geehrte Frau Mustermann,<br><br>Sie erhalten unseren Newsletter mit den Meldungen nach den von Ihnen ausgewählten Themen. Wir wünschen Ihnen viel Spaß dabei.<br><br>Mit freundlichen Grüßen <br>Ihr Newsletterteam der IHK Musterstadt</span>
              </td>
            </tr>
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="title" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td width="600" style="max-width: 100%;">
                <span style="font-size: 48px; line-height: 54px;" class="h1">Newsletter Titel</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="position: relative; display: block; height: 8px; width: 300%; background-color: #afcc7a;">
                  <img src="img/trennlinie-verlauf.jpg" alt="Trennlinie" style="margin: 0; display: block; height: 8px; width: 600px; max-width: 100%;" height="8">
                </span>
              </td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="index" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Thema 01</a>
                    </td>
                  </tr>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Ein längeres Thema, das vielleicht auch über zwei Zeilen laufen könnte Lorem ipsum dolor</a>
                    </td>
                  </tr>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Thema 3 ist etwas länger</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="news" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td width="600" style="border-bottom: 4px solid #56BD66; max-width: 100%;">
                <span style="display: block; font-size: 42px; line-height: 48px; padding-bottom: 10px;" class="h2">Thema 01</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Start: News volle Breite -->
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
              </td>
            </tr>
            <tr>
              <td height="10"></td>
            </tr>
            <!-- if image -->
            <tr>
              <td>
                <a href="#" class="image-box" style="display: block; border-bottom: 8px solid #56BD66;">
                  <img src="img/dummy-teaser.jpg" alt="" style="display: block; margin: 0; max-width: 100%; width: 100%;">
                </a>
                <span class="copyright" style="font-size: 14px; display: block; text-align: right;">Copyright by Björn Crüger</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- endif image -->
            <tr>
              <td>
                <a href="#" style="display: block; font-size: 34px; line-height: 42px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Ende: News volle Breite -->
            <!-- Start: News volle Breite -->
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
              </td>
            </tr>
            <tr>
              <td height="10"></td>
            </tr>
            <tr>
              <td>
                <a href="#" style="display: block; font-size: 34px; line-height: 42px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Ende: News volle Breite -->
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td width="600" style="border-bottom: 4px solid #56BD66; max-width: 100%;">
                <span style="display: block; font-size: 42px; line-height: 48px; padding-bottom: 10px;" class="h2">Ein längeres Thema, das über zwei Zeilen läuft</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Start: Erste News halbe Breite -->
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="300" style="padding-right: 15px;" class="col-left sm-block">
                      <table>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
                          </td>
                        </tr>
                        <tr>
                          <td height="10"></td>
                        </tr>
                        <tr>
                          <td>
                            <a href="#" style="display: block; font-size: 28px; line-height: 32px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span style="font-size: 18px; line-height: 26px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 18px; line-height: 26px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                      </table>
                    </td>
            <!-- Ende: Erste News halbe Breite -->
            <!-- Start: Zweite News halbe Breite -->
                    <td width="300" style="padding-left: 15px;" class="col-right sm-block">
                      <table>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
                          </td>
                        </tr>
                        <tr>
                          <td height="10"></td>
                        </tr>
                        <tr>
                          <td>
                            <a href="#" style="display: block; font-size: 28px; line-height: 32px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span style="font-size: 18px; line-height: 26px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 18px; line-height: 26px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <!-- Ende: Zweite News halbe Breite -->
            <tr>
              <td height="80" class="offset-large"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="footer" class="outer" width="100" bgcolor="#e3ebf5" style="background-color: #e3ebf5; border-bottom: 8px solid #003366;">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 38px;" class="h2">Impressum</span>
              </td>
            </tr>
            <tr>
              <td height="25"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Herausgeber</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <span style="font-size: 20px; line-height: 30px;" class="p">IHK Musterstadt <br>Musterstraße 12 – 18 <br>123456 Musterstadt</span>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Redaktion &amp; Inhalt</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <img src="img/redesign-mail.png" width="30" height="30" style="display: inline-block; vertical-align: middle; margin-right: 7px; margin-bottom: 6px;">
                      <a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline; display: inline-block; vertical-align: middle; margin-bottom: 6px;" class="p">E-Mail schreiben</a> <br>
                      <img src="img/redesign-phone.png" width="30" height="30" style="display: inline-block; vertical-align: middle; margin-right: 7px; margin-bottom: 6px;">
                      <a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline; display: inline-block; vertical-align: middle; margin-bottom: 6px;" class="p">+49 12 345678-90</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Vertretungsberechtigte</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <span style="font-size: 20px; line-height: 30px;" class="p">IHK Musterstadt <br>Musterstraße 12 – 18 <br>123456 Musterstadt</span>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td width="240" class="xs-block social">
                      <a href="https://www.facebook.com/#" class="fb" target="_blank" title="Facebook" style="text-decoration: none;">
                        <img src="img/redesign-facebook.png" alt="Facebook" width="50" height="50" border="0" />
                      </a>&nbsp;
                      <a href="https://www.youtube.com/user/#" class="yt" target="_blank" title="Youtube" style="text-decoration: none;">
                        <img src="img/redesign-youtube.png" alt="Youtube" width="50" height="50" border="0" />
                      </a>&nbsp;
                      <a href="https://twitter.com/#" class="tw" target="_blank" title="Twitter" style="text-decoration: none;">
                        <img src="img/redesign-twitter.png" alt="Twitter" width="50" height="50" border="0" />
                      </a>
                    </td>
                    <td width="360" valign="bottom" align="right" style="padding-bottom: 3px;" class="xs-block">
                      <a href="#" style="display: inline-block; color: #003366; text-decoration: underline;">Themen ändern</a>
                      <a href="#" style="display: inline-block; color: #003366; text-decoration: underline; margin-left: 15px;">Newsletter abbestellen</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="30" style="border-bottom: 1px solid #B0C4D6"></td>
            </tr>
            <tr>
              <td height="30" style="border-top: 1px solid #B0C4D6"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 18px; line-height: 24px;">Sie erhalten diesen Newsletter, weil Sie sich mit der E-Mail-Adresse nosuchuser@darmstadt.ihk.de auf unserer Website angemeldet haben.<br><br>Copyright 2020 © Industrie- und Handelskammer Darmstadt<br><br>Für die Richtigkeit der in diesem Newsletter enthaltenen Angaben können wir trotz sorgfältiger Prüfung keine Gewähr übernehmen.</span>
              </td>
            </tr>
            <tr>
              <td height="40"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>
  </body>
 </html>


--- a/newsletter/old-styles.xml
+++ b/newsletter/old-styles.xml
@@ -0,0 +1,75 @@

  <style type="text/css">
 /*<![CDATA[*/
  span{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:12px;font-weight:normal;text-decoration:none;color:#767676;}a{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:17px;font-weight:normal;text-decoration:underline;color:#3399CC;}ul{margin-top:0;margin-bottom:0;}ol{margin-top:0;margin-bottom:0;}li{margin:0;}
  /*]]>*/
  </style>
  <style media="only screen and (max-width:479px), only screen and (max-width:479px) and (-webkit-min-device-pixel-ratio: 1.5)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:300px;height:auto}body[inx] img[width="300"]{width:150px;height:auto}body[inx] img[width="200"]{width:100px;height:auto}body[inx] img[width="180"]{width:94px;height:auto}body[inx] img[width="280"]{width:135px;height:auto}body[inx] img[width="170"]{width:90px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:300px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:300px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:300px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:290px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:288px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:288px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:188px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:280px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:145px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:135px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:93px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:150px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:100px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width:480px) and (max-width:639px) and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:320px;height:auto}body[inx] img[width="300"]{width:160px;height:auto}body[inx] img[width="200"]{width:106px;height:auto}body[inx] img[width="180"]{width:101px;height:auto}body[inx] img[width="280"]{width:145px;height:auto}body[inx] img[width="170"]{width:96px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:320px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:320px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:320px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:310px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:308px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:308px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:202px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:300px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:155px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:145px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:99px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:160px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:106px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (min-width:640px) and (max-width:719px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width:480px) and (max-width:599px)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:480px;height:auto}body[inx] img[width="300"]{width:240px;height:auto}body[inx] img[width="200"]{width:160px;height:auto}body[inx] img[width="180"]{width:154px;height:auto}body[inx] img[width="280"]{width:225px;height:auto}body[inx] img[width="170"]{width:150px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:480px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:480px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:480px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:470px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:468px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:468px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:308px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:460px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:235px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:225px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:153px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:240px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:160px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width: 2px) and (max-width:1px)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] img[width="600"]{width:600px;height:auto}body[inx] img[width="300"]{width:300px;height:auto}body[inx] img[width="200"]{width:200px;height:auto}body[inx] img[width="180"]{width:180px;height:auto}body[inx] img[width="280"]{width:280px;height:auto}body[inx] img[width="170"]{width:170px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:820px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:640px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:600px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:580px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:568px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:578px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:20px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:17px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:16px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:10px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:368px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:380px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:280px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:270px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:180px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:300px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:200px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (device-width:320px) and (device-height:480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1), only screen and (device-width:320px) and (device-height:480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2), only screen and (device-aspect-ratio:40/71) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:320px;height:auto}body[inx] img[width="300"]{width:160px;height:auto}body[inx] img[width="200"]{width:106px;height:auto}body[inx] img[width="180"]{width:310px;height:auto}body[inx] img[width="280"]{width:308px;height:auto}body[inx] img[width="170"]{width:308px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:320px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:320px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:320px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:310px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:308px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:308px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:308px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:308px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:308px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:308px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:308px;overflow:visible}
  /*]]>*/
  </style>
  <style media=
  "only screen and (device-width:320px) and (device-height:480px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 1), only screen and (device-width:320px) and (device-height:480px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2)"
  type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:480px;height:auto}body[inx] img[width="300"]{width:240px;height:auto}body[inx] img[width="200"]{width:160px;height:auto}body[inx] img[width="180"]{width:470px;height:auto}body[inx] img[width="280"]{width:468px;height:auto}body[inx] img[width="170"]{width:468px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:480px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:480px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:480px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:470px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:468px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:468px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:468px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:468px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:468px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:468px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:468px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (device-aspect-ratio:40/71) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2)" type=
  "text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:block;min-height:20px}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:block;min-height:20px}body[inx] td[width="180"]{display:block}body[inx] td[width="380"]{display:block}body[inx] td[width="368"]{display:block}body[inx] td[width="280"]{display:block}body[inx] td[width="180"]{display:block}body[inx] td[width="270"]{display:block}body[inx] img[width="600"]{width:568px;height:auto}body[inx] img[width="300"]{width:284px;height:auto}body[inx] img[width="200"]{width:189px;height:auto}body[inx] img[width="180"]{width:558px;height:auto}body[inx] img[width="280"]{width:556px;height:auto}body[inx] img[width="170"]{width:556px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:568px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:568px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:568px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:558px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:556px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:556px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:10px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:3px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:5px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:5px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:556px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:556px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:556px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:556px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:556px;overflow:visible}
  /*]]>*/
  </style>
  <style media="only screen and (min-width: 2px) and (max-width:1px)" type="text/css">
 /*<![CDATA[*/
  body[inx] .d{display:none!important;}body[inx] .triple span{word-break:break-all!important;}body[inx] td:not(:first-child):not(:last-child)[width="20"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="16"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="17"]{display:run-in;min-height:auto}body[inx] td:not(:first-child):not(:last-child)[width="28"]{display:run-in;min-height:auto}body[inx] td[width="180"]{display:inline}body[inx] td[width="380"]{display:inline}body[inx] td[width="368"]{display:inline}body[inx] td[width="280"]{display:inline}body[inx] td[width="180"]{display:inline}body[inx] td[width="270"]{display:inline}body[inx] img[width="600"]{width:600px;height:auto}body[inx] img[width="300"]{width:300px;height:auto}body[inx] img[width="200"]{width:200px;height:auto}body[inx] img[width="180"]{width:180px;height:auto}body[inx] img[width="280"]{width:280px;height:auto}body[inx] img[width="170"]{width:170px;height:auto}body[inx] table[width="820"],body[inx] td[width="820"]{width:820px;overflow:visible}body[inx] table[width="640"],body[inx] td[width="640"]{width:640px;overflow:visible}body[inx] table[width="600"],body[inx] td[width="600"]{width:600px;overflow:visible}body[inx] table[width="580"],body[inx] td[width="580"]{width:580px;overflow:visible}body[inx] table[width="568"],body[inx] td[width="568"]{width:568px;overflow:visible}body[inx] table[width="578"],body[inx] td[width="578"]{width:578px;overflow:visible}body[inx] table[width="20"],body[inx] td[width="20"]{width:20px;overflow:visible}body[inx] table[width="17"],body[inx] td[width="17"]{width:17px;overflow:visible}body[inx] table[width="16"],body[inx] td[width="16"]{width:16px;overflow:visible}body[inx] table[width="10"],body[inx] td[width="10"]{width:10px;overflow:visible}body[inx] table[width="368"],body[inx] td[width="368"]{width:368px;overflow:visible}body[inx] table[width="380"],body[inx] td[width="380"]{width:380px;overflow:visible}body[inx] table[width="280"],body[inx] td[width="280"]{width:280px;overflow:visible}body[inx] table[width="270"],body[inx] td[width="270"]{width:270px;overflow:visible}body[inx] table[width="180"],body[inx] td[width="180"]{width:180px;overflow:visible}body[inx] table[width="300"],body[inx] td[width="300"]{width:300px;overflow:visible}body[inx] table[width="200"],body[inx] td[width="200"]{width:200px;overflow:visible}
  /*]]>*/
  </style>
  <style>
 <![CDATA[
  table {border-collapse:separate;}
  table td {border-collapse:collapse;}
  table td img {vertical-align: middle;}
  a, a:link, a:visited {text-decoration: none; color: #00788a}
  a:hover {text-decoration: underline;}
  h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important; color: black; line-height: 100%; }
   p {margin:0; padding:0; margin-bottom:0;}
  .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
  .ExternalClass {width: 100%;}
  body {margin: 0; padding: 0; min-width: 100%!important;}
  .content {width: 100%; max-width: 600px;}
  a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  ]]>
  </style>
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,286 @@
 {
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "@storybook/preset-scss": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@storybook/preset-scss/-/preset-scss-1.0.3.tgz",
      "integrity": "sha512-o9Iz6wxPeNENrQa2mKlsDKynBfqU2uWaRP80HeWp4TkGgf7/x3DVF2O7yi9N0x/PI1qzzTTpxlQ90D62XmpiTw=="
    },
    "anymatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
      }
    },
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
    },
    "braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "requires": {
        "fill-range": "^7.0.1"
      }
    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
        "fsevents": "~2.3.2",
        "glob-parent": "~5.1.2",
        "is-binary-path": "~2.1.0",
        "is-glob": "~4.0.1",
        "normalize-path": "~3.0.0",
        "readdirp": "~3.6.0"
      }
    },
    "css-loader": {
      "version": "6.7.1",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
      "dev": true,
      "requires": {
        "icss-utils": "^5.1.0",
        "postcss": "^8.4.7",
        "postcss-modules-extract-imports": "^3.0.0",
        "postcss-modules-local-by-default": "^4.0.0",
        "postcss-modules-scope": "^3.0.0",
        "postcss-modules-values": "^4.0.0",
        "postcss-value-parser": "^4.2.0",
        "semver": "^7.3.5"
      }
    },
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "requires": {
        "to-regex-range": "^5.0.1"
      }
    },
    "fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
      "optional": true
    },
    "glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "requires": {
        "is-glob": "^4.0.1"
      }
    },
    "icss-utils": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
    },
    "immutable": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
    },
    "is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "requires": {
        "binary-extensions": "^2.0.0"
      }
    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
    },
    "is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
      "requires": {
        "is-extglob": "^2.1.1"
      }
    },
    "is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
    },
    "klona": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
    },
    "lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
      "requires": {
        "yallist": "^4.0.0"
      }
    },
    "nanoid": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA=="
    },
    "neo-async": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
    },
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
    },
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
    },
    "picomatch": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
    },
    "postcss": {
      "version": "8.4.12",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
      "requires": {
        "nanoid": "^3.3.1",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      }
    },
    "postcss-modules-extract-imports": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
    },
    "postcss-modules-local-by-default": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
      "requires": {
        "icss-utils": "^5.0.0",
        "postcss-selector-parser": "^6.0.2",
        "postcss-value-parser": "^4.1.0"
      }
    },
    "postcss-modules-scope": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
      "requires": {
        "postcss-selector-parser": "^6.0.4"
      }
    },
    "postcss-modules-values": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
      "requires": {
        "icss-utils": "^5.0.0"
      }
    },
    "postcss-selector-parser": {
      "version": "6.0.10",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
      "requires": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
      }
    },
    "postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "requires": {
        "picomatch": "^2.2.1"
      }
    },
    "sass": {
      "version": "1.50.0",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz",
      "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
    "sass-loader": {
      "version": "12.6.0",
      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
      "dev": true,
      "requires": {
        "klona": "^2.0.4",
        "neo-async": "^2.6.2"
      }
    },
    "semver": {
      "version": "7.3.7",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
      "requires": {
        "lru-cache": "^6.0.0"
      }
    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
    },
    "style-loader": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
      "dev": true
    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "requires": {
        "is-number": "^7.0.0"
      }
    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
    },
    "yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
    }
  }
 }
--- a/storybook/.babelrc.json
+++ b/storybook/.babelrc.json
@@ -0,0 +1,61 @@
 {
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "loose": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-transform-block-scoping",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-private-methods",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "loose": true,
        "useBuiltIns": true
      }
    ],
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-spread",
    "@babel/plugin-transform-for-of",
    "babel-plugin-macros",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    [
      "babel-plugin-polyfill-corejs3",
      {
        "method": "usage-global",
        "absoluteImports": "core-js",
        "version": "3.22.0"
      }
    ]
  ]
 }
--- a/storybook/.storybook/main.js
+++ b/storybook/.storybook/main.js
@@ -0,0 +1,16 @@
 const path = require('path');

 module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/preset-scss',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-controls',
  ],
  staticDir: './public',
  framework: '@storybook/html',
 }
--- a/storybook/.storybook/preview-head.html
+++ b/storybook/.storybook/preview-head.html
@@ -0,0 +1,9 @@
 <script>
  var ihk = ihk || {};
  ihk.translations = {
    overview: "Übersicht",
    loadMoreImages: "Mehr Bilder laden",
    loadMoreArticles: "Mehr laden",
    ihkFinderYourIhkButton:"ihk.finder.page.yourIhkButton"
  };
 </script>
--- a/storybook/.storybook/preview.js
+++ b/storybook/.storybook/preview.js
@@ -0,0 +1,58 @@
 import '../stories/_global/styles/main.scss';
 import '../stories/_global/styles/fonts.scss';
 import '../stories/_global/styles/icons.scss';
 import '../stories/_global/styles/pictograms.scss';
 import '../stories/_global/styles/typography.scss';
 import '../stories/_global/styles/grid.scss';
 import '../stories/_global/styles/storybook-preview.scss';
 import '../stories/_global/scripts/ihk';

 const customViewports = {
  Phone: {
    name: 'Phone',
    styles: {
      width: '380px',
      height: '720px',
    },
  },
  Tablet: {
    name: 'Tablet',
    styles: {
      width: '768px',
      height: '1024px',
    }
  }
 };

 export const parameters = {
  layout: 'padded',
  actions: { argTypesRegex: "^on[A-Z].*" },
  viewport: { viewports: customViewports },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'white',
    values: [
      {
        name: 'white',
        value: '#FFFFFF',
      },
      {
        name: 'primary',
        value: '#003366',
      },
      {
        name: 'secondary',
        value: '#56BD66',
      },
      {
        name: 'lightblue',
        value: '#E3EBF5',
      },
    ],
  },
 }
--- a/storybook/package-lock.json
+++ b/storybook/package-lock.json
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -0,0 +1,58 @@
 {
  "name": "storybook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook -s ./public"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-decorators": "^7.19.3",
    "@babel/plugin-proposal-export-default-from": "^7.18.10",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-arrow-functions": "^7.18.6",
    "@babel/plugin-transform-block-scoping": "^7.18.9",
    "@babel/plugin-transform-classes": "^7.19.0",
    "@babel/plugin-transform-destructuring": "^7.18.13",
    "@babel/plugin-transform-for-of": "^7.18.8",
    "@babel/plugin-transform-parameters": "^7.18.8",
    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
    "@babel/plugin-transform-spread": "^7.19.0",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-typescript": "^7.18.6",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-controls": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/html": "^6.5.12",
    "@storybook/preset-scss": "^1.0.3",
    "babel-loader": "^8.2.5",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-polyfill-corejs3": "^0.5.3",
    "core-js": "^3.25.3",
    "css-loader": "^5.1.1",
    "sass": "^1.55.0",
    "sass-loader": "^10.3.1",
    "style-loader": "^2.0.0"
  },
  "dependencies": {
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.1",
    "jquery.easing": "^1.4.1",
    "is-mobile": "^3.1.1",
    "detect-browser": "^5.3.0",
    "focus-visible": "^5.2.0",
    "js-cookie": "^3.0.1"
  }
 }
--- a/storybook/public/dummy/-928soDXK6E_420_280.jpg
+++ b/storybook/public/dummy/-928soDXK6E_420_280.jpg
--- a/storybook/public/dummy/-9gPKrsbGmc_420_280.jpg
+++ b/storybook/public/dummy/-9gPKrsbGmc_420_280.jpg
--- a/storybook/public/dummy/-VHQ0cw2euA_1920_1080.jpg
+++ b/storybook/public/dummy/-VHQ0cw2euA_1920_1080.jpg
--- a/storybook/public/dummy/-VHQ0cw2euA_800_800.jpg
+++ b/storybook/public/dummy/-VHQ0cw2euA_800_800.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_420_280.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_420_280.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_535_535.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_535_535.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_630_420.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_630_420.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_650_433.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_650_433.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_880_484.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_880_484.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_880_495.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_880_495.jpg
--- a/storybook/public/dummy/0K7GgiA8lVE_900_600.jpg
+++ b/storybook/public/dummy/0K7GgiA8lVE_900_600.jpg
--- a/storybook/public/dummy/2vCqH34PqWs_1080_648.jpg
+++ b/storybook/public/dummy/2vCqH34PqWs_1080_648.jpg
--- a/storybook/public/dummy/2x3vfVxwR7o_360_240.jpg
+++ b/storybook/public/dummy/2x3vfVxwR7o_360_240.jpg
--- a/storybook/public/dummy/5fNmWej4tAA_210_140.jpg
+++ b/storybook/public/dummy/5fNmWej4tAA_210_140.jpg
--- a/storybook/public/dummy/6awfTPLGaCE_420_280.jpg
+++ b/storybook/public/dummy/6awfTPLGaCE_420_280.jpg
--- a/storybook/public/dummy/ASFdVZ4ajNs_1110_440.jpg
+++ b/storybook/public/dummy/ASFdVZ4ajNs_1110_440.jpg
--- a/storybook/public/dummy/DItYlc26zVI_360_240.jpg
+++ b/storybook/public/dummy/DItYlc26zVI_360_240.jpg
--- a/storybook/public/dummy/DwqAVvG3iFU_420_280.jpg
+++ b/storybook/public/dummy/DwqAVvG3iFU_420_280.jpg
--- a/storybook/public/dummy/DwqAVvG3iFU_630_420.jpg
+++ b/storybook/public/dummy/DwqAVvG3iFU_630_420.jpg
--- a/storybook/public/dummy/Ff2oZ_xbKL0_900600.jpg
+++ b/storybook/public/dummy/Ff2oZ_xbKL0_900600.jpg
--- a/storybook/public/dummy/GJNT3tqQW8I_210_140.jpg
+++ b/storybook/public/dummy/GJNT3tqQW8I_210_140.jpg
--- a/storybook/public/dummy/PhYq704ffdA_1470_980.jpg
+++ b/storybook/public/dummy/PhYq704ffdA_1470_980.jpg
--- a/storybook/public/dummy/PhYq704ffdA_300_200.jpg
+++ b/storybook/public/dummy/PhYq704ffdA_300_200.jpg
--- a/storybook/public/dummy/QBpZGqEMsKg_1470_980.jpg
+++ b/storybook/public/dummy/QBpZGqEMsKg_1470_980.jpg
--- a/storybook/public/dummy/QBpZGqEMsKg_300_200.jpg
+++ b/storybook/public/dummy/QBpZGqEMsKg_300_200.jpg
--- a/storybook/public/dummy/YRMWVcdyhmI_420_280.jpg
+++ b/storybook/public/dummy/YRMWVcdyhmI_420_280.jpg
--- a/storybook/public/dummy/dIMJWLx1YbE_210_140.jpg
+++ b/storybook/public/dummy/dIMJWLx1YbE_210_140.jpg
--- a/storybook/public/dummy/eF7HN40WbAQ_1470_980.jpg
+++ b/storybook/public/dummy/eF7HN40WbAQ_1470_980.jpg
--- a/storybook/public/dummy/eF7HN40WbAQ_300_200.jpg
+++ b/storybook/public/dummy/eF7HN40WbAQ_300_200.jpg
--- a/storybook/public/dummy/fIq0tET6llw_300_413.jpg
+++ b/storybook/public/dummy/fIq0tET6llw_300_413.jpg
--- a/storybook/public/dummy/fIq0tET6llw_800_1100.jpg
+++ b/storybook/public/dummy/fIq0tET6llw_800_1100.jpg
--- a/storybook/public/dummy/gDdKnwEOPtQ_1470_980.jpg
+++ b/storybook/public/dummy/gDdKnwEOPtQ_1470_980.jpg
--- a/storybook/public/dummy/gDdKnwEOPtQ_1920_1080.jpg
+++ b/storybook/public/dummy/gDdKnwEOPtQ_1920_1080.jpg
--- a/storybook/public/dummy/gDdKnwEOPtQ_300_200.jpg
+++ b/storybook/public/dummy/gDdKnwEOPtQ_300_200.jpg
--- a/storybook/public/dummy/gDdKnwEOPtQ_800_800.jpg
+++ b/storybook/public/dummy/gDdKnwEOPtQ_800_800.jpg
--- a/storybook/public/dummy/gi-1871-gesetz.jpg
+++ b/storybook/public/dummy/gi-1871-gesetz.jpg
--- a/storybook/public/dummy/gi-1871.jpg
+++ b/storybook/public/dummy/gi-1871.jpg
--- a/storybook/public/dummy/gi-1872-gail.jpg
+++ b/storybook/public/dummy/gi-1872-gail.jpg
--- a/storybook/public/dummy/gi-1872.jpg
+++ b/storybook/public/dummy/gi-1872.jpg
--- a/storybook/public/dummy/gi-1902-03.jpg
+++ b/storybook/public/dummy/gi-1902-03.jpg
--- a/storybook/public/dummy/h_xhFtp2PwM_300_400.jpg
+++ b/storybook/public/dummy/h_xhFtp2PwM_300_400.jpg
--- a/storybook/public/dummy/h_xhFtp2PwM_736_981.jpg
+++ b/storybook/public/dummy/h_xhFtp2PwM_736_981.jpg
--- a/storybook/public/dummy/j5almO1E8rU_360_240.jpg
+++ b/storybook/public/dummy/j5almO1E8rU_360_240.jpg
--- a/storybook/public/dummy/jJFrkJP_-RA_420_280.jpg
+++ b/storybook/public/dummy/jJFrkJP_-RA_420_280.jpg
--- a/storybook/public/dummy/lB9ylP8e9Sg_300_409.jpg
+++ b/storybook/public/dummy/lB9ylP8e9Sg_300_409.jpg
--- a/storybook/public/dummy/lB9ylP8e9Sg_880_1200.jpg
+++ b/storybook/public/dummy/lB9ylP8e9Sg_880_1200.jpg
--- a/storybook/public/dummy/muOHbrFGEQY_300_400.jpg
+++ b/storybook/public/dummy/muOHbrFGEQY_300_400.jpg
--- a/storybook/public/dummy/muOHbrFGEQY_900_1200.jpg
+++ b/storybook/public/dummy/muOHbrFGEQY_900_1200.jpg
--- a/storybook/public/dummy/o78TVMMyfAk_420_280.jpg
+++ b/storybook/public/dummy/o78TVMMyfAk_420_280.jpg
--- a/storybook/public/dummy/qpemSW6_1Z0_1920_1080.jpg
+++ b/storybook/public/dummy/qpemSW6_1Z0_1920_1080.jpg
--- a/storybook/public/dummy/qpemSW6_1Z0_800_800.jpg
+++ b/storybook/public/dummy/qpemSW6_1Z0_800_800.jpg
--- a/storybook/public/dummy/tile-grid/tile-01.svg
+++ b/storybook/public/dummy/tile-grid/tile-01.svg
@@ -0,0 +1,9 @@
 <svg width="165" height="187" viewBox="0 0 165 187" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M174.719 63.0312H107.688L95.5 75.2106L83.3125 63.0231H16.2812C13.0489 63.0231 9.94899 61.7391 7.66339 59.4535C5.37779 57.1679 4.09375 54.0679 4.09375 50.8356V14.2812C4.09375 11.0489 5.37779 7.94899 7.66339 5.66339C9.94899 3.37779 13.0489 2.09375 16.2812 2.09375H174.719C177.951 2.09375 181.051 3.37779 183.337 5.66339C185.622 7.94899 186.906 11.0489 186.906 14.2812V50.8437C186.906 54.0761 185.622 57.176 183.337 59.4616C181.051 61.7472 177.951 63.0312 174.719 63.0312Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M25.4219 154.438C37.2011 154.438 46.75 144.889 46.75 133.109C46.75 121.33 37.2011 111.781 25.4219 111.781C13.6427 111.781 4.09375 121.33 4.09375 133.109C4.09375 144.889 13.6427 154.438 25.4219 154.438Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M59.0512 182.737C56.8966 177.703 53.6386 173.216 49.5179 169.61C45.3972 166.004 40.519 163.369 35.2436 161.9C29.9682 160.431 24.4302 160.167 19.0387 161.125C13.6472 162.083 8.53983 164.241 4.09375 167.437" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M165.578 154.438C177.357 154.438 186.906 144.889 186.906 133.109C186.906 121.33 177.357 111.781 165.578 111.781C153.799 111.781 144.25 121.33 144.25 133.109C144.25 144.889 153.799 154.438 165.578 154.438Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M131.949 182.737C134.103 177.703 137.361 173.216 141.482 169.61C145.603 166.004 150.481 163.369 155.756 161.9C161.032 160.431 166.57 160.167 171.961 161.125C177.353 162.083 182.46 164.241 186.906 167.437" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M95.5 154.438C110.645 154.438 122.922 142.16 122.922 127.016C122.922 111.871 110.645 99.5938 95.5 99.5938C80.3553 99.5938 68.0781 111.871 68.0781 127.016C68.0781 142.16 80.3553 154.438 95.5 154.438Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M133.801 184.898C129.181 179.191 123.344 174.589 116.716 171.427C110.089 168.266 102.839 166.625 95.496 166.625C88.1532 166.625 80.9031 168.266 74.2758 171.427C67.6484 174.589 61.8112 179.191 57.1907 184.898" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-02.svg
+++ b/storybook/public/dummy/tile-grid/tile-02.svg
@@ -0,0 +1,20 @@
 <svg width="176" height="188" viewBox="0 0 176 188" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M157 100.083V-2.91669H48V100.083" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M35.375 -3.16669H47.5625" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M169.438 -3.16669H157.25" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M11 45.5833H47.5625" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M157.25 45.5833H193.812" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M11 82.1458H193.812" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M23.1875 106.083V45.5833H47.5625" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M181.625 106.083V45.5833H157.25" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M84.125 21.2083V27.3021" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M84.125 51.6771V57.7708" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M120.688 21.2083V27.3021" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M120.688 51.6771V57.7708" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M26.75 164.583C39.3145 164.583 49.5 154.398 49.5 141.833C49.5 129.269 39.3145 119.083 26.75 119.083C14.1855 119.083 4 129.269 4 141.833C4 154.398 14.1855 164.583 26.75 164.583Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M62.6213 194.769C60.323 189.399 56.8479 184.614 52.4524 180.767C48.057 176.92 42.8536 174.11 37.2265 172.543C31.5994 170.977 25.6922 170.694 19.9413 171.717C14.1904 172.739 8.74249 175.04 4 178.45" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M176.25 164.583C188.814 164.583 199 154.398 199 141.833C199 129.269 188.814 119.083 176.25 119.083C163.686 119.083 153.5 129.269 153.5 141.833C153.5 154.398 163.686 164.583 176.25 164.583Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M140.379 194.769C142.677 189.399 146.152 184.614 150.548 180.767C154.943 176.92 160.146 174.11 165.773 172.543C171.401 170.977 177.308 170.694 183.059 171.717C188.81 172.739 194.258 175.04 199 178.45" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M101.5 164.583C117.654 164.583 130.75 151.488 130.75 135.333C130.75 119.179 117.654 106.083 101.5 106.083C85.3457 106.083 72.25 119.179 72.25 135.333C72.25 151.488 85.3457 164.583 101.5 164.583Z" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M142.355 197.075C137.426 190.987 131.2 186.078 124.131 182.706C117.061 179.334 109.328 177.584 101.496 177.584C93.6634 177.584 85.93 179.334 78.8608 182.706C71.7916 186.078 65.5652 190.987 60.6367 197.075" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-03.svg
+++ b/storybook/public/dummy/tile-grid/tile-03.svg
@@ -0,0 +1,4 @@
 <svg width="150" height="187" viewBox="0 0 150 187" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M123.714 59.4095C126.778 60.5238 129.564 62.4738 131.793 64.7024C134.021 66.9309 135.971 69.7167 137.643 72.7809C139.036 75.8452 139.593 78.9095 139.593 82.2524C139.593 85.5952 138.757 88.6595 137.643 91.7238C136.528 94.7881 134.578 97.5738 132.35 99.8024C130.4 101.474 128.171 103.145 125.943 104.26C122.043 110.388 116.471 115.681 109.786 119.302C102.821 123.202 95.2999 125.152 87.2213 125.152C79.1427 125.152 71.6213 123.202 64.657 119.302C58.2499 115.681 52.6784 110.388 48.4999 104.26C45.9927 103.145 44.0427 101.752 42.0927 99.8024C37.357 95.0666 34.8499 88.9381 34.8499 82.2524C34.8499 75.5666 37.357 69.4381 42.0927 64.7024C46.8284 59.9666 52.957 57.4595 59.6427 57.4595C61.1019 57.4595 62.3487 57.6718 63.7539 57.9111C63.9583 57.9459 64.1661 57.9813 64.3784 58.0167C73.0142 52.4452 79.6999 44.6452 83.8784 35.1738C84.4356 34.0595 85.5499 33.2238 86.9427 33.2238C88.3356 33.2238 89.4499 33.7809 90.007 35.1738C94.1856 44.6452 100.871 52.4452 109.507 58.0167C114.243 57.1809 119.257 57.4595 123.714 59.4095ZM46.8284 69.7166C43.4856 73.0595 41.5356 77.5166 41.5356 82.2524C41.5356 86.9881 43.4856 91.4452 46.8284 94.7881C50.1713 98.1309 54.6284 100.081 59.3642 100.081C64.0999 100.081 68.557 98.1309 71.8999 94.7881C75.2427 91.4452 77.1927 86.9881 77.1927 82.2524C77.1927 77.5166 75.2427 73.0595 71.8999 69.7166C68.557 66.3738 64.0999 64.4238 59.3642 64.4238C54.6284 64.4238 50.1713 66.3738 46.8284 69.7166ZM67.7213 113.452C79.4213 119.859 94.1856 119.859 105.886 113.452C108.95 111.781 111.736 109.552 113.964 107.045C110.621 107.045 107.557 106.21 104.493 105.095C101.428 103.981 98.6427 102.031 96.4141 99.8024C94.1856 97.5738 92.5141 94.7881 91.1213 91.7238C89.7284 88.6595 89.1713 85.5952 89.1713 82.2524C89.1713 78.9095 89.7284 75.8452 91.1213 72.7809C92.2356 69.7167 94.1856 66.9309 96.4141 64.7024C98.0856 63.0309 99.757 61.9166 101.428 60.8024C95.5784 56.3452 90.5642 50.4952 86.6641 44.0881C82.7642 50.4952 77.7499 56.3452 71.8999 60.8024C73.8499 61.9166 75.5213 63.3095 76.9142 64.7024C81.6499 69.4381 84.157 75.5666 84.157 82.2524C84.157 88.9381 81.6499 95.0666 76.9142 99.8024C72.1784 104.538 66.0499 107.045 59.3642 107.045C61.8713 109.552 64.657 111.781 67.7213 113.452ZM126.778 94.7881C128.45 93.1166 129.843 91.1666 130.678 88.9381C131.514 86.9881 132.35 84.4809 132.35 81.9738C132.35 79.4667 131.793 77.2381 130.957 75.0095C130.121 72.7809 128.728 70.8309 127.057 69.1595C125.386 67.4881 123.436 66.0952 121.207 65.2595C118.978 64.4238 116.471 63.8666 114.243 63.8666C111.736 63.8666 109.507 64.4238 107.278 65.2595C105.05 66.0952 103.1 67.4881 101.428 69.1595C99.757 70.8309 98.3642 72.7809 97.5284 75.0095C96.6927 77.2381 96.1356 79.4667 96.1356 81.9738C96.1356 84.4809 96.6927 86.7095 97.5284 88.9381C98.3642 91.1666 99.757 93.1166 101.428 94.7881C103.1 96.4595 105.05 97.8524 107.278 98.6881C111.736 100.359 116.471 100.359 120.928 98.6881C123.157 97.8524 125.107 96.4595 126.778 94.7881Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M159.928 96.738L171.071 122.924C172.743 126.824 172.743 131.002 171.071 134.624C169.678 138.524 166.893 141.588 162.993 143.259C156.307 146.324 149.343 148.552 142.379 150.224C152.686 158.581 161.043 169.167 166.893 181.145C167.729 183.095 166.893 185.045 165.221 185.881C164.943 186.159 164.386 186.159 163.829 186.159C162.714 186.159 161.321 185.602 160.764 184.209C155.193 172.509 146.836 162.202 136.529 154.402L126.779 183.931C126.5 185.045 125.664 185.881 124.55 186.159C124.271 186.438 123.714 186.438 123.436 186.438C122.6 186.438 122.043 186.159 121.486 185.881L86.9428 162.759L52.3999 185.881C51.8428 186.159 51.0071 186.438 50.4499 186.438C50.3106 186.438 50.1017 186.368 49.8928 186.299C49.6839 186.229 49.4749 186.159 49.3356 186.159C48.2214 185.881 47.3856 185.045 47.1071 183.931L37.3571 154.402C27.0499 162.202 18.6928 172.509 13.1214 184.209C12.2857 185.881 10.0571 186.717 8.38565 185.881C6.71422 185.045 5.87851 183.095 6.71422 181.145C12.2857 169.167 20.9214 158.581 30.9499 150.781C23.9856 149.109 17.0214 146.602 10.3357 143.817C6.43565 142.145 3.37136 139.081 1.97851 135.181C0.58565 131.281 0.58565 127.102 2.25708 123.202L13.3999 97.0166C15.3499 92.838 16.1857 88.3809 16.1857 83.9238V66.9309C16.1857 48.2666 23.4285 30.438 36.7999 17.0666C50.1714 3.69519 67.7214 -3.54767 86.6642 -3.54767C105.607 -3.54767 123.157 3.41662 136.529 16.788C149.9 30.1595 157.143 47.7095 157.143 66.6523V83.6452C157.143 88.1023 158.257 92.5595 159.928 96.738ZM43.2071 150.224L52.1214 177.245L80.8142 158.024L60.4785 141.588C59.6428 141.867 58.8071 142.215 57.9714 142.563C57.1356 142.911 56.2999 143.259 55.4642 143.538C55.4642 143.538 55.1856 143.817 54.9071 143.817C54.2106 144.095 53.5142 144.443 52.8178 144.792C52.1214 145.14 51.4249 145.488 50.7285 145.767C50.5892 145.906 50.3803 145.976 50.1714 146.045C49.9624 146.115 49.7535 146.184 49.6142 146.324C48.7578 146.666 48.0068 147.114 47.2962 147.538C46.8511 147.803 46.422 148.059 45.9928 148.274C45.8535 148.413 45.6446 148.552 45.4356 148.692C45.2267 148.831 45.0178 148.97 44.8785 149.109C44.5999 149.249 44.3214 149.458 44.0428 149.667C43.7642 149.876 43.4856 150.084 43.2071 150.224ZM92.7928 158.024L121.486 177.245L130.678 150.224C130.121 150.224 129.843 149.945 129.564 149.667C129.146 149.388 128.729 149.179 128.311 148.97C127.893 148.761 127.475 148.552 127.057 148.274C126.85 148.17 126.642 148.028 126.42 147.876C126.046 147.619 125.632 147.334 125.107 147.159C124.271 146.602 123.436 146.045 122.6 145.767C121.764 145.209 121.207 144.931 120.371 144.652C119.954 144.513 119.536 144.304 119.118 144.095C118.7 143.886 118.282 143.677 117.864 143.538C117.189 143.088 116.333 142.82 115.588 142.587C115.411 142.531 115.239 142.477 115.079 142.424C114.8 142.284 114.452 142.145 114.104 142.006C113.755 141.867 113.407 141.727 113.129 141.588L92.7928 158.024ZM160.486 137.131C162.436 136.295 164.107 134.624 164.943 132.395C165.779 130.167 165.779 127.938 164.664 125.709L153.521 99.5238C151.293 94.5095 150.178 89.2166 150.178 83.6452V66.6523C150.178 49.6595 143.493 33.7809 131.514 21.8023C119.536 9.82376 103.657 3.13805 86.6642 3.13805C69.6714 3.13805 53.7928 9.82376 41.8142 21.8023C29.8356 33.7809 23.1499 49.6595 23.1499 66.6523V83.6452C23.1499 89.2166 22.0357 94.5095 19.8071 99.5238L8.66422 125.709C7.82851 127.938 7.82851 130.167 8.66422 132.395C9.49994 134.624 10.8928 136.295 13.1214 137.131C21.1999 140.752 29.8356 143.259 38.4714 144.931C45.1571 140.752 52.3999 137.409 59.9214 134.902C60.1999 134.624 60.4785 134.624 60.7571 134.624C61.5928 134.624 62.7071 134.902 63.2642 135.459L86.6642 154.124L110.064 135.459C110.9 134.902 111.736 134.624 112.571 134.624C112.85 134.902 113.129 134.902 113.407 134.902C120.929 137.131 128.171 140.474 134.857 144.931C143.771 143.259 152.407 140.752 160.486 137.131Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-04.svg
+++ b/storybook/public/dummy/tile-grid/tile-04.svg
@@ -0,0 +1,7 @@
 <svg width="156" height="182" viewBox="0 0 156 182" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M82.5215 81.15C88.0929 78.9214 93.3858 75.3 97.5644 71.1214C101.743 66.6643 105.086 61.65 107.593 56.0786C110.1 50.5071 111.214 44.3786 111.214 38.5286C111.214 32.6786 109.822 26.55 107.593 20.9786C105.364 15.4071 101.743 10.1143 97.5644 5.9357C93.1072 1.47856 88.0929 -1.8643 82.5215 -4.09287C71.1001 -8.82858 58.2858 -8.82858 47.1429 -4.09287C41.5715 -1.8643 36.5572 1.47856 32.1001 5.9357C27.6429 10.3928 24.3001 15.4071 22.0715 20.9786C19.5644 26.55 18.4501 32.6786 18.4501 38.5286C18.4501 44.3786 19.8429 50.5071 22.0715 56.0786C24.0215 60.5357 26.8072 64.7143 29.8715 68.3357L1.73578 97.0286C0.342926 98.4214 0.342926 100.65 1.73578 102.043C2.5715 102.879 3.40721 103.157 4.24294 103.157C5.07866 103.157 6.19295 102.6 6.75008 102.043L35.1644 73.6286C38.7858 76.6929 42.9644 79.2 47.4215 81.15C52.9929 83.6571 58.8429 84.7714 64.9715 84.7714C70.8215 84.7714 76.9501 83.3786 82.5215 81.15ZM92.8287 10.6714C96.4501 14.5714 99.2358 18.75 101.186 23.4857C103.136 28.2214 104.25 33.2357 104.25 38.5286C104.25 43.8214 103.136 48.8357 101.186 53.5714C99.2358 58.5857 96.7287 62.7643 92.8287 66.3857C88.9286 70.0071 84.7501 72.7928 80.0144 74.7429C70.2644 78.6429 59.4001 78.6429 49.9286 74.7429C44.9144 72.7928 40.7358 70.0071 37.1144 66.3857C33.4929 62.4857 30.7072 58.3071 28.7572 53.5714C26.8072 48.8357 25.6929 43.8214 25.6929 38.5286C25.6929 33.2357 26.8072 28.2214 28.7572 23.4857C30.7072 18.4714 33.4929 14.2928 37.1144 10.6714C41.0144 7.04999 45.1929 4.26428 49.9286 2.31427C54.6644 0.364276 59.6786 -0.75001 64.9715 -0.75001C70.2644 -0.75001 75.2786 0.364276 80.0144 2.31427C85.0286 4.26428 89.2072 6.77142 92.8287 10.6714Z" fill="white"/>
 <path d="M46.5858 127.114C42.6858 127.114 39.0644 126.557 35.4429 125.164C29.8715 122.936 25.1358 119.593 21.7929 114.857C20.6786 113.186 20.9572 111.236 22.6286 110.121C24.3001 109.007 26.2501 109.286 27.3644 110.957C30.1501 114.578 33.7715 117.364 37.9501 119.036C42.1286 120.707 46.8644 120.986 51.3215 120.15C55.7786 119.314 59.9572 117.086 63.0215 114.021C66.3644 110.957 68.5929 106.778 69.7072 102.6C70.2644 100.65 71.9358 99.5356 73.8858 100.093C75.8358 100.65 76.9501 102.321 76.3929 104.271C75.0001 109.843 71.9358 115.136 67.7572 119.036C63.5787 123.214 58.2858 125.721 52.4358 127.114C51.3469 126.933 50.1397 126.988 48.8144 127.048C48.1053 127.08 47.3625 127.114 46.5858 127.114Z" fill="white"/>
 <path d="M46.5858 132.407C52.9929 132.407 59.4001 133.8 65.2501 136.307C66.9215 137.143 67.7572 139.093 66.9215 141.043C66.0858 142.993 64.1358 143.55 62.1858 142.714C57.1715 140.486 51.8786 139.371 46.5858 139.371C36.2786 139.371 26.2501 143.55 18.7286 150.793C12.0429 157.478 8.14291 165.836 7.30719 175.028H52.7143C54.6643 175.028 56.0572 176.7 56.0572 178.371C56.0572 180.043 54.3858 181.714 52.7143 181.714H3.96434C2.01436 181.714 0.62149 180.043 0.62149 178.371C0.62149 166.114 5.35719 154.414 14.2715 145.778C22.9072 137.143 34.3286 132.407 46.5858 132.407Z" fill="white"/>
 <path d="M173.057 116.528C172.5 116.807 171.943 117.086 171.386 117.086C170.272 117.086 169.157 116.528 168.322 115.414C164.979 110.121 162.75 104.271 161.636 98.4213L161.357 98.6999C157.736 104.271 152.443 108.728 146.314 111.514C141.3 113.743 136.007 114.857 130.714 114.857C129.322 114.857 128.207 114.857 126.814 114.578C120.129 114.021 113.722 111.514 108.429 107.336C105.086 104.828 102.022 101.486 99.793 97.8642C98.6787 103.993 96.4501 109.843 93.1072 115.136C92.5501 116.25 91.4358 116.807 90.043 116.807C89.4858 116.807 88.6501 116.528 88.093 116.25C86.4215 115.136 85.8644 113.186 86.9787 111.514C90.6001 105.664 92.8287 98.9784 93.1072 92.2927C93.1072 90.6213 94.5001 89.507 96.1715 89.2284C96.4501 88.3927 97.2858 87.557 98.1215 87.2784C99.793 86.4427 102.022 87.2784 102.579 89.2284C104.529 94.2427 108.15 98.6999 112.329 102.043C116.786 105.386 121.8 107.336 127.372 107.893C132.664 108.45 138.236 107.614 143.25 105.107C148.264 102.878 152.443 99.257 155.507 94.7999C157.736 91.457 159.129 87.8356 159.964 83.9356C154.393 83.3784 149.1 81.9856 144.086 79.757C139.072 77.5284 134.336 74.1856 130.436 70.2856C126.257 74.4641 121.243 77.807 115.672 80.3141C114 81.1499 111.772 80.3141 111.214 78.6427C110.379 76.9713 111.214 74.7427 112.886 74.1856C118.457 71.6784 123.75 68.057 127.65 63.3213C128.207 62.4856 129.322 62.207 130.157 62.207C131.272 62.207 132.107 62.7641 132.664 63.3213C136.564 67.7784 141.3 71.3999 146.593 73.6284C150.772 75.5784 155.507 76.6927 159.964 77.2499C159.686 72.7927 158.572 68.3356 156.622 64.157C154.114 59.4213 150.214 55.2427 145.479 52.457C140.743 49.6713 135.45 48.2784 129.879 48.2784H127.929C125.979 48.557 124.307 47.1641 124.029 45.2141C123.75 43.2641 125.143 41.5927 127.093 41.3141H129.879C136.564 41.3141 143.25 43.2641 148.822 46.607C154.672 49.9499 159.407 54.9641 162.472 60.8141C165.536 66.3856 166.929 72.5141 166.65 78.9213V87.557C166.372 96.1927 168.6 104.828 173.057 112.35C175.286 113.464 174.729 115.414 173.057 116.528Z" fill="white"/>
 <path d="M112.886 125.164C112.05 124.05 110.657 123.771 109.264 124.328C98.4001 128.786 89.2072 136.028 82.8001 145.778C76.1144 155.25 72.7715 166.671 72.7715 178.371C72.7715 180.321 74.1644 181.993 76.1144 181.993C77.7858 181.993 79.4572 180.6 79.4572 178.65C79.4572 168.343 82.5215 158.593 88.3715 149.957C93.9429 142.157 101.186 136.028 109.822 132.128L128.486 150.793C129.879 152.186 132.107 152.186 133.5 150.793L152.164 132.128C160.8 136.028 168.321 142.157 173.614 149.957C179.464 158.314 182.529 168.343 182.529 178.65C182.529 180.321 183.921 181.993 185.871 181.993C187.543 181.993 189.214 180.321 189.214 178.371C189.214 166.671 185.871 155.528 179.186 145.778C172.5 136.028 163.307 128.786 152.164 124.328C151.05 123.771 149.657 124.05 148.543 125.164L130.714 142.993L112.886 125.164Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-05.svg
+++ b/storybook/public/dummy/tile-grid/tile-05.svg
@@ -0,0 +1,9 @@
 <svg width="130" height="187" viewBox="0 0 130 187" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M91.5 74.6071H146.1V66.25H91.5V74.6071Z" fill="white"/>
 <path d="M125.3 46.75H91.5V38.3929H125.3V46.75Z" fill="white"/>
 <path d="M91.5 103.857H146.1V95.5H91.5V103.857Z" fill="white"/>
 <path d="M146.1 131.714H91.5V123.357H146.1V131.714Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M141.792 0.0892944C145.412 0.0892762 148.884 1.63012 151.444 4.37285L168.752 22.9169C171.312 25.6596 172.75 29.3796 172.75 33.2584V154C172.75 161.504 167.476 167.688 160.682 168.528C159.479 173.967 155.442 178.23 150.334 179.429C148.992 185.996 143.532 190.911 137 190.911H49.9C42.3613 190.911 36.25 184.363 36.25 176.286V37C36.25 30.002 40.8374 24.1519 46.9661 22.7137C48.1975 16.69 52.894 12.056 58.704 11.3311C60.111 4.85429 65.5466 0.0896737 72 0.0896415L141.792 0.0892944ZM60.3 179.768H143.37C142.187 182.248 139.779 183.946 137 183.946H49.9C45.9512 183.946 42.75 180.517 42.75 176.286V37C42.75 34.023 44.3349 31.4426 46.65 30.1746V165.143C46.65 173.22 52.7613 179.768 60.3 179.768ZM58.3501 18.4848C55.349 19.3942 53.15 22.3505 53.15 25.8572V165.143C53.15 169.374 56.3512 172.804 60.3 172.804H147.4C150.178 172.804 152.587 171.106 153.77 168.625H72.0001C64.4614 168.625 58.3501 162.078 58.3501 154V18.4848ZM142.85 7.13784V21.6786C142.85 25.9095 146.051 29.3393 150 29.3393H165.244C164.943 28.7981 164.579 28.2943 164.156 27.8414L146.848 9.29735C145.759 8.13055 144.355 7.37901 142.85 7.13784ZM166.25 36.3036V154C166.25 158.231 163.049 161.661 159.1 161.661H72.0001C68.0512 161.661 64.8501 158.231 64.8501 154V14.6532C64.8501 10.4474 68.0278 7.05395 72 7.05393L136.35 7.05361V21.6786C136.35 29.7557 142.461 36.3036 150 36.3036H166.25Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M20 134.5V50.9286C20 47.0823 17.0898 43.9643 13.5 43.9643C9.91015 43.9643 7 47.0823 7 50.9286V134.5C7 138.346 9.91015 141.464 13.5 141.464C17.0898 141.464 20 138.346 20 134.5ZM13.5 37C6.3203 37 0.5 43.236 0.5 50.9286V134.5C0.5 142.193 6.3203 148.429 13.5 148.429C20.6797 148.429 26.5 142.193 26.5 134.5V50.9286C26.5 43.236 20.6797 37 13.5 37Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0.75293 137.307L13.5001 142.099L26.2472 137.307L19.1033 162.821C17.4357 168.776 9.56438 168.776 7.89677 162.821L0.75293 137.307ZM10.6472 148.407L13.5001 158.596L16.3529 148.407L13.5001 149.48L10.6472 148.407Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-06.svg
+++ b/storybook/public/dummy/tile-grid/tile-06.svg
@@ -0,0 +1,6 @@
 <svg width="142" height="188" viewBox="0 0 142 188" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M66.3071 46.2547C61.0142 51.5476 54.0499 54.3333 46.5285 54.3333C39.0071 54.3333 32.0428 51.5476 26.7499 46.2547C21.4571 40.9619 18.6714 33.9976 18.6714 26.4762C18.6714 18.9547 21.4571 11.9904 26.7499 6.69759C32.0428 1.40473 39.2856 -1.38098 46.5285 -1.38098C53.7714 -1.38098 60.7356 1.40473 66.3071 6.69759C71.5999 11.9904 74.3856 18.9547 74.3856 26.4762C74.3856 33.9976 71.5999 40.9619 66.3071 46.2547ZM46.5285 5.5833C40.9571 5.5833 35.6642 7.81187 31.7642 11.7119C27.5856 15.6119 25.6356 20.9047 25.6356 26.4762C25.6356 32.0476 27.5856 37.3404 31.7642 41.2404C35.6642 45.1404 40.9571 47.369 46.5285 47.369C52.0999 47.369 57.3928 45.1404 61.2928 41.2404C65.1928 37.3404 67.4213 32.0476 67.4213 26.4762C67.4213 20.9047 65.1928 15.6119 61.2928 11.7119C57.3928 7.81187 52.0999 5.5833 46.5285 5.5833Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M133.164 108.933L188.043 131.498C189.157 132.055 189.993 133.448 190.271 135.119C190.271 136.512 189.436 137.626 188.043 138.183L166.036 146.262V169.105C166.036 171.055 165.479 172.726 164.364 174.398C163.25 176.069 161.578 177.183 159.907 178.019L135.393 187.769C134.278 188.048 132.886 188.326 131.771 188.326C130.379 188.326 129.264 188.326 128.15 187.769L103.914 178.019C101.964 177.183 100.571 176.069 99.4571 174.398C98.3428 173.005 97.7856 171.055 97.7856 169.105V146.262L80.2356 140.133V165.483C80.2356 167.155 78.5642 168.826 76.8928 168.826C75.2214 168.826 73.5499 167.433 73.5499 165.483V133.726C73.8285 132.333 74.9428 131.498 76.3356 131.219L130.378 108.933C131.493 108.655 132.329 108.655 133.164 108.933ZM158.236 170.498C158.514 170.219 158.793 169.662 158.793 169.105V148.769L132.886 158.241C132.607 158.519 132.05 158.519 131.771 158.519C131.493 158.519 130.936 158.519 130.657 158.241L104.75 148.769V169.105C104.75 169.662 105.029 170.219 105.307 170.498C105.586 170.776 105.864 171.055 106.421 171.333L130.657 181.083C131.214 181.362 132.05 181.362 132.607 181.083L157.121 171.333C157.4 171.333 157.957 171.055 158.236 170.498ZM86.6428 134.841L131.771 151.276L176.9 134.841L131.771 116.176L86.6428 134.841Z" fill="white"/>
 <path d="M64.6356 181.362H31.2071L25.6356 123.698C25.3571 122.026 23.9642 120.633 22.2928 120.633H7.24993V105.869C7.24993 97.2333 10.0356 88.8762 15.3285 81.9119C20.6214 75.2262 28.1428 70.2119 36.2214 67.9833C44.5785 65.7548 53.4928 66.3119 61.2928 69.6548C69.0928 72.9976 76.0571 78.8476 80.2356 86.369C81.0714 88.0405 83.2999 88.5976 84.9714 87.7619C86.6428 86.9262 87.1999 84.6976 86.3642 83.0262C81.3499 74.3905 73.5499 67.4262 64.0785 63.5262C54.8856 59.6262 44.2999 58.7905 34.5499 61.5762C24.7999 64.0833 15.8856 69.9333 9.75707 78.0119C3.6285 85.5333 0.285645 95.5619 0.285645 105.59V123.976C0.285645 125.926 1.95707 127.319 3.6285 127.319H18.6714L24.7999 185.262C25.0785 186.933 26.4714 188.326 28.1428 188.326H64.6356C66.5856 188.326 67.9785 186.655 67.9785 184.983C67.9785 183.312 66.5856 181.362 64.6356 181.362Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M119.793 56.8404C114.778 58.7904 110.321 61.8547 106.978 65.7547C105.586 67.1476 103.357 67.1476 101.964 66.0333C100.571 64.6404 100.293 62.4119 101.686 61.019C105.864 56.2833 111.157 52.3833 117.007 50.1547C120.071 48.7619 123.414 48.2047 126.757 47.6476C122.021 46.8119 117.843 44.3047 114.221 40.9619C109.486 36.2262 106.978 30.0976 106.978 23.4119C106.978 16.7262 109.486 10.5976 114.221 5.86188C118.957 1.12616 125.086 -1.38098 131.771 -1.38098C138.457 -1.38098 144.586 1.12616 149.6 5.5833C154.336 10.319 156.843 16.4476 156.843 23.1333C156.843 29.819 154.336 35.9476 149.6 40.6833C146.257 44.0262 141.8 46.5333 137.064 47.369C142.914 48.2047 148.764 50.1547 153.778 53.4976C159.071 56.8405 163.807 61.5762 166.871 67.1476C167.707 68.819 167.15 71.0476 165.478 71.8833C164.921 72.1619 164.364 72.4404 163.807 72.4404C162.693 72.4404 161.3 71.8833 160.743 70.769C157.957 66.3119 154.336 62.4119 149.878 59.6262C145.421 56.8404 140.407 55.169 135.114 54.6119C130.1 54.0547 124.528 54.8904 119.793 56.8404ZM119.236 10.8762C115.893 14.219 113.943 18.6762 113.943 23.4119C113.943 28.1476 115.614 32.6047 119.236 35.9476C122.578 39.2904 127.036 41.2404 131.771 41.2404C136.507 41.2404 140.964 39.2904 144.307 35.9476C147.65 32.6047 149.6 28.1476 149.6 23.4119C149.6 18.6762 147.65 14.219 144.307 10.8762C140.964 7.5333 136.507 5.5833 131.771 5.5833C127.036 5.5833 122.578 7.5333 119.236 10.8762Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-07.svg
+++ b/storybook/public/dummy/tile-grid/tile-07.svg
@@ -0,0 +1,7 @@
 <svg width="189" height="173" viewBox="0 0 189 173" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M145.984 0.808079L173.924 8.45849C175.445 8.87496 176.5 10.2572 176.5 11.8342V36.5619C176.5 46.8309 171.79 56.5327 163.721 62.8845L147.22 75.8745C147.004 76.0522 146.77 76.2007 146.524 76.3193C145.569 76.7818 144.466 76.7775 143.529 76.3441C143.262 76.221 143.01 76.0634 142.777 75.872L126.279 62.8844C118.21 56.5326 113.5 46.8309 113.5 36.5618V11.8342C113.5 10.2572 114.555 8.8749 116.076 8.45843L144.022 0.806403C144.321 0.719129 144.634 0.671207 144.952 0.666988C145.306 0.661885 145.653 0.710883 145.984 0.808079ZM145 68.7132L159.391 57.3843C165.774 52.3597 169.5 44.6851 169.5 36.5619V14.5047L145 7.79636L120.5 14.5047V36.5618C120.5 44.6851 124.226 52.3596 130.609 57.3842L145 68.7132Z" fill="white"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M161.255 23.4904C162.733 24.7355 162.922 26.9435 161.677 28.4221L144.685 48.6006C143.96 49.4615 142.668 49.5549 141.826 48.8071L131.675 39.7836C130.23 38.4993 130.1 36.2871 131.384 34.8423C132.668 33.3976 134.881 33.2675 136.325 34.5517L142.638 40.1634L156.323 23.9131C157.568 22.4346 159.776 22.2453 161.255 23.4904Z" fill="white"/>
 <path d="M28.3571 116.354C26.434 116.354 24.875 117.913 24.875 119.836C24.875 121.759 26.434 123.318 28.3571 123.318H174.607C176.53 123.318 178.089 121.759 178.089 119.836C178.089 117.913 176.53 116.354 174.607 116.354H28.3571Z" fill="white"/>
 <path d="M28.3571 140.729C26.434 140.729 24.875 142.288 24.875 144.211C24.875 146.134 26.434 147.693 28.3571 147.693H174.607C176.53 147.693 178.089 146.134 178.089 144.211C178.089 142.288 176.53 140.729 174.607 140.729H28.3571Z" fill="white"/>
 <path d="M13.5837 105.063C17.5018 101.145 22.816 98.9434 28.3571 98.9434H186.795C188.718 98.9434 190.277 97.3844 190.277 95.4613C190.277 93.5381 188.718 91.9791 186.795 91.9791H28.3571C20.969 91.9791 13.8834 94.9141 8.65917 100.138C3.43494 105.363 0.5 112.448 0.5 119.836V144.211C0.5 151.599 3.43494 158.685 8.65917 163.909C13.8834 169.133 20.969 172.068 28.3571 172.068H186.795C188.718 172.068 190.277 170.509 190.277 168.586C190.277 166.663 188.718 165.104 186.795 165.104H28.3571C22.816 165.104 17.5018 162.903 13.5837 158.985C9.66549 155.067 7.46429 149.752 7.46429 144.211V119.836C7.46429 114.295 9.66549 108.981 13.5837 105.063Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-08.svg
+++ b/storybook/public/dummy/tile-grid/tile-08.svg
@@ -0,0 +1,3 @@
 <svg width="166" height="187" viewBox="0 0 166 187" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M72.2714 0.498464C55.8075 4.65579 40.6134 13.1943 28.404 25.4038C23.4389 30.3689 19.0809 35.8275 15.3777 41.6645C15.2658 41.8138 15.1657 41.9724 15.0786 42.1389C5.7003 57.1159 0.611816 74.5456 0.611816 92.5C0.611816 110.454 5.70032 127.884 15.0787 142.861C15.1657 143.028 15.2658 143.186 15.3776 143.335C19.0808 149.172 23.4389 154.631 28.404 159.596C40.6135 171.806 55.8076 180.344 72.2715 184.502C72.5089 184.589 72.7547 184.65 73.0047 184.684C80.309 186.466 87.857 187.388 95.5002 187.388C103.143 187.388 110.692 186.466 117.996 184.684C118.246 184.65 118.492 184.589 118.729 184.502C135.193 180.344 150.387 171.806 162.596 159.596C167.562 154.631 171.92 149.172 175.623 143.335C175.735 143.186 175.835 143.028 175.922 142.861C185.3 127.884 190.389 110.454 190.389 92.5C190.389 74.5455 185.3 57.1157 175.922 42.1386C175.835 41.9723 175.735 41.8139 175.623 41.6647C171.92 35.8277 167.562 30.3689 162.596 25.4038C150.387 13.1943 135.193 4.65575 118.729 0.49843C118.492 0.411384 118.246 0.350404 117.996 0.316382C110.691 -1.46627 103.143 -2.3884 95.5002 -2.3884C87.8571 -2.3884 80.3091 -1.46627 73.0048 0.316369C72.7548 0.350393 72.5088 0.411388 72.2714 0.498464ZM115.401 6.85739C108.927 5.35289 102.254 4.57589 95.5002 4.57589C88.7466 4.57589 82.0731 5.35289 75.5993 6.8574C70.1984 15.1747 65.591 26.6329 62.2366 40.2679H128.764C125.409 26.6329 120.802 15.1747 115.401 6.85739ZM130.328 47.2321H60.6721C58.1018 59.822 56.5572 73.9684 56.35 89.0179H134.65C134.443 73.9684 132.899 59.822 130.328 47.2321ZM141.615 89.0179C141.416 74.1682 139.946 60.0245 137.431 47.2321H170.876C178.43 59.8106 182.767 74.1686 183.355 89.0179H141.615ZM134.65 95.9821H56.35C56.5572 111.032 58.1018 125.178 60.6721 137.768H130.328C132.899 125.178 134.443 111.032 134.65 95.9821ZM137.431 137.768C139.946 124.976 141.416 110.832 141.615 95.9821H183.355C182.767 110.831 178.43 125.189 170.876 137.768H137.431ZM128.764 144.732H62.2367C65.5911 158.367 70.1984 169.825 75.5993 178.143C82.0732 179.647 88.7466 180.424 95.5002 180.424C102.254 180.424 108.927 179.647 115.401 178.143C120.802 169.825 125.409 158.367 128.764 144.732ZM125.088 175.296C129.485 166.824 133.163 156.449 135.927 144.732H166.229C163.643 148.233 160.787 151.557 157.672 154.672C148.382 163.961 137.228 170.958 125.088 175.296ZM135.927 40.2679C133.163 28.5511 129.485 18.1758 125.088 9.70388C137.228 14.0423 148.382 21.0385 157.672 30.3283C160.787 33.4429 163.643 36.7671 166.229 40.2679H135.927ZM7.64501 89.0179C8.23304 74.1686 12.5707 59.8106 20.1244 47.2321H53.5697C51.0547 60.0245 49.5845 74.1682 49.3852 89.0179H7.64501ZM24.7717 40.2679H55.0732C57.8371 28.5511 61.5156 18.1758 65.912 9.70389C53.7726 14.0423 42.6182 21.0386 33.3285 30.3283C30.2138 33.4429 27.357 36.7671 24.7717 40.2679ZM53.5697 137.768C51.0547 124.976 49.5845 110.832 49.3852 95.9821H7.64501C8.23304 110.831 12.5707 125.189 20.1244 137.768H53.5697ZM24.7717 144.732H55.0732C57.837 156.449 61.5156 166.824 65.912 175.296C53.7726 170.958 42.6182 163.961 33.3285 154.672C30.2138 151.557 27.357 148.233 24.7717 144.732Z" fill="white"/>
 </svg>
--- a/storybook/public/dummy/tile-grid/tile-09.svg
+++ b/storybook/public/dummy/tile-grid/tile-09.svg
@@ -0,0 +1,5 @@
 <svg width="180" height="188" viewBox="0 0 180 188" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M65.0312 -1.55505C62.4916 -1.55505 60.0559 -0.546168 58.2601 1.24966C56.4642 3.04549 55.4554 5.48116 55.4554 8.02084V50.6771C55.4554 53.2168 56.4642 55.6524 58.2601 57.4483C60.0559 59.2441 62.4916 60.253 65.0312 60.253H79.8304V81.1458C79.8304 82.4844 80.5976 83.7045 81.8041 84.2843C83.0105 84.8642 84.4425 84.7011 85.4878 83.8649L115.003 60.253H132.062C134.602 60.253 137.038 59.2441 138.834 57.4483C140.63 55.6524 141.638 53.2168 141.638 50.6771V8.02084C141.638 5.48116 140.63 3.04549 138.834 1.24966C137.038 -0.54617 134.602 -1.55505 132.062 -1.55505H65.0312ZM63.1846 6.17415C63.6743 5.68438 64.3386 5.40923 65.0312 5.40923H132.062C132.755 5.40923 133.419 5.68439 133.909 6.17415C134.399 6.66392 134.674 7.32819 134.674 8.02084V50.6771C134.674 51.3697 134.399 52.034 133.909 52.5238C133.419 53.0135 132.755 53.2887 132.062 53.2887H113.781C112.991 53.2887 112.223 53.5578 111.606 54.0517L86.7946 73.9008V56.7708C86.7946 54.8477 85.2356 53.2887 83.3125 53.2887H65.0312C64.3386 53.2887 63.6743 53.0135 63.1846 52.5238C62.6948 52.034 62.4196 51.3697 62.4196 50.6771V8.02084C62.4196 7.3282 62.6948 6.66393 63.1846 6.17415Z" fill="white"/>
 <path d="M0.709019 35.5919C1.16064 33.7225 3.04216 32.5732 4.91151 33.0248C24.0634 37.6518 35.8657 50.1299 44.856 66.2663C51.1902 77.6354 56.3105 91.1946 61.6641 105.372C63.7965 111.019 65.9663 116.765 68.2643 122.509C68.6935 123.581 68.5626 124.797 67.9148 125.754C67.267 126.711 66.1868 127.284 65.0313 127.284H50.2322V146.43C50.2322 149.518 49.6241 152.575 48.4426 155.427C47.2611 158.28 45.5293 160.871 43.3462 163.055C41.163 165.238 38.5713 166.969 35.7189 168.151C32.8665 169.332 29.8093 169.941 26.7219 169.941H19.7634V184.74C19.7634 186.663 18.2044 188.222 16.2813 188.222C14.3582 188.222 12.7991 186.663 12.7991 184.74V166.458C12.7991 164.535 14.3582 162.976 16.2813 162.976H26.7219C28.8948 162.976 31.0463 162.548 33.0538 161.717C35.0612 160.885 36.8853 159.666 38.4217 158.13C39.9581 156.594 41.1769 154.77 42.0084 152.762C42.8399 150.755 43.2679 148.603 43.2679 146.43V123.802C43.2679 121.879 44.8269 120.32 46.75 120.32H59.9129C58.186 115.892 56.5458 111.548 54.9456 107.309C49.6767 93.3552 44.8414 80.5492 38.7722 69.6558C30.3344 54.5109 19.8742 43.8043 3.27606 39.7944C1.4067 39.3428 0.2574 37.4612 0.709019 35.5919Z" fill="white"/>
 <path d="M190.291 35.5919C190.743 37.4612 189.593 39.3428 187.724 39.7944C171.126 43.8044 160.664 54.5111 152.225 69.6559C146.15 80.5575 141.312 93.3751 136.04 107.342C134.444 111.57 132.808 115.903 131.086 120.32H144.25C146.173 120.32 147.732 121.879 147.732 123.802V146.43C147.732 150.817 149.474 155.025 152.576 158.128C155.677 161.23 159.883 162.974 164.27 162.976H174.719C176.642 162.976 178.201 164.535 178.201 166.458V184.74C178.201 186.663 176.642 188.222 174.719 188.222C172.796 188.222 171.237 186.663 171.237 184.74V169.941H164.27C158.036 169.938 152.057 167.46 147.65 163.051C143.244 158.642 140.768 152.664 140.768 146.43V127.284H125.969C124.813 127.284 123.733 126.711 123.085 125.754C122.438 124.798 122.307 123.582 122.736 122.509C125.028 116.777 127.192 111.044 129.319 105.409L129.321 105.404C134.678 91.2155 139.801 77.644 146.141 66.2661C155.132 50.1296 166.937 37.6517 186.089 33.0248C187.958 32.5732 189.839 33.7225 190.291 35.5919Z" fill="white"/>
 </svg>