contribution sort control in sidebar

public/admin.php

@@ -228,7 +228,7 @@ $counts['total'] = count($all_contributions);
             <div id="contributions-container">
                 <?php if (empty($all_contributions)): ?>
                     <div class="empty-state">
-                        <i class="fa-solid fa-inbox" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
+                        <i class="fa-solid fa-inbox"></i>
                         Noch keine Beiträge vorhanden.
                     </div>
                 <?php else: ?>
@@ -381,7 +381,7 @@ $counts['total'] = count($all_contributions);
             <div id="comments-mod-container">
                 <?php if (empty($all_comments)): ?>
                     <div class="empty-state">
-                        <i class="fa-solid fa-comments" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
+                        <i class="fa-solid fa-comments"></i>
                         Noch keine Kommentare vorhanden.
                     </div>
                 <?php else: ?>
@@ -409,9 +409,9 @@ $counts['total'] = count($all_contributions);
 
                             <!-- Expanded Detail -->
                             <div class="contribution-row-detail">
-                                <div style="padding:12px 0;">
+                                <div>
                                     <!-- Comment Content -->
-                                    <div style="font-size:0.9rem;line-height:1.6;color:var(--color-text);margin-bottom:12px;">
+                                    <div class="detail-block">
                                         <?= nl2br(htmlspecialchars($comment['content'])) ?>
                                     </div>
                                     <!-- Meta -->
@@ -457,25 +457,37 @@ $counts['total'] = count($all_contributions);
         <!-- News Article Tab                                      -->
         <!-- ========================================================= -->
         <div id="tab-news" class="page-tab-content" style="display:none;">
-            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
+
-                <h2 style="margin:0;border:none;padding:0;"><i class="fa-solid fa-newspaper"></i> Neuigkeiten</h2>
+            <!-- Filter -->
-                <button class="btn btn-approve" onclick="createNews()">
+            <div class="filter-tabs" id="news-filter-tabs">
-                    <i class="fa-solid fa-plus"></i> Nachricht hinzufügen
+                    <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
-                </button>
+                        Alle <span class="tab-count"><?= count($news_items) ?></span>
+                    </button>
+                </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="news-visible-count"><?= count($news_items) ?> Neuigkeiten</span>
+                <div style="display:flex;gap:var(--space-sm);align-items:center;">
+                    <select onchange="sortNewsRows(this.value)">
+                        <option value="date-desc">Neueste zuerst</option>
+                        <option value="date-asc">Älteste zuerst</option>
+                    </select>
+                </div>
             </div>
 
             <?php if (empty($news_items)): ?>
                 <div class="empty-state">
-                    <i class="fa-solid fa-newspaper" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
+                    <i class="fa-solid fa-newspaper"></i>
                     Noch keine Neuigkeiten veröffentlicht.
                 </div>
             <?php else: ?>
                 <?php foreach ($news_items as $news): ?>
-                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>">
+                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>" data-date="<?= $news['published_at'] ?>">
                         <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
                             <div class="contribution-row-summary">
                                 <span class="title"><?= htmlspecialchars($news['title']) ?></span>
-                                <span style="font-size:0.8rem;color:#999;">
+                                <span class="detail-block-meta">
                                     <?= date('d.m.Y', strtotime($news['published_at'])) ?>
                                     · <?= htmlspecialchars($news['author_name']) ?>
                                 </span>
@@ -483,7 +495,7 @@ $counts['total'] = count($all_contributions);
                             <i class="fa-solid fa-chevron-down collapse-icon"></i>
                         </div>
                         <div class="contribution-row-detail">
-                            <div style="padding:12px 0;font-size:0.9rem;line-height:1.6;color:#5a5a7a;">
+                            <div class="detail-block">
                                 <?= nl2br(htmlspecialchars($news['content'])) ?>
                             </div>
                             <div class="action-buttons">
@@ -498,6 +510,12 @@ $counts['total'] = count($all_contributions);
                     </div>
                 <?php endforeach; ?>
             <?php endif; ?>
+
+            <div class="tab-footer-action">
+                    <button class="btn btn-approve" onclick="createNews()">
+                        <i class="fa-solid fa-plus"></i> Neuigkeit hinzufügen
+                    </button>
+            </div>
         </div>
 
 
@@ -520,6 +538,74 @@ $counts['total'] = count($all_contributions);
 
     </div>
 
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal (Admin)                               -->
+    <!-- ============================================================= -->
+    <div id="admin-edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-edit-title">Titel</label>
+                <input type="text" id="admin-edit-title" class="form-input">
+            </div>
+            <div class="form-group">
+                <label for="admin-edit-description">Beschreibung</label>
+                <textarea id="admin-edit-description" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-edit-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-edit-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Edit Comment Modal (Admin)                                    -->
+    <!-- ============================================================= -->
+    <div id="admin-comment-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Kommentar bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-comment-content">Inhalt</label>
+                <textarea id="admin-comment-content" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-comment-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-comment-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminComment()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Create/Edit News Modal (Admin)                                -->
+    <!-- ============================================================= -->
+    <div id="admin-news-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2 id="admin-news-modal-title"><i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen</h2>
+            <div class="form-group">
+                <label for="admin-news-title">Titel</label>
+                <input type="text" id="admin-news-title" class="form-input" placeholder="Titel der Neuigkeit">
+            </div>
+            <div class="form-group">
+                <label for="admin-news-content">Inhalt</label>
+                <textarea id="admin-news-content" class="form-input" rows="4" placeholder="Neuigkeit verfassen..."></textarea>
+            </div>
+            <div class="form-group">
+                <label for="admin-news-author">Autor</label>
+                <input type="text" id="admin-news-author" class="form-input" value="Stadtverwaltung">
+            </div>
+            <input type="hidden" id="admin-news-id">
+            <input type="hidden" id="admin-news-mode">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-news-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminNews()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
 
     <!-- ============================================================= -->
     <!-- Loads JavaScript Dependencies                                 -->

public/index.php

@@ -131,9 +131,9 @@ $news_items = $stmt->fetchAll();
             <div class="leaflet-sidebar-tabs">
                 <ul role="tablist">
                     <li><a href="#tab-home" role="tab"><i class="fa-solid fa-house"></i></a></li>
-                    <li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
                     <li><a href="#tab-list" role="tab"><i class="fa-solid fa-list"></i></a></li>
                     <li><a href="#tab-news" role="tab"><i class="fa-solid fa-newspaper"></i></a></li>
+                    <li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
                 </ul>
             </div>
 
@@ -148,17 +148,12 @@ $news_items = $stmt->fetchAll();
                     </h2>
                     <div class="sidebar-body">
                         <p>Willkommen beim Bürgerbeteiligungsportal <strong><?= htmlspecialchars($municipality['name']) ?></strong>.</p>
-                        <p>Verwenden Sie die Karte, um Hinweise und Aufgaben für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge der Bürgerschaft zu betrachten.</p>
+                        <p>Verwenden Sie die Karte, um Hinweise für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge zu betrachten, zu bewerten und zu kommentieren.</p>
 
                         <h3>Kategorien</h3>
                         <div id="category-filter">
                             <!-- Category Filter Checkboxes — populated by app.js -->
                         </div>
-
-                        <h3>Statistik</h3>
-                        <div id="stats-container">
-                            <!-- Contribution Statistics — populated by app.js -->
-                        </div>
                     </div>
                 </div>
 
@@ -172,13 +167,58 @@ $news_items = $stmt->fetchAll();
                         <div class="list-search">
                             <input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
                         </div>
+                        <div class="list-controls">
+                            <select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                                <option value="category">Nach Kategorie</option>
+                                <option value="likes">Meiste Bewertungen</option>
+                                <option value="comments">Meiste Kommentare</option>
+                            </select>
+                            <span id="list-count" class="list-count"></span>
+                        </div>
                         <div id="contributions-list">
                             <!-- Contribution Cards — populated by app.js -->
                         </div>
                     </div>
+                </div>            
+
+                <!-- News Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-news">
+                    <h2 class="leaflet-sidebar-header">
+                        Neuigkeiten
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <!-- News Search -->
+                        <div class="list-search">
+                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
+                        </div>
+
+                        <!-- News Items Container -->
+                        <div id="news-list">
+                            <?php if (empty($news_items)): ?>
+                                <p class="empty-state">Noch keine Neuigkeiten veröffentlicht.</p>
+                            <?php else: ?>
+                                <?php foreach ($news_items as $news): ?>
+                                    <div class="news-item"
+                                         data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                         data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                         data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
+                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
+                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                                        <span class="news-date">
+                                            <?= htmlspecialchars($news['author_name']) ?>
+                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+                            <?php endif; ?>
+                        </div>
+                    </div>
                 </div>
 
-                <!-- Help Tab -->
+                    <!-- Help Tab -->
                 <div class="leaflet-sidebar-pane" id="tab-help">
                     <h2 class="leaflet-sidebar-header">
                         Hilfe
@@ -188,7 +228,7 @@ $news_items = $stmt->fetchAll();
                         <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;">
+                            <button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}">
                                 <i class="fa-solid fa-route"></i> Tutorial starten
                             </button>
                         </p>
@@ -206,44 +246,7 @@ $news_items = $stmt->fetchAll();
                         <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 schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
+                        <p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>         
-
-                        
-                    </div>
-                </div>
-
-                <!-- News Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-news">
-                    <h2 class="leaflet-sidebar-header">
-                        Neuigkeiten
-                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
-                    </h2>
-                    <div class="sidebar-body">
-                        <!-- News Search -->
-                        <div class="list-search">
-                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
-                        </div>
-
-                        <!-- News Items Container -->
-                        <div id="news-list">
-                            <?php if (empty($news_items)): ?>
-                                <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
-                            <?php else: ?>
-                                <?php foreach ($news_items as $news): ?>
-                                    <div class="news-item"
-                                         data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
-                                         data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
-                                         data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
-                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
-                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
-                                        <span class="news-date">
-                                            <?= htmlspecialchars($news['author_name']) ?>
-                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
-                                        </span>
-                                    </div>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                        </div>
                     </div>
                 </div>
 
@@ -281,7 +284,7 @@ $news_items = $stmt->fetchAll();
                 <li>Hinweise und Verbesserungsvorschläge für die Stadtverwaltung hinzufügen</li>
                 <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;">
+            <p class="dev-notice">
                 <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">
@@ -316,7 +319,7 @@ $news_items = $stmt->fetchAll();
     <!-- ============================================================= -->
     <div id="create-modal" class="modal-overlay" style="display:none;">
         <div class="modal-content">
-            <h2><i class="fa-solid fa-plus-circle"></i> Beitrag</h2>
+            <h2><i class="fa-solid fa-pencil"></i> Beitrag hinzufügen</h2>
  
             <div class="form-group">
                 <label for="create-category">Kategorie</label>
@@ -355,6 +358,33 @@ $news_items = $stmt->fetchAll();
         </div>
     </div>
 
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal                                       -->
+    <!-- ============================================================= -->
+    <div id="edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+
+            <div class="form-group">
+                <label for="edit-title">Titel</label>
+                <input type="text" id="edit-title" class="form-input">
+            </div>
+
+            <div class="form-group">
+                <label for="edit-description">Beschreibung</label>
+                <textarea id="edit-description" class="form-input" rows="4"></textarea>
+            </div>
+
+            <input type="hidden" id="edit-contribution-id">
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
 
     <!-- ============================================================= -->
     <!-- Loads JavaScript Dependencies                                 -->

public/js/admin.js

@@ -132,7 +132,7 @@ function loadMapPreview(mapDiv) {
             });
 
             if (!feature) {
-                mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
+                mapDiv.innerHTML = '<div class="empty-state">Geometrie nicht gefunden.</div>';
                 return;
             }
 
@@ -177,7 +177,7 @@ function loadMapPreview(mapDiv) {
             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>';
+            mapDiv.innerHTML = '<div class="empty-state">Karte nicht verfügbar.</div>';
         });
 }
 
@@ -275,7 +275,26 @@ function sortCommentRows(sortBy) {
 
 
 // =====================================================================
-// Block 7: Helper Functions
+// Block 7: News Filter and Sorting
+// =====================================================================
+
+// Sorts News
+function sortNewsRows(sortBy) {
+    var container = document.getElementById('tab-news');
+    var rows = Array.from(container.querySelectorAll('.contribution-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date || 0) - new Date(a.dataset.date || 0);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date || 0) - new Date(b.dataset.date || 0);
+        return 0;
+    });
+
+    rows.forEach(function (row) { row.parentNode.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 8: Helper Functions
 // =====================================================================
 
 // Sends a POST request to API
@@ -300,8 +319,24 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
+
+// Closes Admin Modals by ID
+function closeAdminModal(modalId) {
+    document.getElementById(modalId).style.display = 'none';
+}
+
+// Closes Admin Modals on Escape Key
+document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.modal-overlay').forEach(function (modal) {
+            modal.style.display = 'none';
+        });
+    }
+});
+
+
 // =====================================================================
-// Block 8: CRUD Operations for Contributions
+// Block 9: CRUD Operations for Contributions
 // =====================================================================
 
 // STATUS: Changes Contribution Status
@@ -335,45 +370,36 @@ function changeStatus(contributionId, newStatus) {
 
 // UPDATE: Edits existing Contributions
 function editContribution(contributionId, currentTitle, currentDescription) {
-    Swal.fire({
+    document.getElementById('admin-edit-id').value = contributionId;
-        title: 'Beitrag bearbeiten',
+    document.getElementById('admin-edit-title').value = currentTitle;
-        html:
+    document.getElementById('admin-edit-description').value = currentDescription;
-            '<div style="text-align:left;">' +
+    document.getElementById('admin-edit-modal').style.display = 'flex';
-                '<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({
+// Submits Edit from Custom Modal
-            action: 'update',
+function submitAdminEdit() {
-            contribution_id: contributionId,
+    var id = document.getElementById('admin-edit-id').value;
-            title: result.value.title,
+    var title = document.getElementById('admin-edit-title').value.trim();
-            description: result.value.description
+    var description = document.getElementById('admin-edit-description').value.trim();
-        }).then(function (response) {
+
-            if (response.error) {
+    if (!title) {
-                Swal.fire('Fehler', response.error, 'error');
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
-                return;
+        return;
-            }
+    }
-            Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+
-                .then(function () { location.reload(); });
+    apiCall({
-        });
+        action: 'update',
+        contribution_id: id,
+        title: title,
+        description: description
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-edit-modal');
+        Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -387,7 +413,7 @@ function deleteContribution(contributionId) {
         showCancelButton: true,
         confirmButtonText: 'Beitrag löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -406,7 +432,7 @@ function deleteContribution(contributionId) {
 }
 
 // =====================================================================
-// Block 9: CRUD Operations for Comments
+// Block 10: CRUD Operations for Comments
 // =====================================================================
 
 // STATUS: Changes Comment Status
@@ -439,35 +465,33 @@ function changeCommentStatus(commentId, newStatus) {
 
 // UPDATE: Edits existing Comments
 function editModComment(commentId, currentContent) {
-    Swal.fire({
+    document.getElementById('admin-comment-id').value = commentId;
-        title: 'Kommentar bearbeiten',
+    document.getElementById('admin-comment-content').value = currentContent;
-        html:
+    document.getElementById('admin-comment-modal').style.display = 'flex';
-            '<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({
+// Submits Comment Edit from Custom Modal
-            action: 'update_comment',
+function submitAdminComment() {
-            comment_id: commentId,
+    var id = document.getElementById('admin-comment-id').value;
-            content: result.value.content
+    var content = document.getElementById('admin-comment-content').value.trim();
-        }).then(function (response) {
+
-            if (response.error) {
+    if (!content) {
-                Swal.fire('Fehler', response.error, 'error');
+        Swal.fire('Inhalt fehlt', 'Bitte geben Sie einen Inhalt ein.', 'warning');
-                return;
+        return;
-            }
+    }
-            Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+
-                .then(function () { location.reload(); });
+    apiCall({
-        });
+        action: 'update_comment',
+        comment_id: id,
+        content: content
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-comment-modal');
+        Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -481,7 +505,7 @@ function deleteModComment(commentId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -501,110 +525,71 @@ function deleteModComment(commentId) {
 
 
 // =====================================================================
-// Block 10: CRUD Operations for News
+// Block 11: CRUD Operations for News
 // =====================================================================
 
-// CREATE: Submits new News Article
+// CREATE: Creates News
 function createNews() {
-    Swal.fire({
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen';
-        title: 'Neuigkeit hinzufügen',
+    document.getElementById('admin-news-id').value = '';
-        html:
+    document.getElementById('admin-news-mode').value = 'create';
-            '<div style="text-align:left;">' +
+    document.getElementById('admin-news-title').value = '';
-                '<div style="margin-bottom:12px;">' +
+    document.getElementById('admin-news-content').value = '';
-                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+    document.getElementById('admin-news-author').value = 'Stadtverwaltung';
-                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
+    document.getElementById('admin-news-modal').style.display = 'flex';
-                '</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({
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-pen"></i> Neuigkeit bearbeiten';
-        title: 'Neuigkeit bearbeiten',
+    document.getElementById('admin-news-id').value = newsId;
-        html:
+    document.getElementById('admin-news-mode').value = 'edit';
-            '<div style="text-align:left;">' +
+    document.getElementById('admin-news-title').value = currentTitle;
-                '<div style="margin-bottom:12px;">' +
+    document.getElementById('admin-news-content').value = currentContent;
-                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+    document.getElementById('admin-news-author').value = currentAuthor;
-                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
+    document.getElementById('admin-news-modal').style.display = 'flex';
-                '</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({
+// Submits News from Custom Modal (Create or Edit)
+function submitAdminNews() {
+    var mode = document.getElementById('admin-news-mode').value;
+    var title = document.getElementById('admin-news-title').value.trim();
+    var content = document.getElementById('admin-news-content').value.trim();
+    var author = document.getElementById('admin-news-author').value.trim() || 'Stadtverwaltung';
+
+    if (!title || !content) {
+        Swal.fire('Pflichtfelder', 'Titel und Inhalt sind Pflichtfelder.', 'warning');
+        return;
+    }
+
+    var data;
+    if (mode === 'create') {
+        data = {
+            action: 'create_news',
+            municipality_id: ADMIN_CONFIG.id,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    } else {
+        data = {
             action: 'update_news',
-            news_id: newsId,
+            news_id: document.getElementById('admin-news-id').value,
-            title: result.value.title,
+            title: title,
-            content: result.value.content,
+            content: content,
-            author_name: result.value.author_name
+            author_name: author
-        }).then(function (response) {
+        };
-            if (response.error) {
+    }
-                Swal.fire('Fehler', response.error, 'error');
+
-                return;
+    apiCall(data).then(function (response) {
-            }
+        if (response.error) {
-            Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
+            Swal.fire('Fehler', response.error, 'error');
-                .then(function () { location.reload(); });
+            return;
-        });
+        }
+        closeAdminModal('admin-news-modal');
+        var msg = mode === 'create' ? 'Neuigkeit wurde veröffentlicht.' : 'Neuigkeit wurde aktualisiert.';
+        Swal.fire('Gespeichert!', msg, 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -618,7 +603,7 @@ function deleteNews(newsId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 

public/js/app.js

@@ -88,9 +88,9 @@ basemapCartoDB.addTo(map);
 
 // Layer Control
 const basemaps = {
-    '<i class="fa-solid fa-map" style="color:#404040;"></i> Hintergrundkarte (farbe)': basemapOSM,
+    // 'Hintergrundkarte': basemapOSM,
-    '<i class="fa-solid fa-map" style="color:#404040;"></i> Hintergrundkarte (grau)': basemapCartoDB,
+    'Hintergrundkarte': basemapCartoDB,
-    '<i class="fa-solid fa-satellite" style="color:#404040;"></i> Satellitenbild': basemapSatellite,
+    'Satellitenbild': basemapSatellite,
 };
 
 const overlays = {};  // Populated later with Contribution Layers
@@ -100,6 +100,16 @@ const layerControl = L.control.layers(basemaps, overlays, {
     collapsed: true
 }).addTo(map);
 
+// Adds styled Header to Layer Control Dropdown
+var layerControlContainer = layerControl.getContainer();
+var layerList = layerControlContainer.querySelector('.leaflet-control-layers-list');
+if (layerList) {
+    var header = document.createElement('div');
+    header.className = 'layer-control-header';
+    header.innerHTML = '<i class="fa-solid fa-layer-group"></i> Layerauswahl';
+    layerList.parentNode.insertBefore(header, layerList);
+}
+
 
 // =====================================================================
 // Block 4: Map Controls
@@ -111,11 +121,11 @@ L.control.zoom({
 }).addTo(map);
 
 // Scale Bar
-L.control.scale({
+// L.control.scale({
-    position: 'bottomright',
+//     position: 'bottomright',
-    maxWidth: 200,
+//     maxWidth: 200,
-    imperial: false
+//     imperial: false
-}).addTo(map);
+// }).addTo(map);
 
 // Fullscreen Button
 L.control.fullscreen({
@@ -220,6 +230,21 @@ sidebar = L.control.sidebar({
     position: 'left'
 }).addTo(map);
 
+// Hides Map Controls on Mobile while Sidebar is open
+sidebar.on('content', function () {
+    if (window.innerWidth < 769) {
+        document.querySelectorAll('.leaflet-top.leaflet-right').forEach(function (el) {
+            el.style.display = 'none';
+        });
+    }
+});
+
+sidebar.on('closing', function () {
+    document.querySelectorAll('.leaflet-top.leaflet-right').forEach(function (el) {
+        el.style.display = '';
+    });
+});
+
 
 // =====================================================================
 // Block 6: Geoman Drawing Tools and CRUD Trigger
@@ -243,6 +268,40 @@ map.pm.addControls({
 
 map.pm.setLang('de');
 
+// Overwrites Geoman German Translations for User-friendly Labels
+map.pm.setLang('custom', {
+    tooltips: {
+        placeMarker: 'Punkt setzen mit Klick',
+        firstVertex: 'Ersten Punkt setzen mit Klick',
+        continueLine: 'Nächsten Punkt setzen mit Klick',
+        finishLine: 'Beenden mit Klick auf letzten Punkt',
+        finishPoly: 'Beenden mit Klick auf ersten Punkt',
+        finishRect: 'Beenden mit Klick'
+    },
+    actions: {
+        finish: 'Beenden',
+        cancel: 'Abbrechen',
+        removeLastVertex: 'Letzten Punkt löschen'
+    },
+    buttonTitles: {
+        drawMarkerButton: 'Punkt zeichnen',
+        drawPolyButton: 'Fläche zeichnen',
+        drawLineButton: 'Linie zeichnen',
+        drawCircleButton: 'Kreis zeichnen',
+        drawRectButton: 'Rechteck zeichnen',
+        editButton: 'Objekte bearbeiten',
+        dragButton: 'Objekte verschieben',
+        cutButton: 'Objekte ausschneiden',
+        deleteButton: 'Objekte löschen',
+        drawCircleMarkerButton: 'Kreismarker zeichnen',
+        snappingButton: 'Einrasten',
+        pinningButton: 'Fixieren',
+        rotateButton: 'Objekte drehen',
+        drawTextButton: 'Text zeichnen'
+    }
+});
+
+
 // Captures drawn Geometry and opens the Create Modal
 map.on('pm:create', function (e) {
     const geojson = e.layer.toGeoJSON().geometry;
@@ -343,10 +402,10 @@ function loadContributions() {
             onEachFeature: bindFeaturePopup
         }).addTo(map);
 
-        layerControl.addOverlay(contributionsLayer, '<i class="fa-solid fa-map-pin" style="color:#C00000;"></i> Beiträge');
+        layerControl.addOverlay(contributionsLayer, 'Bürgerbeiträge');
         // Update Sidebar List and Statistics
         updateContributionsList();
-        updateStatistics();
+        buildCategoryFilter();
     });
 }
 
@@ -473,11 +532,25 @@ function buildPopupHtml(feature) {
 function bindFeaturePopup(feature, layer) {
     const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other;
 
-    // Dynamic Popup — rebuilt every Time the Popup opens
+    // Popup Options — Mobile narrower with Header/Footer Padding
-    layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 });
+    var mobile = window.innerWidth < 769;
+    var opts = {
+        maxWidth: mobile ? 280 : 320,
+        minWidth: mobile ? 200 : 240,
+        maxHeight: mobile ? 280 : 400,
+        autoPanPaddingTopLeft:     L.point(mobile ? 50 : 75, mobile ? 75 : 75),
+        autoPanPaddingBottomRight: L.point(mobile ? 60 : 85, mobile ? 50 : 75),
+        className: 'contribution-popup'
+    };
 
-    // Loads Comments when Popup opens
+    // Dynamic Popup — rebuilt every Time the Popup opens
+    layer.bindPopup(function () { return buildPopupHtml(feature); }, opts);
+
+    // Closes Sidebar on Mobile and loads Comments when Popup opens
     layer.on('popupopen', function () {
+        if (window.innerWidth < 769) {
+            sidebar.close();
+        }
         loadComments(feature.properties.contribution_id);
     });
 
@@ -580,58 +653,55 @@ function closeCreateModal() {
 }
 
 // UPDATE: Edits existing Contributions
+// UPDATE: Opens Edit Modal for existing Contributions
 function editContribution(contributionId) {
-    // Finds Contribution in local Data
     const contribution = contributionsData.find(function (f) {
         return f.properties.contribution_id === contributionId;
     });
-
     if (!contribution) return;
 
     const props = contribution.properties;
+    document.getElementById('edit-contribution-id').value = contributionId;
+    document.getElementById('edit-title').value = props.title;
+    document.getElementById('edit-description').value = props.description || '';
+    document.getElementById('edit-modal').style.display = 'flex';
+}
 
-    Swal.fire({
+// Submits Edit from Custom Modal
-        title: 'Beitrag bearbeiten',
+function submitEdit() {
-        html:
+    const contributionId = document.getElementById('edit-contribution-id').value;
-            '<div style="text-align:left;">' +
+    const title = document.getElementById('edit-title').value.trim();
-                '<div style="margin-bottom:12px;">' +
+    const description = document.getElementById('edit-description').value.trim();
-                    '<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(props.title) + '">' +
+    if (!title) {
-                '</div>' +
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
-                '<div>' +
+        return;
-                    '<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(props.description || '') + '</textarea>' +
+
-                '</div>' +
+    apiCall({
-            '</div>',
+        action: 'update',
-        showCancelButton: true,
+        contribution_id: contributionId,
-        confirmButtonText: 'Speichern',
+        title: title,
-        cancelButtonText: 'Abbrechen',
+        description: description
-        confirmButtonColor: MUNICIPALITY.primaryColor,
+    }, function (response) {
-        preConfirm: function () {
+        if (response.error) {
-            return {
+            Swal.fire('Fehler', response.error, 'error');
-                title: document.getElementById('swal-title').value.trim(),
+            return;
-                description: document.getElementById('swal-description').value.trim()
-            };
         }
-    }).then(function (result) {
+        closeEditModal();
-        if (!result.isConfirmed) return;
+        Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
-
+        loadContributions();
-        apiCall({
-            action: 'update',
-            contribution_id: contributionId,
-            title: result.value.title,
-            description: result.value.description
-        }, function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
-            loadContributions();
-        });
     });
 }
 
+// Closes Edit Modal
+function closeEditModal() {
+    document.getElementById('edit-modal').style.display = 'none';
+    document.getElementById('edit-contribution-id').value = '';
+    document.getElementById('edit-title').value = '';
+    document.getElementById('edit-description').value = '';
+}
+
 // DELETE: Deletes existing Contributions
 function deleteContribution(contributionId) {
     Swal.fire({
@@ -641,7 +711,7 @@ function deleteContribution(contributionId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -759,14 +829,28 @@ function updateContributionsList() {
         return matchesCategory && matchesSearch;
     });
 
-    // Sorts by Date (newest first)
+    // Sorts by selected Option
+    var sortBy = document.getElementById('list-sort') ? document.getElementById('list-sort').value : 'date-desc';
     filtered.sort(function (a, b) {
-        return new Date(b.properties.created_at) - new Date(a.properties.created_at);
+        if (sortBy === 'date-desc')  return new Date(b.properties.created_at) - new Date(a.properties.created_at);
+        if (sortBy === 'date-asc')   return new Date(a.properties.created_at) - new Date(b.properties.created_at);
+        if (sortBy === 'likes')      return b.properties.likes_count - a.properties.likes_count;
+        if (sortBy === 'comments')   return (b.properties.comment_count || 0) - (a.properties.comment_count || 0);
+        if (sortBy === 'category') {
+            var catA = (CATEGORIES[a.properties.category] || CATEGORIES.other).label;
+            var catB = (CATEGORIES[b.properties.category] || CATEGORIES.other).label;
+            return catA.localeCompare(catB);
+        }
+        return 0;
     });
 
+    // Updates Count Display
+    var countEl = document.getElementById('list-count');
+    if (countEl) countEl.textContent = filtered.length + ' Beiträge';
+
     // Builds HTML
     if (filtered.length === 0) {
-        container.innerHTML = '<p style="text-align:center;color:#999;padding:20px;">Keine Beiträge gefunden.</p>';
+        container.innerHTML = '<p class="empty-state">Keine Beiträge gefunden.</p>';
         return;
     }
 
@@ -830,22 +914,33 @@ document.getElementById('list-search-input').addEventListener('input', function
 // Block 12: Sidebar Category Filter and Statistics
 // =====================================================================
 
-// Builds Category Filter Checkboxes
+// Builds Category Filter Checkboxes with Counts
 function buildCategoryFilter() {
     const container = document.getElementById('category-filter');
+
+    const counts = {};
+    contributionsData.forEach(function (f) {
+        const cat = f.properties.category;
+        counts[cat] = (counts[cat] || 0) + 1;
+    });
+
+    const total = contributionsData.length;
     let html = '';
 
     for (const key in CATEGORIES) {
         const cat = CATEGORIES[key];
         const checked = activeFilters.indexOf(key) !== -1 ? 'checked' : '';
+        const count = counts[key] || 0;
 
-        html += '' +
+        html += '<label class="category-filter-label">' +
-            '<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;">' +
+                    '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
-                '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
+                    categoryIcon(cat) +
-                '<span>' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
+                    '<span>' + cat.label + ' (' + count + ')</span>' +
-            '</label>';
+                '</label>';
     }
 
+    html += '<p class="category-filter-total"><strong>' + total + '</strong> Beiträge insgesamt</p>';
+
     container.innerHTML = html;
 }
 
@@ -892,34 +987,6 @@ function toggleCategoryFilter(checkbox) {
     updateContributionsList();
 }
 
-// Updates Statistics in Home Tab
-function updateStatistics() {
-    const container = document.getElementById('stats-container');
-    const total = contributionsData.length;
-
-    // Counts per Category
-    const counts = {};
-    contributionsData.forEach(function (f) {
-        const cat = f.properties.category;
-        counts[cat] = (counts[cat] || 0) + 1;
-    });
-
-    let html = '<p style="font-size:0.9rem;"><strong>' + total + '</strong> Beiträge insgesamt</p>';
-
-    for (const key in CATEGORIES) {
-        const cat = CATEGORIES[key];
-        const count = counts[key] || 0;
-        if (count > 0) {
-            html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
-                categoryIcon(cat) + ' ' +
-                cat.label + ': ' + count +
-            '</div>';
-        }
-    }
-
-    container.innerHTML = html;
-}
-
 
 // =====================================================================
 // Block 13: Modals — Welcome, Login, Info, Privacy, Imprint
@@ -957,6 +1024,11 @@ function submitLogin() {
     document.cookie = 'webgis_user=' + encodeURIComponent(name) + ';path=/;max-age=31536000;SameSite=Lax';
     document.getElementById('login-modal').style.display = 'none';
 
+    // Starts Onboarding Tour on first Login
+    if (!localStorage.getItem('webgis_onboarding_done')) {
+        setTimeout(function () { startTour(); }, 500);
+    }
+
     // Open Create Modal if Geometry is pending 
     if (drawnGeometry) {
         document.getElementById('create-geom').value = JSON.stringify(drawnGeometry);
@@ -967,6 +1039,11 @@ function submitLogin() {
 
 function skipLogin() {
     document.getElementById('login-modal').style.display = 'none';
+
+    // Starts Onboarding Tour on first Login
+    if (!localStorage.getItem('webgis_onboarding_done')) {
+        setTimeout(function () { startTour(); }, 500);
+    }
 }
 
 // Info Modal
@@ -1016,6 +1093,7 @@ document.addEventListener('keydown', function (e) {
         document.getElementById('welcome-modal').style.display = 'none';
         document.getElementById('login-modal').style.display = 'none';
         document.getElementById('create-modal').style.display = 'none';
+        document.getElementById('edit-modal').style.display = 'none';
     }
 });
 
@@ -1034,7 +1112,7 @@ function escapeHtml(text) {
 
 // Returns a colored Font Awesome Icon HTML String for a Category
 function categoryIcon(cat) {
-    return '<i class="fa-solid ' + cat.faIcon + '" style="color:' + cat.color + ';"></i>';
+    return '<i class="fa-solid ' + cat.faIcon + ' fa-fw" style="color:' + cat.color + ';"></i>';
 }
 
 // Reverse Geocodes Coordinates and saves Address to Contribution via API
@@ -1160,7 +1238,24 @@ function deleteComment(commentId, contributionId) {
     });
 }
 
-// Toggles Photo Visibility in Popup
+// Pans Map if Popup behind Header
+function recenterPopup() {
+    map.eachLayer(function (layer) {
+        if (layer.getPopup && layer.getPopup() && layer.isPopupOpen()) {
+            var popupEl = layer.getPopup().getElement();
+            if (!popupEl) return;
+            var padding = window.innerWidth < 769 ? 75 : 75;
+            var popupTop = popupEl.getBoundingClientRect().top;
+            var mapTop = document.getElementById('map').getBoundingClientRect().top;
+            var diff = popupTop - mapTop - padding;
+            if (diff < 0) {
+                map.panBy([0, diff], { animate: true, duration: 0.3 });
+            }
+        }
+    });
+}
+
+// Toggles Photo Visibility in Popup and updates Popup Position
 function togglePhoto(contributionId) {
     const container = document.getElementById('photo-container-' + contributionId);
     const label = document.getElementById('photo-label-' + contributionId);
@@ -1173,9 +1268,11 @@ function togglePhoto(contributionId) {
         container.style.display = 'none';
         label.textContent = 'Foto anzeigen';
     }
+
+    setTimeout(recenterPopup, 150);
 }
 
-// Toggles Comments Section Visibility in Popup
+// Toggles Comments Section Visibility in Popup and updates Popup Position
 function toggleComments(contributionId) {
     const section = document.getElementById('comments-section-' + contributionId);
     const toggle = document.getElementById('comments-toggle-' + contributionId);
@@ -1192,6 +1289,8 @@ function toggleComments(contributionId) {
         toggle.classList.remove('fa-chevron-up');
         toggle.classList.add('fa-chevron-down');
     }
+
+    setTimeout(recenterPopup, 150);
 }
 
 

public/js/onboarding.js

@@ -1,6 +1,7 @@
 // =====================================================================
 // WebGIS Citizen Participation Portal — Onboarding Tour
-// Guides Users through the Participation Portal
+// Guides Users through the Participation Portal.
+// On Mobile centered Overlays. On Desktop attached to User Interface.
 // =====================================================================
 
 
@@ -8,76 +9,30 @@
 // 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;
 
-
+// Detects Mobile Viewport
-// =================================================================
+function isMobile() {
-// Block 2: Tour Initialization
+    return window.innerWidth < 769;
-// =================================================================
-
-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
+// Block 2: Tour Definition
 // =================================================================
 
-function waitForModalsToClose(callback) {
+function startTour(manual) {
-    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 mobile = isMobile();
+
     const tour = new Shepherd.Tour({
-        useModalOverlay: true,
+        useModalOverlay: !mobile,
         defaultStepOptions: {
-            cancelIcon: { enabled: true },
+            cancelIcon: { enabled: false },
             scrollTo: false,
             classes: 'onboarding-step',
             popperOptions: {
@@ -89,46 +44,54 @@ function startTour() {
     });
 
 
+// -----------------------------------------------------------------
+    // Step 1: Welcome — Skip Timer at automatic Start
     // -----------------------------------------------------------------
-    // Step 1: Welcome
+    var welcomeButtons = [
-    // -----------------------------------------------------------------
+        {
+            text: 'Überspringen',
+            action: tour.cancel,
+            classes: 'shepherd-button-secondary' + (manual ? '' : ' skip-btn-locked')
+        },
+        {
+            text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
+            action: tour.next,
+            classes: 'shepherd-button-primary'
+        }
+    ];
+
     tour.addStep({
         id: 'welcome',
-        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
+        title: '<i class="fa-solid fa-hand-wave"></i> Willkommen bei der Mitmachkarte!',
-        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+        text: 'Dieses <strong>interaktive Tutorial</strong> 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>',
+              '<br><br><span style="color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
-        buttons: [
+        buttons: welcomeButtons,
-            {
+        when: {
-                text: 'Überspringen',
+            show: function () {
-                action: tour.cancel,
+                if (manual) return;
-                classes: 'shepherd-button-secondary'
+
-            },
+                // Locks Skip Button with Progress Bar for 5 Seconds
-            {
+                var skipBtn = document.querySelector('.skip-btn-locked');
-                text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
+                if (!skipBtn) return;
-                action: tour.next,
+                skipBtn.disabled = true;
-                classes: 'shepherd-button-primary'
+                skipBtn.style.pointerEvents = 'none';
+
+                setTimeout(function () {
+                    skipBtn.disabled = false;
+                    skipBtn.style.pointerEvents = '';
+                    skipBtn.classList.remove('skip-btn-locked');
+                }, 5000);
             }
-        ]
+        }
     });
 
 
     // -----------------------------------------------------------------
     // Step 2: Drawing Tools
     // -----------------------------------------------------------------
-    tour.addStep({
+    var drawingStep = {
         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',
@@ -141,20 +104,32 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong> ' +
+            '<i class="fa-solid fa-location-dot"></i> ' +
+            'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.';
+    } else {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.';
+        drawingStep.attachTo = { element: '.leaflet-pm-toolbar', on: 'left' };
+        drawingStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
+            });
+        };
+    }
+
+    tour.addStep(drawingStep);
 
 
     // -----------------------------------------------------------------
     // Step 3: Address Search
     // -----------------------------------------------------------------
-    tour.addStep({
+    var searchStep = {
         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',
@@ -167,20 +142,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong> ' +
+            '<i class="fa-solid fa-magnifying-glass"></i> rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+    } else {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+        searchStep.attachTo = { element: '.leaflet-control-geocoder', on: 'left' };
+    }
+
+    tour.addStep(searchStep);
 
 
     // -----------------------------------------------------------------
     // Step 4: Layer Control
     // -----------------------------------------------------------------
-    tour.addStep({
+    var layerStep = {
         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',
@@ -193,26 +173,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        layerStep.text = 'Wechseln Sie über das <strong>Layer-Symbol</strong> ' +
+            '<i class="fa-solid fa-layer-group"></i> oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.';
+    } else {
+        layerStep.text = 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.';
+        layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' };
+    }
+
+    tour.addStep(layerStep);
 
 
     // -----------------------------------------------------------------
     // Step 5: Sidebar
     // -----------------------------------------------------------------
-    tour.addStep({
+    var sidebarStep = {
         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',
@@ -220,58 +199,106 @@ function startTour() {
                 classes: 'shepherd-button-secondary'
             },
             {
-                text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
+                text: 'Abschließen <i class="fa-solid fa-check"></i>',
                 action: tour.next,
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> ' +
+            '<i class="fa-solid fa-house"></i> ' +
+            'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+    } else {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+        sidebarStep.attachTo = { element: '#sidebar', on: 'right' };
+        sidebarStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
+            });
+        };
+    }
+
+    tour.addStep(sidebarStep);
 
 
     // -----------------------------------------------------------------
-    // Completion and Cancellation
+    // Completion and Cancellation — shows Drawing Arrow
     // -----------------------------------------------------------------
-    tour.on('complete', function () {
+    function onTourEnd() {
-        markOnboardingDone();
         onboardingStarted = false;
-    });
+        if (mobile) sidebar.close();
 
-    tour.on('cancel', function () {
+        // Shows Arrow Hint
-        markOnboardingDone();
+        if (!localStorage.getItem('webgis_onboarding_done')) {
-        onboardingStarted = false;
+            localStorage.setItem('webgis_onboarding_done', 'true');
-    });
+            showDrawingArrow();
+        }
+    }
+
+    tour.on('complete', onTourEnd);
+    tour.on('cancel', onTourEnd);
 
     tour.start();
 }
 
 
 // =================================================================
-// Marks Onboarding as completed
+// Drawing Arrow — Points to Geoman Toolbar after Tour
 // =================================================================
 
-function markOnboardingDone() {
+function showDrawingArrow() {
-    if (ONBOARDING_MODE === 'once') {
+    var hint = document.createElement('div');
-        localStorage.setItem('webgis_onboarding_done', 'true');
+    hint.id = 'drawing-hint-arrow';
-    } else if (ONBOARDING_MODE === 'session') {
+    hint.innerHTML = '<span class="drawing-hint-label">' +
-        sessionStorage.setItem('webgis_onboarding_done', 'true');
+                         '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen' +
+                     '</span>' +
+                     '<span class="drawing-hint-chevrons">' +
+                         '<i class="fa-solid fa-chevron-right"></i>' +
+                         '<i class="fa-solid fa-chevron-right"></i>' +
+                     '</span>';
+    document.body.appendChild(hint);
+
+    // Positions Hint centered on Geoman Toolbar
+    function positionHint() {
+        var toolbar = document.querySelector('.leaflet-pm-toolbar');
+        if (!toolbar) { removeDrawingArrow(); return; }
+
+        var rect = toolbar.getBoundingClientRect();
+        var hintHeight = hint.offsetHeight || 32;
+        hint.style.top = (rect.top + (rect.height / 2) - (hintHeight / 2)) + 'px';
+        hint.style.right = (window.innerWidth - rect.left + 10) + 'px';
+    }
+
+    positionHint();
+    window.addEventListener('resize', positionHint);
+
+    var timeout = setTimeout(removeDrawingArrow, 60000);
+
+    map.on('pm:globaldrawmodetoggled', function onDraw() {
+        clearTimeout(timeout);
+        removeDrawingArrow();
+        map.off('pm:globaldrawmodetoggled', onDraw);
+        window.removeEventListener('resize', positionHint);
+    });
+}
+
+function removeDrawingArrow() {
+    var arrow = document.getElementById('drawing-hint-arrow');
+    if (arrow) {
+        arrow.classList.add('fade-out');
+        setTimeout(function () { arrow.remove(); }, 300);
     }
 }
 
 
 // =================================================================
-// Manual Tour Restart
+// Manual Tour Restart (from Info Modal or Help Tab)
 // =================================================================
 
 function restartOnboarding() {
-    localStorage.removeItem('webgis_onboarding_done');
-    sessionStorage.removeItem('webgis_onboarding_done');
     onboardingStarted = false;
-    startTour();
+    startTour(true);
-}
+}
-
-
-// =================================================================
-// Auto-Start on Page Load
-// =================================================================
-
-initOnboardingTour();