<!-- Events -->
<div class="events">
  <h2>Gesundheit für die ganze Familie</h2><a class="teaser teaser--list" href="#">
    <div class="teaser__content">
      <div class="events-item"><img class="events-item__image" src="https://via.placeholder.com/288x182/15265a/ffffff.png?text=288x182" alt="Bild" />
        <div class="events-item__content">
          <h3 class="events-item__headline">Lorem ipsum dolor sit atmet</h3>
          <ul class="events-item__attributes-list">
            <li class="events-item__attributes-list-item"><svg class="icon icon--info events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-info"></use>
              </svg><span class="events-item__attributes-text">Online Seminar</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--time-alt events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-time-alt"></use>
              </svg><span class="events-item__attributes-text">90 Minuten</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--calendar events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-calendar"></use>
              </svg><span class="events-item__attributes-text">Dienstag, 07.05.2024, 18:00 – 19:30 Uhr</span></li>
          </ul>
          <p class="events-item__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <ul class="events-item__people-list">
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Brigitte Neumann, Test</span></li>
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Thomas Schmidt, Test</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="teaser__link">
      <div class="teaser__button">
        <div class="btn">mehr lesen</div>
      </div>
    </div>
  </a><a class="teaser teaser--list" href="#">
    <div class="teaser__content">
      <div class="events-item">
        <div class="events-item__image"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 88.72 74.11">
            <path class="lighten" d="M77.3,58.51H3.15A3.16,3.16,0,0,1,0,55.36V3.15A3.16,3.16,0,0,1,3.15,0H77.3a3.16,3.16,0,0,1,3.16,3.15V55.36a3.16,3.16,0,0,1-3.16,3.15"></path>
            <path class="darken" d="M70,28.6,50.28,17.68a2.48,2.48,0,0,0-2.35,0L28.17,28.6A2.29,2.29,0,0,0,27,30.25a.65.65,0,0,0,0,.66v7.93a3.41,3.41,0,0,0-2.72,3.33v5.35a.72.72,0,0,0,.72.72h5.35a.72.72,0,0,0,.72-.72V42.17a3.39,3.39,0,0,0-2.63-3.3V32.73l5.65,3.12v10.7a2.49,2.49,0,0,0,1.15,2.1,25.66,25.66,0,0,0,27.67,0,2.49,2.49,0,0,0,1.15-2.1V35.85L70,32.56a2.25,2.25,0,0,0,1.19-2A2.27,2.27,0,0,0,70,28.6ZM29.66,42.17V46.8H25.75V42.17a2,2,0,0,1,3.91,0Zm33-5.52v9.9a1.05,1.05,0,0,1-.49.89,24.22,24.22,0,0,1-26.11,0,1.05,1.05,0,0,1-.49-.89v-9.9l12.37,6.83a2.38,2.38,0,0,0,1.17.31,2.42,2.42,0,0,0,1.18-.31Zm6.69-5.35L49.59,42.22a1,1,0,0,1-1,0L29,31.35H49.1V29.9H28.82l.05,0L48.62,18.94a1,1,0,0,1,.48-.12,1,1,0,0,1,.48.12L69.34,29.87a.82.82,0,0,1,.44.71A.84.84,0,0,1,69.34,31.3Z"></path>
            <path class="darken" d="M10.19,63.07H85.34V10H10.19Zm1.45-51.64H83.9V61.62H11.64Z"></path>
            <path class="darken" d="M84.84,6.55H10.69a3.88,3.88,0,0,0-3.87,3.88v52.2a3.88,3.88,0,0,0,3.87,3.87H38.12v6.17H25.78v1.44h44V72.67H57.41V66.5H84.84a3.88,3.88,0,0,0,3.88-3.87V10.43A3.88,3.88,0,0,0,84.84,6.55ZM39.57,72.67V66.52H56v6.15Zm47.7-10a2.43,2.43,0,0,1-2.43,2.43H10.69a2.43,2.43,0,0,1-2.43-2.43V10.43A2.43,2.43,0,0,1,10.69,8H84.84a2.43,2.43,0,0,1,2.43,2.44Z"></path>
          </svg></div>
        <div class="events-item__content">
          <h3 class="events-item__headline">SVG ohne Text</h3>
          <ul class="events-item__attributes-list">
            <li class="events-item__attributes-list-item"><svg class="icon icon--info events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-info"></use>
              </svg><span class="events-item__attributes-text">Online Seminar</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--time-alt events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-time-alt"></use>
              </svg><span class="events-item__attributes-text">90 Minuten</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--calendar events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-calendar"></use>
              </svg><span class="events-item__attributes-text">Dienstag, 07.05.2024, 18:00 – 19:30 Uhr</span></li>
          </ul>
          <ul class="events-item__people-list">
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Brigitte Neumann, Test</span></li>
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Thomas Schmidt, Test</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="teaser__link">
      <div class="teaser__button">
        <div class="btn">mehr lesen</div>
      </div>
    </div>
  </a><a class="teaser teaser--list" href="#">
    <div class="teaser__content">
      <div class="events-item">
        <div class="events-item__image"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 88.72 74.11">
            <path class="lighten" d="M77.3,58.51H3.15A3.16,3.16,0,0,1,0,55.36V3.15A3.16,3.16,0,0,1,3.15,0H77.3a3.16,3.16,0,0,1,3.16,3.15V55.36a3.16,3.16,0,0,1-3.16,3.15"></path>
            <path class="darken" d="M70,28.6,50.28,17.68a2.48,2.48,0,0,0-2.35,0L28.17,28.6A2.29,2.29,0,0,0,27,30.25a.65.65,0,0,0,0,.66v7.93a3.41,3.41,0,0,0-2.72,3.33v5.35a.72.72,0,0,0,.72.72h5.35a.72.72,0,0,0,.72-.72V42.17a3.39,3.39,0,0,0-2.63-3.3V32.73l5.65,3.12v10.7a2.49,2.49,0,0,0,1.15,2.1,25.66,25.66,0,0,0,27.67,0,2.49,2.49,0,0,0,1.15-2.1V35.85L70,32.56a2.25,2.25,0,0,0,1.19-2A2.27,2.27,0,0,0,70,28.6ZM29.66,42.17V46.8H25.75V42.17a2,2,0,0,1,3.91,0Zm33-5.52v9.9a1.05,1.05,0,0,1-.49.89,24.22,24.22,0,0,1-26.11,0,1.05,1.05,0,0,1-.49-.89v-9.9l12.37,6.83a2.38,2.38,0,0,0,1.17.31,2.42,2.42,0,0,0,1.18-.31Zm6.69-5.35L49.59,42.22a1,1,0,0,1-1,0L29,31.35H49.1V29.9H28.82l.05,0L48.62,18.94a1,1,0,0,1,.48-.12,1,1,0,0,1,.48.12L69.34,29.87a.82.82,0,0,1,.44.71A.84.84,0,0,1,69.34,31.3Z"></path>
            <path class="darken" d="M10.19,63.07H85.34V10H10.19Zm1.45-51.64H83.9V61.62H11.64Z"></path>
            <path class="darken" d="M84.84,6.55H10.69a3.88,3.88,0,0,0-3.87,3.88v52.2a3.88,3.88,0,0,0,3.87,3.87H38.12v6.17H25.78v1.44h44V72.67H57.41V66.5H84.84a3.88,3.88,0,0,0,3.88-3.87V10.43A3.88,3.88,0,0,0,84.84,6.55ZM39.57,72.67V66.52H56v6.15Zm47.7-10a2.43,2.43,0,0,1-2.43,2.43H10.69a2.43,2.43,0,0,1-2.43-2.43V10.43A2.43,2.43,0,0,1,10.69,8H84.84a2.43,2.43,0,0,1,2.43,2.44Z"></path>
          </svg></div>
        <div class="events-item__content">
          <h3 class="events-item__headline">SVG mit Text</h3>
          <ul class="events-item__attributes-list">
            <li class="events-item__attributes-list-item"><svg class="icon icon--info events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-info"></use>
              </svg><span class="events-item__attributes-text">Online Seminar</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--time-alt events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-time-alt"></use>
              </svg><span class="events-item__attributes-text">90 Minuten</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--calendar events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-calendar"></use>
              </svg><span class="events-item__attributes-text">Dienstag, 07.05.2024, 18:00 – 19:30 Uhr</span></li>
          </ul>
          <p class="events-item__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <ul class="events-item__people-list">
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Brigitte Neumann, Test</span></li>
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Thomas Schmidt, Test</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="teaser__link">
      <div class="teaser__button">
        <div class="btn">mehr lesen</div>
      </div>
    </div>
  </a><a class="teaser teaser--list" href="#">
    <div class="teaser__content">
      <div class="events-item"><img class="events-item__image" src="https://via.placeholder.com/288x182/15265a/ffffff.png?text=288x182" alt="Bild" />
        <div class="events-item__content">
          <h3 class="events-item__headline">Lorem ipsum dolor sit atmet</h3>
          <ul class="events-item__attributes-list">
            <li class="events-item__attributes-list-item"><svg class="icon icon--info events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-info"></use>
              </svg><span class="events-item__attributes-text">Online Seminar</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--time-alt events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-time-alt"></use>
              </svg><span class="events-item__attributes-text">90 Minuten</span></li>
            <li class="events-item__attributes-list-item"><svg class="icon icon--calendar events-item__attributes-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-calendar"></use>
              </svg><span class="events-item__attributes-text">Dienstag, 07.05.2024, 18:00 – 19:30 Uhr</span></li>
          </ul>
          <p class="events-item__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <ul class="events-item__people-list">
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Brigitte Neumann, Test</span></li>
            <li class="events-item__people-list-item"><svg class="icon icon--speech-bubble events-item__people-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="#icon-speech-bubble"></use>
              </svg><span class="events-item__people-text">Thomas Schmidt, Test</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="teaser__link">
      <div class="teaser__button">
        <div class="btn">mehr lesen</div>
      </div>
    </div>
  </a>
</div>

{
  "headline": "Gesundheit für die ganze Familie",
  "items": [
    {
      "headline": "Lorem ipsum dolor sit atmet",
      "image": "https://via.placeholder.com/288x182/15265a/ffffff.png?text=288x182",
      "attributes": [
        {
          "icon": "info",
          "text": "Online Seminar"
        },
        {
          "icon": "time-alt",
          "text": "90 Minuten"
        },
        {
          "icon": "calendar",
          "text": "Dienstag, 07.05.2024, 18:00 – 19:30 Uhr"
        }
      ],
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "people": [
        "Brigitte Neumann, Test",
        "Thomas Schmidt, Test"
      ]
    },
    {
      "headline": "SVG ohne Text",
      "image": "svg",
      "attributes": [
        {
          "icon": "info",
          "text": "Online Seminar"
        },
        {
          "icon": "time-alt",
          "text": "90 Minuten"
        },
        {
          "icon": "calendar",
          "text": "Dienstag, 07.05.2024, 18:00 – 19:30 Uhr"
        }
      ],
      "people": [
        "Brigitte Neumann, Test",
        "Thomas Schmidt, Test"
      ]
    },
    {
      "headline": "SVG mit Text",
      "image": "svg",
      "attributes": [
        {
          "icon": "info",
          "text": "Online Seminar"
        },
        {
          "icon": "time-alt",
          "text": "90 Minuten"
        },
        {
          "icon": "calendar",
          "text": "Dienstag, 07.05.2024, 18:00 – 19:30 Uhr"
        }
      ],
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "people": [
        "Brigitte Neumann, Test",
        "Thomas Schmidt, Test"
      ]
    },
    {
      "headline": "Lorem ipsum dolor sit atmet",
      "image": "https://via.placeholder.com/288x182/15265a/ffffff.png?text=288x182",
      "attributes": [
        {
          "icon": "info",
          "text": "Online Seminar"
        },
        {
          "icon": "time-alt",
          "text": "90 Minuten"
        },
        {
          "icon": "calendar",
          "text": "Dienstag, 07.05.2024, 18:00 – 19:30 Uhr"
        }
      ],
      "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "people": [
        "Brigitte Neumann, Test",
        "Thomas Schmidt, Test"
      ]
    }
  ]
}