<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">
  <card>
    <title>General</title>
    <title lang="de-DE">Allgemein</title>
    <input-field type="bool">
      <name>c108isebool</name>
      <label>Show button</label>
      <label lang="de-DE">Button anzeigen</label>
      <defaultValue>true</defaultValue>
    </input-field>
    <input-field type="single-select">
      <name>c108isebuttonposition</name>
      <label>Position</label>
      <label lang="de-DE">Position</label>
      <defaultValue>c108-ise-top-left</defaultValue>
      <helpText>Set the position of the side element on the website.</helpText>
      <helpText lang="de-DE">Position des Seitenelements auf der Website festlegen.</helpText>
      <options>
        <option>
          <id>c108-ise-top-left</id>
          <name>Top left</name>
          <name lang="de-DE">Oben links</name>
        </option>
        <option>
          <id>c108-ise-bottom-left</id>
          <name>Bottom left</name>
          <name lang="de-DE">Unten links</name>
        </option>
        <option>
          <id>c108-ise-top-right</id>
          <name>Top right</name>
          <name lang="de-DE">Oben rechts</name>
        </option>
        <option>
          <id>c108-ise-bottom-right</id>
          <name>Bottom right</name>
          <name lang="de-DE">Unten rechts</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isebuttonfunction</name>
      <label>Function</label>
      <label lang="de-DE">Funktion</label>
      <defaultValue>simplelink</defaultValue>
      <helpText>Choose the function of the element.</helpText>
      <helpText lang="de-DE">Funktion des Elements setzen.</helpText>
      <options>
        <option>
          <id>simplelink</id>
          <name>Simple link</name>
          <name lang="de-DE">Einfache Verlinkung</name>
        </option>
        <option>
          <id>offcanvascontent</id>
          <name>Content off-canvas</name>
          <name lang="de-DE">Inhalt Off-Canvas</name>
        </option>
        <option>
          <id>modalcontent</id>
          <name>Content modal</name>
          <name lang="de-DE">Inhalt Modal</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isebuttontype</name>
      <label>Type</label>
      <label lang="de-DE">Typ</label>
      <defaultValue>icon</defaultValue>
      <helpText>Choose the button type.</helpText>
      <helpText lang="de-DE">Wählen Sie den Buttontyp aus.</helpText>
      <options>
        <option>
          <id>icon</id>
          <name>Shopware icon</name>
          <name lang="de-DE">Shopware Icon</name>
        </option>
        <option>
          <id>image</id>
          <name>Own image</name>
          <name lang="de-DE">Eigenes Bild</name>
        </option>
        <option>
          <id>text</id>
          <name>Text</name>
          <name lang="de-DE">Text</name>
        </option>
      </options>
    </input-field>
    <input-field type="bool">
      <name>c108isehidecheckoutbool</name>
      <label>Hide button in checkout process</label>
      <label lang="de-DE">Button im Checkout ausblenden</label>
      <defaultValue>false</defaultValue>
    </input-field>
  </card>
  <card>
    <title>Button 1</title>
    <title lang="de-DE">Button 1</title>
    <input-field type="single-select">
      <name>c108isebuttonicon</name>
      <label>Icon</label>
      <label lang="de-DE">Icon</label>
      <defaultValue>lightbulb</defaultValue>
      <helpText>The icon (Shopware icons) on the button can be set here. In order for the icon to appear on the button, the "Type" must be set to "Icon".</helpText>
      <helpText lang="de-DE">Hier kann das Icon (Shopware Icons) auf dem Button gesetzt werden. Damit das Icon auf dem Button erscheint, muss die Einstellung „Typ“ auf „Icon“ gesetzt werden.</helpText>
      <options>
        <option>
            <id>eye-open</id>
            <name>Eye</name>
            <name lang="de-DE">Auge</name>
        </option>
        <option>
            <id>image</id>
            <name>Image</name>
            <name lang="de-DE">Bild</name>
        </option>
        <option>
            <id>envelope</id>
            <name>Envelope</name>
            <name lang="de-DE">Brief</name>
        </option>
        <option>
            <id>books</id>
            <name>Books</name>
            <name lang="de-DE">Bücher</name>
        </option>
        <option>
            <id>paperclip</id>
            <name>Paperclip</name>
            <name lang="de-DE">Büroklammer</name>
        </option>
        <option>
            <id>code</id>
            <name>Code</name>
            <name lang="de-DE">Code</name>
        </option>
        <option>
            <id>dashboard</id>
            <name>Dashboard</name>
            <name lang="de-DE">Dashboard</name>
        </option>
        <option>
            <id>desktop</id>
            <name>Desktop</name>
            <name lang="de-DE">Desktop</name>
        </option>
        <option>
            <id>document-view</id>
            <name>Document</name>
            <name lang="de-DE">Dokument</name>
        </option>
        <option>
            <id>settings</id>
            <name>Settings</name>
            <name lang="de-DE">Einstellungen</name>
        </option>
        <option>
            <id>euro</id>
            <name>Euro</name>
            <name lang="de-DE">Euro</name>
        </option>
        <option>
            <id>filter</id>
            <name>Filter</name>
            <name lang="de-DE">Filter</name>
        </option>
        <option>
            <id>flag</id>
            <name>Flag</name>
            <name lang="de-DE">Flagge</name>
        </option>
        <option>
            <id>photocamera</id>
            <name>Photocamera</name>
            <name lang="de-DE">Fotoaparat</name>
        </option>
        <option>
            <id>package-gift</id>
            <name>Present</name>
            <name lang="de-DE">Geschenk</name>
        </option>
        <option>
            <id>bell-bell</id>
            <name>Bell</name>
            <name lang="de-DE">Glocke</name>
        </option>
        <option>
            <id>globe</id>
            <name>Globe</name>
            <name lang="de-DE">Globus</name>
        </option>
        <option>
            <id>lightbulb</id>
            <name>Lightbulb</name>
            <name lang="de-DE">Glühbirne</name>
        </option>
        <option>
            <id>gps</id>
            <name>GPS</name>
            <name lang="de-DE">GPS</name>
        </option>
        <option>
            <id>checkmark</id>
            <name>Checkmark</name>
            <name lang="de-DE">Häkchen</name>
        </option>
        <option>
            <id>home</id>
            <name>House</name>
            <name lang="de-DE">Haus</name>
        </option>
        <option>
            <id>headset</id>
            <name>Headset</name>
            <name lang="de-DE">Headset</name>
        </option>
        <option>
            <id>heart</id>
            <name>Heart</name>
            <name lang="de-DE">Herz</name>
        </option>
        <option>
            <id>content</id>
            <name>Content</name>
            <name lang="de-DE">Inhalt</name>
        </option>
        <option>
            <id>calendar</id>
            <name>Calendar</name>
            <name lang="de-DE">Kalender</name>
        </option>
        <option>
            <id>keyboard</id>
            <name>Keyboard</name>
            <name lang="de-DE">Keyboard</name>
        </option>
        <option>
            <id>chart-pie</id>
            <name>Chart pie</name>
            <name lang="de-DE">Kuchendiagramm</name>
        </option>
        <option>
            <id>layout</id>
            <name>Layout</name>
            <name lang="de-DE">Layout</name>
        </option>
        <option>
            <id>traffic-pawn</id>
            <name>Traffic pawn</name>
            <name lang="de-DE">Leitkegel</name>
        </option>
        <option>
            <id>bookmark</id>
            <name>Bookmark</name>
            <name lang="de-DE">Lesezeichen</name>
        </option>
        <option>
            <id>link</id>
            <name>Link</name>
            <name lang="de-DE">Link</name>
        </option>
        <option>
            <id>marker</id>
            <name>Marker</name>
            <name lang="de-DE">Marker</name>
        </option>
        <option>
            <id>paper-pencil</id>
            <name>Note</name>
            <name lang="de-DE">Notiz</name>
        </option>
        <option>
            <id>map-closed</id>
            <name>Folder</name>
            <name lang="de-DE">Ordner</name>
        </option>
        <option>
            <id>arrow-move-vertical-axis</id>
            <name>Arrow 1</name>
            <name lang="de-DE">Pfeil 1</name>
        </option>
        <option>
            <id>arrow-scroll</id>
            <name>Arrow 2</name>
            <name lang="de-DE">Pfeil 2</name>
        </option>
        <option>
            <id>arrow-switch</id>
            <name>Arrow 3</name>
            <name lang="de-DE">Pfeil 3</name>
        </option>
        <option>
            <id>arrow-head-left</id>
            <name>Arrow left</name>
            <name lang="de-DE">Pfeil links</name>
        </option>
        <option>
            <id>arrow-head-right</id>
            <name>Arrow right</name>
            <name lang="de-DE">Pfeil rechts</name>
        </option>
        <option>
            <id>plus</id>
            <name>Plus</name>
            <name lang="de-DE">Plus</name>
        </option>
        <option>
            <id>pulse</id>
            <name>Pulse</name>
            <name lang="de-DE">Puls</name>
        </option>
        <option>
            <id>puzzle-piece</id>
            <name>Puzzle</name>
            <name lang="de-DE">Puzzle</name>
        </option>
        <option>
            <id>rocket</id>
            <name>Rocket</name>
            <name lang="de-DE">Rakete</name>
        </option>
        <option>
            <id>pushpin</id>
            <name>Pushpin</name>
            <name lang="de-DE">Reißzwecke</name>
        </option>
        <option>
            <id>layers</id>
            <name>Layers</name>
            <name lang="de-DE">Schichten</name>
        </option>
        <option>
            <id>sliders</id>
            <name>Sliders</name>
            <name lang="de-DE">Schieberegler</name>
        </option>
        <option>
            <id>shield</id>
            <name>Shield</name>
            <name lang="de-DE">Schield</name>
        </option>
        <option>
            <id>sun</id>
            <name>Sun</name>
            <name lang="de-DE">Sonne</name>
        </option>
        <option>
            <id>star</id>
            <name>Star</name>
            <name lang="de-DE">Stern</name>
        </option>
        <option>
            <id>share</id>
            <name>Share</name>
            <name lang="de-DE">Teilen</name>
        </option>
        <option>
            <id>trophy</id>
            <name>Trophy</name>
            <name lang="de-DE">Trophäe</name>
        </option>
         <option>
            <id>screen-full</id>
            <name>Full screen</name>
            <name lang="de-DE">Vollbild</name>
        </option>
        <option>
            <id>warning</id>
            <name>Warning</name>
            <name lang="de-DE">Warnung</name>
        </option>
        <option>
            <id>tools</id>
            <name>Tools</name>
            <name lang="de-DE">Werkzeug</name>
        </option>
        <option>
            <id>target-big</id>
            <name>Target</name>
            <name lang="de-DE">Ziel</name>
        </option>
      </options>
    </input-field>
    <input-field type="text">
      <name>c108isebuttontext</name>
      <label>Text</label>
      <label lang="de-DE">Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>The text on the button can be set here. In order for the text to appear on the button, the "Type" must be set to "Text". The maximum number of characters is 30.</helpText>
      <helpText lang="de-DE">Hier kann der Text auf dem Button gesetzt werden. Damit der Text auf dem Button erscheint, muss die Option „Typ“ auf „Text“ gesetzt werden. Die maximale Anzahl an Zeichen ist 30.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isebuttonimg</name>
      <label>Image URL</label>
      <label lang="de-DE">Bild URL</label>
      <helpText>The URL for the image if the "Type" of the element is set to "Own image". Make sure the image you select is quadratic. The width and height of the image should not exceed 120 pixels.</helpText>
      <helpText lang="de-DE">Die URL für das Bild, wenn der „Typ“ des Elements auf „Eigenes Bild“ gesetzt ist. Achten Sie darauf, dass das ausgewählte Bild quadratisch ist. Die Breite und Höhe des Bildes sollte nicht größer als 120 Pixel sein.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isebuttonimgalt</name>
      <label>Image alt-text</label>
      <label lang="de-DE">Bild Alt-Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the alt-text for the image.</helpText>
      <helpText lang="de-DE">Alt-Text für das Bild.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isetitleattribute</name>
      <label>Title-attribute</label>
      <label lang="de-DE">Titel-Attribut</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the title-attribute for the button.</helpText>
      <helpText lang="de-DE">Title-Attribut für den Button.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isebuttonurl</name>
      <label>URL</label>
      <label lang="de-DE">URL</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link".</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist.</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isebuttonurlbooladvanced</name>
      <label>Use advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld verwenden</label>
      <defaultValue>false</defaultValue>
    </input-field>
    <input-field type="text">
      <name>c108isebuttonurladvanced</name>
      <label>Advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link" (Advanced URL).</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist (Advanced URL).</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isebuttonurlsamewindow</name>
      <label>Open link in the same window</label>
      <label lang="de-DE">Link im selben Fenster öffnen</label>
      <defaultValue>false</defaultValue>
    </input-field>
  </card>
  <card>
    <title>Design</title>
    <title lang="de-DE">Design</title>
    <input-field type="single-select">
      <name>c108isebuttonsize</name>
      <label>Size</label>
      <label lang="de-DE">Größe</label>
      <defaultValue>c108-ise-medium</defaultValue>
      <helpText>Set the size of the button.</helpText>
      <helpText lang="de-DE">Größe des Buttons auswählen.</helpText>
      <options>
        <option>
          <id>c108-ise-small</id>
          <name>Small</name>
          <name lang="de-DE">Klein</name>
        </option>
        <option>
          <id>c108-ise-default</id>
          <name>Default</name>
          <name lang="de-DE">Default</name>
        </option>
        <option>
          <id>c108-ise-medium</id>
          <name>Medium</name>
          <name lang="de-DE">Medium</name>
        </option>
        <option>
          <id>c108-ise-large</id>
          <name>Large</name>
          <name lang="de-DE">Groß</name>
        </option>
        <option>
          <id>c108-ise-extralarge</id>
          <name>Extra large</name>
          <name lang="de-DE">Extra groß</name>
        </option>
      </options>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isebuttonbackgroundcolor</name>
      <label>Background color</label>
      <label lang="de-DE">Hintergrundfarbe</label>
      <defaultValue>#188bff</defaultValue>
      <helpText>The color for the button background can be set here. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Die Hintergrundfarbe für den Button setzen. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isebuttonprimarycolor</name>
      <label>Primary color</label>
      <label lang="de-DE">Primärfarbe</label>
      <defaultValue>#ffffff</defaultValue>
      <helpText>The primary color used for the icon and or the text on the button. In order for the icon or for the text to appear on the button, the "Type" must be set to "Icon" or "Text". In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Die Hauptfarbe für das Icon oder für den Text auf dem Button gesetzt werden. Damit das Icon oder der Text auf dem Button erscheinen, muss die Option „Typ“ auf „Icon“ oder auf „Text“ gesetzt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isebuttonsecondarycolor</name>
      <label>Secondary color</label>
      <label lang="de-DE">Sekundärfarbe</label>
      <defaultValue>#f5f5f5</defaultValue>
      <helpText>The secondary color (hover) used for the icon and or the text on the button. In order for the icon or for the text to appear on the button, the "Type" must be set to "Icon" or "Text". In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die Sekundärfarbe (Hover) für das Icon oder für den Text auf dem Button gesetzt werden. Damit das Icon oder der Text auf dem Button erscheinen, muss die Option „Typ“ auf „Icon“ oder auf „Text“ gesetzt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <input-field type="single-select">
      <name>c108isebuttonborderradius</name>
      <label>Border radius</label>
      <label lang="de-DE">Radius Umrandung</label>
      <defaultValue>1px</defaultValue>
      <helpText>Select the width of the border. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann der Radius für die Umrandung ausgewählt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
      <options>
        <option>
          <id>0</id>
          <name>No Radius</name>
          <name lang="de-DE">Kein Radius</name>
        </option>
        <option>
          <id>1px</id>
          <name>1 pixel</name>
          <name lang="de-DE">1 Pixel</name>
        </option>
        <option>
          <id>3px</id>
          <name>3 pixels</name>
          <name lang="de-DE">3 Pixel</name>
        </option>
        <option>
          <id>5px</id>
          <name>5 pixels</name>
          <name lang="de-DE">5 Pixel</name>
        </option>
        <option>
          <id>10px</id>
          <name>10 pixels</name>
          <name lang="de-DE">10 Pixel</name>
        </option>
        <option>
          <id>20px</id>
          <name>20 pixels</name>
          <name lang="de-DE">20 Pixel</name>
        </option>
        <option>
          <id>50%</id>
          <name>Circle</name>
          <name lang="de-DE">Kreis</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isebuttonborderwidth</name>
      <label>Border width</label>
      <label lang="de-DE">Breite der Umrandung</label>
      <defaultValue>1px</defaultValue>
      <helpText>Select the width of the border. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Breite für die Umrandung ausgewählt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
      <options>
        <option>
          <id>0</id>
          <name>No Border</name>
          <name lang="de-DE">Keine Umrandung</name>
        </option>
        <option>
          <id>1px</id>
          <name>1 pixels</name>
          <name lang="de-DE">1 Pixel</name>
        </option>
        <option>
          <id>2px</id>
          <name>2 pixels</name>
          <name lang="de-DE">2 Pixel</name>
        </option>
        <option>
          <id>3px</id>
          <name>3 pixels</name>
          <name lang="de-DE">3 Pixel</name>
        </option>
        <option>
          <id>4px</id>
          <name>4 pixels</name>
          <name lang="de-DE">4 Pixel</name>
        </option>
      </options>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isebuttonbordercolor</name>
      <label>Border color</label>
      <label lang="de-DE">Farbe Umrandung</label>
      <defaultValue>#188bff</defaultValue>
      <helpText>Select the color for the border of the button. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Farbe für die Umrandung des Buttons ausgewählt werden.</helpText>
    </input-field>
    <input-field type="single-select">
      <name>c108iseanimationspeed</name>
      <label>Animation speed</label>
      <label lang="de-DE">Animationsgeschwindigkeit</label>
      <defaultValue>1.0s</defaultValue>
      <helpText>Set the speed for the animation for displaying the content, when the "Function" is set to "Off-Canvas" or to "Modal". In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Setzen Sie die Animationsgeschwindigkeit für die Anzeige des Inhalts, wenn die „Funktion“ auf „Off-Canvas“ oder auf „Modal“ gesetzt ist.</helpText>
      <options>
       <option>
          <id>.3s</id>
          <name>Very fast</name>
          <name lang="de-DE">Sehr schnell</name>
        </option>
        <option>
          <id>.5s</id>
          <name>Fast</name>
          <name lang="de-DE">Schnell</name>
        </option>
        <option>
          <id>1.0s</id>
          <name>Default</name>
          <name lang="de-DE">Default</name>
        </option>
        <option>
          <id>1.5s</id>
          <name>Slow</name>
          <name lang="de-DE">Langsam</name>
        </option>
        <option>
          <id>2.0s</id>
          <name>Very slow</name>
          <name lang="de-DE">Sehr langsam</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isetimingfunction</name>
      <label>Animation timing function</label>
      <label lang="de-DE">Timingfunktion</label>
      <defaultValue>ease-in-out</defaultValue>
      <helpText>Set the timing function for the animation for displaying the content when the "Function" is set to "Off-Canvas" or to "Modal". In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Setzen Sie die Timingfunktion für die Anzeige des Inhalts, wenn die „Funktion“ auf „Off-Canvas“ oder auf „Modal“ gesetzt ist. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
      <options>
        <option>
          <id>linear</id>
          <name>Linear</name>
          <name lang="de-DE">Linear</name>
        </option>
        <option>
          <id>ease</id>
          <name>Ease</name>
          <name lang="de-DE">Ease</name>
        </option>
        <option>
          <id>ease-in</id>
          <name>Ease-in</name>
          <name lang="de-DE">Ease-in</name>
        </option>
        <option>
          <id>ease-out</id>
          <name>Ease-out</name>
          <name lang="de-DE">Ease-out</name>
        </option>
        <option>
          <id>ease-in-out</id>
          <name>Ease-in-out</name>
          <name lang="de-DE">Ease-in-out</name>
        </option>
      </options>
    </input-field>
  </card>
  <card>
    <title>Modal</title>
    <title lang="de-DE">Modal</title>
    <input-field type="colorpicker">
      <name>c108iseclosebuttoncolor</name>
      <label>Color close button</label>
      <label lang="de-DE">Farbe Schließen-Button</label>
      <defaultValue>#000000</defaultValue>
      <helpText>Select the color for the close button. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Farbe für den Schließen-Button gesetzt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <input-field type="colorpicker">
      <name>c108iseclosebuttonhovercolor</name>
      <label>Color close button hover</label>
      <label lang="de-DE">Farbe Schließen-Button Hover</label>
      <defaultValue>#555555</defaultValue>
      <helpText>Select the color for the close button on hover. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Farbe für den Schließen-Button beim Hovern gesetzt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
  </card>
  <card>
    <title>Off-Canvas</title>
    <title lang="de-DE">Off-Canvas</title>
    <input-field type="single-select">
      <name>c108isebuttonalignment</name>
      <label>Position button</label>
      <label lang="de-DE">Position Button</label>
      <defaultValue>c108-ise-align-start</defaultValue>
      <helpText>Select where the button should be position relative to the off-canvas element.</helpText>
      <helpText lang="de-DE">Setzen Sie die Position des Buttons relativ zu dem Off-Canvas-Element.</helpText>
      <options>
        <option>
          <id>c108-ise-align-start</id>
          <name>Top</name>
          <name lang="de-DE">Oben</name>
        </option>
        <option>
          <id>c108-ise-align-center</id>
          <name>Center</name>
          <name lang="de-DE">Mittig</name>
        </option>
        <option>
          <id>c108-ise-align-end</id>
          <name>Bottom</name>
          <name lang="de-DE">Unten</name>
        </option>
      </options>
    </input-field>
  </card>
  <card>
    <title>Content</title>
    <title lang="de-DE">Inhalt</title>
    <input-field type="single-select">
      <name>c108isecontentsize</name>
      <label>Size content</label>
      <label lang="de-DE">Größe Inhalt</label>
      <defaultValue>300px</defaultValue>
      <helpText>Set the size for the off-canvas or for the modal element. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Größe für das Off-Canvas- oder Modal-Element auswählen. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
      <options>
        <option>
          <id>200px</id>
          <name>Small</name>
          <name lang="de-DE">Klein</name>
        </option>
        <option>
          <id>300px</id>
          <name>Normal</name>
          <name lang="de-DE">Normal</name>
        </option>
        <option>
          <id>400px</id>
          <name>Big</name>
          <name lang="de-DE">Groß</name>
        </option>
      </options>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isecontentbackgroundcolor</name>
      <label>Background color</label>
      <label lang="de-DE">Hintergrundfarbe</label>
      <defaultValue>#f5f5f5</defaultValue>
      <helpText>Select the color for the background. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Farbe für den Hintergrund ausgewählt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <input-field type="colorpicker">
      <name>c108isecontentcolor</name>
      <label>Color</label>
      <label lang="de-DE">Farbe</label>
      <defaultValue>#000000</defaultValue>
      <helpText>Select the color for the content. In order for this change to be visible in the storefront, the theme should be compiled and the cache cleared.</helpText>
      <helpText lang="de-DE">Hier kann die gewünschte Farbe für den Inhalt ausgewählt werden. Damit diese Änderung im Storefront sichtbar wird, sollte das Theme kompiliert werden und der Cache geleert werden.</helpText>
    </input-field>
    <component name="sw-text-editor">
      <name>c108isecotenttext</name>
      <helpText>Set the content for the element.</helpText>
      <helpText lang="de-DE">Hier kann der Inhalt gesetzt werden.</helpText>
      <defaultValue>Lorem ipsum dolor.</defaultValue>
    </component>
  </card>
  <card>
    <title>Translations</title>
    <title lang="de-DE">Übersetzungen</title>
    <input-field type="bool">
			<name>c108isecontentbool</name>
			<label>Use translations for the content</label>
			<label lang="de-DE">Übersetzungen für den Inhalt verwenden</label>
			<defaultValue>false</defaultValue>
		</input-field>
     <input-field type="bool">
			<name>c108isecontentallowhtmlbool</name>
			<label>Allow usage of HTML</label>
			<label lang="de-DE">Verwendung von HTML erlauben</label>
			<defaultValue>false</defaultValue>
		</input-field>
    <component name="sw-snippet-field">
			<name>c108isecontenttranslatedtext</name>
			<label>Content</label>
			<label lang="de-DE">Inhalt</label>
			<snippet>C108InteractiveSideElement.translated.content</snippet>
			<helpText>This text-element is translatable. Click on the globe icon to create the texts for the different languages.</helpText>
			<helpText lang="de-DE">Dieses Text-Element ist übersetzbar. Klicken Sie auf das Weltkugel-Icon, um die Texte für die verschiedenen Sprachen zu erstellen.</helpText>
		</component>
  </card>
  <card>
    <title>Button 2</title>
    <title lang="de-DE">Button 2</title>
    <input-field type="bool">
			<name>c108isesecondelementbool</name>
			<label>Activate a second button (Works only with direct links)</label>
      <label lang="de-DE">Ein zweiter Button aktivieren (Funktioniert nur mit direkten Links)</label>
			<defaultValue>false</defaultValue>
		</input-field>
    <input-field type="single-select">
      <name>c108isesecondelementmargintop</name>
      <label>Distance to the first button</label>
      <label lang="de-DE">Abstand zum ersten Button</label>
      <defaultValue>5px</defaultValue>
      <options>
       <option>
          <id>0</id>
          <name>0</name>
          <name lang="de-DE">0</name>
        </option>
        <option>
          <id>1px</id>
          <name>1px</name>
          <name lang="de-DE">1px</name>
        </option>
        <option>
          <id>2px</id>
          <name>2px</name>
          <name lang="de-DE">2px</name>
        </option>
        <option>
          <id>3px</id>
          <name>3px</name>
          <name lang="de-DE">3px</name>
        </option>
        <option>
          <id>4px</id>
          <name>4px</name>
          <name lang="de-DE">4px</name>
        </option>
        <option>
          <id>5px</id>
          <name>5px</name>
          <name lang="de-DE">5px</name>
        </option>
        <option>
          <id>10px</id>
          <name>10px</name>
          <name lang="de-DE">10px</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isesecondbuttonicon</name>
      <label>Icon</label>
      <label lang="de-DE">Icon</label>
      <defaultValue>lightbulb</defaultValue>
      <helpText>The icon (Shopware icons) on the button can be set here. In order for the icon to appear on the button, the "Type" must be set to "Icon".</helpText>
      <helpText lang="de-DE">Hier kann das Icon (Shopware Icons) auf dem Button gesetzt werden. Damit das Icon auf dem Button erscheint, muss die Einstellung „Typ“ auf „Icon“ gesetzt werden.</helpText>
      <options>
        <option>
            <id>eye-open</id>
            <name>Eye</name>
            <name lang="de-DE">Auge</name>
        </option>
        <option>
            <id>image</id>
            <name>Image</name>
            <name lang="de-DE">Bild</name>
        </option>
        <option>
            <id>envelope</id>
            <name>Envelope</name>
            <name lang="de-DE">Brief</name>
        </option>
        <option>
            <id>books</id>
            <name>Books</name>
            <name lang="de-DE">Bücher</name>
        </option>
        <option>
            <id>paperclip</id>
            <name>Paperclip</name>
            <name lang="de-DE">Büroklammer</name>
        </option>
        <option>
            <id>code</id>
            <name>Code</name>
            <name lang="de-DE">Code</name>
        </option>
        <option>
            <id>dashboard</id>
            <name>Dashboard</name>
            <name lang="de-DE">Dashboard</name>
        </option>
        <option>
            <id>desktop</id>
            <name>Desktop</name>
            <name lang="de-DE">Desktop</name>
        </option>
        <option>
            <id>document-view</id>
            <name>Document</name>
            <name lang="de-DE">Dokument</name>
        </option>
        <option>
            <id>settings</id>
            <name>Settings</name>
            <name lang="de-DE">Einstellungen</name>
        </option>
        <option>
            <id>euro</id>
            <name>Euro</name>
            <name lang="de-DE">Euro</name>
        </option>
        <option>
            <id>filter</id>
            <name>Filter</name>
            <name lang="de-DE">Filter</name>
        </option>
        <option>
            <id>flag</id>
            <name>Flag</name>
            <name lang="de-DE">Flagge</name>
        </option>
        <option>
            <id>photocamera</id>
            <name>Photocamera</name>
            <name lang="de-DE">Fotoaparat</name>
        </option>
        <option>
            <id>package-gift</id>
            <name>Present</name>
            <name lang="de-DE">Geschenk</name>
        </option>
        <option>
            <id>bell-bell</id>
            <name>Bell</name>
            <name lang="de-DE">Glocke</name>
        </option>
        <option>
            <id>globe</id>
            <name>Globe</name>
            <name lang="de-DE">Globus</name>
        </option>
        <option>
            <id>lightbulb</id>
            <name>Lightbulb</name>
            <name lang="de-DE">Glühbirne</name>
        </option>
        <option>
            <id>gps</id>
            <name>GPS</name>
            <name lang="de-DE">GPS</name>
        </option>
        <option>
            <id>checkmark</id>
            <name>Checkmark</name>
            <name lang="de-DE">Häkchen</name>
        </option>
        <option>
            <id>home</id>
            <name>House</name>
            <name lang="de-DE">Haus</name>
        </option>
        <option>
            <id>headset</id>
            <name>Headset</name>
            <name lang="de-DE">Headset</name>
        </option>
        <option>
            <id>heart</id>
            <name>Heart</name>
            <name lang="de-DE">Herz</name>
        </option>
        <option>
            <id>content</id>
            <name>Content</name>
            <name lang="de-DE">Inhalt</name>
        </option>
        <option>
            <id>calendar</id>
            <name>Calendar</name>
            <name lang="de-DE">Kalender</name>
        </option>
        <option>
            <id>keyboard</id>
            <name>Keyboard</name>
            <name lang="de-DE">Keyboard</name>
        </option>
        <option>
            <id>chart-pie</id>
            <name>Chart pie</name>
            <name lang="de-DE">Kuchendiagramm</name>
        </option>
        <option>
            <id>layout</id>
            <name>Layout</name>
            <name lang="de-DE">Layout</name>
        </option>
        <option>
            <id>traffic-pawn</id>
            <name>Traffic pawn</name>
            <name lang="de-DE">Leitkegel</name>
        </option>
        <option>
            <id>bookmark</id>
            <name>Bookmark</name>
            <name lang="de-DE">Lesezeichen</name>
        </option>
        <option>
            <id>link</id>
            <name>Link</name>
            <name lang="de-DE">Link</name>
        </option>
        <option>
            <id>marker</id>
            <name>Marker</name>
            <name lang="de-DE">Marker</name>
        </option>
        <option>
            <id>paper-pencil</id>
            <name>Note</name>
            <name lang="de-DE">Notiz</name>
        </option>
        <option>
            <id>map-closed</id>
            <name>Folder</name>
            <name lang="de-DE">Ordner</name>
        </option>
        <option>
            <id>arrow-move-vertical-axis</id>
            <name>Arrow 1</name>
            <name lang="de-DE">Pfeil 1</name>
        </option>
        <option>
            <id>arrow-scroll</id>
            <name>Arrow 2</name>
            <name lang="de-DE">Pfeil 2</name>
        </option>
        <option>
            <id>arrow-switch</id>
            <name>Arrow 3</name>
            <name lang="de-DE">Pfeil 3</name>
        </option>
        <option>
            <id>arrow-head-left</id>
            <name>Arrow left</name>
            <name lang="de-DE">Pfeil links</name>
        </option>
        <option>
            <id>arrow-head-right</id>
            <name>Arrow right</name>
            <name lang="de-DE">Pfeil rechts</name>
        </option>
        <option>
            <id>plus</id>
            <name>Plus</name>
            <name lang="de-DE">Plus</name>
        </option>
        <option>
            <id>pulse</id>
            <name>Pulse</name>
            <name lang="de-DE">Puls</name>
        </option>
        <option>
            <id>puzzle-piece</id>
            <name>Puzzle</name>
            <name lang="de-DE">Puzzle</name>
        </option>
        <option>
            <id>rocket</id>
            <name>Rocket</name>
            <name lang="de-DE">Rakete</name>
        </option>
        <option>
            <id>pushpin</id>
            <name>Pushpin</name>
            <name lang="de-DE">Reißzwecke</name>
        </option>
        <option>
            <id>layers</id>
            <name>Layers</name>
            <name lang="de-DE">Schichten</name>
        </option>
        <option>
            <id>sliders</id>
            <name>Sliders</name>
            <name lang="de-DE">Schieberegler</name>
        </option>
        <option>
            <id>shield</id>
            <name>Shield</name>
            <name lang="de-DE">Schield</name>
        </option>
        <option>
            <id>sun</id>
            <name>Sun</name>
            <name lang="de-DE">Sonne</name>
        </option>
        <option>
            <id>star</id>
            <name>Star</name>
            <name lang="de-DE">Stern</name>
        </option>
        <option>
            <id>share</id>
            <name>Share</name>
            <name lang="de-DE">Teilen</name>
        </option>
        <option>
            <id>trophy</id>
            <name>Trophy</name>
            <name lang="de-DE">Trophäe</name>
        </option>
         <option>
            <id>screen-full</id>
            <name>Full screen</name>
            <name lang="de-DE">Vollbild</name>
        </option>
        <option>
            <id>warning</id>
            <name>Warning</name>
            <name lang="de-DE">Warnung</name>
        </option>
        <option>
            <id>tools</id>
            <name>Tools</name>
            <name lang="de-DE">Werkzeug</name>
        </option>
        <option>
            <id>target-big</id>
            <name>Target</name>
            <name lang="de-DE">Ziel</name>
        </option>
      </options>
    </input-field>
    <input-field type="text">
      <name>c108isesecondbuttontext</name>
      <label>Text</label>
      <label lang="de-DE">Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>The text on the button can be set here. In order for the text to appear on the button, the "Type" must be set to "Text". The maximum number of characters is 30.</helpText>
      <helpText lang="de-DE">Hier kann der Text auf dem Button gesetzt werden. Damit der Text auf dem Button erscheint, muss die Option „Typ“ auf „Text“ gesetzt werden. Die maximale Anzahl an Zeichen ist 30.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isesecondbuttonimg</name>
      <label>Image URL</label>
      <label lang="de-DE">Bild URL</label>
      <helpText>The URL for the image if the "Type" of the element is set to "Own image". Make sure the image you select is quadratic. The width and height of the image should not exceed 120 pixels.</helpText>
      <helpText lang="de-DE">Die URL für das Bild, wenn der „Typ“ des Elements auf „Eigenes Bild“ gesetzt ist. Achten Sie darauf, dass das ausgewählte Bild quadratisch ist. Die Breite und Höhe des Bildes sollte nicht größer als 120 Pixel sein.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isesecondbuttonimgalt</name>
      <label>Image alt-text</label>
      <label lang="de-DE">Bild Alt-Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the alt-text for the image.</helpText>
      <helpText lang="de-DE">Alt-Text für das Bild.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isesecondtitleattribute</name>
      <label>Title-attribute</label>
      <label lang="de-DE">Titel-Attribut</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the title-attribute for the button.</helpText>
      <helpText lang="de-DE">Title-Attribut für den Button.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isesecondbuttonurl</name>
      <label>URL</label>
      <label lang="de-DE">URL</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link".</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist.</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isesecondbuttonurlbooladvanced</name>
      <label>Use advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld verwenden</label>
      <defaultValue>false</defaultValue>
    </input-field>
    <input-field type="text">
      <name>c108isesecondbuttonurladvanced</name>
      <label>Advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link" (Advanced URL).</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist (Advanced URL).</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isesecondbuttonurlsamewindow</name>
      <label>Open link in the same window</label>
      <label lang="de-DE">Link im selben Fenster öffnen</label>
      <defaultValue>false</defaultValue>
    </input-field>
  </card>
  <card>
    <title>Button 3</title>
    <title lang="de-DE">Button 3</title>
    <input-field type="bool">
			<name>c108isethirdelementbool</name>
			<label>Activate a third button (Works only with direct links)</label>
      <label lang="de-DE">Ein weiterer Button aktivieren (Funktioniert nur mit direkten Links)</label>
			<defaultValue>false</defaultValue>
		</input-field>
    <input-field type="single-select">
      <name>c108isethirdelementmargintop</name>
      <label>Distance to the second button</label>
      <label lang="de-DE">Abstand zum zweiten Button</label>
      <defaultValue>5px</defaultValue>
      <options>
       <option>
          <id>0</id>
          <name>0</name>
          <name lang="de-DE">0</name>
        </option>
        <option>
          <id>1px</id>
          <name>1px</name>
          <name lang="de-DE">1px</name>
        </option>
        <option>
          <id>2px</id>
          <name>2px</name>
          <name lang="de-DE">2px</name>
        </option>
        <option>
          <id>3px</id>
          <name>3px</name>
          <name lang="de-DE">3px</name>
        </option>
        <option>
          <id>4px</id>
          <name>4px</name>
          <name lang="de-DE">4px</name>
        </option>
        <option>
          <id>5px</id>
          <name>5px</name>
          <name lang="de-DE">5px</name>
        </option>
        <option>
          <id>10px</id>
          <name>10px</name>
          <name lang="de-DE">10px</name>
        </option>
      </options>
    </input-field>
    <input-field type="single-select">
      <name>c108isethirdbuttonicon</name>
      <label>Icon</label>
      <label lang="de-DE">Icon</label>
      <defaultValue>lightbulb</defaultValue>
      <helpText>The icon (Shopware icons) on the button can be set here. In order for the icon to appear on the button, the "Type" must be set to "Icon".</helpText>
      <helpText lang="de-DE">Hier kann das Icon (Shopware Icons) auf dem Button gesetzt werden. Damit das Icon auf dem Button erscheint, muss die Einstellung „Typ“ auf „Icon“ gesetzt werden.</helpText>
      <options>
        <option>
            <id>eye-open</id>
            <name>Eye</name>
            <name lang="de-DE">Auge</name>
        </option>
        <option>
            <id>image</id>
            <name>Image</name>
            <name lang="de-DE">Bild</name>
        </option>
        <option>
            <id>envelope</id>
            <name>Envelope</name>
            <name lang="de-DE">Brief</name>
        </option>
        <option>
            <id>books</id>
            <name>Books</name>
            <name lang="de-DE">Bücher</name>
        </option>
        <option>
            <id>paperclip</id>
            <name>Paperclip</name>
            <name lang="de-DE">Büroklammer</name>
        </option>
        <option>
            <id>code</id>
            <name>Code</name>
            <name lang="de-DE">Code</name>
        </option>
        <option>
            <id>dashboard</id>
            <name>Dashboard</name>
            <name lang="de-DE">Dashboard</name>
        </option>
        <option>
            <id>desktop</id>
            <name>Desktop</name>
            <name lang="de-DE">Desktop</name>
        </option>
        <option>
            <id>document-view</id>
            <name>Document</name>
            <name lang="de-DE">Dokument</name>
        </option>
        <option>
            <id>settings</id>
            <name>Settings</name>
            <name lang="de-DE">Einstellungen</name>
        </option>
        <option>
            <id>euro</id>
            <name>Euro</name>
            <name lang="de-DE">Euro</name>
        </option>
        <option>
            <id>filter</id>
            <name>Filter</name>
            <name lang="de-DE">Filter</name>
        </option>
        <option>
            <id>flag</id>
            <name>Flag</name>
            <name lang="de-DE">Flagge</name>
        </option>
        <option>
            <id>photocamera</id>
            <name>Photocamera</name>
            <name lang="de-DE">Fotoaparat</name>
        </option>
        <option>
            <id>package-gift</id>
            <name>Present</name>
            <name lang="de-DE">Geschenk</name>
        </option>
        <option>
            <id>bell-bell</id>
            <name>Bell</name>
            <name lang="de-DE">Glocke</name>
        </option>
        <option>
            <id>globe</id>
            <name>Globe</name>
            <name lang="de-DE">Globus</name>
        </option>
        <option>
            <id>lightbulb</id>
            <name>Lightbulb</name>
            <name lang="de-DE">Glühbirne</name>
        </option>
        <option>
            <id>gps</id>
            <name>GPS</name>
            <name lang="de-DE">GPS</name>
        </option>
        <option>
            <id>checkmark</id>
            <name>Checkmark</name>
            <name lang="de-DE">Häkchen</name>
        </option>
        <option>
            <id>home</id>
            <name>House</name>
            <name lang="de-DE">Haus</name>
        </option>
        <option>
            <id>headset</id>
            <name>Headset</name>
            <name lang="de-DE">Headset</name>
        </option>
        <option>
            <id>heart</id>
            <name>Heart</name>
            <name lang="de-DE">Herz</name>
        </option>
        <option>
            <id>content</id>
            <name>Content</name>
            <name lang="de-DE">Inhalt</name>
        </option>
        <option>
            <id>calendar</id>
            <name>Calendar</name>
            <name lang="de-DE">Kalender</name>
        </option>
        <option>
            <id>keyboard</id>
            <name>Keyboard</name>
            <name lang="de-DE">Keyboard</name>
        </option>
        <option>
            <id>chart-pie</id>
            <name>Chart pie</name>
            <name lang="de-DE">Kuchendiagramm</name>
        </option>
        <option>
            <id>layout</id>
            <name>Layout</name>
            <name lang="de-DE">Layout</name>
        </option>
        <option>
            <id>traffic-pawn</id>
            <name>Traffic pawn</name>
            <name lang="de-DE">Leitkegel</name>
        </option>
        <option>
            <id>bookmark</id>
            <name>Bookmark</name>
            <name lang="de-DE">Lesezeichen</name>
        </option>
        <option>
            <id>link</id>
            <name>Link</name>
            <name lang="de-DE">Link</name>
        </option>
        <option>
            <id>marker</id>
            <name>Marker</name>
            <name lang="de-DE">Marker</name>
        </option>
        <option>
            <id>paper-pencil</id>
            <name>Note</name>
            <name lang="de-DE">Notiz</name>
        </option>
        <option>
            <id>map-closed</id>
            <name>Folder</name>
            <name lang="de-DE">Ordner</name>
        </option>
        <option>
            <id>arrow-move-vertical-axis</id>
            <name>Arrow 1</name>
            <name lang="de-DE">Pfeil 1</name>
        </option>
        <option>
            <id>arrow-scroll</id>
            <name>Arrow 2</name>
            <name lang="de-DE">Pfeil 2</name>
        </option>
        <option>
            <id>arrow-switch</id>
            <name>Arrow 3</name>
            <name lang="de-DE">Pfeil 3</name>
        </option>
        <option>
            <id>arrow-head-left</id>
            <name>Arrow left</name>
            <name lang="de-DE">Pfeil links</name>
        </option>
        <option>
            <id>arrow-head-right</id>
            <name>Arrow right</name>
            <name lang="de-DE">Pfeil rechts</name>
        </option>
        <option>
            <id>plus</id>
            <name>Plus</name>
            <name lang="de-DE">Plus</name>
        </option>
        <option>
            <id>pulse</id>
            <name>Pulse</name>
            <name lang="de-DE">Puls</name>
        </option>
        <option>
            <id>puzzle-piece</id>
            <name>Puzzle</name>
            <name lang="de-DE">Puzzle</name>
        </option>
        <option>
            <id>rocket</id>
            <name>Rocket</name>
            <name lang="de-DE">Rakete</name>
        </option>
        <option>
            <id>pushpin</id>
            <name>Pushpin</name>
            <name lang="de-DE">Reißzwecke</name>
        </option>
        <option>
            <id>layers</id>
            <name>Layers</name>
            <name lang="de-DE">Schichten</name>
        </option>
        <option>
            <id>sliders</id>
            <name>Sliders</name>
            <name lang="de-DE">Schieberegler</name>
        </option>
        <option>
            <id>shield</id>
            <name>Shield</name>
            <name lang="de-DE">Schield</name>
        </option>
        <option>
            <id>sun</id>
            <name>Sun</name>
            <name lang="de-DE">Sonne</name>
        </option>
        <option>
            <id>star</id>
            <name>Star</name>
            <name lang="de-DE">Stern</name>
        </option>
        <option>
            <id>share</id>
            <name>Share</name>
            <name lang="de-DE">Teilen</name>
        </option>
        <option>
            <id>trophy</id>
            <name>Trophy</name>
            <name lang="de-DE">Trophäe</name>
        </option>
         <option>
            <id>screen-full</id>
            <name>Full screen</name>
            <name lang="de-DE">Vollbild</name>
        </option>
        <option>
            <id>warning</id>
            <name>Warning</name>
            <name lang="de-DE">Warnung</name>
        </option>
        <option>
            <id>tools</id>
            <name>Tools</name>
            <name lang="de-DE">Werkzeug</name>
        </option>
        <option>
            <id>target-big</id>
            <name>Target</name>
            <name lang="de-DE">Ziel</name>
        </option>
      </options>
    </input-field>
    <input-field type="text">
      <name>c108isethirdbuttontext</name>
      <label>Text</label>
      <label lang="de-DE">Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>The text on the button can be set here. In order for the text to appear on the button, the "Type" must be set to "Text". The maximum number of characters is 30.</helpText>
      <helpText lang="de-DE">Hier kann der Text auf dem Button gesetzt werden. Damit der Text auf dem Button erscheint, muss die Option „Typ“ auf „Text“ gesetzt werden. Die maximale Anzahl an Zeichen ist 30.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isethirdbuttonimg</name>
      <label>Image URL</label>
      <label lang="de-DE">Bild URL</label>
      <helpText>The URL for the image if the "Type" of the element is set to "Own image". Make sure the image you select is quadratic. The width and height of the image should not exceed 120 pixels.</helpText>
      <helpText lang="de-DE">Die URL für das Bild, wenn der „Typ“ des Elements auf „Eigenes Bild“ gesetzt ist. Achten Sie darauf, dass das ausgewählte Bild quadratisch ist. Die Breite und Höhe des Bildes sollte nicht größer als 120 Pixel sein.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isethirdbuttonimgalt</name>
      <label>Image alt-text</label>
      <label lang="de-DE">Bild Alt-Text</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the alt-text for the image.</helpText>
      <helpText lang="de-DE">Alt-Text für das Bild.</helpText>
    </input-field>
    <input-field type="text">
      <name>c108isethirdtitleattribute</name>
      <label>Title-attribute</label>
      <label lang="de-DE">Titel-Attribut</label>
      <defaultValue>Lorem ipsum</defaultValue>
      <helpText>Set the title-attribute for the button.</helpText>
      <helpText lang="de-DE">Title-Attribut für den Button.</helpText>
    </input-field>
    <input-field type="url">
      <name>c108isethirdbuttonurl</name>
      <label>URL</label>
      <label lang="de-DE">URL</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link".</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist.</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isethirdbuttonurlbooladvanced</name>
      <label>Use advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld verwenden</label>
      <defaultValue>false</defaultValue>
    </input-field>
    <input-field type="text">
      <name>c108isethirdbuttonurladvanced</name>
      <label>Advanced URL field</label>
      <label lang="de-DE">Advanced URL Feld</label>
      <defaultValue>https://code108.de/de/apps/interaktives-seitenelement-fuer-besondere-hinweise</defaultValue>
      <helpText>The URL if the "Function" of the element is set to "Simple link" (Advanced URL).</helpText>
      <helpText lang="de-DE">Die URL, wenn die „Funktion“ des Elements auf „Einfache Verlinkung“ gesetzt ist (Advanced URL).</helpText>
    </input-field>
    <input-field type="bool">
      <name>c108isethirdbuttonurlsamewindow</name>
      <label>Open link in the same window</label>
      <label lang="de-DE">Link im selben Fenster öffnen</label>
      <defaultValue>false</defaultValue>
    </input-field>
  </card>
</config>