Contact Guide

<div class="module module--contact-guide">
  <div class="inner">
    <button class="module--contact-guide__close-button">
      <i class="icon-minus"></i>
    </button>
    <div class="module--contact-guide__header">
              <div class="module--contact-guide__image">
          <img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/Jutta-Noessel-Palmieri.png' alt='Jutta Noessel Palmieri' />        </div>
                    <div class="module--contact-guide__name">
          Jutta                      <span class="module--contact-guide__name__subline">
              von der TeamBank            </span>
                  </div>
          </div>
          <div class="module--contact-guide__content">
        <div class="p p3"><p>Hallo, schön dass du hier bist. Du willst wissen warum Marke für uns ein wichtiges Thema ist? Oder bist du einfach auf der Suche nach einem Logo? Dann helfen wir dir hier gerne weiter.</p>
</div>      </div>
              <ul class="module--contact-guide__links">
                  <li>
            <a href="#" target="_self" class="link">Markenmanagement</a>          </li>
                  <li>
            <a href="#" target="_self" class="link">Downloads</a>          </li>
              </ul>
      </div>
</div>

(function () {
  document.addEventListener("DOMContentLoaded", () => {
    const contactGuide = document.querySelector('.module--contact-guide');
    if (contactGuide) {
      const closeButton = contactGuide.querySelector('button');
      const image = contactGuide.querySelector('.module--contact-guide__image');

      closeButton.addEventListener('click', () => {
        contactGuide.classList.add('module--contact-guide--collapse');
        image.addEventListener('click',()=>{
          contactGuide.classList.remove('module--contact-guide--collapse');
        },{ once: true })
      });
    }
  });
}());