    <!-- Offline Toast -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="offlineToast" class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto">Keine Verbindung</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                Du bist offline. Einige Funktionen sind eingeschränkt.
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Service Worker Registration -->
    <script>
        // Automatische Update-Erkennung
        let newWorker;

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                .then(registration => {
                    registration.addEventListener('updatefound', () => {
                        newWorker = registration.installing;
                        newWorker.addEventListener('statechange', () => {
                            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                // Neues Update verfügbar - zeige Benachrichtigung
                                showUpdateNotification();
                            }
                        });
                    });
                });

            // Alle 60 Sekunden auf Updates prüfen
            setInterval(() => {
                navigator.serviceWorker.ready.then(registration => {
                    registration.update();
                });
            }, 60000);
        }

        function showUpdateNotification() {
            if (confirm('Eine neue Version von DoMiLi ist verfügbar. Jetzt aktualisieren?')) {
                navigator.serviceWorker.ready.then(registration => {
                    registration.waiting.postMessage({
                        action: 'skipWaiting'
                    });
                });
            }
        }

        // Nachrichten vom Service Worker empfangen
        navigator.serviceWorker.addEventListener('message', event => {
            if (event.data.action === 'skipWaiting') {
                navigator.serviceWorker.controller.postMessage({
                    action: 'skipWaiting'
                });
            }
        });

        // Seite neu laden wenn neuer Worker aktiv wird
        let refreshing = false;
        navigator.serviceWorker.addEventListener('controllerchange', () => {
            if (!refreshing) {
                window.location.reload();
                refreshing = true;
            }
        });

        // Offline-Erkennung
        window.addEventListener('online', function() {
            document.body.classList.remove('offline');
            // Toast ausblenden
            const toastEl = document.getElementById('offlineToast');
            if (toastEl) {
                const toast = bootstrap.Toast.getInstance(toastEl);
                if (toast) toast.hide();
            }
        });

        window.addEventListener('offline', function() {
            document.body.classList.add('offline');
            // Toast anzeigen
            const toastEl = document.getElementById('offlineToast');
            if (toastEl) {
                const toast = new bootstrap.Toast(toastEl);
                toast.show();
            }
        });
    </script>
    </body>

    </html>