<ul class="uk-list uk-list-large veranstaltungsliste">
    
    
    
    <li>
    <article role="region" class="f5-kufer-va uk-tile-muted uk-tile uk-padding-remove" aria-labelledby="veranstaltung-1-titel">
        
        <!-- Genre -->
        <p class="f5-kufer-va-genre uk-text-right">Film und Gespräch</p>
        
        <div class="f5-kufer-va-container uk-grid-column-small" uk-grid>
            
            <!-- Image -->
            <div class="f5-kufer-va-image uk-grid-item-match uk-width-1-3@m">
                <div class="uk-flex">
                    <!-- Hintergrundbild -->
                    <div
                         class="f5-kufer-va-imagecontainer uk-width-1-1 uk-padding-remove"
                         style="background-image: url('/images/Layoutbilder/va_dummy_01.jpg');">
                        <!-- screenreader bild -->
                        <img src="/images/Layoutbilder/va_dummy_01.jpg"
                  width="900" height="600" alt="Eine Frau geht durch eine U-Bahnstation" class="uk-hidden-visually f5-reset-mobil" />
                    </div>
                </div>
            </div>
            
            <div class="f5-kufer-va-content uk-width-2-3@m">
                <div class="f5-kufer-va-inner">
                    
                    <p class="f5-kufer-va-date">
                        <time datetime="2025-06-17">Dienstag, 17. Juni 2025</time>
                    </p>
                    
                    <p class="f5-kufer-va-time">
                        <time datetime="2025-06-17T17:30">17:30</time> – <time datetime="2025-06-17T20:30">20:30 Uhr</time>
                    </p>
                    
                    <h2 class="f5-kufer-va-title" id="veranstaltung-1-titel">Possum autam untibus</h2>

                    <p class="f5-kufer-va-subtitle">Untertitel zur weiteren Erklärung und zum besseren Verständnis.</p>
                    
                    <a class="f5-kufer-va-link uk-button uk-button-link" href="#" aria-label="Mehr erfahren über Possum autam untibus">mehr erfahren</a>
                    
                    <div class="uk-margin-bottom uk-text-right">
                        <a class="f5-kufer-va-button uk-button uk-button-secondary uk-flex-inline uk-flex-center uk-flex-middle" href="#" aria-label="Details zur Veranstaltung Possum autam untibus">Details<span class="uk-margin-small-left" uk-icon="info"></span></a>
                        <a class="uk-button uk-button-primary uk-flex-inline uk-flex-center uk-flex-middle" href="#" aria-label="Zur Anmeldung für die Veranstaltung Possum autam untibus">Anmelden<span class="uk-margin-small-left uk-icon" uk-icon="arrow-right"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <p class="f5-kufer-va-image-copyright">
        <small>© Lorem ipsum dolor sit amet consetetur sadipscing elitr</small>
    </p>
</li>
    
    <li>[...]</li>
    <li>[...]</li>
    <li>[...]</li>
    
</ul>