<ul class="uk-list uk-list-large veranstaltungsliste">
    
    <!-- Event-Item -->
    <li>
        <article role="region" class="f5-kufer-va uk-tile-muted uk-tile uk-padding-remove" aria-labelledby="### veranstaltung-ID ###">
            
            <!-- Genre -->
            <p class="f5-kufer-va-genre uk-text-right">[Kategorie-Bezeichnung]</p>
            
            <!-- Container -->
            <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="Bild ALT-TEXT"
                                 class="uk-hidden-visually f5-reset-mobil" />
                        </div>
                    </div>
                </div>
                
                <!-- Event-Content -->
                <div class="f5-kufer-va-content uk-width-2-3@m">
                    <div class="f5-kufer-va-inner">
                        
                        <!-- Datum -->
                        <p class="f5-kufer-va-date">
                            <time datetime="2025-06-17">[Kursbeginn - Datum]</time>
                        </p>                    
                        <p class="f5-kufer-va-time">
                            <time datetime="2025-06-17T17:30">[Kursbeginn / Kursende - Uhrzeit]</time>
                        </p>
                        
                        <!-- Titel -->
                        <h2 class="f5-kufer-va-title" id="### veranstaltung-ID ###">[Kurstitel Zeile 1]</h2>
                        <p class="f5-kufer-va-subtitle">[Kurstitel Untertitel]</p>
                        
                        <!-- Button -->
                        <div class="uk-margin-bottom uk-text-right">
                            <a
                               class="f5-kufer-va-button uk-button uk-button-primary uk-flex-inline uk-flex-center uk-flex-middle"
                               href="#### Detail-Link ###"
                               aria-label="Details zur Veranstaltung [Kurstitel Zeile 1]">mehr erfahren <span class="uk-margin-small-left" uk-icon="arrow-right"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <p class="f5-kufer-va-image-copyright">
            <small>© Copyright des Bildes aus KuferSQL</small>
        </p>
    </li>
    
    <!-- Event-Item -->
    <li>[..]</li>
    
</ul>