diff --git a/public/admin.php b/public/admin.php
index 7ec8fd4..4c3bb11 100644
--- a/public/admin.php
+++ b/public/admin.php
@@ -522,657 +522,28 @@ $counts['total'] = count($all_contributions);
 
 
     <!-- ============================================================= -->
-    <!-- JavaScript: Leaflet, Interactions, API Calls                   -->
+    <!-- Loads JavaScript Dependencies                                 -->
     <!-- ============================================================= -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
 
+    
+    <!-- ============================================================= -->
+    <!-- Admin Configuration passed to JavaScript                      -->
+    <!-- ============================================================= -->
     <script>
-        // Municipality Configuration for Map Previews
-        const MUNICIPALITY_CENTER = [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>];
-        const MUNICIPALITY_ID = <?= $municipality['municipality_id'] ?>;
-        const API_URL = 'api/contributions.php';
-        const PRIMARY_COLOR = '<?= htmlspecialchars($municipality['primary_color']) ?>';
-
-        // Current Status Filter
-        let currentFilter = 'all';
-
-        // Restores active Tab after Page Reload
-        const savedTab = sessionStorage.getItem('admin_active_tab');
-        if (savedTab) {
-            // Delays to ensure DOM is ready
-            setTimeout(function () {
-                const tabBtn = document.querySelector('.page-tab[onclick*="' + savedTab + '"]');
-                if (tabBtn) tabBtn.click();
-            }, 100);
-        }
-
-
-        // =============================================================
-        // Page Tab Navigation
-        // =============================================================
-
-        function showPageTab(tabName) {
-            // Saves active Tab for Persistence after Reload
-            sessionStorage.setItem('admin_active_tab', tabName);
-
-            document.querySelectorAll('.page-tab-content').forEach(function (el) {
-                el.style.display = 'none';
-            });
-
-            // Deactivates all Tab Buttons
-            document.querySelectorAll('.page-tab').forEach(function (el) {
-                el.classList.remove('active');
-            });
-
-            // Shows selected Tab and activates Button
-            document.getElementById('tab-' + tabName).style.display = 'block';
-            event.currentTarget.classList.add('active');
-        }
-
-
-        // =============================================================
-        // Collapsible Rows
-        // =============================================================
-
-        function toggleRow(row) {
-            const wasOpen = row.classList.contains('open');
-
-            // Closes all open Rows
-            document.querySelectorAll('.contribution-row.open').forEach(function (el) {
-                el.classList.remove('open');
-            });
-
-            // Toggles clicked Row
-            if (!wasOpen) {
-                row.classList.add('open');
-
-                // Loads Map Preview if not already loaded
-                const mapDiv = row.querySelector('.detail-map');
-                if (mapDiv && !mapDiv.dataset.loaded) {
-                    loadMapPreview(mapDiv);
-                }
-            }
-        }
-
-
-        // =============================================================
-        // Detail Slider for Maps and Photos
-        // =============================================================
-
-        function slideDetail(contributionId, direction) {
-            const slider = document.getElementById('slider-' + contributionId);
-            if (!slider) return;
-
-            const slides = slider.querySelectorAll('.detail-slide');
-            let activeIndex = -1;
-
-            // Finds currently active Slide
-            slides.forEach(function (slide, i) {
-                if (slide.style.display !== 'none') activeIndex = i;
-            });
-
-            // Calculates next Slide Index (wraps around)
-            const nextIndex = (activeIndex + direction + slides.length) % slides.length;
-
-            // Switches Slides
-            slides.forEach(function (slide) { slide.style.display = 'none'; });
-            slides[nextIndex].style.display = 'block';
-
-            // Loads Map if switching to Map Slide and not yet loaded
-            if (slides[nextIndex].dataset.slide === 'map') {
-                const mapDiv = slides[nextIndex].querySelector('.detail-map');
-                if (mapDiv && !mapDiv.dataset.loaded) {
-                    loadMapPreview(mapDiv);
-                }
-            }
-        }
-
-
-        // =============================================================
-        // Map Preview (Leaflet Mini Map per Contribution)
-        // =============================================================
-
-        function loadMapPreview(mapDiv) {
-            const contributionId = mapDiv.dataset.contributionId;
-
-            // Fetches all Contributions to find the Geometry
-            const formData = new FormData();
-            formData.append('action', 'read');
-            formData.append('municipality_id', MUNICIPALITY_ID);
-            formData.append('status', 'all');
-
-            fetch(API_URL, { method: 'POST', body: formData })
-                .then(function (r) { return r.json(); })
-                .then(function (data) {
-                    if (!data.features) return;
-
-                    // Finds specific Contribution
-                    const feature = data.features.find(function (f) {
-                        return f.properties.contribution_id == contributionId;
-                    });
-
-                    if (!feature) {
-                        mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
-                        return;
-                    }
-
-                    // Creates Leaflet Mini Map
-                    const miniMap = L.map(mapDiv, {
-                        zoomControl: false,
-                        attributionControl: false,
-                        dragging: true,
-                        scrollWheelZoom: false
-                    });
-
-                    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
-                        maxZoom: 20
-                    }).addTo(miniMap);
-
-                    // Adds Geometry to Mini Map
-                    const geojsonLayer = L.geoJSON(feature, {
-                        style: { color: PRIMARY_COLOR, weight: 3, fillOpacity: 0.2 },
-                        pointToLayer: function (f, latlng) {
-                            return L.circleMarker(latlng, {
-                                radius: 8, color: '#ffffff', weight: 2,
-                                fillColor: PRIMARY_COLOR, fillOpacity: 0.9
-                            });
-                        }
-                    }).addTo(miniMap);
-
-                    // Fits Map to Geometry Bounds
-                    const bounds = geojsonLayer.getBounds();
-                    if (bounds.isValid()) {
-                        miniMap.fitBounds(bounds, { padding: [25, 25], maxZoom: 17 });
-                    } else {
-                        miniMap.setView(MUNICIPALITY_CENTER, 15);
-                    }
-
-                    mapDiv.dataset.loaded = 'true';
-                })
-                .catch(function () {
-                    mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>';
-                });
-        }
-
-
-        // =============================================================
-        // Status Filter
-        // =============================================================
-
-        function filterByStatus(status, tabButton) {
-            currentFilter = status;
-
-            // Updates active Tab
-            document.querySelectorAll('.filter-tab').forEach(function (el) {
-                el.classList.remove('active');
-            });
-            tabButton.classList.add('active');
-
-            // Shows/Hides Contribution Rows
-            let visibleCount = 0;
-            document.querySelectorAll('.contribution-row').forEach(function (row) {
-                if (status === 'all' || row.dataset.status === status) {
-                    row.style.display = '';
-                    visibleCount++;
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-
-            // Updates Count Display
-            document.getElementById('visible-count').textContent = visibleCount + ' Beiträge';
-        }
-
-
-        // =============================================================
-        // Sort Contributions
-        // =============================================================
-
-        function sortContributions(sortBy) {
-            const container = document.getElementById('contributions-container');
-            const rows = Array.from(container.querySelectorAll('.contribution-row'));
-
-            rows.sort(function (a, b) {
-                if (sortBy === 'date-desc') {
-                    return new Date(b.dataset.date) - new Date(a.dataset.date);
-                } else if (sortBy === 'date-asc') {
-                    return new Date(a.dataset.date) - new Date(b.dataset.date);
-                } else if (sortBy === 'category') {
-                    return a.dataset.category.localeCompare(b.dataset.category);
-                }
-                return 0;
-            });
-
-            // Reappends sorted Rows
-            rows.forEach(function (row) {
-                container.appendChild(row);
-            });
-        }
-
-
-        // =============================================================
-        // API Helper
-        // =============================================================
-
-        function apiCall(data) {
-            const formData = new FormData();
-            for (const key in data) {
-                formData.append(key, data[key]);
-            }
-            return fetch(API_URL, { method: 'POST', body: formData })
-                .then(function (r) { return r.json(); });
-        }
-
-
-        // =============================================================
-        // Change Contribution Status
-        // =============================================================
-
-        function changeStatus(contributionId, newStatus) {
-            const labels = { approved: 'freigeben', rejected: 'ablehnen', pending: 'zurücksetzen' };
-
-            Swal.fire({
-                title: 'Beitrag ' + labels[newStatus] + '?',
-                showCancelButton: true,
-                confirmButtonText: 'Ja',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'update',
-                    contribution_id: contributionId,
-                    status: newStatus
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    // Reloads Page to reflect Changes
-                    location.reload();
-                });
-            });
-        }
-
-
-        // =============================================================
-        // Edit Contribution
-        // =============================================================
-
-        function editContribution(contributionId, currentTitle, currentDescription) {
-            Swal.fire({
-                title: 'Beitrag bearbeiten',
-                html:
-                    '<div style="text-align:left;">' +
-                        '<div style="margin-bottom:12px;">' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
-                            '<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + currentTitle + '">' +
-                        '</div>' +
-                        '<div>' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Beschreibung</label>' +
-                            '<textarea id="swal-description" class="swal2-textarea" style="margin:0;width:100%;">' + currentDescription + '</textarea>' +
-                        '</div>' +
-                    '</div>',
-                showCancelButton: true,
-                confirmButtonText: 'Speichern',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR,
-                preConfirm: function () {
-                    return {
-                        title: document.getElementById('swal-title').value.trim(),
-                        description: document.getElementById('swal-description').value.trim()
-                    };
-                }
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'update',
-                    contribution_id: contributionId,
-                    title: result.value.title,
-                    description: result.value.description
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
-                        .then(function () { location.reload(); });
-                });
-            });
-        }
-
-
-        // =============================================================
-        // Delete Contribution
-        // =============================================================
-
-        function deleteContribution(contributionId) {
-            Swal.fire({
-                title: 'Beitrag löschen?',
-                text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonText: 'Beitrag löschen',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: '#c62828'
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'delete',
-                    contribution_id: contributionId
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    Swal.fire('Gelöscht!', 'Beitrag wurde gelöscht.', 'success')
-                        .then(function () { location.reload(); });
-                });
-            });
-        }
-        
-
-        // =============================================================
-        // Create News Article
-        // =============================================================
-
-        function createNews() {
-            Swal.fire({
-                title: 'Neuigkeit hinzufügen',
-                html:
-                    '<div style="text-align:left;">' +
-                        '<div style="margin-bottom:12px;">' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
-                            '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
-                        '</div>' +
-                        '<div style="margin-bottom:12px;">' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
-                            '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;" placeholder="Neuigkeit verfassen..."></textarea>' +
-                        '</div>' +
-                        '<div>' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
-                            '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="Stadtverwaltung">' +
-                        '</div>' +
-                    '</div>',
-                showCancelButton: true,
-                confirmButtonText: 'Veröffentlichen',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR,
-                preConfirm: function () {
-                    const title = document.getElementById('swal-news-title').value.trim();
-                    const content = document.getElementById('swal-news-content').value.trim();
-                    const author = document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung';
-                    if (!title || !content) {
-                        Swal.showValidationMessage('Titel und Inhalt sind Pflichtfelder.');
-                        return false;
-                    }
-                    return { title: title, content: content, author_name: author };
-                }
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                const formData = new FormData();
-                formData.append('action', 'create_news');
-                formData.append('municipality_id', MUNICIPALITY_ID);
-                formData.append('title', result.value.title);
-                formData.append('content', result.value.content);
-                formData.append('author_name', result.value.author_name);
-
-                fetch(API_URL, { method: 'POST', body: formData })
-                    .then(function (r) { return r.json(); })
-                    .then(function (response) {
-                        if (response.error) {
-                            Swal.fire('Fehler', response.error, 'error');
-                            return;
-                        }
-                        Swal.fire('Veröffentlicht!', 'Neuigkeit wurde veröffentlicht.', 'success')
-                            .then(function () { location.reload(); });
-                    });
-            });
-        }
-
-
-        // =============================================================
-        // Edit News Article
-        // =============================================================
-        function editNews(newsId, currentTitle, currentContent, currentAuthor) {
-            Swal.fire({
-                title: 'Neuigkeit bearbeiten',
-                html:
-                    '<div style="text-align:left;">' +
-                        '<div style="margin-bottom:12px;">' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
-                            '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + currentTitle + '">' +
-                        '</div>' +
-                        '<div style="margin-bottom:12px;">' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
-                            '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;">' + currentContent + '</textarea>' +
-                        '</div>' +
-                        '<div>' +
-                            '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
-                            '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="' + currentAuthor + '">' +
-                        '</div>' +
-                    '</div>',
-                showCancelButton: true,
-                confirmButtonText: 'Speichern',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR,
-                preConfirm: function () {
-                    return {
-                        title: document.getElementById('swal-news-title').value.trim(),
-                        content: document.getElementById('swal-news-content').value.trim(),
-                        author_name: document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung'
-                    };
-                }
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                const formData = new FormData();
-                formData.append('action', 'update_news');
-                formData.append('news_id', newsId);
-                formData.append('title', result.value.title);
-                formData.append('content', result.value.content);
-                formData.append('author_name', result.value.author_name);
-
-                fetch(API_URL, { method: 'POST', body: formData })
-                    .then(function (r) { return r.json(); })
-                    .then(function (response) {
-                        if (response.error) {
-                            Swal.fire('Fehler', response.error, 'error');
-                            return;
-                        }
-                        Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
-                            .then(function () { location.reload(); });
-                    });
-            });
-        }
-
-
-        // =============================================================
-        // Create News Article
-        // =============================================================
-        function deleteNews(newsId) {
-            Swal.fire({
-                title: 'Neuigkeit löschen?',
-                text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonText: 'Löschen',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: '#c62828'
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                const formData = new FormData();
-                formData.append('action', 'delete_news');
-                formData.append('news_id', newsId);
-
-                fetch(API_URL, { method: 'POST', body: formData })
-                    .then(function (r) { return r.json(); })
-                    .then(function (response) {
-                        if (response.error) {
-                            Swal.fire('Fehler', response.error, 'error');
-                            return;
-                        }
-                        Swal.fire('Gelöscht!', 'Neuigkeit wurde gelöscht.', 'success')
-                            .then(function () { location.reload(); });
-                    });
-            });
-        }
-
-
-        // =============================================================
-        // Sort Comments
-        // =============================================================
-
-        function sortCommentRows(sortBy) {
-            const container = document.getElementById('comments-mod-container');
-            const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
-
-            rows.sort(function (a, b) {
-                if (sortBy === 'date-desc') {
-                    return new Date(b.dataset.date) - new Date(a.dataset.date);
-                } else if (sortBy === 'date-asc') {
-                    return new Date(a.dataset.date) - new Date(b.dataset.date);
-                } else if (sortBy === 'contribution') {
-                    return a.dataset.contribution.localeCompare(b.dataset.contribution);
-                }
-                return 0;
-            });
-
-            rows.forEach(function (row) { container.appendChild(row); });
-        }
-
-
-        // =============================================================
-        // Delete Comments
-        // =============================================================
-
-        function deleteModComment(commentId) {
-            Swal.fire({
-                title: 'Kommentar löschen?',
-                text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonText: 'Löschen',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: '#c62828'
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'delete_comment',
-                    comment_id: commentId
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
-                        .then(function () { location.reload(); });
-                });
-            });
-        }
-
-        // =============================================================
-        // Filter Comments by Status
-        // =============================================================
-
-        function filterCommentsByStatus(status, tabButton) {
-            // Updates active Filter Tab (only within Comments Tab)
-            document.querySelectorAll('#comment-filter-tabs .filter-tab').forEach(function (el) {
-                el.classList.remove('active');
-            });
-            tabButton.classList.add('active');
-
-            // Shows/Hides Comment Rows
-            let visibleCount = 0;
-            document.querySelectorAll('.comment-mod-row').forEach(function (row) {
-                if (status === 'all' || row.dataset.status === status) {
-                    row.style.display = '';
-                    visibleCount++;
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-
-            document.getElementById('comment-visible-count').textContent = visibleCount + ' Kommentare';
-        }
-
-
-        // =============================================================
-        // Change Comment Status (approve, reject, reset)
-        // =============================================================
-
-        function changeCommentStatus(commentId, newStatus) {
-            const labels = { approved: 'akzeptieren', rejected: 'ablehnen', pending: 'zurücksetzen' };
-
-            Swal.fire({
-                title: 'Kommentar ' + labels[newStatus] + '?',
-                showCancelButton: true,
-                confirmButtonText: 'Ja',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'update_comment',
-                    comment_id: commentId,
-                    status: newStatus
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    location.reload();
-                });
-            });
-        }
-
-
-        // =============================================================
-        // Edit Comment Content
-        // =============================================================
-
-        function editModComment(commentId, currentContent) {
-            Swal.fire({
-                title: 'Kommentar bearbeiten',
-                html:
-                    '<div style="text-align:left;">' +
-                        '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
-                        '<textarea id="swal-comment-content" class="swal2-textarea" style="margin:0;width:100%;">' + currentContent + '</textarea>' +
-                    '</div>',
-                showCancelButton: true,
-                confirmButtonText: 'Speichern',
-                cancelButtonText: 'Abbrechen',
-                confirmButtonColor: PRIMARY_COLOR,
-                preConfirm: function () {
-                    return { content: document.getElementById('swal-comment-content').value.trim() };
-                }
-            }).then(function (result) {
-                if (!result.isConfirmed) return;
-
-                apiCall({
-                    action: 'update_comment',
-                    comment_id: commentId,
-                    content: result.value.content
-                }).then(function (response) {
-                    if (response.error) {
-                        Swal.fire('Fehler', response.error, 'error');
-                        return;
-                    }
-                    Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
-                        .then(function () { location.reload(); });
-                });
-            });
-        }
-
+        const ADMIN_CONFIG = {
+            id: <?= $municipality['municipality_id'] ?>,
+            name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
+            slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
+            center: [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>],
+            zoom: <?= $municipality['default_zoom'] ?>,
+            primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
+        };
     </script>
 
+    <!-- Application Logic -->
+    <script src="js/admin.js"></script>
+
 </body>
 </html>
 
@@ -1205,7 +576,7 @@ function show_login_page($municipality, $error = null) {
                 <input type="password" name="password" placeholder="Passwort" autofocus>
                 <button type="submit"><i class="fa-solid fa-right-to-bracket"></i> Anmelden</button>
             </form>
-            <div class="back-link"><i class="fa fa-arrow-left"></i></i> <a href="index.php">Zurück zum Bürgerportal</a></div>
+            <div class="back-link"><i class="fa fa-arrow-left"></i> <a href="index.php">Zurück zum Bürgerportal</a></div>
         </div>
     </div>
 </body>
diff --git a/public/index.php b/public/index.php
index 1e7787c..1fdb22a 100644
--- a/public/index.php
+++ b/public/index.php
@@ -10,8 +10,6 @@ require_once __DIR__ . '/api/auth.php';
 
 // -----------------------------------------------------------------
 // Loads Municipality Configuration
-// ToDo's: Dynamic Loading via URL Slug once multi-tenant Routing
-// is implemented. Hardcoded Slug for now.
 // -----------------------------------------------------------------
 $pdo = get_db();
 $stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
@@ -35,7 +33,7 @@ $news_items = $stmt->fetchAll();
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bürgerbeteiligungsportal <?= htmlspecialchars($municipality['name']) ?></title>
+    <title>Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></title>
     <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
     <meta name="description" content="Bürgerbeteiligungsportal. Hinweise und Vorschläge auf der Karte eintragen.">
 
@@ -68,6 +66,10 @@ $news_items = $stmt->fetchAll();
     <!-- Application Styles -->
     <link rel="stylesheet" href="styles.css">
 
+    <!-- Shepherd.js Onboarding Tour -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/css/shepherd.css">
+
+
     <!-- ============================================================= -->
     <!-- Municipality Theme loaded from Database                       -->
     <!-- ============================================================= -->
@@ -183,17 +185,30 @@ $news_items = $stmt->fetchAll();
                         <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
                     </h2>
                     <div class="sidebar-body">
+                        <h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3>
+                        <p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p>
+                        <p>
+                            <button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}" style="font-size:0.85rem;">
+                                <i class="fa-solid fa-route"></i> Tutorial starten
+                            </button>
+                        </p>
+
                         <h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
                         <p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
 
-                        <h3><i class="fa-solid fa-plus"></i> Beitrag erstellen</h3>
-                        <p>Verwenden Sie die Zeichenwerkzeuge rechts, um Beiträge als Punkte, Linien oder Flächen zu zeichnen. Anschließend können Sie Kategorie und Beschreibung hinzufügen.</p>
+                        <h3><i class="fa-solid fa-location-dot"></i> Beitrag hinzufügen</h3>
+                        <p>Verwenden Sie die Zeichenwerkzeuge rechts, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.</p>
 
-                        <h3><i class="fa-solid fa-thumbs-up"></i> Abstimmen</h3>
-                        <p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Like/Dislike Funktion, um Ihre Meinung kundzugeben.</p>
+                        <h3><i class="fa-solid fa-thumbs-up"></i> Bewerten</h3>
+                        <p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Bewertungsfunktion, um Ihre Meinung zu äußern.</p>
+
+                        <h3><i class="fa-solid fa-comments"></i> Kommentieren</h3>
+                        <p>Gerne können Sie Ihre Meinung zu bestehenden Beiträgen auch durch die Kommentarfunktion äußern.</p>
 
                         <h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
-                        <p>Verwenden Sie die Adresssuche rechts, um bestimmte Orte auf der Karte zu finden.</p>
+                        <p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
+
+                        
                     </div>
                 </div>
 
@@ -246,7 +261,7 @@ $news_items = $stmt->fetchAll();
     <!-- ============================================================= -->
     <footer id="app-footer">
         <span class="dev-warning">
-            <i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Absprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
+            <i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
         </span>
         <div class="footer-content">
             <span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
@@ -267,7 +282,7 @@ $news_items = $stmt->fetchAll();
                 <li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li>
             </ul>
             <p style="background:#fff3cd;padding:10px;border-radius:6px;border:1px solid #ffc107;font-size:0.85rem;color:#856404;">
-                <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Dieses Bürgerbeteiligungsportal befindet sich noch in der Entwicklung und wurde nicht offiziell beauftragt.
+                <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
             </p>
             <p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p>            <div class="modal-actions">
                 <button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
@@ -342,7 +357,7 @@ $news_items = $stmt->fetchAll();
 
 
     <!-- ============================================================= -->
-    <!-- Loads JavaScript Dependencies                                       -->
+    <!-- Loads JavaScript Dependencies                                 -->
     <!-- ============================================================= -->
 
     <!-- Leaflet 1.9.4 -->
@@ -366,11 +381,18 @@ $news_items = $stmt->fetchAll();
     <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
 
+    <!-- Shepherd.js Library -->
+    <script src="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/js/shepherd.min.js"></script>
+
+    <!-- Onboarding Logic -->
+    <script src="js/onboarding.js"></script>
+
+
     <!-- ============================================================= -->
     <!-- Municipality Configuration passed to JavaScript               -->
     <!-- ============================================================= -->
     <script>
-        // Municipality Configuration from Database — used by app.js
+        // Municipality Configuration from Database
         const MUNICIPALITY = {
             id: <?= $municipality['municipality_id'] ?>,
             name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
diff --git a/public/js/admin.js b/public/js/admin.js
new file mode 100644
index 0000000..90f6b6e
--- /dev/null
+++ b/public/js/admin.js
@@ -0,0 +1,637 @@
+// =====================================================================
+// WebGIS Moderation Portal — Application Logic
+// Initializes Map Preview, loads Contributions from the API,
+// handles CRUD Workflow, sorting and filtering for Contributions,
+//  Comments and News, and manages all UI Interactions
+//
+// Depends on: ADMIN_CONFIG Object set in Moderation Page
+// =====================================================================
+
+// =====================================================================
+// Block 0: Configuration and Application State
+// =====================================================================
+
+// API Endpoint as relative Path
+const API_URL = 'api/contributions.php';
+
+// =====================================================================
+// Block 1: Page Tab Navigation
+// =====================================================================
+
+// Restores active Tab after Page Reload
+const savedTab = sessionStorage.getItem('admin_active_tab');
+if (savedTab) {
+    // Delays to ensure DOM is ready
+    setTimeout(function () {
+        const tabBtn = document.querySelector('.page-tab[onclick*="' + savedTab + '"]');
+        if (tabBtn) tabBtn.click();
+    }, 100);
+}
+
+
+// Page Tab Navigation
+function showPageTab(tabName) {
+    // Saves active Tab for Persistence after Reload
+    sessionStorage.setItem('admin_active_tab', tabName);
+
+    document.querySelectorAll('.page-tab-content').forEach(function (el) {
+        el.style.display = 'none';
+    });
+
+    // Deactivates all Tab Buttons
+    document.querySelectorAll('.page-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+
+    // Shows selected Tab and activates Button
+    document.getElementById('tab-' + tabName).style.display = 'block';
+    event.currentTarget.classList.add('active');
+}
+
+
+// =====================================================================
+// Block 2: Collapsible Rows for Contributions and Comments
+// =====================================================================
+function toggleRow(row) {
+    const wasOpen = row.classList.contains('open');
+
+    // Closes all open Rows
+    document.querySelectorAll('.contribution-row.open').forEach(function (el) {
+        el.classList.remove('open');
+    });
+
+    // Toggles clicked Row
+    if (!wasOpen) {
+        row.classList.add('open');
+
+        // Loads Map Preview if not already loaded
+        const mapDiv = row.querySelector('.detail-map');
+        if (mapDiv && !mapDiv.dataset.loaded) {
+            loadMapPreview(mapDiv);
+        }
+    }
+}
+
+
+// =====================================================================
+// Block 3: Details Slider for Maps and Photos
+// =====================================================================
+function slideDetail(contributionId, direction) {
+    const slider = document.getElementById('slider-' + contributionId);
+    if (!slider) return;
+
+    const slides = slider.querySelectorAll('.detail-slide');
+    let activeIndex = -1;
+
+    // Finds active Slide
+    slides.forEach(function (slide, i) {
+        if (slide.style.display !== 'none') activeIndex = i;
+    });
+
+    // Calculates next Slide Index
+    const nextIndex = (activeIndex + direction + slides.length) % slides.length;
+
+    // Switches Slides
+    slides.forEach(function (slide) { slide.style.display = 'none'; });
+    slides[nextIndex].style.display = 'block';
+
+    // Loads Map if switching to Map Slide
+    if (slides[nextIndex].dataset.slide === 'map') {
+        const mapDiv = slides[nextIndex].querySelector('.detail-map');
+        if (mapDiv && !mapDiv.dataset.loaded) {
+            loadMapPreview(mapDiv);
+        }
+    }
+}
+
+
+// =====================================================================
+// Block 4: Map Preview (Leaflet Mini Map per Contribution)
+// =====================================================================
+
+// Erstellt eine Leaflet-Mini-Map in einem Beitrags-Detail-Container.
+// Lädt alle Beiträge via API und zeigt die Geometrie des entsprechenden Beitrags.
+// Markiert die Map als geladen (data-loaded="true"), um doppeltes Laden zu verhindern.
+function loadMapPreview(mapDiv) {
+    const contributionId = mapDiv.dataset.contributionId;
+    
+    // Fetches all Contributions to find the Geometry
+    const formData = new FormData();
+    formData.append('action', 'read');
+    formData.append('municipality_id', ADMIN_CONFIG.id);
+    formData.append('status', 'all');
+
+    fetch(API_URL, { method: 'POST', body: formData })
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+            if (!data.features) return;
+            
+            // Finds specific Contribution
+            const feature = data.features.find(function (f) {
+                return f.properties.contribution_id == contributionId;
+            });
+
+            if (!feature) {
+                mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
+                return;
+            }
+
+            // Creates Leaflet Mini Map
+            const miniMap = L.map(mapDiv, {
+                zoomControl: false,
+                attributionControl: false,
+                dragging: true,
+                scrollWheelZoom: false
+            });
+
+            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+                maxZoom: 20
+            }).addTo(miniMap);
+
+            // Adds Geometry to Mini Map
+            const geojsonLayer = L.geoJSON(feature, {
+                style: {
+                    color: ADMIN_CONFIG.primaryColor,
+                    weight: 3,
+                    fillOpacity: 0.2
+                },
+                pointToLayer: function (f, latlng) {
+                    return L.circleMarker(latlng, {
+                        radius: 8,
+                        color: '#ffffff',
+                        weight: 2,
+                        fillColor: ADMIN_CONFIG.primaryColor,
+                        fillOpacity: 0.9
+                    });
+                }
+            }).addTo(miniMap);
+
+            // Fits Map to Geometry Bounds
+            const bounds = geojsonLayer.getBounds();
+            if (bounds.isValid()) {
+                miniMap.fitBounds(bounds, { padding: [25, 25], maxZoom: 17 });
+            } else {
+                miniMap.setView(ADMIN_CONFIG.center, 15);
+            }
+
+            mapDiv.dataset.loaded = 'true';
+        })
+        .catch(function () {
+            mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>';
+        });
+}
+
+
+// =====================================================================
+// Block 5: Contributions Filter and Sorting
+// =====================================================================
+
+// Filters Contributions
+let currentFilter = 'all';
+function filterByStatus(status, tabButton) {
+    currentFilter = status;
+
+    // Updates active Tab
+    document.querySelectorAll('.filter-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+    tabButton.classList.add('active');
+
+    // Shows or Hides Contribution Rows
+    let visibleCount = 0;
+    document.querySelectorAll('#contributions-container .contribution-row').forEach(function (row) {
+        if (status === 'all' || row.dataset.status === status) {
+            row.style.display = '';
+            visibleCount++;
+        } else {
+            row.style.display = 'none';
+        }
+    });
+    
+    // Updates Count Display
+    document.getElementById('visible-count').textContent = visibleCount + ' Beiträge';
+}
+
+
+// Sorts Contributions
+function sortContributions(sortBy) {
+    const container = document.getElementById('contributions-container');
+    const rows = Array.from(container.querySelectorAll('.contribution-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date) - new Date(b.dataset.date);
+        if (sortBy === 'category')  return a.dataset.category.localeCompare(b.dataset.category);
+        return 0;
+    });
+
+    // Reappends sorted Rows
+    rows.forEach(function (row) { container.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 6: Comments Filter and Sorting
+// =====================================================================
+
+// Filters Comments
+function filterCommentsByStatus(status, tabButton) {
+
+    // Updates active Tab
+    document.querySelectorAll('#comment-filter-tabs .filter-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+    tabButton.classList.add('active');
+    
+    // Shows or Hides Comments Rows
+    let visibleCount = 0;
+    document.querySelectorAll('.comment-mod-row').forEach(function (row) {
+        if (status === 'all' || row.dataset.status === status) {
+            row.style.display = '';
+            visibleCount++;
+        } else {
+            row.style.display = 'none';
+        }
+    });
+    // Updates Count Display
+    document.getElementById('comment-visible-count').textContent = visibleCount + ' Kommentare';
+}
+
+
+// Sorts Comments
+function sortCommentRows(sortBy) {
+    const container = document.getElementById('comments-mod-container');
+    const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc')   return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')    return new Date(a.dataset.date) - new Date(b.dataset.date);
+        if (sortBy === 'contribution') return a.dataset.contribution.localeCompare(b.dataset.contribution);
+        return 0;
+    });
+    // Reappends sorted Rows
+    rows.forEach(function (row) { container.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 7: Helper Functions
+// =====================================================================
+
+// Sends a POST request to API
+// promise-based instead of callback-based
+function apiCall(data) {
+    const formData = new FormData();
+    for (const key in data) {
+        formData.append(key, data[key]);
+    }
+
+    return fetch(API_URL, { method: 'POST', body: formData })
+        .then(function (r) { return r.json(); });
+}
+
+
+// Escapes HTML to prevent Cross-Site Scripting (XSS) in Popups and Lists
+function escapeHtml(text) {
+
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(text));
+    return div.innerHTML;
+}
+
+// =====================================================================
+// Block 8: CRUD Operations for Contributions
+// =====================================================================
+
+// STATUS: Changes Contribution Status
+function changeStatus(contributionId, newStatus) {
+    const labels = { approved: 'freigeben', rejected: 'ablehnen', pending: 'zurücksetzen' };
+
+    Swal.fire({
+        title: 'Beitrag ' + labels[newStatus] + '?',
+        showCancelButton: true,
+        confirmButtonText: 'Ja',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update',
+            contribution_id: contributionId,
+            status: newStatus
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            // Reloads Page to reflect Changes
+            location.reload();
+        });
+    });
+}
+
+
+// UPDATE: Edits existing Contributions
+function editContribution(contributionId, currentTitle, currentDescription) {
+    Swal.fire({
+        title: 'Beitrag bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Beschreibung</label>' +
+                    '<textarea id="swal-description" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentDescription) + '</textarea>' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return {
+                title: document.getElementById('swal-title').value.trim(),
+                description: document.getElementById('swal-description').value.trim()
+            };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update',
+            contribution_id: contributionId,
+            title: result.value.title,
+            description: result.value.description
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing Contributions
+function deleteContribution(contributionId) {
+    Swal.fire({
+        title: 'Beitrag löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Beitrag löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete',
+            contribution_id: contributionId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Beitrag wurde gelöscht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+// =====================================================================
+// Block 9: CRUD Operations for Comments
+// =====================================================================
+
+// STATUS: Changes Comment Status
+function changeCommentStatus(commentId, newStatus) {
+    const labels = { approved: 'akzeptieren', rejected: 'ablehnen', pending: 'zurücksetzen' };
+
+    Swal.fire({
+        title: 'Kommentar ' + labels[newStatus] + '?',
+        showCancelButton: true,
+        confirmButtonText: 'Ja',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_comment',
+            comment_id: commentId,
+            status: newStatus
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            location.reload();
+        });
+    });
+}
+
+
+// UPDATE: Edits existing Comments
+function editModComment(commentId, currentContent) {
+    Swal.fire({
+        title: 'Kommentar bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                '<textarea id="swal-comment-content" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentContent) + '</textarea>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return { content: document.getElementById('swal-comment-content').value.trim() };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_comment',
+            comment_id: commentId,
+            content: result.value.content
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing Comments
+function deleteModComment(commentId) {
+    Swal.fire({
+        title: 'Kommentar löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete_comment',
+            comment_id: commentId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// =====================================================================
+// Block 10: CRUD Operations for News
+// =====================================================================
+
+// CREATE: Submits new News Article
+function createNews() {
+    Swal.fire({
+        title: 'Neuigkeit hinzufügen',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
+                '</div>' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                    '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;" placeholder="Neuigkeit verfassen..."></textarea>' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
+                    '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="Stadtverwaltung">' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Veröffentlichen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            const title   = document.getElementById('swal-news-title').value.trim();
+            const content = document.getElementById('swal-news-content').value.trim();
+            const author  = document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung';
+            if (!title || !content) {
+                Swal.showValidationMessage('Titel und Inhalt sind Pflichtfelder.');
+                return false;
+            }
+            return { title, content, author_name: author };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'create_news',
+            municipality_id: ADMIN_CONFIG.id,
+            title: result.value.title,
+            content: result.value.content,
+            author_name: result.value.author_name
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Veröffentlicht!', 'Neuigkeit wurde veröffentlicht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// UPDATE: Edits existing News
+function editNews(newsId, currentTitle, currentContent, currentAuthor) {
+    Swal.fire({
+        title: 'Neuigkeit bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
+                '</div>' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                    '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentContent) + '</textarea>' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
+                    '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentAuthor) + '">' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return {
+                title:       document.getElementById('swal-news-title').value.trim(),
+                content:     document.getElementById('swal-news-content').value.trim(),
+                author_name: document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung'
+            };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_news',
+            news_id: newsId,
+            title: result.value.title,
+            content: result.value.content,
+            author_name: result.value.author_name
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing News
+function deleteNews(newsId) {
+    Swal.fire({
+        title: 'Neuigkeit löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete_news',
+            news_id: newsId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Neuigkeit wurde gelöscht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 468aaf8..89fb140 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -3,9 +3,7 @@
 // Initializes Leaflet Map, loads Contributions from the API,
 // handles CRUD Workflow, and manages all UI Interactions.
 //
-// Depends on: MUNICIPALITY Object set in Main Page, Leaflet, Geoman,
-//             Sidebar, Geocoder, PolylineMeasure, Fullscreen, 
-//             and SweetAlert2 Plugins.
+// Depends on: MUNICIPALITY Object set in Citizen Portal
 // =====================================================================
 
 
@@ -980,7 +978,15 @@ function showInfoModal() {
               '<strong>' + MUNICIPALITY.name + '</strong> mitzuwirken.</p>' +
               '<p style="text-align:left;line-height:1.6;">Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
               'mithilfe der Zeichenwerkzeuge auf der Karte ein.</p>',
-        confirmButtonColor: MUNICIPALITY.primaryColor
+        showDenyButton: true,
+        confirmButtonText: 'Schließen',
+        denyButtonText: '<i class="fa-solid fa-route"></i> Tutorial starten',
+        confirmButtonColor: MUNICIPALITY.primaryColor,
+        denyButtonColor: '#546E7A'
+    }).then(function (result) {
+        if (result.isDenied && typeof restartOnboarding === 'function') {
+            restartOnboarding();
+        }
     });
 }
 
diff --git a/public/js/onboarding.js b/public/js/onboarding.js
new file mode 100644
index 0000000..b517dfd
--- /dev/null
+++ b/public/js/onboarding.js
@@ -0,0 +1,277 @@
+// =====================================================================
+// WebGIS Citizen Participation Portal — Onboarding Tour
+// Guides Users through the Participation Portal
+// =====================================================================
+
+
+// =================================================================
+// Block 1: Onboarding Configuration
+// =================================================================
+
+// ONBOARDING_MODE — Controls when the Tutorial is shown:
+const ONBOARDING_MODE = 'once';
+//     'once'    — Shown on first Visit, stored in localStorage
+//     'session' — Shown per Browser Session, stored in sessionStorage
+//     'always'  — Shows always, nothing stored
+
+// Prevents double Initialization
+let onboardingStarted = false;
+
+
+// =================================================================
+// Block 2: Tour Initialization
+// =================================================================
+
+function initOnboardingTour() {
+
+    // Checks if Tutorial should be shown based on Onboarding Mode
+    if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+    if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+
+    // Waits for Welcome and Login Modals to be closed
+    waitForModalsToClose(function () {
+        setTimeout(startTour, 600);
+    });
+}
+
+
+// =================================================================
+// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
+// =================================================================
+
+function waitForModalsToClose(callback) {
+    const welcomeModal = document.getElementById('welcome-modal');
+    const loginModal = document.getElementById('login-modal');
+
+    const checkInterval = setInterval(function () {
+        const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
+        const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
+
+        if (welcomeHidden && loginHidden) {
+            clearInterval(checkInterval);
+            callback();
+        }
+    }, 300);
+
+    // Safety Timeout
+    setTimeout(function () {
+        clearInterval(checkInterval);
+        callback();
+    }, 30000);
+}
+
+
+// =================================================================
+// Block 4: Tour Definition
+// =================================================================
+
+function startTour() {
+    // Prevents double Start
+    if (onboardingStarted) return;
+    onboardingStarted = true;
+
+    const tour = new Shepherd.Tour({
+        useModalOverlay: true,
+        defaultStepOptions: {
+            cancelIcon: { enabled: true },
+            scrollTo: false,
+            classes: 'onboarding-step',
+            popperOptions: {
+                modifiers: [
+                    { name: 'offset', options: { offset: [0, 14] } }
+                ]
+            }
+        }
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 1: Welcome
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'welcome',
+        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
+        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+              '<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+        buttons: [
+            {
+                text: 'Überspringen',
+                action: tour.cancel,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 2: Drawing Tools
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'drawing-tools',
+        title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
+        text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
+        attachTo: {
+            element: '.leaflet-pm-toolbar',
+            on: 'left'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
+            });
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 3: Address Search
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'address-search',
+        title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
+        text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
+        attachTo: {
+            element: '.leaflet-control-geocoder',
+            on: 'left'
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 4: Layer Control
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'layer-control',
+        title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
+        text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
+        attachTo: {
+            element: '.leaflet-control-layers',
+            on: 'left'
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 5: Sidebar
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'sidebar',
+        title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
+        text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
+        attachTo: {
+            element: '#sidebar',
+            on: 'right'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
+            });
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Completion and Cancellation
+    // -----------------------------------------------------------------
+    tour.on('complete', function () {
+        markOnboardingDone();
+        onboardingStarted = false;
+    });
+
+    tour.on('cancel', function () {
+        markOnboardingDone();
+        onboardingStarted = false;
+    });
+
+    tour.start();
+}
+
+
+// =================================================================
+// Marks Onboarding as completed
+// =================================================================
+
+function markOnboardingDone() {
+    if (ONBOARDING_MODE === 'once') {
+        localStorage.setItem('webgis_onboarding_done', 'true');
+    } else if (ONBOARDING_MODE === 'session') {
+        sessionStorage.setItem('webgis_onboarding_done', 'true');
+    }
+}
+
+
+// =================================================================
+// Manual Tour Restart
+// =================================================================
+
+function restartOnboarding() {
+    localStorage.removeItem('webgis_onboarding_done');
+    sessionStorage.removeItem('webgis_onboarding_done');
+    onboardingStarted = false;
+    startTour();
+}
+
+
+// =================================================================
+// Auto-Start on Page Load
+// =================================================================
+
+initOnboardingTour();
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index a967582..1772fe7 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -764,6 +764,123 @@ select.form-input { cursor: pointer; }
 .popup-comment-submit:hover { filter: brightness(1.15); }
 
 
+/* -----------------------------------------------------------------
+   4.9 Onboarding Tour (Shepherd.js Overrides)
+   ----------------------------------------------------------------- */
+
+/* Step Container */
+.shepherd-element {
+    max-width: 340px;
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
+    font-family: var(--font-body) !important;
+    z-index: 2100 !important;
+    overflow: hidden;
+}
+
+.shepherd-element .shepherd-content {
+    border-radius: 12px !important;
+    padding: 0;
+    overflow: hidden;
+}
+
+/* Header */
+.shepherd-element .shepherd-header {
+    background: var(--color-primary) !important;
+    padding: 14px 20px !important;
+    border-radius: 0 !important;
+}
+
+.shepherd-element .shepherd-title {
+    color: white !important;
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+    font-family: var(--font-body) !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+}
+
+.shepherd-element .shepherd-cancel-icon {
+    color: white !important;
+    opacity: 0.7;
+    font-size: 1.2rem;
+}
+
+.shepherd-element .shepherd-cancel-icon:hover { opacity: 1; }
+
+/* Body Text */
+.shepherd-element .shepherd-text {
+    padding: 16px 20px !important;
+    font-size: 0.88rem !important;
+    line-height: 1.6 !important;
+    color: var(--color-text) !important;
+}
+
+/* Footer Buttons */
+.shepherd-element .shepherd-footer {
+    padding: 0 20px 16px 20px !important;
+    border-top: none !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+    gap: 8px !important;
+}
+
+.shepherd-element .shepherd-button {
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 8px 16px !important;
+    font-size: 0.85rem !important;
+    font-weight: 600 !important;
+    font-family: var(--font-body) !important;
+    cursor: pointer !important;
+    transition: filter 150ms ease !important;
+}
+
+.shepherd-element .shepherd-button:hover { filter: brightness(1.1); }
+
+/* Primary Button */
+.shepherd-button-primary {
+    background: var(--color-primary) !important;
+    color: white !important;
+}
+
+/* Secondary Button */
+.shepherd-button-secondary {
+    background: var(--color-bg) !important;
+    color: var(--color-text) !important;
+    border: 1px solid var(--color-border) !important;
+}
+
+.shepherd-button-secondary:hover {
+    background: var(--color-border) !important;
+}
+
+/* Modal Overlay */
+.shepherd-modal-overlay-container {
+    z-index: 2050 !important;
+}
+
+/* Arrow Colors  */
+.shepherd-arrow:before {
+    background: var(--color-primary) !important;
+}
+
+/* Welcome Step */
+.shepherd-element:not([data-popper-placement]) {
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .shepherd-element { max-width: 300px !important; }
+    .shepherd-element .shepherd-text { font-size: 0.82rem !important; }
+}
+
+
 /* =================================================================
    SECTION 5: Admin-specific Styles (admin.php)
    ================================================================= */