news sort control in sidebar

contribution sort control in sidebar
2026-06-16 16:58:25 +02:00 · 2026-06-16 16:58:15 +02:00 · 2026-06-16 16:35:49 +02:00 · 2026-06-16 16:32:56 +02:00 · 2026-06-16 16:27:56 +02:00 · 2026-06-16 16:24:11 +02:00
20 changed files with 2039 additions and 1389 deletions
--- a/legacy/delete_data.php
+++ b/legacy/delete_data.php
@@ -1,48 +0,0 @@
-<?php
-
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request=='buildings') {
-        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-        try {
-
-            $pdo -> query("DELETE FROM buildings WHERE webgis_id = '$webgis_id'");
-
-        } catch (PDOException $e) {
-            echo "ERROR ".$e->getMessage();
-        }
-    }
-
-    if ($request == 'pipelines') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-		try {
-
-			$pdo -> query("DELETE from pipelines where webgis_id= '$webgis_id' ");
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-    if ($request == 'valves') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-		try {
-
-			$pdo -> query("DELETE from valves where webgis_id= '$webgis_id' ");
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-?>
--- a/legacy/find_data.php
+++ b/legacy/find_data.php
@@ -1,52 +0,0 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    // HTTP-POST-Methode für Formulardaten
-    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
-    $field = htmlspecialchars($_POST['field'], ENT_QUOTES);
-    $value = htmlspecialchars($_POST['value'], ENT_QUOTES);
-    
-    try {
-        // Datenbankabfrage
-        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $field = '$value'");
-
-        $features = [];
-
-        foreach($result as $row) {
-            // PHP-Objekt erstellen
-            $geometry = json_decode($row['geojson']);
-            
-            // PHP-Objekt bereinigen 
-            unset($row['geom']);
-            unset($row['geojson']);
-            
-            // JSON-Feature hinzufügen
-            $feature = [
-                "type"=>"Feature", 
-                "geometry"=>$geometry, 
-                "properties"=>$row
-            ];
-
-            array_push($features, $feature);
-        };
-
-        // Feature-Collection hinzufügen
-        $featureCollection = [
-            "type"=>"FeatureCollection",
-            "features"=>$features
-        ];
-
-        echo json_encode($featureCollection);
-
-    // Fehlernachricht ausgeben
-    } catch(PDOException $e) {
-        echo "ERROR ".$e->getMessage();
-
-    }
-
-?>
--- a/legacy/insert_data.php
+++ b/legacy/insert_data.php
@@ -1,73 +0,0 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request == 'valves') {
-        $valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
-        $valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
-        $valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
-        $valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
-        $valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
-        $valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
-        $valve_geometry = $_POST['valve_geometry'];
-
-        $result = $pdo -> query("SELECT * FROM valves WHERE valve_id = '$valve_id'");
-
-        if ($result->rowCount()>0) {
-            echo "ERROR: Valve ID already exists. Please type in another ID!";
-        } else {
-        // Datenbankabfrage
-            $result = $pdo -> query("INSERT INTO valves(valve_id, valve_type, valve_dma_id, valve_diameter, valve_location, valve_visibility,  geom) VALUES ('$valve_id', '$valve_type', '$valve_dma_id', '$valve_diameter', '$valve_location', '$valve_visibility',  ST_SetSRID(ST_GeomFromGeoJSON('$valve_geometry'), 4326))");
-        }
-    }
-
-    if ($request == 'pipelines') {
-        $pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
-        $pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
-        $pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
-        $pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
-        $pipeline_method = htmlspecialchars($_POST['pipeline_method'], ENT_QUOTES);
-        $pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
-        $pipeline_geometry = $_POST['pipeline_geometry'];
-
-        $result = $pdo -> query("SELECT * FROM pipelines WHERE pipeline_id = '$pipeline_id'");
-
-        if ($result->rowCount()>0) {
-            echo "ERROR: Pipeline ID already exists. Please type in another ID!";
-        } else {
-        // Datenbankabfrage
-            $result = $pdo -> query("INSERT INTO pipelines(pipeline_id, pipeline_category, pipeline_dma_id, pipeline_diameter, pipeline_method, pipeline_location,  geom) VALUES ('$pipeline_id', '$pipeline_category', '$pipeline_dma_id', '$pipeline_diameter', '$pipeline_method', '$pipeline_location',  ST_SetSRID(ST_GeomFromGeoJSON('$pipeline_geometry'), 4326))");
-        }
-    }
-
-    if ($request == 'buildings') {
-
-		$account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
-		$building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
-		$building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
-		$building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
-		$building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
-		$building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
-		$building_geometry = $_POST['building_geometry'];
-
-		$result = $pdo -> query("SELECT *from buildings where account_no= '$account_no'");
-
-		if ($result->rowCount()>0) {
-			echo "ERROR: Building ID already exists. Please type in another ID!";
-		} else {
-			$sql = $pdo -> query("INSERT INTO buildings(account_no, building_category, building_dma_id, building_storey, building_population, building_location, geom) VALUES ('$account_no', '$building_category', '$building_dma_id', '$building_storey', '$building_population', '$building_location', ST_Force3DZ(ST_SetSRID(ST_GeomFromGeoJSON('$building_geometry'), 4326)))");
-		}
-	}
-        
-
-
-
-
-
-    ?>
--- a/legacy/load_data.php
+++ b/legacy/load_data.php
@@ -1,63 +0,0 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    // HTTP-POST-Methode für Formulardaten
-    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
-    $dma_id = htmlspecialchars($_POST['dma_id'], ENT_QUOTES);
-
-    if($table == 'valves') {
-        $dma_id_field = "valve_dma_id";
-    }
-
-    if($table == 'buildings') {
-        $dma_id_field = "building_dma_id";
-    }
-
-    if($table == 'pipelines') {
-        $dma_id_field = "pipeline_dma_id";
-    }
-    
-    try {
-        // Datenbankabfrage
-        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $dma_id_field = '$dma_id'");
-
-        $features = [];
-
-        foreach($result as $row) {
-            // PHP-Objekt erstellen
-            $geometry = json_decode($row['geojson']);
-            
-            // PHP-Objekt bereinigen 
-            unset($row['geom']);
-            unset($row['geojson']);
-            
-            // JSON-Feature hinzufügen
-            $feature = [
-                "type"=>"Feature", 
-                "geometry"=>$geometry, 
-                "properties"=>$row
-            ];
-
-            array_push($features, $feature);
-        };
-
-        // Feature-Collection hinzufügen
-        $featureCollection = [
-            "type"=>"FeatureCollection",
-            "features"=>$features
-        ];
-
-        echo json_encode($featureCollection);
-
-    // Fehlernachricht ausgeben
-    } catch(PDOException $e) {
-        echo "ERROR ".$e->getMessage();
-
-    }
-
-?>
--- a/legacy/test.html
+++ b/legacy/test.html
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
-    <!-- jQuery UI -->
-    <link rel="stylesheet" href="source/jquery-ui.min.css">
-    <script src="source/jquery-ui.min.js"></script>
-
-    <!-- Bootstrap Stylesheet & Skript -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Sidebar Plugin -->
-    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
-    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
-     
-
-    <!-- Button Plugin -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
-    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
-
-    <!-- Font Plugin -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
-
-    <!-- PolylineMeasure Plugin -->
-    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
-    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
-
-    <!-- MousePosition Plugin -->
-    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
-    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
-
-    <!-- Geoman Plugin -->
-    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
-    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
-
-    <!-- Minimap Plugin -->
-    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
-    <script src="plugins/minimap/Control.MiniMap.min.js"></script>
-
-    <!-- ajax Plugin -->
-    <script src="plugins/ajax/leaflet.ajax.js"></script>
-</head>
-
-<body>
-
-    <div class="popup-container">
-        
-        <input type="hidden" name="building_database_id" class="updateBuilding" value="something">
-        <input type="hidden" name="account_no_old" class="updateBuilding" value="something">
-
-        
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Building ID</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="account_no">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Category</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_category">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Storey</label>
-            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_storey">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Population</label>
-            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_population">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Location</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_locationn">
-        </div>
-
-        <div class="popup-button-group">
-            <button type="submit" class="btn btn-success popup-button">Update</button>
-            <button type="submit" class="btn btn-danger popup-button">Delete</button>
-
-        </div>
-
-    </div>
-    
-
-
-
-
-</body>
-
-</html>
--- a/legacy/update_data.php
+++ b/legacy/update_data.php
@@ -1,98 +0,0 @@
-<?php
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request=='buildings') {
-        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-        $account_no_old = htmlspecialchars($_POST['account_no_old'], ENT_QUOTES);
-        $account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
-        $building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
-        $building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
-        $building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
-        $building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
-        $building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
-
-
-        try {
-            
-            if ($account_no_old != $account_no) {
-                $result = $pdo -> query("SELECT * FROM buildings WHERE account_no = '$account_no'");
-
-                if ($result -> rowCount()>0) {
-                    echo "ERROR: Account Number already exists. Pleas type in another Account Number!";
-                } else {
-                    $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
-                }
-
-            } else { $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
-            }
-
-        } catch (PDOException $e) {
-            echo "ERROR ".$e->getMessage();
-        }
-    }
-
-
-    if ($request == 'pipelines') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-		$pipeline_id_old = htmlspecialchars($_POST['pipeline_id_old'], ENT_QUOTES);
-		$pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
-		$pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
-		$pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
-		$pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
-		$pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
-		$pipeline_length = htmlspecialchars($_POST['pipeline_length'], ENT_QUOTES);
-
-
-		try {
-
-			if ($pipeline_id_old != $pipeline_id) {
-				$result = $pdo -> query("SELECT *from pipelines where pipeline_id = '$pipeline_id' ");
-
-				if ($result -> rowCount()>0) {
-					echo "ERROR: Pipeline ID already exists. Please choose a new ID";
-				} else {
-					$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
-				}
-			} else {
-				$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
-			}
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-
-    if ($request == 'valves') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-		$valve_id_old = htmlspecialchars($_POST['valve_id_old'], ENT_QUOTES);
-		$valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
-		$valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
-		$valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
-		$valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
-		$valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
-		$valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
-
-
-		try {
-
-			if ($valve_id_old != $valve_id) {
-				$result = $pdo -> query("SELECT *from valves where valve_id = '$valve_id' ");
-
-				if ($result -> rowCount()>0) {
-					echo "ERROR: Valve ID already exists. Please choose a new ID";
-				} else {
-					$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
-				}
-			} else {
-				$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
-			}
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-?>
--- a/public/admin.php
+++ b/public/admin.php
@@ -131,7 +131,7 @@ $counts['total'] = count($all_contributions);
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moderation — <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
+    <link rel="icon" href="assets/shield-halved-solid-off-black.png" type="image/png">

    <!-- Loads CSS Dependencies -->

@@ -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: ?>
@@ -334,9 +334,9 @@ $counts['total'] = count($all_contributions);
                                        <i class="fa-solid fa-trash"></i> Löschen
                                    </button>

-                                    <a class="btn btn-map" href="index.php" target="_blank">
+                                    <!-- <a class="btn btn-map" href="index.php" target="_blank">
                                        <i class="fa-solid fa-map-location-dot"></i> Karte
-                                    </a>
+                                    </a> -->
                                </div>
                            </div>
                        </div>
@@ -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>
-                <button class="btn btn-approve" onclick="createNews()">
-                    <i class="fa-solid fa-plus"></i> Nachricht hinzufügen
-                </button>
+
+            <!-- Filter -->
+            <div class="filter-tabs" id="news-filter-tabs">
+                    <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
+                        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,659 +538,98 @@ $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>

    <!-- ============================================================= -->
-    <!-- JavaScript: Leaflet, Interactions, API Calls                   -->
+    <!-- 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                                 -->
    <!-- ============================================================= -->
    <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 +662,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>
--- a/public/assets/lock-solid-off-black.png
+++ b/public/assets/lock-solid-off-black.png
--- a/public/assets/scale-balanced-solid-off-black.png
+++ b/public/assets/scale-balanced-solid-off-black.png
--- a/public/assets/shield-halved-solid-off-black.png
+++ b/public/assets/shield-halved-solid-off-black.png
--- a/public/assets/user-group-solid-off-black.png
+++ b/public/assets/user-group-solid-off-black.png
--- a/public/assets/user-group-solid-off-white.png
+++ b/public/assets/user-group-solid-off-white.png
--- a/public/imprint.php
+++ b/public/imprint.php
@@ -11,7 +11,7 @@ $municipality = $stmt->fetch();
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impressum — <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
+    <link rel="icon" href="assets/scale-balanced-solid-off-black.png" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
--- 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,8 +33,8 @@ $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>
-    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
+    <title>Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></title>
+    <link rel="icon" href="assets/user-group-solid-off-black.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                       -->
    <!-- ============================================================= -->
@@ -87,7 +89,7 @@ $news_items = $stmt->fetchAll();
    <header id="app-header">
        <div class="header-left">
            <?php if (!empty($municipality['logo_path'])): ?>
-                <img src="<?= htmlspecialchars($municipality['logo_path']) ?>" alt="<?= htmlspecialchars($municipality['name']) ?>" class="header-logo" onerror="this.style.display='none'">
+                <img src="assets/user-group-solid-off-white.png" alt="user-group-solid-off-white" class="header-logo" onerror="this.style.display='none'">
            <?php endif; ?>
            <h1 class="header-title">Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></h1>
        </div>
@@ -129,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>

@@ -146,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>

@@ -170,32 +167,21 @@ $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>
-
-                <!-- Help Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-help">
-                    <h2 class="leaflet-sidebar-header">
-                        Hilfe
-                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
-                    </h2>
-                    <div class="sidebar-body">
-                        <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-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-magnifying-glass"></i> Suchen</h3>
-                        <p>Verwenden Sie die Adresssuche rechts, um bestimmte Orte auf der Karte zu finden.</p>
-                    </div>
-                </div>
+                </div>            

                <!-- News Tab -->
                <div class="leaflet-sidebar-pane" id="tab-news">
@@ -209,16 +195,25 @@ $news_items = $stmt->fetchAll();
                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
                        </div>

+                        <div class="list-controls">
+                            <select id="news-sort" class="form-input list-sort-select" onchange="sortNews()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                            </select>
+                            <span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
+                        </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>
+                                <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'])) ?>">
+                                        data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                        data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                        data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
+                                        data-date="<?= $news['published_at'] ?>">
                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
                                        <span class="news-date">
@@ -232,6 +227,38 @@ $news_items = $stmt->fetchAll();
                    </div>
                </div>

+                    <!-- Help Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-help">
+                    <h2 class="leaflet-sidebar-header">
+                        Hilfe
+                        <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()}">
+                                <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-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> 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 schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>         
+                    </div>
+                </div>
+
            </div>
        </div>

@@ -246,7 +273,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>
@@ -266,8 +293,8 @@ $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;">
-                <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.
+            <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">
                <button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
@@ -301,7 +328,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>
@@ -340,9 +367,36 @@ $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                                       -->
+    <!-- Loads JavaScript Dependencies                                 -->
    <!-- ============================================================= -->

    <!-- Leaflet 1.9.4 -->
@@ -366,11 +420,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) ?>",
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -0,0 +1,622 @@
+// =====================================================================
+// 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 class="empty-state">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 class="empty-state">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: 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
+// 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;
+}
+
+
+// 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 9: 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) {
+    document.getElementById('admin-edit-id').value = contributionId;
+    document.getElementById('admin-edit-title').value = currentTitle;
+    document.getElementById('admin-edit-description').value = currentDescription;
+    document.getElementById('admin-edit-modal').style.display = 'flex';
+}
+
+// Submits Edit from Custom Modal
+function submitAdminEdit() {
+    var id = document.getElementById('admin-edit-id').value;
+    var title = document.getElementById('admin-edit-title').value.trim();
+    var description = document.getElementById('admin-edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    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(); });
+    });
+}
+
+
+// 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',
+        customClass: { confirmButton: 'swal-btn-danger' },
+    }).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 10: 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) {
+    document.getElementById('admin-comment-id').value = commentId;
+    document.getElementById('admin-comment-content').value = currentContent;
+    document.getElementById('admin-comment-modal').style.display = 'flex';
+}
+
+// Submits Comment Edit from Custom Modal
+function submitAdminComment() {
+    var id = document.getElementById('admin-comment-id').value;
+    var content = document.getElementById('admin-comment-content').value.trim();
+
+    if (!content) {
+        Swal.fire('Inhalt fehlt', 'Bitte geben Sie einen Inhalt ein.', 'warning');
+        return;
+    }
+
+    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(); });
+    });
+}
+
+
+// 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',
+        customClass: { confirmButton: 'swal-btn-danger' },
+    }).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 11: CRUD Operations for News
+// =====================================================================
+
+// CREATE: Creates News
+function createNews() {
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen';
+    document.getElementById('admin-news-id').value = '';
+    document.getElementById('admin-news-mode').value = 'create';
+    document.getElementById('admin-news-title').value = '';
+    document.getElementById('admin-news-content').value = '';
+    document.getElementById('admin-news-author').value = 'Stadtverwaltung';
+    document.getElementById('admin-news-modal').style.display = 'flex';
+}
+
+// UPDATE: Edits existing News
+function editNews(newsId, currentTitle, currentContent, currentAuthor) {
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-pen"></i> Neuigkeit bearbeiten';
+    document.getElementById('admin-news-id').value = newsId;
+    document.getElementById('admin-news-mode').value = 'edit';
+    document.getElementById('admin-news-title').value = currentTitle;
+    document.getElementById('admin-news-content').value = currentContent;
+    document.getElementById('admin-news-author').value = currentAuthor;
+    document.getElementById('admin-news-modal').style.display = 'flex';
+}
+
+// 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: document.getElementById('admin-news-id').value,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    }
+
+    apiCall(data).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            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(); });
+    });
+}
+
+
+// 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',
+        customClass: { confirmButton: 'swal-btn-danger' },
+    }).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(); });
+        });
+    });
+}
--- 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
 // =====================================================================


@@ -90,9 +88,9 @@ basemapCartoDB.addTo(map);

 // Layer Control
 const basemaps = {
-    '<i class="fa-solid fa-map" style="color:#404040;"></i> Hintergrundkarte (farbe)': basemapOSM,
-    '<i class="fa-solid fa-map" style="color:#404040;"></i> Hintergrundkarte (grau)': basemapCartoDB,
-    '<i class="fa-solid fa-satellite" style="color:#404040;"></i> Satellitenbild': basemapSatellite,
+    // 'Hintergrundkarte': basemapOSM,
+    'Hintergrundkarte': basemapCartoDB,
+    'Satellitenbild': basemapSatellite,
 };

 const overlays = {};  // Populated later with Contribution Layers
@@ -102,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
@@ -113,11 +121,11 @@ L.control.zoom({
 }).addTo(map);

 // Scale Bar
-L.control.scale({
-    position: 'bottomright',
-    maxWidth: 200,
-    imperial: false
-}).addTo(map);
+// L.control.scale({
+//     position: 'bottomright',
+//     maxWidth: 200,
+//     imperial: false
+// }).addTo(map);

 // Fullscreen Button
 L.control.fullscreen({
@@ -222,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
@@ -245,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;
@@ -345,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();
    });
 }

@@ -475,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
-    layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 });
+    // Popup Options — Mobile narrower with Header/Footer Padding
+    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);
    });

@@ -582,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({
-        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(props.title) + '">' +
-                '</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(props.description || '') + '</textarea>' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: MUNICIPALITY.primaryColor,
-        preConfirm: function () {
-            return {
-                title: document.getElementById('swal-title').value.trim(),
-                description: document.getElementById('swal-description').value.trim()
-            };
+// Submits Edit from Custom Modal
+function submitEdit() {
+    const contributionId = document.getElementById('edit-contribution-id').value;
+    const title = document.getElementById('edit-title').value.trim();
+    const description = document.getElementById('edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update',
+        contribution_id: contributionId,
+        title: title,
+        description: description
+    }, function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
-
-        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();
-        });
+        closeEditModal();
+        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({
@@ -643,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;

@@ -761,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;
    }

@@ -832,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 += '' +
-            '<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;">' +
-                '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
-                '<span>' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
-            '</label>';
+        html += '<label class="category-filter-label">' +
+                    '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
+                    categoryIcon(cat) +
+                    '<span>' + cat.label + ' (' + count + ')</span>' +
+                '</label>';
    }

+    html += '<p class="category-filter-total"><strong>' + total + '</strong> Beiträge insgesamt</p>';
+
    container.innerHTML = html;
 }

@@ -894,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
@@ -959,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);
@@ -969,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
@@ -980,7 +1055,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();
+        }
    });
 }

@@ -1010,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';
    }
 });

@@ -1028,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
@@ -1075,6 +1159,21 @@ function filterNews() {
    });
 }

+// Sorts News Items in Sidebar by Date
+function sortNews() {
+    var sortBy = document.getElementById('news-sort').value;
+    var container = document.getElementById('news-list');
+    var items = Array.from(container.querySelectorAll('.news-item'));
+
+    items.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);
+        return 0;
+    });
+
+    items.forEach(function (item) { container.appendChild(item); });
+}
+
 // Loads and Displays Comments forContributions in Popups
 function loadComments(contributionId) {
    apiCall({
@@ -1154,7 +1253,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);
@@ -1167,9 +1283,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);
@@ -1186,6 +1304,8 @@ function toggleComments(contributionId) {
        toggle.classList.remove('fa-chevron-up');
        toggle.classList.add('fa-chevron-down');
    }
+
+    setTimeout(recenterPopup, 150);
 }


--- a/public/js/onboarding.js
+++ b/public/js/onboarding.js
@@ -0,0 +1,304 @@
+// =====================================================================
+// WebGIS Citizen Participation Portal — Onboarding Tour
+// Guides Users through the Participation Portal.
+// On Mobile centered Overlays. On Desktop attached to User Interface.
+// =====================================================================
+
+
+// =================================================================
+// Block 1: Onboarding Configuration
+// =================================================================
+
+// Prevents double Initialization
+let onboardingStarted = false;
+
+// Detects Mobile Viewport
+function isMobile() {
+    return window.innerWidth < 769;
+}
+
+
+// =================================================================
+// Block 2: Tour Definition
+// =================================================================
+
+function startTour(manual) {
+    // Prevents double Start
+    if (onboardingStarted) return;
+    onboardingStarted = true;
+
+    const mobile = isMobile();
+
+    const tour = new Shepherd.Tour({
+        useModalOverlay: !mobile,
+        defaultStepOptions: {
+            cancelIcon: { enabled: false },
+            scrollTo: false,
+            classes: 'onboarding-step',
+            popperOptions: {
+                modifiers: [
+                    { name: 'offset', options: { offset: [0, 14] } }
+                ]
+            }
+        }
+    });
+
+
+// -----------------------------------------------------------------
+    // Step 1: Welcome — Skip Timer at automatic Start
+    // -----------------------------------------------------------------
+    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> Willkommen bei der Mitmachkarte!',
+        text: 'Dieses <strong>interaktive Tutorial</strong> zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+              '<br><br><span style="color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+        buttons: welcomeButtons,
+        when: {
+            show: function () {
+                if (manual) return;
+
+                // Locks Skip Button with Progress Bar for 5 Seconds
+                var skipBtn = document.querySelector('.skip-btn-locked');
+                if (!skipBtn) return;
+                skipBtn.disabled = true;
+                skipBtn.style.pointerEvents = 'none';
+
+                setTimeout(function () {
+                    skipBtn.disabled = false;
+                    skipBtn.style.pointerEvents = '';
+                    skipBtn.classList.remove('skip-btn-locked');
+                }, 5000);
+            }
+        }
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 2: Drawing Tools
+    // -----------------------------------------------------------------
+    var drawingStep = {
+        id: 'drawing-tools',
+        title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
+        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'
+            }
+        ]
+    };
+
+    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
+    // -----------------------------------------------------------------
+    var searchStep = {
+        id: 'address-search',
+        title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
+        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'
+            }
+        ]
+    };
+
+    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
+    // -----------------------------------------------------------------
+    var layerStep = {
+        id: 'layer-control',
+        title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
+        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'
+            }
+        ]
+    };
+
+    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
+    // -----------------------------------------------------------------
+    var sidebarStep = {
+        id: 'sidebar',
+        title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                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 — shows Drawing Arrow
+    // -----------------------------------------------------------------
+    function onTourEnd() {
+        onboardingStarted = false;
+        if (mobile) sidebar.close();
+
+        // Shows Arrow Hint
+        if (!localStorage.getItem('webgis_onboarding_done')) {
+            localStorage.setItem('webgis_onboarding_done', 'true');
+            showDrawingArrow();
+        }
+    }
+
+    tour.on('complete', onTourEnd);
+    tour.on('cancel', onTourEnd);
+
+    tour.start();
+}
+
+
+// =================================================================
+// Drawing Arrow — Points to Geoman Toolbar after Tour
+// =================================================================
+
+function showDrawingArrow() {
+    var hint = document.createElement('div');
+    hint.id = 'drawing-hint-arrow';
+    hint.innerHTML = '<span class="drawing-hint-label">' +
+                         '<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 (from Info Modal or Help Tab)
+// =================================================================
+
+function restartOnboarding() {
+    onboardingStarted = false;
+    startTour(true);
+}
--- a/public/privacy.php
+++ b/public/privacy.php
@@ -11,7 +11,7 @@ $municipality = $stmt->fetch();
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datenschutz — <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
+    <link rel="icon" href="assets/lock-solid-off-black.png" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
--- a/public/styles.css
+++ b/public/styles.css
--- a/README.md
+++ b/README.md
@@ -5,10 +5,8 @@ Citizen Participation Portal for Lohne (Oldenburg).
 ## Project Structure

 - `migrations/` — versioned SQL Schema Migrations
- `api/` — Backend (PHP)
 - `public/` — Frontend (HTML, CSS, JS)
 - `scripts/` — Maintenance Scripts (backup, deployment)
- `legacy/` — Reference Code from Prototype

 ## Local Setup
Author	SHA1	Message	Date
patrickzerhusen	13a1f50134	news sort control in sidebar	2026-06-16 16:58:25 +02:00
patrickzerhusen	7e9c8cd60d	news sort control in sidebar	2026-06-16 16:58:15 +02:00
patrickzerhusen	2aae2cd518	contribution sort control in sidebar	2026-06-16 16:35:49 +02:00
patrickzerhusen	286026d7ba	polished sidebar design	2026-06-16 16:32:56 +02:00
patrickzerhusen	5aa1fbf13c	contribution sort control in sidebar	2026-06-16 16:27:56 +02:00
patrickzerhusen	36ef947be0	redesigned category filter in sidebar	2026-06-16 16:24:11 +02:00
patrickzerhusen	cf09e88a5b	custom edit and create modals	2026-06-16 16:06:25 +02:00
patrickzerhusen	70fe829e97	cutom edit contribution modal	2026-06-16 15:53:42 +02:00
patrickzerhusen	c1dd6cc009	replaced sweet alert inline styles with CSS classes	2026-06-16 15:43:48 +02:00
patrickzerhusen	336e7cf3a6	moved add news button	2026-06-16 15:32:39 +02:00
patrickzerhusen	6898a837e8	adapted sweet alert styles to design theme	2026-06-16 15:19:00 +02:00
patrickzerhusen	a859e61483	replaced sweet alert inline styles with CSS classes	2026-06-16 15:15:18 +02:00
patrickzerhusen	3fa47a3347	developer notice colour in modals	2026-06-16 15:10:54 +02:00
patrickzerhusen	7c0a17c915	added utility designs	2026-06-16 15:05:25 +02:00
patrickzerhusen	59147deec6	added utility designs	2026-06-16 15:00:20 +02:00
patrickzerhusen	d5efbc02d2	added utility designs	2026-06-16 14:58:19 +02:00
patrickzerhusen	60d6b9e4b6	added utility designs	2026-06-16 14:57:52 +02:00
patrickzerhusen	ee84734601	replaced inline styles with CSS classes	2026-06-16 14:42:57 +02:00
patrickzerhusen	2bfb245a46	added utility designs	2026-06-16 14:34:05 +02:00
patrickzerhusen	90dc71e1c3	added design tokens for fonds, radiuses, shadows and spacings	2026-06-16 14:27:53 +02:00
patrickzerhusen	35caac394c	fixed sidebar colours	2026-06-12 13:36:22 +02:00
patrickzerhusen	bb855d1510	removed leaflet flag	2026-06-12 13:30:11 +02:00
patrickzerhusen	59b9440420	layer control redesign	2026-06-12 13:16:42 +02:00
patrickzerhusen	649a2bab9c	removed scale bar	2026-06-12 12:59:50 +02:00
patrickzerhusen	9f8312b88b	larger close button for popups	2026-06-12 12:49:03 +02:00
patrickzerhusen	e1204cd311	moved sweet alert message above login modal	2026-06-12 12:46:20 +02:00
patrickzerhusen	1ffe2d5d57	removed button offset in menu	2026-06-12 12:42:19 +02:00
patrickzerhusen	f1f503af77	custom germen geoman labels	2026-06-12 12:40:07 +02:00
patrickzerhusen	9b84ff1367	pans map if popup behind header	2026-06-12 12:27:16 +02:00
patrickzerhusen	7be37bd30f	removed cancel icon from onboarding popup	2026-06-12 12:03:44 +02:00
patrickzerhusen	2039f5d03d	fixed popup auto-position with padding	2026-06-11 17:10:19 +02:00
patrickzerhusen	38c48861a9	changed fa-icon in create modal	2026-06-11 16:39:52 +02:00
patrickzerhusen	30044e00e9	progress bar skip button, labeled arrow hint	2026-06-11 16:38:25 +02:00
patrickzerhusen	23027d54d7	optimized onboarding tutorial for mobile screens	2026-06-11 15:58:03 +02:00
patrickzerhusen	5e10d19bbd	hides map controls on mobile screens if sidebar open	2026-06-11 15:36:04 +02:00
patrickzerhusen	1953df262c	prevents auto-zoom on mobile screens	2026-06-11 15:15:50 +02:00
patrickzerhusen	ac40c7d949	updatet sidebar styling and texts, included statistics in category-filter	2026-05-13 14:21:05 +02:00
patrickzerhusen	cc8bdd4ea1	updated folder structure	2026-05-06 15:59:59 +02:00
patrickzerhusen	bbb2e830b3	removed legacy	2026-05-06 15:56:31 +02:00
patrickzerhusen	dbc617ad81	changed favorite and header icons	2026-05-06 15:53:30 +02:00
patrickzerhusen	fa7d83fc36	corrected typos	2026-05-04 15:17:18 +02:00
patrickzerhusen	a062f08ed7	replaced inline javascript in admin.php with admin.js	2026-04-30 17:14:26 +02:00
patrickzerhusen	bd576665c8	replaced inline javascript in admin.php with admin.js	2026-04-30 16:56:05 +02:00
patrickzerhusen	5bfdda2340	restructured admin.js	2026-04-30 16:36:03 +02:00
patrickzerhusen	acfc50a244	added admin.js for javascript refractoring of moderation portal	2026-04-30 15:57:56 +02:00
patrickzerhusen	b4ee8fa6e0	added admin.js for javascript refractoring of moderation portal	2026-04-30 15:57:38 +02:00
patrickzerhusen	e1cf6f21f5	integrated onboarding tutorial for citizen portal	2026-04-30 15:28:45 +02:00
patrickzerhusen	ffc53f23e2	renamed buergerbeteiligungsportal to mitmachkarte	2026-04-30 13:59:38 +02:00