{%- macro FloatingInfo() -%}
  <div class="floating-info">
    {{ Button({
      className: 'button--icon floating-info__toggle',
      text: '',
      iconBefore: ['question-mark'],
      attrs: {
        'data-dropdown': 'dropdown-floating-info',
        'aria-label': 'info box'
      }
    }) }}
    {% call Dropdown({
      className: 'floating-info-dropdown',
      classNameWrapper: 'floating-info-dropdown__wrapper',
      dataDropdown: 'dropdown-floating-info',
      dropdownActiveClass: 'is-open'
    }) %}
      <button data-dropdown="dropdown-floating-info" class="floating-info-dropdown__close">
        <span class="floating-info-dropdown__close-icon" aria-hidden="true">
          {{ Helpers.svg('icons/close-bold') }}
        </span>
        <span class="sr-only">Close</span>
      </button>
      <p>Sie haben Fragen zu den Produkten? Wenden Sie sich an unsere</p>
      <a href="#" class="floating-info-dropdown__link">Händler:innen</a>
    {% endcall %}
  </div>
{%- endmacro -%}