<div class="timeline-item" style="position: relative;">
    <div class="timeline-date">
        <span style="flex: 1; min-width: 0;">
            {{ akt.datum.strftime('%d.%m.%Y %H:%M') if akt.datum else 'Kein Datum' }}
            &middot; <span class="timeline-art">{{ akt.art_icon }} {{ akt.art_label }}</span>
            {% if akt.zugewiesen_an %}&middot; <span style="color: var(--kw-primary);">→ {{ akt.zugewiesen_an }}</span>{% endif %}
            {% if akt.erfasst_von %}&middot; {{ akt.erfasst_von }}{% endif %}
        </span>
        <span style="display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0;">
            <a href="/aktivitaeten/{{ akt.id }}/bearbeiten" style="font-size: 0.75rem;" title="Bearbeiten">✏️</a>
            <a href="/aktivitaeten/{{ akt.id }}/loeschen"
               onclick="return confirm('Aktivität wirklich löschen?')"
               style="font-size: 0.75rem; text-decoration: none;" title="Löschen">🗑️</a>
            {% if akt.status == 'offen' %}
            <form method="post" action="/aktivitaeten/{{ akt.id }}/erledigt" style="display: contents;">
                <button type="submit" class="btn-icon" style="font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid var(--kw-success); color: var(--kw-success); display: inline-block; width: auto;" title="Als erledigt markieren">✓</button>
            </form>
            {% endif %}
        </span>
    </div>
    <div class="timeline-content">
        <a href="/aktivitaeten/{{ akt.id }}" style="text-decoration: none; color: inherit;">
            <strong{% if akt.status == 'erledigt' %} style="text-decoration: line-through; color: var(--kw-text-muted);"{% endif %}>{{ akt.betreff or 'Ohne Betreff' }}</strong>
        </a>
        {% if akt.faellig_am %}<span style="font-size: 0.75rem; color: #dd6b20; margin-left: 0.5rem;">fällig {{ akt.faellig_am.strftime('%d.%m.%Y') }}</span>{% endif %}
        {% if akt.status == 'offen' %}<span class="tag-chip" style="background: #dd6b20; color: white; font-size: 0.7rem;">offen</span>{% endif %}
        {% if akt.status == 'information' %}<span class="tag-chip" style="background: #2196F3; color: white; font-size: 0.7rem;">info</span>{% endif %}
        {% if akt.bemerkung %}<br><span style="font-size: 0.85rem; color: var(--kw-text-muted);">{{ akt.bemerkung[:200] }}{% if akt.bemerkung|length > 200 %}...{% endif %}</span>{% endif %}
        {% if akt.projekt %}<br><span class="tag-chip">{{ akt.projekt }}</span>{% endif %}
    </div>
</div>
