improved sidebar structure, layouts and texts

.env.example

@@ -5,3 +5,4 @@ POSTGRES_DB=postgres_database
 POSTGRES_USER=postgres_user
 POSTGRES_PASSWORD=
 ADMIN_PASSWORD=
+MUNICIPALITY_SLUG=lohne

.gitignore

@@ -2,3 +2,6 @@
 .vscode/
 *.log
 scripts
+
+public/uploads/photos/*
+!public/uploads/photos/.gitkeep

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();
-		}
-	}
-
-?>

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();
-
-    }
-
-?>

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)))");
-		}
-	}
-        
-
-
-
-
-
-    ?>

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();
-
-    }
-
-?>

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>

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();
-		}
-	}
-
-?>

migrations/001_initial_schema.sql

@@ -35,7 +35,7 @@ COMMENT ON TABLE municipalities IS 'Configuration Per Municipality (Tenant) usin
 
 -- ---------------------------------------------------------------------
 -- Block 3: Table "contributions"
--- Aitizen and Administration Contributions as Points, Lines, and
+-- Citizen and Administration Contributions as Points, Lines, and
 -- Polygons stored together in one mixed-geometry Column.
 -- ---------------------------------------------------------------------
 CREATE TABLE contributions (

migrations/003_news_table.sql

@@ -0,0 +1,44 @@
+-- =====================================================================
+-- Migration 004: Creates News Table for Municipality Announcements
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Creates Table "news"
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS news (
+    news_id         SERIAL PRIMARY KEY,
+    municipality_id INTEGER NOT NULL REFERENCES municipalities(municipality_id) ON DELETE CASCADE,
+    title           VARCHAR(255) NOT NULL,
+    content         TEXT NOT NULL,
+    author_name     VARCHAR(100) NOT NULL DEFAULT 'Stadtverwaltung',
+    published_at    TIMESTAMP NOT NULL DEFAULT NOW(),
+    created_at      TIMESTAMP NOT NULL DEFAULT NOW(),
+    updated_at      TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Trigger Functions
+-- ---------------------------------------------------------------------
+
+-- Automatically Refresh updated_at on every UPDATE.
+CREATE TRIGGER set_news_updated_at
+    BEFORE UPDATE ON news
+    FOR EACH ROW
+    EXECUTE FUNCTION set_updated_at();
+
+
+-- ---------------------------------------------------------------------
+-- Block 3 Indexes for fast Queries
+-- ---------------------------------------------------------------------
+CREATE INDEX idx_news_municipality ON news(municipality_id);
+
+
+-- ---------------------------------------------------------------------
+-- Block 4: Seed Data — Initial News Article
+-- ---------------------------------------------------------------------
+INSERT INTO news (municipality_id, title, content)
+SELECT municipality_id, 'Mitmachkarte gestartet', 
+       'Die Mitmachkarte als Bürgerbeteiligungsportal der Stadt Lohne (Oldenburg) wird nun freigeschaltet. Wir freuen uns auf Ihre Hinweise und Vorschläge!'
+FROM municipalities WHERE slug = 'lohne';

migrations/004_reverse_geocoding.sql

@@ -0,0 +1,8 @@
+-- =====================================================================
+-- Migration 004: Adds Address Column for Reverse Geocoding
+-- =====================================================================
+
+ALTER TABLE contributions
+    ADD COLUMN address VARCHAR(255) DEFAULT NULL;
+
+COMMENT ON COLUMN contributions.address IS 'Reverse geocoded Address, stored automatically on Creation.';

migrations/005_browser_id.sql

@@ -0,0 +1,27 @@
+-- =====================================================================
+-- Migration 005: Adds Browser ID for anonymous User Identification
+-- =====================================================================
+
+-- Adds browser_id Column to Contributions
+ALTER TABLE contributions
+    ADD COLUMN browser_id VARCHAR(36) DEFAULT NULL;
+
+-- Adds browser_id Column to Votes
+-- Replaces voter_name for Identification
+ALTER TABLE votes
+    ADD COLUMN browser_id VARCHAR(36) DEFAULT NULL;
+
+-- Index for fast Vote Lookup by Browser
+CREATE INDEX idx_votes_browser ON votes(browser_id);
+
+
+-- New UNIQUE Constraint: One Vote per Browser per Contribution
+
+-- Drops old Constraint voter_name based
+ALTER TABLE votes
+    DROP CONSTRAINT IF EXISTS votes_unique_per_voter;
+
+-- Creates new Constraint browser_id based
+ALTER TABLE votes
+    ADD CONSTRAINT votes_contribution_browser_unique
+    UNIQUE (contribution_id, browser_id);

migrations/006_comments_and_photos.sql

@@ -0,0 +1,35 @@
+-- =====================================================================
+-- Migration 006: Comments Table and Photo Support
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Creates Table "comments"
+-- Stores Comments on Contributions. Comments is linked to
+-- Contributions and identified by browser_id.
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS comments (
+    comment_id      SERIAL PRIMARY KEY,
+    contribution_id INTEGER NOT NULL REFERENCES contributions(contribution_id) ON DELETE CASCADE,
+    author_name     VARCHAR(100) NOT NULL,
+    browser_id      VARCHAR(36) DEFAULT NULL,
+    content         TEXT NOT NULL,
+    created_at      TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Indexes for fast Comment Queries
+-- ---------------------------------------------------------------------
+CREATE INDEX idx_comments_contribution ON comments(contribution_id);
+CREATE INDEX idx_comments_browser ON comments(browser_id);
+
+
+-- ---------------------------------------------------------------------
+-- Block 3: Adds Photo Path Column to Contributions
+-- Stores relative Path to uploaded Photo File.
+-- ---------------------------------------------------------------------
+ALTER TABLE contributions
+    ADD COLUMN photo_path VARCHAR(255) DEFAULT NULL;
+
+COMMENT ON COLUMN contributions.photo_path IS 'Relative Path to uploaded Photo. NULL = no Photo.';

migrations/007_comment_moderation.sql

@@ -0,0 +1,14 @@
+-- =====================================================================
+-- Migration 007: Adds Status Column to Comments for Moderation
+-- =====================================================================
+
+-- Adds Status Column with Default 'pending'
+ALTER TABLE comments
+    ADD COLUMN status VARCHAR(20) NOT NULL DEFAULT 'pending'
+    CHECK (status IN ('pending', 'approved', 'rejected'));
+
+-- Index for fast Status Filtering
+CREATE INDEX idx_comments_status ON comments(status);
+
+-- Approves existing Comments
+UPDATE comments SET status = 'approved';

migrations/008_comment_count_trigger.sql

@@ -0,0 +1,65 @@
+-- =====================================================================
+-- Migration 008: Adds comment_count Column with automatic Trigger
+-- Mirrors Pattern from likes_count and dislikes_count.
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Adds comment_count Column to Contributions
+-- ---------------------------------------------------------------------
+ALTER TABLE contributions
+    ADD COLUMN comment_count INTEGER NOT NULL DEFAULT 0;
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Backfills existing Comment Counts
+-- ---------------------------------------------------------------------
+UPDATE contributions c
+SET comment_count = (
+    SELECT COUNT(*)
+    FROM comments cm
+    WHERE cm.contribution_id = c.contribution_id
+      AND cm.status = 'approved'
+);
+
+
+-- ---------------------------------------------------------------------
+-- Block 3: Trigger Function to update comment_count
+-- Fires on Status Change on comments. Only counts approved Comments
+-- ---------------------------------------------------------------------
+CREATE OR REPLACE FUNCTION update_comment_count()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF TG_OP = 'INSERT' OR TG_OP = 'UPDATE' THEN
+        UPDATE contributions
+        SET comment_count = (
+            SELECT COUNT(*) FROM comments
+            WHERE contribution_id = NEW.contribution_id
+              AND status = 'approved'
+        )
+        WHERE contribution_id = NEW.contribution_id;
+    END IF;
+
+    IF TG_OP = 'DELETE' OR (TG_OP = 'UPDATE' AND OLD.contribution_id != NEW.contribution_id) THEN
+        UPDATE contributions
+        SET comment_count = (
+            SELECT COUNT(*) FROM comments
+            WHERE contribution_id = OLD.contribution_id
+              AND status = 'approved'
+        )
+        WHERE contribution_id = OLD.contribution_id;
+    END IF;
+
+    RETURN NULL;
+END;
+$$ LANGUAGE plpgsql;
+
+
+-- ---------------------------------------------------------------------
+-- Block 4: Attaches Trigger to comments Table
+-- ---------------------------------------------------------------------
+CREATE TRIGGER trigger_update_comment_count
+    AFTER INSERT OR DELETE OR UPDATE OF status
+    ON comments
+    FOR EACH ROW
+    EXECUTE FUNCTION update_comment_count();

migrations/009_tasks-module.sql

@@ -0,0 +1,183 @@
+-- =====================================================================
+-- Migration 009: Tasks Module — Tasks with Reward System
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Tasks Table
+-- Stores Tasks with Geometry, Moderation and Completion.
+-- Status Flow from pending to rejected or approved to completed to verified
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS tasks (
+    task_id              SERIAL PRIMARY KEY,
+    municipality_id      INTEGER NOT NULL REFERENCES municipalities(municipality_id),
+    geom                 GEOMETRY(Geometry, 4326) NOT NULL,
+    geom_type            VARCHAR(10) NOT NULL CHECK (geom_type IN ('point', 'line', 'polygon')),
+    category             VARCHAR(50) NOT NULL,
+    title                VARCHAR(200) NOT NULL,
+    description          TEXT DEFAULT '',
+    points_reward        INTEGER NOT NULL DEFAULT 25,
+    author_name          VARCHAR(100) NOT NULL,
+    browser_id           VARCHAR(36),
+    photo_path           VARCHAR(255),
+    status               VARCHAR(20) NOT NULL DEFAULT 'pending'
+                         CHECK (status IN ('pending', 'rejected', 'approved', 'completed', 'verified')),
+    address              VARCHAR(255),
+
+    -- Completion Fields empty before completed
+    completed_by_name    VARCHAR(100),
+    completed_by_browser VARCHAR(36),
+    completion_photo     VARCHAR(255),
+    completion_comment   TEXT,
+    completed_at         TIMESTAMP,
+
+    -- Counters updated via Triggers
+    likes_count          INTEGER NOT NULL DEFAULT 0,
+    dislikes_count       INTEGER NOT NULL DEFAULT 0,
+    comment_count        INTEGER NOT NULL DEFAULT 0,
+
+    created_at           TIMESTAMP NOT NULL DEFAULT NOW(),
+    updated_at           TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX idx_tasks_municipality ON tasks(municipality_id);
+CREATE INDEX idx_tasks_status ON tasks(status);
+CREATE INDEX idx_tasks_category ON tasks(category);
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Citizen Points Table
+-- One Row per Completion. Leaderboard via SUM and GROUP BY.
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS user_points (
+    points_id            SERIAL PRIMARY KEY,
+    municipality_id      INTEGER NOT NULL REFERENCES municipalities(municipality_id),
+    user_name            VARCHAR(100) NOT NULL,
+    points               INTEGER NOT NULL DEFAULT 25,
+    task_id              INTEGER NOT NULL REFERENCES tasks(task_id) ON DELETE CASCADE,
+    created_at           TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX idx_user_points_municipality ON user_points(municipality_id);
+CREATE INDEX idx_user_points_user ON user_points(user_name);
+
+
+-- ---------------------------------------------------------------------
+-- Block 3: Adapts Votes Table for Tasks
+-- Either contribution_id OR task_id
+-- ---------------------------------------------------------------------
+ALTER TABLE votes
+    ADD COLUMN task_id INTEGER REFERENCES tasks(task_id) ON DELETE CASCADE;
+
+CREATE INDEX idx_votes_task ON votes(task_id);
+
+-- Unique Vote per Browser per Task
+ALTER TABLE votes
+    ADD CONSTRAINT votes_task_browser_unique
+    UNIQUE (task_id, browser_id);
+
+
+-- ---------------------------------------------------------------------
+-- Block 4: Adapts Comments Table for Tasks
+-- Either contribution_id OR task_id
+-- ---------------------------------------------------------------------
+ALTER TABLE comments
+    ADD COLUMN task_id INTEGER REFERENCES tasks(task_id) ON DELETE CASCADE;
+
+CREATE INDEX idx_comments_task ON comments(task_id);
+
+
+-- ---------------------------------------------------------------------
+-- Block 5: Trigger Updated Timestamp for Tasks
+-- ---------------------------------------------------------------------
+CREATE TRIGGER set_tasks_updated_at
+    BEFORE UPDATE ON tasks
+    FOR EACH ROW
+    EXECUTE FUNCTION set_updated_at();
+
+
+-- ---------------------------------------------------------------------
+-- Block 6: Trigger Vote Counts for Tasks
+-- Mirrors Pattern from Contributions.
+-- ---------------------------------------------------------------------
+CREATE OR REPLACE FUNCTION update_task_vote_counts()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF TG_OP = 'INSERT' OR TG_OP = 'UPDATE' THEN
+        IF NEW.task_id IS NOT NULL THEN
+            UPDATE tasks SET
+                likes_count = (SELECT COUNT(*) FROM votes WHERE task_id = NEW.task_id AND vote_type = 'like'),
+                dislikes_count = (SELECT COUNT(*) FROM votes WHERE task_id = NEW.task_id AND vote_type = 'dislike')
+            WHERE task_id = NEW.task_id;
+        END IF;
+    END IF;
+
+    IF TG_OP = 'DELETE' OR (TG_OP = 'UPDATE' AND OLD.task_id IS NOT NULL) THEN
+        UPDATE tasks SET
+            likes_count = (SELECT COUNT(*) FROM votes WHERE task_id = OLD.task_id AND vote_type = 'like'),
+            dislikes_count = (SELECT COUNT(*) FROM votes WHERE task_id = OLD.task_id AND vote_type = 'dislike')
+        WHERE task_id = OLD.task_id;
+    END IF;
+
+    RETURN NULL;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS trigger_update_task_vote_counts ON votes;
+
+CREATE TRIGGER trigger_update_task_vote_counts
+    AFTER INSERT OR DELETE OR UPDATE ON votes
+    FOR EACH ROW
+    EXECUTE FUNCTION update_task_vote_counts();
+
+
+-- ---------------------------------------------------------------------
+-- Block 7: Trigger Comment Count for Tasks
+-- Mirrors Pattern from Contributions.
+-- ---------------------------------------------------------------------
+CREATE OR REPLACE FUNCTION update_task_comment_count()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF TG_OP = 'INSERT' OR TG_OP = 'UPDATE' THEN
+        IF NEW.task_id IS NOT NULL THEN
+            UPDATE tasks
+            SET comment_count = (
+                SELECT COUNT(*) FROM comments
+                WHERE task_id = NEW.task_id AND status = 'approved'
+            )
+            WHERE task_id = NEW.task_id;
+        END IF;
+    END IF;
+
+    IF TG_OP = 'DELETE' OR (TG_OP = 'UPDATE' AND OLD.task_id IS NOT NULL) THEN
+        UPDATE tasks
+        SET comment_count = (
+            SELECT COUNT(*) FROM comments
+            WHERE task_id = OLD.task_id AND status = 'approved'
+        )
+        WHERE task_id = OLD.task_id;
+    END IF;
+
+    RETURN NULL;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS trigger_update_task_comment_count ON comments;
+
+CREATE TRIGGER trigger_update_task_comment_count
+    AFTER INSERT OR DELETE OR UPDATE OF status ON comments
+    FOR EACH ROW
+    EXECUTE FUNCTION update_task_comment_count();
+
+
+-- ---------------------------------------------------------------------
+-- Block 8: Views for QGIS
+-- ---------------------------------------------------------------------
+CREATE OR REPLACE VIEW tasks_points AS
+    SELECT * FROM tasks WHERE geom_type = 'point';
+
+CREATE OR REPLACE VIEW tasks_lines AS
+    SELECT * FROM tasks WHERE geom_type = 'line';
+
+CREATE OR REPLACE VIEW tasks_polygons AS
+    SELECT * FROM tasks WHERE geom_type = 'polygon';

public/admin.css

@@ -1,361 +0,0 @@
-/* =====================================================================
-   Moderation Page Styles
-   ===================================================================== */
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-    font-family: 'Segoe UI', system-ui, sans-serif;
-    background: #f4f5f7;
-    color: #1a1a2e;
-    font-size: 15px;
-}
-
-/* -----------------------------------------------------------------
-   Header
-   ----------------------------------------------------------------- */
-.admin-header {
-    background: var(--color-primary);
-    color: white;
-    padding: 16px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.admin-header h1 { font-size: 1.2rem; }
-
-.admin-header a {
-    color: white;
-    text-decoration: none;
-    opacity: 0.8;
-    font-size: 0.85rem;
-}
-
-.admin-header a:hover { opacity: 1; }
-
-.admin-nav {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-}
-
-/* -----------------------------------------------------------------
-   Container
-   ----------------------------------------------------------------- */
-.admin-container {
-    max-width: 900px;
-    margin: 24px auto;
-    padding: 0 16px;
-}
-
-/* -----------------------------------------------------------------
-   Statistics Cards
-   ----------------------------------------------------------------- */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 12px;
-    margin-bottom: 32px;
-}
-
-.stat-card {
-    background: white;
-    border-radius: 8px;
-    padding: 16px;
-    text-align: center;
-    border: 1px solid #e0e0e0;
-}
-
-.stat-card .stat-number {
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: var(--color-primary);
-}
-
-.stat-card .stat-label {
-    font-size: 0.8rem;
-    color: #5a5a7a;
-    margin-top: 4px;
-}
-
-/* -----------------------------------------------------------------
-   Section Headers
-   ----------------------------------------------------------------- */
-h2 {
-    font-size: 1.1rem;
-    margin-bottom: 16px;
-    padding-bottom: 8px;
-    border-bottom: 2px solid var(--color-primary);
-}
-
-.section { margin-bottom: 40px; }
-
-/* -----------------------------------------------------------------
-   Badges
-   ----------------------------------------------------------------- */
-.badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.badge-pending { background: #fff3cd; color: #856404; }
-.badge-approved { background: #d4edda; color: #155724; }
-.badge-rejected { background: #f8d7da; color: #721c24; }
-.badge-point { background: #e3f2fd; color: #1565c0; }
-.badge-line { background: #f3e5f5; color: #6a1b9a; }
-.badge-polygon { background: #e8f5e9; color: #2e7d32; }
-
-/* -----------------------------------------------------------------
-   Action Buttons
-   ----------------------------------------------------------------- */
-.action-buttons {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.btn-approve { background: #2e7d32; color: white; }
-.btn-approve:hover { background: #1b5e20; }
-
-.btn-reject { background: #c62828; color: white; }
-.btn-reject:hover { background: #b71c1c; }
-
-/* -----------------------------------------------------------------
-   Empty State
-   ----------------------------------------------------------------- */
-.empty-state {
-    text-align: center;
-    padding: 40px;
-    color: #999;
-    font-size: 0.9rem;
-}
-
-/* -----------------------------------------------------------------
-   Login Page
-   ----------------------------------------------------------------- */
-.login-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-}
-
-.login-box {
-    background: white;
-    border-radius: 12px;
-    padding: 32px;
-    max-width: 380px;
-    width: 90%;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    text-align: center;
-}
-
-.login-box h1 {
-    font-size: 1.3rem;
-    margin-bottom: 8px;
-}
-
-.login-box p {
-    font-size: 0.85rem;
-    color: #5a5a7a;
-    margin-bottom: 20px;
-}
-
-.login-box input[type="password"] {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    margin-bottom: 12px;
-    font-family: 'Segoe UI', system-ui, sans-serif;
-}
-
-.login-box input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(0, 55, 109, 0.1);
-}
-
-.login-box button {
-    width: 100%;
-    padding: 10px;
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    cursor: pointer;
-    font-family: 'Segoe UI', system-ui, sans-serif;
-}
-
-.login-box button:hover { filter: brightness(1.15); }
-
-.error {
-    color: #c62828;
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-}
-
-.back-link {
-    margin-top: 16px;
-    font-size: 0.8rem;
-}
-
-.back-link a { color: #5a5a7a; }
-
-/* -----------------------------------------------------------------
-   Mobile Responsive
-   ----------------------------------------------------------------- */
-    .action-buttons {
-        width: 100%;
-    }
-
-    .action-buttons form {
-        flex: 1;
-    }
-
-    .action-buttons .btn {
-        width: 100%;
-        justify-content: center;
-    }
-    
-
-/* -----------------------------------------------------------------
-   Collapsible Contribution Rows
-   ----------------------------------------------------------------- */
-.contribution-row-collapsible {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    margin-bottom: 12px;
-    overflow: hidden;
-}
-
-.contribution-row-header {
-    padding: 12px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    transition: background 150ms ease;
-}
-
-.contribution-row-header:hover {
-    background: #f8f9fa;
-}
-
-.contribution-row-summary {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    flex: 1;
-}
-
-.contribution-row-summary .title {
-    font-weight: 600;
-    font-size: 0.95rem;
-}
-
-.meta-inline {
-    font-size: 0.8rem;
-    color: #5a5a7a;
-}
-
-.collapse-icon {
-    color: #999;
-    font-size: 0.8rem;
-    flex-shrink: 0;
-    transition: transform 200ms ease;
-}
-
-/* -----------------------------------------------------------------
-   Contribution Detail View (expanded)
-   ----------------------------------------------------------------- */
-.contribution-row-detail {
-    padding: 0 16px 16px 16px;
-    border-top: 1px solid #f0f0f0;
-}
-
-.detail-layout {
-    display: flex;
-    gap: 16px;
-    margin-bottom: 12px;
-    margin-top: 12px;
-}
-
-.detail-map {
-    width: 200px;
-    height: 160px;
-    border-radius: 6px;
-    border: 1px solid #e0e0e0;
-    flex-shrink: 0;
-    background: #f0f0f0;
-}
-
-.detail-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.detail-content .description {
-    font-size: 0.85rem;
-    line-height: 1.5;
-    color: #5a5a7a;
-    margin-bottom: 8px;
-}
-
-.detail-content .meta {
-    font-size: 0.8rem;
-    color: #999;
-}
-
-.btn-map {
-    background: #1565C0;
-    color: white;
-    text-decoration: none;
-}
-
-.btn-map:hover {
-    background: #0d47a1;
-}
-
-/* -----------------------------------------------------------------
-   Mobile: Detail Layout stacked
-   ----------------------------------------------------------------- */
-@media (max-width: 768px) {
-    .detail-layout {
-        flex-direction: column;
-    }
-
-    .detail-map {
-        width: 100%;
-        height: 180px;
-    }
-
-    .contribution-row-summary {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-    }
-}

public/admin.php

@@ -1,20 +1,31 @@
 <?php
 // =====================================================================
 // Moderation Page
-// Lists pending Contributions for Review. Moderators can approve
+// Lists Contributions for Review. Moderators can approve, reject,
-// or reject Contributions.
+// edit and delete Contributions. Includes Map Preview and Filtering.
-// ToDo: Extend with News Management, User Management, Analytics.
 // =====================================================================
 
+// Reads Environment Configfile
+$envFile = __DIR__ . '/../../.env';
+if (file_exists($envFile)) {
+    $lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        if (strpos(trim($line), '#') === 0) continue;
+        list($key, $value) = array_map('trim', explode('=', $line, 2));
+        putenv("$key=$value");
+    }
+}
+
 require_once __DIR__ . '/api/db.php';
 require_once __DIR__ . '/api/auth.php';
 
+
 // -----------------------------------------------------------------
 // Routing: Login, Logout, or Main Page
 // -----------------------------------------------------------------
 $page = $_GET['page'] ?? 'main';
 
-// Handle Login Form Submission
+// Handles Login
 if ($page === 'login' && $_SERVER['REQUEST_METHOD'] === 'POST') {
     $password = $_POST['password'] ?? '';
     if (admin_login($password)) {
@@ -25,7 +36,7 @@ if ($page === 'login' && $_SERVER['REQUEST_METHOD'] === 'POST') {
     }
 }
 
-// Handle Logout
+// Handles Logout
 if ($page === 'logout') {
     admin_logout();
     header('Location: admin.php?page=login');
@@ -33,88 +44,85 @@ if ($page === 'logout') {
 }
 
 // -----------------------------------------------------------------
-// Load Municipality for Theming (needed for both Login and Main Page)
+// Loads Municipality Configuration for Theming
 // -----------------------------------------------------------------
 $pdo = get_db();
 $stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
-$stmt->execute([':slug' => 'lohne']);
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
 $municipality = $stmt->fetch();
 
-// Show Login Page if not authenticated
+
+// Loads News for Moderation
+$stmt = $pdo->prepare("
+    SELECT news_id, title, content, author_name, published_at, created_at
+    FROM news
+    WHERE municipality_id = :mid
+    ORDER BY published_at DESC
+");
+$stmt->execute([':mid' => $municipality['municipality_id']]);
+$news_items = $stmt->fetchAll();
+
+
+// Loads all Comments with Contribution Titles for Moderation
+$stmt = $pdo->prepare("
+    SELECT cm.comment_id, cm.contribution_id, cm.author_name, cm.browser_id,
+           cm.content, cm.status, cm.created_at,
+           co.title AS contribution_title, co.category AS contribution_category
+    FROM comments cm
+    JOIN contributions co ON cm.contribution_id = co.contribution_id
+    WHERE co.municipality_id = :mid
+    ORDER BY cm.created_at DESC
+");
+$stmt->execute([':mid' => $municipality['municipality_id']]);
+$all_comments = $stmt->fetchAll();
+
+// Counts Comments per Status
+$comment_counts = ['pending' => 0, 'approved' => 0, 'rejected' => 0];
+foreach ($all_comments as $c) {
+    if (isset($comment_counts[$c['status']])) {
+        $comment_counts[$c['status']]++;
+    }
+}
+$comment_counts['total'] = count($all_comments);
+
+
+// Shows Login Page if not authenticated
 if ($page === 'login' || !is_admin()) {
     show_login_page($municipality, $login_error ?? null);
     exit;
 }
 
 // -----------------------------------------------------------------
-// Handle Moderation Actions (Approve / Reject)
+// Loads shared Category Definitions
 // -----------------------------------------------------------------
-if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['mod_action'])) {
+$categories = get_categories();
-    $contribution_id = $_POST['contribution_id'] ?? '';
-    $mod_action = $_POST['mod_action'];
-
-    if ($contribution_id && in_array($mod_action, ['approved', 'rejected'])) {
-        $stmt = $pdo->prepare("UPDATE contributions SET status = :status WHERE contribution_id = :id");
-        $stmt->execute([':status' => $mod_action, ':id' => $contribution_id]);
-    }
-
-    // Redirects to prevent Form Resubmission on Refresh
-    header('Location: admin.php');
-    exit;
-}
 
 // -----------------------------------------------------------------
-// Load Contributions Data
+// Loads Contributions and Statistics
 // -----------------------------------------------------------------
 
-// Pending Contributions
+// Loads all Contributions for Municipality
 $stmt = $pdo->prepare("
-    SELECT contribution_id, title, category, description, author_name, geom_type, status, created_at
+    SELECT contribution_id, title, category, description, author_name, photo_path,
+           geom_type, status, likes_count, dislikes_count, comment_count, created_at, updated_at
     FROM contributions
-    WHERE municipality_id = :mid AND status = 'pending'
+    WHERE municipality_id = :mid
     ORDER BY created_at DESC
 ");
 $stmt->execute([':mid' => $municipality['municipality_id']]);
-$pending = $stmt->fetchAll();
+$all_contributions = $stmt->fetchAll();
 
-// Recently moderated Contributions
+// Counts per Status
-$stmt = $pdo->prepare("
+$counts = ['pending' => 0, 'approved' => 0, 'rejected' => 0];
-    SELECT contribution_id, title, category, description, author_name, geom_type, status, created_at, updated_at
+foreach ($all_contributions as $item) {
-    FROM contributions 
+    if (isset($counts[$item['status']])) {
-    WHERE municipality_id = :mid AND status IN ('approved', 'rejected')
+        $counts[$item['status']]++;
-    ORDER BY updated_at DESC
+    }
-    LIMIT 20
-");
-$stmt->execute([':mid' => $municipality['municipality_id']]);
-$moderated = $stmt->fetchAll();
-
-// Statistics
-$stmt = $pdo->prepare("
-    SELECT status, COUNT(*) as count 
-    FROM contributions 
-    WHERE municipality_id = :mid 
-    GROUP BY status
-");
-$stmt->execute([':mid' => $municipality['municipality_id']]);
-$stats_rows = $stmt->fetchAll();
-$stats = [];
-foreach ($stats_rows as $row) {
-    $stats[$row['status']] = $row['count'];
 }
-
+$counts['total'] = count($all_contributions);
-// Category Labels for German Display
-$category_labels = [
-    'mobility'    => '🚲 Mobilität',
-    'building'    => '🏗️ Bauen',
-    'energy'      => '⚡ Energie',
-    'environment' => '🌳 Umwelt',
-    'industry'    => '🏭 Industrie',
-    'consumption' => '🛒 Konsum',
-    'other'       => '📌 Sonstiges'
-];
 
 // -----------------------------------------------------------------
-// Render Main Page
+// Renders Main Page
 // -----------------------------------------------------------------
 ?>
 <!DOCTYPE html>
@@ -123,97 +131,211 @@ $category_labels = [
     <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="assets/shield-halved-solid-off-black.png" type="image/png">
+
+    <!-- Loads CSS Dependencies -->
+
+    <!-- Font Awesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="admin.css">
+    
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
+    
+    <!-- Application Styles -->
+    <link rel="stylesheet" href="styles.css">
+
+
+    <!-- Loads JavaScript Dependencies -->
+    
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
+
+
+    <!-- Loads Municipality Theme from Database -->
     <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
 </head>
 <body>
 
-    <div class="admin-header">
+    <!-- ============================================================= -->
-        <h1><i class="fa-solid fa-shield-halved"></i> Moderation — <?= htmlspecialchars($municipality['name']) ?></h1>
+    <!-- Header                                                        -->
-        <div class="admin-nav">
+    <!-- ============================================================= -->
-            <a href="index.php"><i class="fa-solid fa-map"></i> Zur Karte</a>
+    <div class="page-header">
+        <div class="page-header-inner">
+            <h1><i class="fa-solid fa-shield-halved"></i> Moderationsportal <?= htmlspecialchars($municipality['name']) ?></h1>
+            <div class="page-header-nav">
+                <a href="index.php"><i class="fa-solid fa-map"></i> Bürgerportal</a>
                 <a href="admin.php?page=logout"><i class="fa-solid fa-right-from-bracket"></i> Abmelden</a>
             </div>
         </div>
-
-    <div class="admin-container">
-
-        <!-- Statistics -->
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="stat-number"><?= ($stats['pending'] ?? 0) ?></div>
-                <div class="stat-label">Ausstehend</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number"><?= ($stats['approved'] ?? 0) ?></div>
-                <div class="stat-label">Freigegeben</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number"><?= ($stats['rejected'] ?? 0) ?></div>
-                <div class="stat-label">Abgelehnt</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number"><?= array_sum(array_column($stats_rows, 'count')) ?></div>
-                <div class="stat-label">Gesamt</div>
-            </div>
     </div>
 
-        <!-- Pending Contributions -->
+    <div class="page-container">
-        <div class="section">
-            <h2><i class="fa-solid fa-clock"></i> Ausstehende Beiträge (<?= count($pending) ?>)</h2>
 
-            <?php if (empty($pending)): ?>
+        <!-- ========================================================= -->
+        <!-- Page Navigation Tabs                                      -->
+        <!-- ========================================================= -->
+        <div class="page-tabs">
+            <button class="page-tab active" onclick="showPageTab('contributions')">
+                <i class="fa-solid fa-list-check"></i> Beiträge
+            </button>
+            <button class="page-tab" onclick="showPageTab('comments')">
+                <i class="fa-solid fa-comments"></i> Kommentare
+            </button>
+            <button class="page-tab" onclick="showPageTab('news')">
+                <i class="fa-solid fa-newspaper"></i> Neuigkeiten
+            </button>
+            <button class="page-tab" onclick="showPageTab('stats')">
+                <i class="fa-solid fa-chart-bar"></i> Statistik
+            </button>
+            <button class="page-tab" onclick="showPageTab('users')">
+                <i class="fa-solid fa-users"></i> Benutzer
+            </button>
+        </div>
+
+
+        <!-- ========================================================= -->
+        <!-- Contributions Tab                                         -->
+        <!-- ========================================================= -->
+        <div id="tab-contributions" class="page-tab-content">
+
+            <!-- Status Filter Tabs -->
+            <div class="filter-tabs">
+                <button class="filter-tab active" onclick="filterByStatus('all', this)">
+                    Alle <span class="tab-count"><?= $counts['total'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterByStatus('pending', this)">
+                    Ausstehend <span class="tab-count"><?= $counts['pending'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterByStatus('approved', this)">
+                    Akzeptiert <span class="tab-count"><?= $counts['approved'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterByStatus('rejected', this)">
+                    Abgelehnt <span class="tab-count"><?= $counts['rejected'] ?></span>
+                </button>
+            </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="visible-count"><?= $counts['total'] ?> Beiträge</span>
+                <select onchange="sortContributions(this.value)">
+                    <option value="date-desc">Neueste zuerst</option>
+                    <option value="date-asc">Älteste zuerst</option>
+                    <option value="category">Nach Kategorie</option>
+                </select>
+            </div>
+
+            <!-- Contribution List -->
+            <div id="contributions-container">
+                <?php if (empty($all_contributions)): ?>
                     <div class="empty-state">
-                    <i class="fa-solid fa-check-circle" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
+                        <i class="fa-solid fa-inbox" style="font-size:2rem;margin-bottom:8px;display:block;"></i>
-                    Keine ausstehenden Beiträge.
+                        Noch keine Beiträge vorhanden.
                     </div>
                 <?php else: ?>
-                <?php foreach ($pending as $item): ?>
+                    <?php foreach ($all_contributions as $item):
-                    <div class="contribution-row-collapsible">
+                        $cat = $categories[$item['category']] ?? ['label' => $item['category'], 'faIcon' => 'fa-question', 'color' => '#999'];
-                        <div class="contribution-row-header" onclick="toggleContribution(this)">
+                        $status_label = ['pending' => 'Ausstehend', 'approved' => 'Akzeptiert', 'rejected' => 'Abgelehnt'];
+                    ?>
+                        <div class="contribution-row"
+                             data-status="<?= $item['status'] ?>"
+                             data-category="<?= htmlspecialchars($item['category']) ?>"
+                             data-date="<?= $item['created_at'] ?>"
+                             data-id="<?= $item['contribution_id'] ?>">
+
+                            <!-- Collapsed Header: Title + Status -->
+                            <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
                                 <div class="contribution-row-summary">
                                     <span class="title"><?= htmlspecialchars($item['title']) ?></span>
-                                <span class="badge badge-pending">ausstehend</span>
+                                    <span class="badge badge-category">
-                                <span class="badge badge-<?= $item['geom_type'] ?>"><?= $item['geom_type'] ?></span>
+                                        <i class="fa-solid <?= $cat['faIcon'] ?>"></i>
-                                <span class="meta-inline">
+                                        <?= $cat['label'] ?>
-                                    <?= $category_labels[$item['category']] ?? $item['category'] ?>
-                                    · <?= htmlspecialchars($item['author_name']) ?>
-                                    · <?= date('d.m.Y H:i', strtotime($item['created_at'])) ?>
                                     </span>
+                                    <span class="badge badge-<?= $item['status'] ?>"><?= $status_label[$item['status']] ?? $item['status'] ?></span>
                                 </div>
                                 <i class="fa-solid fa-chevron-down collapse-icon"></i>
                             </div>
-                        <div class="contribution-row-detail" style="display:none;">
+
+                            <!-- Expanded Detail -->
+                            <div class="contribution-row-detail">
                                 <div class="detail-layout">
+                                    <!-- Map and Photo Slider -->
+                                    <div class="detail-slider" id="slider-<?= $item['contribution_id'] ?>">
+                                        <!-- Slide 1: Map -->
+                                        <div class="detail-slide active" data-slide="map">
                                             <div class="detail-map" id="map-<?= $item['contribution_id'] ?>"
                                                  data-contribution-id="<?= $item['contribution_id'] ?>">
                                             </div>
+                                        </div>
+                                        <?php if (!empty($item['photo_path'])): ?>
+                                            <!-- Slide 2: Photo -->
+                                            <div class="detail-slide" data-slide="photo" style="display:none;">
+                                                <img src="<?= htmlspecialchars($item['photo_path']) ?>" alt="Foto"
+                                                     class="detail-slide-photo" onclick="window.open('<?= htmlspecialchars($item['photo_path']) ?>', '_blank')">
+                                            </div>
+                                            <!-- Slider Arrows -->
+                                            <button class="slider-arrow slider-arrow-left" onclick="slideDetail(<?= $item['contribution_id'] ?>, -1)">
+                                                <i class="fa-solid fa-chevron-left"></i>
+                                            </button>
+                                            <button class="slider-arrow slider-arrow-right" onclick="slideDetail(<?= $item['contribution_id'] ?>, 1)">
+                                                <i class="fa-solid fa-chevron-right"></i>
+                                            </button>
+                                        <?php endif; ?>
+                                    </div>
+
+                                    <!-- Content -->
                                     <div class="detail-content">
                                         <?php if ($item['description']): ?>
                                             <div class="description"><?= htmlspecialchars($item['description']) ?></div>
                                         <?php else: ?>
-                                        <div class="description" style="color:#bbb;font-style:italic;">Keine Beschreibung.</div>
+                                            <div class="description empty">Keine Beschreibung vorhanden.</div>
                                         <?php endif; ?>
-                                    <div class="meta">
+
-                                        <i class="fa-solid fa-user"></i> <?= htmlspecialchars($item['author_name']) ?>
+                                        <div class="detail-meta">
-                                        · <i class="fa-solid fa-calendar"></i> <?= date('d.m.Y H:i', strtotime($item['created_at'])) ?>
+                                            <span><i class="fa-solid fa-user"></i> <?= htmlspecialchars($item['author_name']) ?></span>
+                                            <span><i class="fa-solid fa-calendar"></i> <?= date('d.m.Y, H:i', strtotime($item['created_at'])) ?> Uhr</span>
+                                            <span>
+                                                <i class="fa-solid fa-thumbs-up"></i> <?= $item['likes_count'] ?>
+                                                &middot;
+                                                <i class="fa-solid fa-thumbs-down"></i> <?= $item['dislikes_count'] ?>
+                                                &middot;
+                                                <i class="fa-solid fa-comment"></i> <?= $item['comment_count'] ?? 0 ?>
+
+                                                
+                                            </span>
                                         </div>
                                     </div>
                                 </div>
+
+                                <!-- Action Buttons -->
                                 <div class="action-buttons">
-                                <form method="POST">
+                                    <?php if ($item['status'] !== 'approved'): ?>
-                                    <input type="hidden" name="contribution_id" value="<?= $item['contribution_id'] ?>">
+                                        <button class="btn btn-approve" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'approved')">
-                                    <input type="hidden" name="mod_action" value="approved">
+                                            <i class="fa-solid fa-check"></i> Akzeptieren
-                                    <button type="submit" class="btn btn-approve"><i class="fa-solid fa-check"></i> Freigeben</button>
+                                        </button>
-                                </form>
+                                    <?php endif; ?>
-                                <form method="POST">
+
-                                    <input type="hidden" name="contribution_id" value="<?= $item['contribution_id'] ?>">
+                                    <?php if ($item['status'] !== 'rejected'): ?>
-                                    <input type="hidden" name="mod_action" value="rejected">
+                                        <button class="btn btn-reject" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'rejected')">
-                                    <button type="submit" class="btn btn-reject"><i class="fa-solid fa-xmark"></i> Ablehnen</button>
+                                            <i class="fa-solid fa-xmark"></i> Ablehnen
-                                </form>
+                                        </button>
-                                <a href="index.php#contribution-<?= $item['contribution_id'] ?>" class="btn btn-map" target="_blank">
+                                    <?php endif; ?>
-                                    <i class="fa-solid fa-map-location-dot"></i> Auf Karte
+
+                                    <?php if ($item['status'] !== 'pending'): ?>
+                                        <button class="btn btn-reset" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'pending')">
+                                            <i class="fa-solid fa-rotate-left"></i> Zurücksetzen
+                                        </button>
+                                    <?php endif; ?>
+
+                                    <button class="btn btn-edit" onclick="editContribution(<?= $item['contribution_id'] ?>, '<?= htmlspecialchars(addslashes($item['title']), ENT_QUOTES) ?>', '<?= htmlspecialchars(addslashes($item['description'] ?? ''), ENT_QUOTES) ?>')">
+                                        <i class="fa-solid fa-pen"></i> Bearbeiten
+                                    </button>
+
+                                    <button class="btn btn-delete" onclick="deleteContribution(<?= $item['contribution_id'] ?>)">
+                                        <i class="fa-solid fa-trash"></i> Löschen
+                                    </button>
+
+                                    <a class="btn btn-map" href="index.php" target="_blank">
+                                        <i class="fa-solid fa-map-location-dot"></i> Karte
                                     </a>
                                 </div>
                             </div>
@@ -221,152 +343,211 @@ $category_labels = [
                     <?php endforeach; ?>
                 <?php endif; ?>
             </div>
+        </div>
 
-        <!-- Recently Moderated -->
-        <div class="section">
-            <h2><i class="fa-solid fa-history"></i> Kürzlich moderiert</h2>
 
-            <?php if (empty($moderated)): ?>
+        <!-- ========================================================= -->
-                <div class="empty-state">Noch keine moderierten Beiträge.</div>
+        <!-- Comments Moderation Tab                                   -->
+        <!-- ========================================================= -->
+        <div id="tab-comments" class="page-tab-content" style="display:none;">
+
+            <!-- Status Filter Tabs for Comments -->
+            <div class="filter-tabs" id="comment-filter-tabs">
+                <button class="filter-tab active" onclick="filterCommentsByStatus('all', this)">
+                    Alle <span class="tab-count"><?= $comment_counts['total'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterCommentsByStatus('pending', this)">
+                    Ausstehend <span class="tab-count"><?= $comment_counts['pending'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterCommentsByStatus('approved', this)">
+                    Akzeptiert <span class="tab-count"><?= $comment_counts['approved'] ?></span>
+                </button>
+                <button class="filter-tab" onclick="filterCommentsByStatus('rejected', this)">
+                    Abgelehnt <span class="tab-count"><?= $comment_counts['rejected'] ?></span>
+                </button>
+            </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="comment-visible-count"><?= $comment_counts['total'] ?> Kommentare</span>
+                <select onchange="sortCommentRows(this.value)">
+                    <option value="date-desc">Neueste zuerst</option>
+                    <option value="date-asc">Älteste zuerst</option>
+                    <option value="contribution">Nach Beitrag</option>
+                </select>
+            </div>
+
+            <!-- Comments List -->
+            <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>
+                        Noch keine Kommentare vorhanden.
+                    </div>
                 <?php else: ?>
-                <?php foreach ($moderated as $item): ?>
+                    <?php foreach ($all_comments as $comment):
-                    <div class="contribution-row-collapsible">
+                        $comment_cat = $categories[$comment['contribution_category'] ?? ''] ?? ['label' => 'Unbekannt', 'faIcon' => 'fa-question', 'color' => '#999'];
-                        <div class="contribution-row-header" onclick="toggleContribution(this)">
+                        $comment_status_label = ['pending' => 'Ausstehend', 'approved' => 'Akzeptiert', 'rejected' => 'Abgelehnt'];
+                    ?>
+                        <div class="contribution-row comment-mod-row"
+                             data-status="<?= $comment['status'] ?>"
+                             data-date="<?= $comment['created_at'] ?>"
+                             data-contribution="<?= htmlspecialchars($comment['contribution_title']) ?>">
+
+                            <!-- Collapsed: Contribution Title + Comment Status + Category -->
+                            <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
                                 <div class="contribution-row-summary">
-                                <span class="title"><?= htmlspecialchars($item['title']) ?></span>
+                                    <span class="title"><?= htmlspecialchars($comment['contribution_title']) ?></span>
-                                <span class="badge badge-<?= $item['status'] ?>"><?= $item['status'] === 'approved' ? 'freigegeben' : 'abgelehnt' ?></span>
+                                    <span class="badge badge-<?= $comment['status'] ?>"><?= $comment_status_label[$comment['status']] ?? $comment['status'] ?></span>
-                                <span class="badge badge-<?= $item['geom_type'] ?>"><?= $item['geom_type'] ?></span>
+                                    <span class="badge badge-category">
-                                <span class="meta-inline">
+                                        <i class="fa-solid <?= $comment_cat['faIcon'] ?>"></i>
-                                    <?= $category_labels[$item['category']] ?? $item['category'] ?>
+                                        <?= $comment_cat['label'] ?>
-                                    · <?= htmlspecialchars($item['author_name']) ?>
-                                    · <?= date('d.m.Y H:i', strtotime($item['created_at'])) ?>
                                     </span>
                                 </div>
                                 <i class="fa-solid fa-chevron-down collapse-icon"></i>
                             </div>
-                        <div class="contribution-row-detail" style="display:none;">
+
-                            <div class="detail-layout">
+                            <!-- Expanded Detail -->
-                                <div class="detail-map" id="map-<?= $item['contribution_id'] ?>"
+                            <div class="contribution-row-detail">
-                                     data-contribution-id="<?= $item['contribution_id'] ?>">
+                                <div style="padding:12px 0;">
+                                    <!-- Comment Content -->
+                                    <div style="font-size:0.9rem;line-height:1.6;color:var(--color-text);margin-bottom:12px;">
+                                        <?= nl2br(htmlspecialchars($comment['content'])) ?>
                                     </div>
-                                <div class="detail-content">
+                                    <!-- Meta -->
-                                    <?php if ($item['description'] ?? false): ?>
+                                    <div class="detail-meta">
-                                        <div class="description"><?= htmlspecialchars($item['description']) ?></div>
+                                        <span><i class="fa-solid fa-user"></i> <?= htmlspecialchars($comment['author_name']) ?></span>
-                                    <?php else: ?>
+                                        <span><i class="fa-solid fa-calendar"></i> <?= date('d.m.Y, H:i', strtotime($comment['created_at'])) ?> Uhr</span>
-                                        <div class="description" style="color:#bbb;font-style:italic;">Keine Beschreibung.</div>
+                                    </div>
+                                </div>
+
+                                <!-- Action Buttons -->
+                                <div class="action-buttons">
+                                    <?php if ($comment['status'] !== 'approved'): ?>
+                                        <button class="btn btn-approve" onclick="changeCommentStatus(<?= $comment['comment_id'] ?>, 'approved')">
+                                            <i class="fa-solid fa-check"></i> Akzeptieren
+                                        </button>
                                     <?php endif; ?>
-                                    <div class="meta">
+                                    <?php if ($comment['status'] !== 'rejected'): ?>
-                                        <i class="fa-solid fa-user"></i> <?= htmlspecialchars($item['author_name']) ?>
+                                        <button class="btn btn-reject" onclick="changeCommentStatus(<?= $comment['comment_id'] ?>, 'rejected')">
-                                        · <i class="fa-solid fa-calendar"></i> <?= date('d.m.Y H:i', strtotime($item['created_at'])) ?>
+                                            <i class="fa-solid fa-xmark"></i> Ablehnen
+                                        </button>
+                                    <?php endif; ?>
+                                    <?php if ($comment['status'] !== 'pending'): ?>
+                                        <button class="btn btn-reset" onclick="changeCommentStatus(<?= $comment['comment_id'] ?>, 'pending')">
+                                            <i class="fa-solid fa-rotate-left"></i> Zurücksetzen
+                                        </button>
+                                    <?php endif; ?>
+                                    <button class="btn btn-edit" onclick="editModComment(<?= $comment['comment_id'] ?>, '<?= htmlspecialchars(addslashes($comment['content']), ENT_QUOTES) ?>')">
+                                        <i class="fa-solid fa-pen"></i> Bearbeiten
+                                    </button>
+                                    <button class="btn btn-delete" onclick="deleteModComment(<?= $comment['comment_id'] ?>)">
+                                        <i class="fa-solid fa-trash"></i> Löschen
+                                    </button>
                                 </div>
                             </div>
                         </div>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </div>
+        </div>
+        
+
+        <!-- ========================================================= -->
+        <!-- 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>
+            </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>
+                    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-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;">
+                                    <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                    · <?= htmlspecialchars($news['author_name']) ?>
+                                </span>
+                            </div>
+                            <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;">
+                                <?= nl2br(htmlspecialchars($news['content'])) ?>
+                            </div>
+                            <div class="action-buttons">
+                                <button class="btn btn-edit" onclick="editNews(<?= $news['news_id'] ?>, '<?= htmlspecialchars(addslashes($news['title']), ENT_QUOTES) ?>', '<?= htmlspecialchars(addslashes($news['content']), ENT_QUOTES) ?>', '<?= htmlspecialchars(addslashes($news['author_name']), ENT_QUOTES) ?>')">
+                                    <i class="fa-solid fa-pen"></i> Bearbeiten
+                                </button>
+                                <button class="btn btn-delete" onclick="deleteNews(<?= $news['news_id'] ?>)">
+                                    <i class="fa-solid fa-trash"></i> Löschen
+                                </button>
+                            </div>
                         </div>
                     </div>
                 <?php endforeach; ?>
             <?php endif; ?>
         </div>
 
+
+        <!-- ========================================================= -->
+        <!-- Placeholder Tabs for future Features                      -->
+        <!-- ========================================================= -->
+        <div id="tab-stats" class="page-tab-content" style="display:none;">
+            <div class="placeholder-content">
+                <i class="fa-solid fa-chart-bar"></i>
+                <p>Statistiken und Analysen - geplant in zukünftiger Version.</p>
+            </div>
         </div>
 
-    <!-- Leaflet for Map Previews -->
+        <div id="tab-users" class="page-tab-content" style="display:none;">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
+            <div class="placeholder-content">
+                <i class="fa-solid fa-users"></i>
+                <p>Benutzerverwaltung - geplant in zukünftiger Version.</p>
+            </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 ADMIN_CONFIG = {
-        var MUNICIPALITY_CENTER = [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>];
+            id: <?= $municipality['municipality_id'] ?>,
-        var API_URL = 'api/contributions.php';
+            name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
-
+            slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
-        // Toggle Contribution Detail View
+            center: [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>],
-        function toggleContribution(header) {
+            zoom: <?= $municipality['default_zoom'] ?>,
-            var detail = header.nextElementSibling;
+            primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
-            var icon = header.querySelector('.collapse-icon');
+        };
-            var isOpen = detail.style.display !== 'none';
-
-            if (isOpen) {
-                detail.style.display = 'none';
-                icon.classList.remove('fa-chevron-up');
-                icon.classList.add('fa-chevron-down');
-            } else {
-                detail.style.display = 'block';
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-up');
-
-                // Load Map Preview if not already loaded
-                var mapDiv = detail.querySelector('.detail-map');
-                if (mapDiv && !mapDiv.dataset.loaded) {
-                    loadMapPreview(mapDiv);
-                }
-            }
-        }
-
-        // Load a small Leaflet Map Preview for a Contribution
-        function loadMapPreview(mapDiv) {
-            var contributionId = mapDiv.dataset.contributionId;
-
-            // Fetch Contribution Geometry from API
-            var formData = new FormData();
-            formData.append('action', 'read');
-            formData.append('municipality_id', '<?= $municipality['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;
-
-                    // Find the specific Contribution
-                    var 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;">Keine Geometrie gefunden.</div>';
-                        return;
-                    }
-
-                    // Create small Leaflet Map
-                    var 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);
-
-                    // Add Geometry to Map
-                    var geojsonLayer = L.geoJSON(feature, {
-                        style: { color: '#c62828', weight: 3, fillOpacity: 0.3 },
-                        pointToLayer: function (f, latlng) {
-                            return L.circleMarker(latlng, {
-                                radius: 8, color: '#c62828', fillColor: '#ef5350', fillOpacity: 0.8, weight: 2
-                            });
-                        }
-                    }).addTo(miniMap);
-
-                    // Fit Map to Geometry Bounds
-                    var bounds = geojsonLayer.getBounds();
-                    if (bounds.isValid()) {
-                        miniMap.fitBounds(bounds, { padding: [20, 20], 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;">Karte nicht verfügbar.</div>';
-                });
-        }
     </script>
 
+    <!-- Application Logic -->
+    <script src="js/admin.js"></script>
+
 </body>
 </html>
 
+
 <?php
 // -----------------------------------------------------------------
 // Login Page
@@ -378,24 +559,24 @@ function show_login_page($municipality, $error = null) {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Moderation — Anmeldung</title>
+    <title>Moderation - Anmeldung</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.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="admin.css">
+    <link rel="stylesheet" href="styles.css">
     <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
 </head>
 <body>
     <div class="login-wrapper">
         <div class="login-box">
-            <h1><i class="fa-solid fa-shield-halved"></i> Moderation</h1>
+            <h1><i class="fa-solid fa-shield-halved"></i> Moderationsportal</h1>
             <p>Bitte geben Sie das Moderationspasswort ein.</p>
             <?php if ($error): ?>
-                <div class="error"><?= htmlspecialchars($error) ?></div>
+                <div class="login-error"><i class="fa-solid fa-triangle-exclamation"></i> <?= htmlspecialchars($error) ?></div>
             <?php endif; ?>
             <form method="POST" action="admin.php?page=login">
                 <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"><a href="index.php">← Zurück zur Karte</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>

public/api/auth.php

@@ -2,15 +2,10 @@
 // =====================================================================
 // Admin Authentication Helper
 // Provides simple Password-based Session Authentication for the
-// Moderation Page. Uses ADMIN_PASSWORD from .env File.
+// Moderation Page. Reads Password from .env File.
 // ToDo: Replace with full User Authentication in Phase 3-3.
 // =====================================================================
 
-// Reads Admin Password from Environment
-function get_admin_password() {
-    return getenv('ADMIN_PASSWORD');
-}
-
 // Checks if current Session is authenticated as Admin
 function is_admin() {
     return isset($_SESSION['is_admin']) && $_SESSION['is_admin'] === true;
@@ -18,7 +13,7 @@ function is_admin() {
 
 // Authenticates with Password, returns true on Success
 function admin_login($password) {
-    $correct = get_admin_password();
+    $correct = getenv('ADMIN_PASSWORD');
     if ($correct && $password === $correct) {
         $_SESSION['is_admin'] = true;
         return true;
@@ -31,11 +26,3 @@ function admin_logout() {
     $_SESSION['is_admin'] = false;
     session_destroy();
 }
-
-// Redirects to Login if not authenticated
-function require_admin() {
-    if (!is_admin()) {
-        header('Location: admin.php?page=login');
-        exit;
-    }
-}

public/api/contributions.php

@@ -17,7 +17,7 @@ require_once __DIR__ . '/db.php';
 
 
 // ---------------------------------------------------------------------
-// Read Action Parameter and Route to correct Handler
+// Reads Action Parameter and Routes to correct Handler
 // ---------------------------------------------------------------------
 $input = get_input();
 $action = $input['action'] ?? '';
@@ -38,13 +38,55 @@ switch ($action) {
     case 'vote':
         handle_vote($input);
         break;
+    case 'create_news':
+        handle_create_news($input);
+        break;
+    case 'update_news':
+        handle_update_news($input);
+        break;
+    case 'delete_news':
+        handle_delete_news($input);
+        break;
+    case 'read_comments':
+        handle_read_comments($input);
+        break;
+    case 'create_comment':
+        handle_create_comment($input);
+        break;
+    case 'delete_comment':
+        handle_delete_comment($input);
+        break;
+    case 'update_comment':
+        handle_update_comment($input);
+        break;
+    case 'read_tasks':
+        handle_read_tasks($input);
+        break;
+    case 'create_task':
+        handle_create_task($input);
+        break;
+    case 'update_task':
+        handle_update_task($input);
+        break;
+    case 'delete_task':
+        handle_delete_task($input);
+        break;
+    case 'complete_task':
+        handle_complete_task($input);
+        break;
+    case 'verify_task':
+        handle_verify_task($input);
+        break;
+    case 'read_leaderboard':
+        handle_read_leaderboard($input);
+        break;
     default:
         error_response('Unknown Action. Supported Actions are read, create, update, delete, vote.');
 }
 
 
 // =====================================================================
-// Action Handlers
+// Action Handlers for Contributions
 // =====================================================================
 
 
@@ -117,6 +159,23 @@ function handle_read($input) {
         'features' => $features
     ];
 
+    // Includes User's Votes for persistent Vote Display
+    // Returns which Contributions the current Browser has voted on
+    $browser_id = $input['browser_id'] ?? '';
+    if ($browser_id !== '') {
+        $stmt = $pdo->prepare("
+            SELECT contribution_id, vote_type 
+            FROM votes 
+            WHERE browser_id = :bid
+        ");
+        $stmt->execute([':bid' => $browser_id]);
+        $user_votes = [];
+        foreach ($stmt->fetchAll() as $v) {
+            $user_votes[$v['contribution_id']] = $v['vote_type'];
+        }
+        $featureCollection['user_votes'] = $user_votes;
+    }
+
     json_response($featureCollection);
 }
 
@@ -126,6 +185,11 @@ function handle_read($input) {
 // Required: municipality_id, geom, geom_type, category, title, author_name
 // Optional: description
 // ---------------------------------------------------------------------
+// ---------------------------------------------------------------------
+// CREATE: Inserts new Contributions with optional Photo Upload
+// Required: municipality_id, geom, geom_type, category, title, author_name
+// Optional: description, browser_id, photo (File Upload)
+// ---------------------------------------------------------------------
 function handle_create($input) {
     $pdo = get_db();
 
@@ -149,14 +213,23 @@ function handle_create($input) {
         error_response('Invalid GeoJSON in Geometry Field.');
     }
 
+    // Handles Photo Upload
+    $photo_path = null;
+    if (isset($_FILES['photo']) && $_FILES['photo']['error'] === UPLOAD_ERR_OK) {
+        $photo_path = handle_photo_upload($_FILES['photo']);
+        if (!$photo_path) {
+            error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB are allowed.');
+        }
+    }
+
     // Prepared SQL Statement
     try {
         $stmt = $pdo->prepare("
             INSERT INTO contributions 
-                (municipality_id, geom, geom_type, category, title, description, author_name)
+                (municipality_id, geom, geom_type, category, title, description, author_name, browser_id, photo_path)
             VALUES 
                 (:mid, ST_SetSRID(ST_GeomFromGeoJSON(:geom), 4326), :geom_type, 
-                 :category, :title, :description, :author_name)
+                 :category, :title, :description, :author_name, :browser_id, :photo_path)
         ");
 
         $stmt->execute([
@@ -166,7 +239,9 @@ function handle_create($input) {
             ':category'    => $input['category'],
             ':title'       => $input['title'],
             ':description' => $input['description'] ?? '',
-            ':author_name' => $input['author_name']
+            ':author_name' => $input['author_name'],
+            ':browser_id'  => $input['browser_id'] ?? null,
+            ':photo_path'  => $photo_path
         ]);
 
         json_response([
@@ -205,7 +280,7 @@ function handle_update($input) {
     }
 
     // Builds dynamic SQL Query to only update sent Fields
-    $updatable_fields = ['category', 'title', 'description', 'status'];
+    $updatable_fields = ['category', 'title', 'description', 'status', 'address'];
     $set_clauses = [];
     $params = [':id' => $contribution_id];
 
@@ -281,8 +356,8 @@ function handle_delete($input) {
 
 
 // ---------------------------------------------------------------------
-// VOTE: Likes or Dislikes a Contribution
+// VOTE: Likes or Dislikes Contributions or Tasks
-// Required: contribution_id, voter_name, vote_type
+// Required: contribution_id or task_id, voter_name, vote_type
 // Database Trigger automatically updates Likes and Dislikes Count
 // UNIQUE Constraint prevents duplicate Votes per Voter.
 // ---------------------------------------------------------------------
@@ -290,7 +365,7 @@ function handle_vote($input) {
     $pdo = get_db();
 
     // Validates Input
-    $missing = validate_required($input, ['contribution_id', 'voter_name', 'vote_type']);
+    $missing = validate_required($input, ['voter_name', 'vote_type']);
     if (!empty($missing)) {
         error_response('Missing Fields: ' . implode(', ', $missing));
     }
@@ -301,21 +376,47 @@ function handle_vote($input) {
         error_response('Invalid vote_type. Must be: ' . implode(', ', $valid_vote_types));
     }
 
-    // Checks if Contribution exists
+    // Prepared SQL Statement
+    try {
+        // Checks if Voter already voted on this Contribution
+        $browser_id = $input['browser_id'] ?? '';
+        if (empty($browser_id)) {
+            error_response('Browser ID required for Voting.');
+        }
+
+        // Determines Vote Type
+        $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
+        if ($is_task) {
+            // Checks for Tasks
+            $stmt = $pdo->prepare("SELECT task_id FROM tasks WHERE task_id = :id");
+            $stmt->execute([':id' => $input['task_id']]);
+            if (!$stmt->fetch()) {
+                error_response('Task not found.', 404);
+            }
+
+            // Checks if Browser already voted on Task
+            $stmt = $pdo->prepare("
+                SELECT vote_id, vote_type FROM votes
+                WHERE task_id = :id AND browser_id = :bid
+            ");
+            $stmt->execute([':id' => $input['task_id'], ':bid' => $browser_id]);
+        } else {
+            // Checks for Contributions
             $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
             $stmt->execute([':id' => $input['contribution_id']]);
             if (!$stmt->fetch()) {
                 error_response('Contribution not found.', 404);
             }
 
-    // Prepared SQL Statement
+            // Checks if Browser already voted on Contribution
-    try {
-        // Checks if Voter already voted on this Contribution
             $stmt = $pdo->prepare("
                 SELECT vote_id, vote_type FROM votes
-            WHERE contribution_id = :cid AND voter_name = :voter
+                WHERE contribution_id = :id AND browser_id = :bid
             ");
-        $stmt->execute([':cid' => $input['contribution_id'], ':voter' => $input['voter_name']]);
+            $stmt->execute([':id' => $input['contribution_id'], ':bid' => $browser_id]);
+        }
+
         $existing = $stmt->fetch();
 
         if ($existing) {
@@ -325,34 +426,755 @@ function handle_vote($input) {
                 $stmt->execute([':vid' => $existing['vote_id']]);
                 json_response(['message' => 'Vote removed.', 'action' => 'removed']);
             } else {
-                // Different Vote Type — Switches Vote
+                // Different Vote Type — Removes old Vote before Inserting new one
                 $stmt = $pdo->prepare("DELETE FROM votes WHERE vote_id = :vid");
                 $stmt->execute([':vid' => $existing['vote_id']]);
-
+                $this_insert = true;
-                $stmt = $pdo->prepare("
-                    INSERT INTO votes (contribution_id, voter_name, vote_type)
-                    VALUES (:cid, :voter, :vtype)
-                ");
-                $stmt->execute([
-                    ':cid'   => $input['contribution_id'],
-                    ':voter' => $input['voter_name'],
-                    ':vtype' => $input['vote_type']
-                ]);
-                json_response(['message' => 'Vote changed.', 'action' => 'changed'], 200);
             }
         } else {
             // No existing Vote — Inserts Vote
+            $this_insert = true;
+        }
+
+        if (!empty($this_insert)) {
+            if ($is_task) {
                 $stmt = $pdo->prepare("
-                INSERT INTO votes (contribution_id, voter_name, vote_type)
+                    INSERT INTO votes (task_id, voter_name, vote_type, browser_id)
-                VALUES (:cid, :voter, :vtype)
+                    VALUES (:id, :voter, :vtype, :bid)
                 ");
                 $stmt->execute([
-                ':cid'   => $input['contribution_id'],
+                    ':id'    => $input['task_id'],
                     ':voter' => $input['voter_name'],
-                ':vtype' => $input['vote_type']
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
                 ]);
+            } else {
+                $stmt = $pdo->prepare("
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
+                    VALUES (:id, :voter, :vtype, :bid)
+                ");
+                $stmt->execute([
+                    ':id'    => $input['contribution_id'],
+                    ':voter' => $input['voter_name'],
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
+                ]);
+            }
+
+            // Returns changed or created
+            if ($existing) {
+                json_response(['message' => 'Vote changed.', 'action' => 'changed'], 200);
+            } else {
                 json_response(['message' => 'Vote recorded.', 'action' => 'created'], 201);
             }
+        }
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// =====================================================================
+// Action Handlers for News
+// =====================================================================
+
+// ---------------------------------------------------------------------
+// CREATE NEWS: Inserts new News Entry
+// Required: municipality_id, title, content
+// ---------------------------------------------------------------------
+function handle_create_news($input) {
+    $pdo = get_db();
+    $missing = validate_required($input, ['municipality_id', 'title', 'content']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO news (municipality_id, title, content, author_name)
+            VALUES (:mid, :title, :content, :author)
+        ");
+        $stmt->execute([
+            ':mid'     => $input['municipality_id'],
+            ':title'   => $input['title'],
+            ':content' => $input['content'],
+            ':author'  => $input['author_name'] ?? 'Stadtverwaltung'
+        ]);
+        json_response(['message' => 'News created successfully.', 'news_id' => (int) $pdo->lastInsertId()], 201);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+// ---------------------------------------------------------------------
+// UPDATE NEWS: Updates existing News Entry
+// Required: news_id
+// Optional: title, content
+// ---------------------------------------------------------------------
+function handle_update_news($input) {
+    $pdo = get_db();
+    $missing = validate_required($input, ['news_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $set = [];
+    $params = [':id' => $input['news_id']];
+
+    foreach (['title', 'content', 'author_name'] as $field) {
+        if (isset($input[$field]) && $input[$field] !== '') {
+            $set[] = "$field = :$field";
+            $params[":$field"] = $input[$field];
+        }
+    }
+
+    if (empty($set)) {
+        error_response('No Fields to update.');
+    }
+
+    try {
+        $stmt = $pdo->prepare("UPDATE news SET " . implode(', ', $set) . " WHERE news_id = :id");
+        $stmt->execute($params);
+        json_response(['message' => 'News updated successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+// ---------------------------------------------------------------------
+// DELETE NEWS: Deletes existing News Entry
+// Required: news_id
+// ---------------------------------------------------------------------
+function handle_delete_news($input) {
+    $pdo = get_db();
+    $missing = validate_required($input, ['news_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("DELETE FROM news WHERE news_id = :id");
+        $stmt->execute([':id' => $input['news_id']]);
+        json_response(['message' => 'News deleted successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// =====================================================================
+// Action Handlers for Photos
+// =====================================================================
+
+// ---------------------------------------------------------------------
+// PHOTO UPLOAD: Validates and Saves uploaded Photo Files
+// Returns relative Path on Success, null on Failure.
+// Allowed: JPG, PNG, GIF, WebP. with maximum Size of 5 MB.
+// ---------------------------------------------------------------------
+function handle_photo_upload($file) {
+    // Validates File Size
+    $max_size = 5 * 1024 * 1024;
+    if ($file['size'] > $max_size) {
+        return null;
+    }
+
+    // Validates MIME Type
+    $allowed_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    $finfo = finfo_open(FILEINFO_MIME_TYPE);
+    $mime = finfo_file($finfo, $file['tmp_name']);
+    finfo_close($finfo);
+
+    if (!in_array($mime, $allowed_types)) {
+        return null;
+    }
+
+    // Generates unique Filename
+    $ext = [
+        'image/jpeg' => 'jpg',
+        'image/png'  => 'png',
+        'image/gif'  => 'gif',
+        'image/webp' => 'webp'
+    ][$mime];
+
+    $filename = uniqid('photo_', true) . '.' . $ext;
+    $upload_dir = __DIR__ . '/../uploads/photos/';
+    $target_path = $upload_dir . $filename;
+
+    // Creates Upload Directory
+    if (!is_dir($upload_dir)) {
+        mkdir($upload_dir, 0755, true);
+    }
+
+    // Moves uploaded File
+    if (move_uploaded_file($file['tmp_name'], $target_path)) {
+        return 'uploads/photos/' . $filename;
+    }
+
+    return null;
+}
+
+// =====================================================================
+// Action Handlers for Comments
+// =====================================================================
+
+// ---------------------------------------------------------------------
+// READ COMMENTS: Loads Comments for Contributions or Tasks
+// Returns Comments sorted by Date (oldest first)
+// Required: contribution_id or task_id
+// ---------------------------------------------------------------------
+function handle_read_comments($input) {
+    $pdo = get_db();
+
+    // Checks for contribution_id or task_id
+    if (empty($input['contribution_id']) && empty($input['task_id'])) {
+        error_response('Either contribution_id or task_id is required.');
+    }
+
+    // Determines Vote Type
+    $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
+    try {
+        if ($is_task) {
+            $stmt = $pdo->prepare("
+                SELECT comment_id, task_id, author_name, browser_id, content, status, created_at
+                FROM comments
+                WHERE task_id = :id AND status = 'approved'
+                ORDER BY created_at ASC
+            ");
+        } else {
+            $stmt = $pdo->prepare("
+                SELECT comment_id, contribution_id, author_name, browser_id, content, status, created_at
+                FROM comments
+                WHERE contribution_id = :id AND status = 'approved'
+                ORDER BY created_at ASC
+            ");
+        }
+        
+        // Prepared Statement
+        $stmt->execute([':id' => $is_task ? $input['task_id'] : $input['contribution_id']]);
+        $comments = $stmt->fetchAll();
+
+        json_response(['comments' => $comments, 'count' => count($comments)]);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// CREATE COMMENT: Adds Comments Contributions or Tasks
+// Required: author_name, content, contribution_id or task_id
+// Optional: browser_id
+// ---------------------------------------------------------------------
+function handle_create_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['author_name', 'content']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Checks for contribution_id or task_id
+    if (empty($input['contribution_id']) && empty($input['task_id'])) {
+        error_response('Either contribution_id or task_id is required.');
+    }
+
+    // Validates Length
+    if (strlen($input['content']) > 1000) {
+        error_response('Comment too long. Maximum 1000 Characters.');
+    }
+
+    // Determines Comment Type
+    $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
+    if ($is_task) {
+        // Checks for Tasks
+        $stmt = $pdo->prepare("SELECT task_id FROM tasks WHERE task_id = :id");
+        $stmt->execute([':id' => $input['task_id']]);
+        if (!$stmt->fetch()) {
+            error_response('Task not found.', 404);
+        }
+    } else {
+        // Checks for Contributions
+        $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
+        $stmt->execute([':id' => $input['contribution_id']]);
+        if (!$stmt->fetch()) {
+            error_response('Contribution not found.', 404);
+        }
+    }
+    
+    // Prepared Statement
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO comments (contribution_id, task_id, author_name, browser_id, content)
+            VALUES (:cid, :tid, :author, :bid, :content)
+        ");
+        $stmt->execute([
+            ':cid'     => $is_task ? null : $input['contribution_id'],
+            ':tid'     => $is_task ? $input['task_id'] : null,
+            ':author'  => $input['author_name'],
+            ':bid'     => $input['browser_id'] ?? null,
+            ':content' => $input['content']
+        ]);
+
+        json_response([
+            'message'    => 'Comment created successfully.',
+            'comment_id' => (int) $pdo->lastInsertId()
+        ], 201);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// DELETE COMMENT: Removes a Comment
+// Required: comment_id
+// ---------------------------------------------------------------------
+function handle_delete_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['comment_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("DELETE FROM comments WHERE comment_id = :id");
+        $stmt->execute([':id' => $input['comment_id']]);
+
+        json_response(['message' => 'Comment deleted successfully.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+// ---------------------------------------------------------------------
+// UPDATE COMMENT: Changes Comment Status or Content
+// Required: comment_id
+// Optional: status, content
+// ---------------------------------------------------------------------
+function handle_update_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['comment_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $set = [];
+    $params = [':id' => $input['comment_id']];
+
+    // Updates Status if provided
+    if (isset($input['status']) && $input['status'] !== '') {
+        $valid = ['pending', 'approved', 'rejected'];
+        if (!in_array($input['status'], $valid)) {
+            error_response('Invalid Status.');
+        }
+        $set[] = "status = :status";
+        $params[':status'] = $input['status'];
+    }
+
+    // Updates Content if provided
+    if (isset($input['content']) && $input['content'] !== '') {
+        $set[] = "content = :content";
+        $params[':content'] = $input['content'];
+    }
+
+    if (empty($set)) {
+        error_response('No Fields to update.');
+    }
+
+    try {
+        $stmt = $pdo->prepare("UPDATE comments SET " . implode(', ', $set) . " WHERE comment_id = :id");
+        $stmt->execute($params);
+        json_response(['message' => 'Comment updated successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// =====================================================================
+// Action Handlers for Tasks
+// =====================================================================
+
+
+// ---------------------------------------------------------------------
+// READ TASKS: Loads Tasks as GeoJSON FeatureCollection
+// Required: municipality_id
+// Optional: status, browser_id
+// ---------------------------------------------------------------------
+function handle_read_tasks($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['municipality_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $sql = "SELECT *, ST_AsGeoJSON(geom) AS geojson
+            FROM tasks
+            WHERE municipality_id = :mid";
+    $params = [':mid' => $input['municipality_id']];
+
+    // Status Filter
+    $status = $input['status'] ?? 'visible';
+    if ($status === 'visible') {
+        $sql .= " AND status IN ('open', 'completed', 'verified')";
+    } elseif ($status !== 'all') {
+        $sql .= " AND status = :status";
+        $params[':status'] = $status;
+    }
+
+    $sql .= " ORDER BY created_at DESC";
+
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute($params);
+        $rows = $stmt->fetchAll();
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+
+    // Builds GeoJSON FeatureCollection
+    $features = [];
+    foreach ($rows as $row) {
+        $geometry = json_decode($row['geojson']);
+        unset($row['geom'], $row['geojson']);
+        $features[] = [
+            'type'       => 'Feature',
+            'geometry'   => $geometry,
+            'properties' => $row
+        ];
+    }
+
+    $result = [
+        'type'     => 'FeatureCollection',
+        'features' => $features
+    ];
+
+    // User Votes for Tasks
+    $browser_id = $input['browser_id'] ?? '';
+    if ($browser_id !== '') {
+        $stmt = $pdo->prepare("
+            SELECT task_id, vote_type FROM votes
+            WHERE browser_id = :bid AND task_id IS NOT NULL
+        ");
+        $stmt->execute([':bid' => $browser_id]);
+        $user_votes = [];
+        foreach ($stmt->fetchAll() as $v) {
+            $user_votes[$v['task_id']] = $v['vote_type'];
+        }
+        $result['user_votes'] = $user_votes;
+    }
+
+    json_response($result);
+}
+
+
+// ---------------------------------------------------------------------
+// CREATE TASK: Inserts new Task with optional Photo
+// Required: municipality_id, geom, geom_type, category, title, author_name
+// Optional: description, browser_id, photo
+// ---------------------------------------------------------------------
+function handle_create_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, [
+        'municipality_id', 'geom', 'geom_type', 'category', 'title', 'author_name'
+    ]);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $valid_geom_types = ['point', 'line', 'polygon'];
+    if (!in_array($input['geom_type'], $valid_geom_types)) {
+        error_response('Invalid Geometry Type.');
+    }
+
+    $geojson = json_decode($input['geom']);
+    if (!$geojson || !isset($geojson->type)) {
+        error_response('Invalid GeoJSON.');
+    }
+
+    // Handles optional Photo Upload
+    $photo_path = null;
+    if (isset($_FILES['photo']) && $_FILES['photo']['error'] === UPLOAD_ERR_OK) {
+        $photo_path = handle_photo_upload($_FILES['photo']);
+        if (!$photo_path) {
+            error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB.');
+        }
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO tasks
+                (municipality_id, geom, geom_type, category, title, description, author_name, browser_id, photo_path)
+            VALUES
+                (:mid, ST_SetSRID(ST_GeomFromGeoJSON(:geom), 4326), :geom_type,
+                 :category, :title, :description, :author_name, :browser_id, :photo_path)
+        ");
+        $stmt->execute([
+            ':mid'         => $input['municipality_id'],
+            ':geom'        => $input['geom'],
+            ':geom_type'   => $input['geom_type'],
+            ':category'    => $input['category'],
+            ':title'       => $input['title'],
+            ':description' => $input['description'] ?? '',
+            ':author_name' => $input['author_name'],
+            ':browser_id'  => $input['browser_id'] ?? null,
+            ':photo_path'  => $photo_path
+        ]);
+
+        json_response([
+            'message' => 'Task created successfully.',
+            'task_id' => (int) $pdo->lastInsertId()
+        ], 201);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// UPDATE TASK: Updates existing Tasks or Status
+// Required: task_id
+// Optional: category, title, description, status, address
+// ---------------------------------------------------------------------
+function handle_update_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $updatable = ['category', 'title', 'description', 'status', 'address'];
+    $set = [];
+    $params = [':id' => $input['task_id']];
+
+    foreach ($updatable as $field) {
+        if (isset($input[$field]) && $input[$field] !== '') {
+            $set[] = "$field = :$field";
+            $params[":$field"] = $input[$field];
+        }
+    }
+
+    if (empty($set)) {
+        error_response('No Fields to update.');
+    }
+
+    if (isset($params[':status'])) {
+        $valid = ['pending', 'rejected', 'open', 'completed', 'verified'];
+        if (!in_array($params[':status'], $valid)) {
+            error_response('Invalid Status.');
+        }
+    }
+
+    try {
+        $stmt = $pdo->prepare("UPDATE tasks SET " . implode(', ', $set) . " WHERE task_id = :id");
+        $stmt->execute($params);
+        json_response(['message' => 'Task updated successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// DELETE TASK: Removes existing Tasks
+// Required: task_id
+// ---------------------------------------------------------------------
+function handle_delete_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("DELETE FROM tasks WHERE task_id = :id");
+        $stmt->execute([':id' => $input['task_id']]);
+        json_response(['message' => 'Task deleted successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// COMPLETE TASK: Completes existing Tasks with Photo Proof
+// Required: task_id, author_name, browser_id
+// Required File: completion_photo
+// Optional: completion_comment
+// ---------------------------------------------------------------------
+function handle_complete_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id', 'author_name', 'browser_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Checks if Task exists and is open
+    $stmt = $pdo->prepare("SELECT task_id, status FROM tasks WHERE task_id = :id");
+    $stmt->execute([':id' => $input['task_id']]);
+    $task = $stmt->fetch();
+
+    if (!$task) {
+        error_response('Task not found.', 404);
+    }
+    if ($task['status'] !== 'open') {
+        error_response('Task is not available for Completion.');
+    }
+
+    // Handles required Completion Photo
+    if (!isset($_FILES['completion_photo']) || $_FILES['completion_photo']['error'] !== UPLOAD_ERR_OK) {
+        error_response('Completion Photo is required.');
+    }
+
+    $photo_path = handle_photo_upload($_FILES['completion_photo']);
+    if (!$photo_path) {
+        error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB.');
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            UPDATE tasks SET
+                status = 'completed',
+                completed_by_name = :name,
+                completed_by_browser = :browser,
+                completion_photo = :photo,
+                completion_comment = :comment,
+                completed_at = NOW()
+            WHERE task_id = :id
+        ");
+        $stmt->execute([
+            ':id'      => $input['task_id'],
+            ':name'    => $input['author_name'],
+            ':browser' => $input['browser_id'],
+            ':photo'   => $photo_path,
+            ':comment' => $input['completion_comment'] ?? ''
+        ]);
+
+        json_response(['message' => 'Task Completion submitted for Review.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// VERIFY TASK: Moderator confirms or rejects Completions
+// Required: task_id, action
+// Awards Points and sets Status if verified
+// Clears Completion Fields, resets Status if rejected
+// ---------------------------------------------------------------------
+function handle_verify_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id', 'verify_action']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Loads Task
+    $stmt = $pdo->prepare("SELECT * FROM tasks WHERE task_id = :id");
+    $stmt->execute([':id' => $input['task_id']]);
+    $task = $stmt->fetch();
+
+    if (!$task) {
+        error_response('Task not found.', 404);
+    }
+    if ($task['status'] !== 'completed') {
+        error_response('Task is not in completed State.');
+    }
+
+    try {
+        if ($input['verify_action'] === 'verify') {
+            // Accepts Completion and Awards Points
+            $stmt = $pdo->prepare("UPDATE tasks SET status = 'verified' WHERE task_id = :id");
+            $stmt->execute([':id' => $input['task_id']]);
+
+            // Awards Points to User
+            $stmt = $pdo->prepare("
+                INSERT INTO user_points (municipality_id, user_name, points, task_id)
+                VALUES (:mid, :name, :points, :tid)
+            ");
+            $stmt->execute([
+                ':mid'    => $task['municipality_id'],
+                ':name'   => $task['completed_by_name'],
+                ':points' => $task['points_reward'],
+                ':tid'    => $input['task_id']
+            ]);
+
+            json_response(['message' => 'Task verified. Points awarded.']);
+
+        } elseif ($input['verify_action'] === 'reject') {
+            // Rejects Completion and Clears Fields
+            $stmt = $pdo->prepare("
+                UPDATE tasks SET
+                    status = 'open',
+                    completed_by_name = NULL,
+                    completed_by_browser = NULL,
+                    completion_photo = NULL,
+                    completion_comment = NULL,
+                    completed_at = NULL
+                WHERE task_id = :id
+            ");
+            $stmt->execute([':id' => $input['task_id']]);
+
+            json_response(['message' => 'Completion rejected. Task is open again.']);
+
+        } else {
+            error_response('Invalid Action. Must be: verify or reject.');
+        }
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// READ LEADERBOARD: Returns Citizen Leaderboard
+// Required: municipality_id
+// Optional: limit
+// ---------------------------------------------------------------------
+function handle_read_leaderboard($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['municipality_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $limit = min((int)($input['limit'] ?? 10), 50);
+
+    try {
+        $stmt = $pdo->prepare("
+            SELECT user_name,
+                   SUM(points) AS total_points,
+                   COUNT(*) AS tasks_completed
+            FROM user_points
+            WHERE municipality_id = :mid
+            GROUP BY user_name
+            ORDER BY total_points DESC
+            LIMIT :lim
+        ");
+        $stmt->bindValue(':mid', $input['municipality_id'], PDO::PARAM_INT);
+        $stmt->bindValue(':lim', $limit, PDO::PARAM_INT);
+        $stmt->execute();
+
+        json_response(['leaderboard' => $stmt->fetchAll()]);
 
     } catch (PDOException $e) {
         error_response('Database Error: ' . $e->getMessage(), 500);

public/api/db.php

@@ -1,8 +1,8 @@
 <?php
 // =====================================================================
-// Database Helper
+// Database Helper Functions
-// Provides PDO Connection to Database and shared miscellaneous
+// Provides PDO Connection, JSON Response Helpers, Category Definitions
-// Functions for all API Endpoints.
+// and shared miscellaneous Functions for all API Endpoints.
 // =====================================================================
 
 require_once __DIR__ . '/init.php';
@@ -92,3 +92,40 @@ function get_db() {
 
     return $pdo;
 }
+
+// ---------------------------------------------------------------------
+// Category Definitions
+// Returns associative Array of Category Keys to Labels, Icons,
+// and Colors. Shared between Citizen Participation Portal and
+// Moderation Page.
+// ToDo: Move to Database Table. 
+// ---------------------------------------------------------------------
+function get_categories() {
+    return [
+        'consumption' => ['label' => 'Geschäfte',   'faIcon' => 'fa-cart-shopping', 'color' => '#C00000'],
+        'building'    => ['label' => 'Bauen',       'faIcon' => 'fa-building',      'color' => '#E65100'],
+        'energy'      => ['label' => 'Energie',     'faIcon' => 'fa-bolt',          'color' => '#FFC000'],
+        'environment' => ['label' => 'Umwelt',      'faIcon' => 'fa-seedling',      'color' => '#92D050'],
+        'mobility'    => ['label' => 'Mobilität',   'faIcon' => 'fa-bus',           'color' => '#0070C0'],
+        'industry'    => ['label' => 'Industrie',   'faIcon' => 'fa-industry',      'color' => '#7030A0'],
+        'other'       => ['label' => 'Sonstiges',   'faIcon' => 'fa-thumbtack',     'color' => '#7F7F7F'],
+    ];
+}
+
+// ---------------------------------------------------------------------
+// Task Category Definitions
+// Returns associative Array of Task Category Keys to Labels, Icons,
+// and Colors. Shared between Citizen Participation Portal and
+// Moderation Page.
+// ToDo: Move to Database Table. 
+// ---------------------------------------------------------------------
+function get_task_categories() {
+    return [
+        'repair'     => ['label' => 'Reparatur',       'faIcon' => 'fa-wrench',         'color' => '#C00000'],
+        'social'     => ['label' => 'Nachbarschaft',   'faIcon' => 'fa-people-group',   'color' => '#E65100'],
+        'safety'     => ['label' => 'Sicherheit',      'faIcon' => 'fa-shield-halved',  'color' => '#FFC000'],
+        'greenery'   => ['label' => 'Grünpflege',      'faIcon' => 'fa-leaf',           'color' => '#92D050'],
+        'cleanup'    => ['label' => 'Sauberkeit',      'faIcon' => 'fa-broom',          'color' => '#0070C0'],
+        'other_task' => ['label' => 'Sonstiges',       'faIcon' => 'fa-clipboard-check','color' => '#7F7F7F'],
+    ];
+}

public/api/init.php

@@ -28,24 +28,16 @@ session_start();
 
 // Initializes Database Connection
 try {
-    $opt = [
+    $dsn = "pgsql:host=$host;dbname=$db;port=$port";
+    $pdo = new PDO($dsn, $user, $pass, [
         PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
         PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
         PDO::ATTR_EMULATE_PREPARES   => false
-    ];
+    ]);
-    $dsn = "pgsql:host=$host;dbname=$db;port=$port";
-    $pdo = new PDO($dsn, $user, $pass, $opt);
-
-
-    $pdo = new PDO($dsn, $user, $pass, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
-
-
-
-    
 
 // Creates Error Message
-} catch(PDOException $e) {
+} catch (PDOException $e) {
-    echo "Error: ".$e->getMessage();
+    echo "Error: " . $e->getMessage();
 }
 
 ?>

public/imprint.php

@@ -0,0 +1,39 @@
+<?php
+require_once __DIR__ . '/api/db.php';
+$pdo = get_db();
+$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
+$municipality = $stmt->fetch();
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <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="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>
+</head>
+<body>
+    <div class="page-header">
+        <div class="page-header-inner">
+            <h1><i class="fa-solid fa-scale-balanced"></i> Impressum</h1>
+            <div class="page-header-nav">
+                <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            </div>
+        </div>
+    </div>
+    <div class="page-container">
+        <div class="page-content-box">
+            <div class="dev-notice">
+                <i class="fa-solid fa-triangle-exclamation"></i>
+                Dieses Portal befindet sich in der Entwicklung und wurde nicht offiziell beauftragt. Das Impressum wird mit der offiziellen Inbetriebnahme hier hinzugefügt.
+            </div>
+            <h2>Impressum</h2>
+            <p>Das Impressum wird hier hinzugefügt, sobald das Portal in den Produktivbetrieb geht.</p>
+        </div>
+    </div>
+</body>
+</html>

public/index.php

@@ -6,15 +6,14 @@
 // =====================================================================
 
 require_once __DIR__ . '/api/db.php';
+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");
-$stmt->execute([':slug' => 'lohne']);
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
 $municipality = $stmt->fetch();
 
 if (!$municipality) {
@@ -23,14 +22,19 @@ if (!$municipality) {
     exit;
 }
 
+// Loads News for Sidebar
+$stmt = $pdo->prepare("SELECT * FROM news WHERE municipality_id = :mid ORDER BY published_at DESC LIMIT 10");
+$stmt->execute([':mid' => $municipality['municipality_id']]);
+$news_items = $stmt->fetchAll();
+
 ?>
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bürgerbeteiligungsportal <?= htmlspecialchars($municipality['name']) ?></title>
+    <title>Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="assets/icon-municipality.png" type="image/png">
+    <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.">
 
 
@@ -56,12 +60,16 @@ if (!$municipality) {
     <!-- Leaflet Polyline Measurement Tool -->
     <!-- <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css"> -->
 
-    <!-- Font Awesome 6 for Icons -->
+    <!-- Font Awesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
     <!-- 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                       -->
     <!-- ============================================================= -->
@@ -73,15 +81,17 @@ if (!$municipality) {
     </style>
 </head>
 
-<body>
+<body class="portal-page">
 
     <!-- ============================================================= -->
     <!-- Header                                                        -->
     <!-- ============================================================= -->
     <header id="app-header">
         <div class="header-left">
-            <img src="assets/logo-municipality.png" alt="<?= htmlspecialchars($municipality['name']) ?>" class="header-logo" onerror="this.style.display='none'">
+            <?php if (!empty($municipality['logo_path'])): ?>
-            <h1 class="header-title">Bürgerbeteiligung <?= htmlspecialchars($municipality['name']) ?></h1>
+                <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>
 
         <nav class="header-nav">
@@ -89,21 +99,23 @@ if (!$municipality) {
                 <i class="fa-solid fa-circle-info"></i>
                 <span class="nav-label">Informationen</span>
             </button>
-            <button class="nav-btn" onclick="showPrivacyModal()">
+            <a href="privacy.php" class="nav-btn" target="_blank">
                 <i class="fa-solid fa-shield-halved"></i>
                 <span class="nav-label">Datenschutz</span>
-            </button>
+            </a>
-            <button class="nav-btn" onclick="showImprintModal()">
+            <a href="imprint.php" class="nav-btn" target="_blank">
                 <i class="fa-solid fa-scale-balanced"></i>
                 <span class="nav-label">Impressum</span>
-            </button>
+            </a>
-            <a href="admin.php" class="nav-btn nav-btn-admin" title="Moderationsbereich">
+            <a href="admin.php" class="nav-btn nav-btn-admin" title="Moderationsbereich" target="_blank">
                 <i class="fa-solid fa-lock"></i>
             </a>
         </nav>
 
         <!-- Mobile Hamburger Menu -->
         <button class="header-menu-toggle" onclick="toggleMobileNav()">
+            <i class="fa-solid fa-bars"></i>
+        </button>
     </header>
 
 
@@ -118,36 +130,72 @@ if (!$municipality) {
             <!-- Sidebar Tab Icons -->
             <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-contributions" role="tab" title="Hinweise"><i class="fa-solid fa-clipboard-list"></i></a></li>
-                    <li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
+                    <li><a href="#tab-tasks" role="tab" title="Aufgaben"><i class="fa-solid fa-clipboard-check"></i></a></li>
-                    <li><a href="#tab-list" role="tab"><i class="fa-solid fa-list"></i></a></li>
+                    <li><a href="#tab-list" role="tab" title="Beiträge"><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-news" role="tab" title="Neuigkeiten"><i class="fa-solid fa-newspaper"></i></a></li>
+                    <li><a href="#tab-help" role="tab" title="Hilfe"><i class="fa-solid fa-circle-question"></i></a></li>
                 </ul>
             </div>
 
             <!-- Sidebar Tab Content -->
             <div class="leaflet-sidebar-content">
 
-                <!-- Home Tab -->
+                <!-- Contributions Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-home">
+                <div class="leaflet-sidebar-pane" id="tab-contributions">
                     <h2 class="leaflet-sidebar-header">
-                        Start
+                        Hinweise
                         <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
                     </h2>
                     <div class="sidebar-body">
-                        <p>Willkommen beim Bürgerbeteiligungsportal <strong><?= htmlspecialchars($municipality['name']) ?></strong>.</p>
+                        <p>Verwenden Sie die Karte, um <strong>Hinweise</strong> für die Stadtverwaltung hinzuzufügen oder bestehende Hinweise zu betrachten, bewerten und kommentieren</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>
 
                         <h3>Kategorien</h3>
                         <div id="category-filter">
-                            <!-- Category Filter Checkboxes — populated by app.js -->
+                            <!-- populated by app.js -->
                         </div>
                         
-                        <h3>Statistik</h3>
+                        <p id="stats-container"></p>
-                        <div id="stats-container">
+                        <!-- populated by app.js -->
-                            <!-- Contribution Statistics — populated by app.js -->
                     </div>
                 </div>
+
+                <!-- Tasks Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-tasks">
+                    <h2 class="leaflet-sidebar-header">
+                        Aufgaben
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <p>Verwenden Sie die Karte, um <strong>Aufgaben</strong> für die Gemeinschaft hinzuzufügen oder bestehende Aufgaben zu betrachten, bewerten und kommentieren.</p>                     
+
+                        <h3>Kategorien</h3>
+                        <div id="task-category-filter">
+                            <!-- populated by app.js -->
+                        </div>
+                        <p id="task-stats-container">
+                            <!-- populated by app.js -->
+                        </p>
+
+                        <div class="task-filter-row">
+                            <select id="task-status-filter" class="form-input" onchange="updateTasksList()" style="margin-bottom:8px;">
+                                <option value="open">Offene Aufgaben</option>
+                                <option value="all">Alle Aufgaben</option>
+                                <option value="completed">Wartend auf Prüfung</option>
+                                <option value="verified">Erledigte Aufgaben</option>
+                            </select>
+                        </div>
+
+                        <!-- Leaderboard -->
+                        <div id="leaderboard-container" class="leaderboard-box">
+                            <h3>Rangliste</h3>
+                            <div id="leaderboard-list"></div>
+                            <button class="btn btn-secondary leaderboard-more-btn" onclick="showFullLeaderboard()">
+                                Vollständige Rangliste
+                            </button>
+                        </div>
+
+                    </div>
                 </div>
 
                 <!-- List Tab -->
@@ -161,7 +209,39 @@ if (!$municipality) {
                             <input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
                         </div>
                         <div id="contributions-list">
-                            <!-- Contribution Cards — populated by app.js -->
+                            <!-- populated by app.js -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- News Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-news">
+                    <h2 class="leaflet-sidebar-header">
+                        Neuigkeiten
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <div class="list-search">
+                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
+                        </div>
+                        <div id="news-list">
+                            <?php if (empty($news_items)): ?>
+                                <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
+                            <?php else: ?>
+                                <?php foreach ($news_items as $news): ?>
+                                    <div class="news-item"
+                                        data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                        data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                        data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
+                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
+                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                                        <span class="news-date">
+                                            <?= htmlspecialchars($news['author_name']) ?>
+                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+                            <?php endif; ?>
                         </div>
                     </div>
                 </div>
@@ -173,37 +253,36 @@ if (!$municipality) {
                         <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
                     </h2>
                     <div class="sidebar-body">
+                        <h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3>
+                        <p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p>
+                        <p>
+                            <button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}" style="font-size:0.85rem;">
+                                <i class="fa-solid fa-route"></i> Tutorial starten
+                            </button>
+                        </p>
+
                         <h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
                         <p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
 
-                        <h3><i class="fa-solid fa-plus"></i> Beitrag erstellen</h3>
+                        <h3><i class="fa-solid fa-location-dot"></i> Beitrag hinzufügen</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>
+                        <p>Verwenden Sie die Zeichenwerkzeuge rechts, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.</p>
 
-                        <h3><i class="fa-solid fa-thumbs-up"></i> Abstimmen</h3>
+                        <h3><i class="fa-solid fa-thumbs-up"></i> Bewerten</h3>
-                        <p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Like/Dislike Funktion, um Ihre Meinung kundzugeben.</p>
+                        <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-clipboard-check"></i> Aufgaben erledigen</h3>
+                        <p>Klicken Sie auf eine offene Aufgabe und melden Sie die Erledigung mit einem Foto-Nachweis.</p>
 
                         <h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
-                        <p>Verwenden Sie die Adresssuche rechts, um bestimmte Orte auf der Karte zu finden.</p>
+                        <p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
-                    </div>
-                </div>
-
-                <!-- News Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-news">
-                    <h2 class="leaflet-sidebar-header">
-                        Neuigkeiten
-                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
-                    </h2>
-                    <div class="sidebar-body">
-                        <div class="news-item">
-                            <span class="news-date">April 2026</span>
-                            <h3>Portal gestartet</h3>
-                            <p>Das Bürgerbeteiligungsportal für <?= htmlspecialchars($municipality['name']) ?> ist online. Wir freuen uns auf Ihre Hinweise und Vorschläge!</p>
-                        </div>
-                        <!-- News Items can be added or loaded from Database here -->
                     </div>
                 </div>
 
             </div>
+
         </div>
 
         <!-- Leaflet Map -->
@@ -216,8 +295,10 @@ if (!$municipality) {
     <!-- Footer                                                        -->
     <!-- ============================================================= -->
     <footer id="app-footer">
+        <span class="dev-warning">
+            <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">
-            <!-- <img src="assets/logo-company.png" alt="Company Logo" class="footer-logo" onerror="this.style.display='none'"> -->
             <span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
         </div>
     </footer>
@@ -236,7 +317,7 @@ if (!$municipality) {
                 <li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li>
             </ul>
             <p style="background:#fff3cd;padding:10px;border-radius:6px;border:1px solid #ffc107;font-size:0.85rem;color:#856404;">
-                <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Dieses Bürgerbeteiligungsportal befindet sich noch in der Entwicklung und wurde nicht offiziell beauftragt.
+                <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
             </p>
             <p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p>            <div class="modal-actions">
                 <button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
@@ -290,6 +371,15 @@ if (!$municipality) {
                 <textarea id="create-description" class="form-input" rows="4" placeholder="Detaillierte Beschreibung (optional)"></textarea>
             </div>
 
+            <!-- Photo Upload -->
+            <div class="form-group">
+                <label for="create-photo"></i> Foto</label>
+                <input type="file" id="create-photo" class="form-input" accept="image/jpeg,image/png,image/gif,image/webp">
+                <div id="photo-preview" style="margin-top:8px;display:none;">
+                    <img id="photo-preview-img" style="max-width:100%;max-height:200px;border-radius:6px;border:1px solid var(--color-border);">
+                </div>
+            </div>
+
             <input type="hidden" id="create-geom">
             <input type="hidden" id="create-geom-type">
 
@@ -326,12 +416,19 @@ if (!$municipality) {
     <!-- 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)             -->
+    <!-- Municipality Configuration passed to JavaScript               -->
     <!-- ============================================================= -->
     <script>
-        // Municipality Configuration from Database — used by app.js
+        // Municipality Configuration from Database
-        var MUNICIPALITY = {
+        const MUNICIPALITY = {
             id: <?= $municipality['municipality_id'] ?>,
             name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
             slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
@@ -339,6 +436,13 @@ if (!$municipality) {
             zoom: <?= $municipality['default_zoom'] ?>,
             primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
         };
+
+        // Category Definitions from Database
+        const CATEGORIES = <?= json_encode(get_categories(), JSON_UNESCAPED_UNICODE) ?>;
+        const TASK_CATEGORIES = <?= json_encode(get_task_categories(), JSON_UNESCAPED_UNICODE) ?>;
+
+        // Admin Status from PHP Session
+        const IS_ADMIN = <?= (function_exists('is_admin') && is_admin()) ? 'true' : 'false' ?>;
     </script>
 
     <!-- Application Logic -->

public/js/admin.js

@@ -0,0 +1,637 @@
+// =====================================================================
+// WebGIS Moderation Portal — Application Logic
+// Initializes Map Preview, loads Contributions from the API,
+// handles CRUD Workflow, sorting and filtering for Contributions,
+//  Comments and News, and manages all UI Interactions
+//
+// Depends on: ADMIN_CONFIG Object set in Moderation Page
+// =====================================================================
+
+// =====================================================================
+// Block 0: Configuration and Application State
+// =====================================================================
+
+// API Endpoint as relative Path
+const API_URL = 'api/contributions.php';
+
+// =====================================================================
+// Block 1: Page Tab Navigation
+// =====================================================================
+
+// Restores active Tab after Page Reload
+const savedTab = sessionStorage.getItem('admin_active_tab');
+if (savedTab) {
+    // Delays to ensure DOM is ready
+    setTimeout(function () {
+        const tabBtn = document.querySelector('.page-tab[onclick*="' + savedTab + '"]');
+        if (tabBtn) tabBtn.click();
+    }, 100);
+}
+
+
+// Page Tab Navigation
+function showPageTab(tabName) {
+    // Saves active Tab for Persistence after Reload
+    sessionStorage.setItem('admin_active_tab', tabName);
+
+    document.querySelectorAll('.page-tab-content').forEach(function (el) {
+        el.style.display = 'none';
+    });
+
+    // Deactivates all Tab Buttons
+    document.querySelectorAll('.page-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+
+    // Shows selected Tab and activates Button
+    document.getElementById('tab-' + tabName).style.display = 'block';
+    event.currentTarget.classList.add('active');
+}
+
+
+// =====================================================================
+// Block 2: Collapsible Rows for Contributions and Comments
+// =====================================================================
+function toggleRow(row) {
+    const wasOpen = row.classList.contains('open');
+
+    // Closes all open Rows
+    document.querySelectorAll('.contribution-row.open').forEach(function (el) {
+        el.classList.remove('open');
+    });
+
+    // Toggles clicked Row
+    if (!wasOpen) {
+        row.classList.add('open');
+
+        // Loads Map Preview if not already loaded
+        const mapDiv = row.querySelector('.detail-map');
+        if (mapDiv && !mapDiv.dataset.loaded) {
+            loadMapPreview(mapDiv);
+        }
+    }
+}
+
+
+// =====================================================================
+// Block 3: Details Slider for Maps and Photos
+// =====================================================================
+function slideDetail(contributionId, direction) {
+    const slider = document.getElementById('slider-' + contributionId);
+    if (!slider) return;
+
+    const slides = slider.querySelectorAll('.detail-slide');
+    let activeIndex = -1;
+
+    // Finds active Slide
+    slides.forEach(function (slide, i) {
+        if (slide.style.display !== 'none') activeIndex = i;
+    });
+
+    // Calculates next Slide Index
+    const nextIndex = (activeIndex + direction + slides.length) % slides.length;
+
+    // Switches Slides
+    slides.forEach(function (slide) { slide.style.display = 'none'; });
+    slides[nextIndex].style.display = 'block';
+
+    // Loads Map if switching to Map Slide
+    if (slides[nextIndex].dataset.slide === 'map') {
+        const mapDiv = slides[nextIndex].querySelector('.detail-map');
+        if (mapDiv && !mapDiv.dataset.loaded) {
+            loadMapPreview(mapDiv);
+        }
+    }
+}
+
+
+// =====================================================================
+// Block 4: Map Preview (Leaflet Mini Map per Contribution)
+// =====================================================================
+
+// Erstellt eine Leaflet-Mini-Map in einem Beitrags-Detail-Container.
+// Lädt alle Beiträge via API und zeigt die Geometrie des entsprechenden Beitrags.
+// Markiert die Map als geladen (data-loaded="true"), um doppeltes Laden zu verhindern.
+function loadMapPreview(mapDiv) {
+    const contributionId = mapDiv.dataset.contributionId;
+    
+    // Fetches all Contributions to find the Geometry
+    const formData = new FormData();
+    formData.append('action', 'read');
+    formData.append('municipality_id', ADMIN_CONFIG.id);
+    formData.append('status', 'all');
+
+    fetch(API_URL, { method: 'POST', body: formData })
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+            if (!data.features) return;
+            
+            // Finds specific Contribution
+            const feature = data.features.find(function (f) {
+                return f.properties.contribution_id == contributionId;
+            });
+
+            if (!feature) {
+                mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
+                return;
+            }
+
+            // Creates Leaflet Mini Map
+            const miniMap = L.map(mapDiv, {
+                zoomControl: false,
+                attributionControl: false,
+                dragging: true,
+                scrollWheelZoom: false
+            });
+
+            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+                maxZoom: 20
+            }).addTo(miniMap);
+
+            // Adds Geometry to Mini Map
+            const geojsonLayer = L.geoJSON(feature, {
+                style: {
+                    color: ADMIN_CONFIG.primaryColor,
+                    weight: 3,
+                    fillOpacity: 0.2
+                },
+                pointToLayer: function (f, latlng) {
+                    return L.circleMarker(latlng, {
+                        radius: 8,
+                        color: '#ffffff',
+                        weight: 2,
+                        fillColor: ADMIN_CONFIG.primaryColor,
+                        fillOpacity: 0.9
+                    });
+                }
+            }).addTo(miniMap);
+
+            // Fits Map to Geometry Bounds
+            const bounds = geojsonLayer.getBounds();
+            if (bounds.isValid()) {
+                miniMap.fitBounds(bounds, { padding: [25, 25], maxZoom: 17 });
+            } else {
+                miniMap.setView(ADMIN_CONFIG.center, 15);
+            }
+
+            mapDiv.dataset.loaded = 'true';
+        })
+        .catch(function () {
+            mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>';
+        });
+}
+
+
+// =====================================================================
+// Block 5: Contributions Filter and Sorting
+// =====================================================================
+
+// Filters Contributions
+let currentFilter = 'all';
+function filterByStatus(status, tabButton) {
+    currentFilter = status;
+
+    // Updates active Tab
+    document.querySelectorAll('.filter-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+    tabButton.classList.add('active');
+
+    // Shows or Hides Contribution Rows
+    let visibleCount = 0;
+    document.querySelectorAll('#contributions-container .contribution-row').forEach(function (row) {
+        if (status === 'all' || row.dataset.status === status) {
+            row.style.display = '';
+            visibleCount++;
+        } else {
+            row.style.display = 'none';
+        }
+    });
+    
+    // Updates Count Display
+    document.getElementById('visible-count').textContent = visibleCount + ' Beiträge';
+}
+
+
+// Sorts Contributions
+function sortContributions(sortBy) {
+    const container = document.getElementById('contributions-container');
+    const rows = Array.from(container.querySelectorAll('.contribution-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date) - new Date(b.dataset.date);
+        if (sortBy === 'category')  return a.dataset.category.localeCompare(b.dataset.category);
+        return 0;
+    });
+
+    // Reappends sorted Rows
+    rows.forEach(function (row) { container.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 6: Comments Filter and Sorting
+// =====================================================================
+
+// Filters Comments
+function filterCommentsByStatus(status, tabButton) {
+
+    // Updates active Tab
+    document.querySelectorAll('#comment-filter-tabs .filter-tab').forEach(function (el) {
+        el.classList.remove('active');
+    });
+    tabButton.classList.add('active');
+    
+    // Shows or Hides Comments Rows
+    let visibleCount = 0;
+    document.querySelectorAll('.comment-mod-row').forEach(function (row) {
+        if (status === 'all' || row.dataset.status === status) {
+            row.style.display = '';
+            visibleCount++;
+        } else {
+            row.style.display = 'none';
+        }
+    });
+    // Updates Count Display
+    document.getElementById('comment-visible-count').textContent = visibleCount + ' Kommentare';
+}
+
+
+// Sorts Comments
+function sortCommentRows(sortBy) {
+    const container = document.getElementById('comments-mod-container');
+    const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc')   return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')    return new Date(a.dataset.date) - new Date(b.dataset.date);
+        if (sortBy === 'contribution') return a.dataset.contribution.localeCompare(b.dataset.contribution);
+        return 0;
+    });
+    // Reappends sorted Rows
+    rows.forEach(function (row) { container.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 7: Helper Functions
+// =====================================================================
+
+// Sends a POST request to API
+// promise-based instead of callback-based
+function apiCall(data) {
+    const formData = new FormData();
+    for (const key in data) {
+        formData.append(key, data[key]);
+    }
+
+    return fetch(API_URL, { method: 'POST', body: formData })
+        .then(function (r) { return r.json(); });
+}
+
+
+// Escapes HTML to prevent Cross-Site Scripting (XSS) in Popups and Lists
+function escapeHtml(text) {
+
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(text));
+    return div.innerHTML;
+}
+
+// =====================================================================
+// Block 8: CRUD Operations for Contributions
+// =====================================================================
+
+// STATUS: Changes Contribution Status
+function changeStatus(contributionId, newStatus) {
+    const labels = { approved: 'freigeben', rejected: 'ablehnen', pending: 'zurücksetzen' };
+
+    Swal.fire({
+        title: 'Beitrag ' + labels[newStatus] + '?',
+        showCancelButton: true,
+        confirmButtonText: 'Ja',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update',
+            contribution_id: contributionId,
+            status: newStatus
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            // Reloads Page to reflect Changes
+            location.reload();
+        });
+    });
+}
+
+
+// UPDATE: Edits existing Contributions
+function editContribution(contributionId, currentTitle, currentDescription) {
+    Swal.fire({
+        title: 'Beitrag bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Beschreibung</label>' +
+                    '<textarea id="swal-description" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentDescription) + '</textarea>' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return {
+                title: document.getElementById('swal-title').value.trim(),
+                description: document.getElementById('swal-description').value.trim()
+            };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update',
+            contribution_id: contributionId,
+            title: result.value.title,
+            description: result.value.description
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing Contributions
+function deleteContribution(contributionId) {
+    Swal.fire({
+        title: 'Beitrag löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Beitrag löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete',
+            contribution_id: contributionId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Beitrag wurde gelöscht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+// =====================================================================
+// Block 9: CRUD Operations for Comments
+// =====================================================================
+
+// STATUS: Changes Comment Status
+function changeCommentStatus(commentId, newStatus) {
+    const labels = { approved: 'akzeptieren', rejected: 'ablehnen', pending: 'zurücksetzen' };
+
+    Swal.fire({
+        title: 'Kommentar ' + labels[newStatus] + '?',
+        showCancelButton: true,
+        confirmButtonText: 'Ja',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_comment',
+            comment_id: commentId,
+            status: newStatus
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            location.reload();
+        });
+    });
+}
+
+
+// UPDATE: Edits existing Comments
+function editModComment(commentId, currentContent) {
+    Swal.fire({
+        title: 'Kommentar bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                '<textarea id="swal-comment-content" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentContent) + '</textarea>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return { content: document.getElementById('swal-comment-content').value.trim() };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_comment',
+            comment_id: commentId,
+            content: result.value.content
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing Comments
+function deleteModComment(commentId) {
+    Swal.fire({
+        title: 'Kommentar löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete_comment',
+            comment_id: commentId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// =====================================================================
+// Block 10: CRUD Operations for News
+// =====================================================================
+
+// CREATE: Submits new News Article
+function createNews() {
+    Swal.fire({
+        title: 'Neuigkeit hinzufügen',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
+                '</div>' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                    '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;" placeholder="Neuigkeit verfassen..."></textarea>' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
+                    '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="Stadtverwaltung">' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Veröffentlichen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            const title   = document.getElementById('swal-news-title').value.trim();
+            const content = document.getElementById('swal-news-content').value.trim();
+            const author  = document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung';
+            if (!title || !content) {
+                Swal.showValidationMessage('Titel und Inhalt sind Pflichtfelder.');
+                return false;
+            }
+            return { title, content, author_name: author };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'create_news',
+            municipality_id: ADMIN_CONFIG.id,
+            title: result.value.title,
+            content: result.value.content,
+            author_name: result.value.author_name
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Veröffentlicht!', 'Neuigkeit wurde veröffentlicht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// UPDATE: Edits existing News
+function editNews(newsId, currentTitle, currentContent, currentAuthor) {
+    Swal.fire({
+        title: 'Neuigkeit bearbeiten',
+        html:
+            '<div style="text-align:left;">' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
+                    '<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
+                '</div>' +
+                '<div style="margin-bottom:12px;">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
+                    '<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentContent) + '</textarea>' +
+                '</div>' +
+                '<div>' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
+                    '<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentAuthor) + '">' +
+                '</div>' +
+            '</div>',
+        showCancelButton: true,
+        confirmButtonText: 'Speichern',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: ADMIN_CONFIG.primaryColor,
+        preConfirm: function () {
+            return {
+                title:       document.getElementById('swal-news-title').value.trim(),
+                content:     document.getElementById('swal-news-content').value.trim(),
+                author_name: document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung'
+            };
+        }
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'update_news',
+            news_id: newsId,
+            title: result.value.title,
+            content: result.value.content,
+            author_name: result.value.author_name
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}
+
+
+// DELETE: Deletes existing News
+function deleteNews(newsId) {
+    Swal.fire({
+        title: 'Neuigkeit löschen?',
+        text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonText: 'Löschen',
+        cancelButtonText: 'Abbrechen',
+        confirmButtonColor: '#c62828'
+    }).then(function (result) {
+        if (!result.isConfirmed) return;
+
+        apiCall({
+            action: 'delete_news',
+            news_id: newsId
+        }).then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+            Swal.fire('Gelöscht!', 'Neuigkeit wurde gelöscht.', 'success')
+                .then(function () { location.reload(); });
+        });
+    });
+}

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,
+// Depends on: MUNICIPALITY Object set in Citizen Portal
-//             Sidebar, Geocoder, PolylineMeasure, Fullscreen, 
-//             and SweetAlert2 Plugins.
 // =====================================================================
 
 
@@ -16,19 +14,26 @@
 // API Endpoint as relative Path
 const API_URL = 'api/contributions.php';
 
-// Current User Name, set via Login Modal, stored in sessionStorage
+// Username set via Login Modal stored in sessionStorage
-let currentUser = sessionStorage.getItem('webgis_user') || '';
+let currentUser = sessionStorage.getItem('webgis_user') || 
+    decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)webgis_user\s*=\s*([^;]*).*$)|^.*$/, '$1')) || '';
+
+// Browser Identification Number for anonymous User Identification stored as Cookie
+let browserId = getBrowserId();
+
+function getBrowserId() {
+    let id = document.cookie.replace(/(?:(?:^|.*;\s*)webgis_browser_id\s*=\s*([^;]*).*$)|^.*$/, '$1');
+    if (!id) {
+        id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+        // Cookie Expiration in one Year
+        document.cookie = 'webgis_browser_id=' + id + ';path=/;max-age=31536000;SameSite=Lax';
+    }
+    return id;
+}
 
-// Category Definitions with Labels, Icons, and Colors
-const CATEGORIES = {
-    consumption: { label: 'Geschäfte',   faIcon: 'fa-cart-shopping', color: '#C00000' },
-    building:    { label: 'Bauen',       faIcon: 'fa-building',      color: '#E65100' },
-    energy:      { label: 'Energie',     faIcon: 'fa-bolt',          color: '#FFC000' },
-    environment: { label: 'Umwelt',      faIcon: 'fa-seedling',      color: '#92D050' },
-    mobility:    { label: 'Mobilität',   faIcon: 'fa-bus',           color: '#0070C0' },
-    industry:    { label: 'Industrie',   faIcon: 'fa-industry',      color: '#7030A0' },
-    other:       { label: 'Sonstiges',   faIcon: 'fa-thumbtack',     color: '#7F7F7F' }
-};
 
 // Application State
 let map;                                      // Leaflet Map Instance
@@ -301,9 +306,15 @@ function apiCall(data, callback) {
         });
 }
 
+
 // Loads all Contributions from API and displays Contributions on Map
 function loadContributions() {
-    apiCall({ action: 'read', municipality_id: MUNICIPALITY.id }, function (data) {
+    const readParams = { action: 'read', municipality_id: MUNICIPALITY.id };
+
+    // Sends Browser ID for persistent Vote Display
+    readParams.browser_id = browserId;
+
+    apiCall(readParams, function (data) {
         if (data.error) {
             console.error('Load Error:', data.error);
             return;
@@ -311,6 +322,14 @@ function loadContributions() {
 
         contributionsData = data.features || [];
 
+        // Restores Vote Highlights from API Response
+        if (data.user_votes) {
+            userVotes = {};
+            for (const key in data.user_votes) {
+                userVotes[key] = data.user_votes[key];
+            }
+        }
+
         // Removes existing Layer if present
         if (contributionsLayer) {
             map.removeLayer(contributionsLayer);
@@ -342,10 +361,11 @@ function stylePoint(feature, latlng) {
 
     return L.circleMarker(latlng, {
         radius: 8,
-        color: '#ffffff',
+        color: cat.color,
-        weight: 2,
+        weight: 3,
         fillColor: cat.color,
-        fillOpacity: 0.9
+        fillOpacity: 0.25,
+        opacity: 0.8
     });
 }
 
@@ -367,7 +387,8 @@ function styleLinePolygon(feature) {
 // Block 9: Feature Popups for Read, Edit, Delete and Vote
 // =====================================================================
 
-function bindFeaturePopup(feature, layer) {
+// Builds Popup HTML for Features called every Time the Popup opens
+function buildPopupHtml(feature) {
     const props = feature.properties;
     const cat = CATEGORIES[props.category] || CATEGORIES.other;
 
@@ -377,35 +398,91 @@ function bindFeaturePopup(feature, layer) {
         day: '2-digit', month: '2-digit', year: 'numeric'
     });
 
-    // Builds Popup on Click
+    let html = '' +
-    const html = '' +
         '<div class="popup-detail">' +
             '<span class="popup-detail-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
             '<div class="popup-detail-title">' + escapeHtml(props.title) + '</div>' +
-            (props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '') +
+            (props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '');
-            '<div class="popup-detail-meta">' +
+
+    // Photo Toggle Button including hidden Photo
+    if (props.photo_path) {
+        html += '<div class="popup-photo-container" id="photo-container-' + props.contribution_id + '" style="display:none;">' +
+                    '<img src="' + escapeHtml(props.photo_path) + '" alt="Foto" class="popup-photo-img" onclick="window.open(\'' + escapeHtml(props.photo_path) + '\', \'_blank\')">' +
+                '</div>';
+    }
+
+    // Meta Information
+    html += '<div class="popup-detail-meta">' +
                 '<i class="fa-solid fa-user"></i> ' + escapeHtml(props.author_name) +
                 ' &middot; <i class="fa-solid fa-calendar"></i> ' + dateStr +
-            '</div>' +
+            '</div>';
-            '<div class="popup-detail-votes">' +
+
+    // Vote Buttons and Photo Toggle
+    html += '<div class="popup-detail-votes">' +
                 '<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'like' ? ' liked' : '') + '" id="vote-like-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'like\')" title="Gefällt mir">' +
                     '<i class="fa-solid fa-thumbs-up"></i> <span id="likes-' + props.contribution_id + '">' + props.likes_count + '</span>' +
                 '</button>' +
                 '<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'dislike' ? ' disliked' : '') + '" id="vote-dislike-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'dislike\')" title="Gefällt mir nicht">' +
                     '<i class="fa-solid fa-thumbs-down"></i> <span id="dislikes-' + props.contribution_id + '">' + props.dislikes_count + '</span>' +
-                '</button>' +
+                '</button>';
-            '</div>' +
+
-            (currentUser === props.author_name ?
+    // Photo Toggle Button
-                '<div class="popup-detail-actions">' +
+    if (props.photo_path) {
+        html += '<button class="popup-vote-btn" onclick="togglePhoto(' + props.contribution_id + ')" title="Foto">' +
+                    '<i class="fa-solid fa-camera"></i> <span id="photo-label-' + props.contribution_id + '">Foto anzeigen</span>' +
+                '</button>';
+    }
+
+    html += '</div>';
+
+    // Edit and Delete Buttons for Author or Admin
+    if (props.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN)) {
+        html += '<div class="popup-detail-actions">' +
                     '<button class="btn btn-primary" onclick="editContribution(' + props.contribution_id + ')"><i class="fa-solid fa-pen"></i> Bearbeiten</button>' +
                     '<button class="btn btn-danger" onclick="deleteContribution(' + props.contribution_id + ')"><i class="fa-solid fa-trash"></i> Löschen</button>' +
-                '</div>' : '') +
                 '</div>';
+    }
 
-    layer.bindPopup(html, { maxWidth: 320, minWidth: 240 });
+    // Collapsible Comments Section 
+    const commentCount = props.comment_count || 0;
+    html += '<div class="popup-comments">' +
+                '<div class="popup-comments-header" onclick="toggleComments(' + props.contribution_id + ')">' +
+                    '<i class="fa-solid fa-comments"></i> Kommentare (' + commentCount + ')' +
+                    ' <i class="fa-solid fa-chevron-down popup-comments-toggle" id="comments-toggle-' + props.contribution_id + '"></i>' +
+                '</div>' +
+                '<div id="comments-section-' + props.contribution_id + '" style="display:none;">' +
+                    '<div id="comments-list-' + props.contribution_id + '" class="popup-comments-list"></div>';
 
-    // Builds Tooltip on Hover
+    // Comment Input for logged-in Users
-    layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(props.title), {
+    if (currentUser) {
+        html += '<div class="popup-comment-form">' +
+                    '<input type="text" id="comment-input-' + props.contribution_id + '" class="popup-comment-input" placeholder="Kommentar schreiben..." maxlength="1000">' +
+                    '<button class="popup-comment-submit" onclick="submitComment(' + props.contribution_id + ')" title="Senden">' +
+                        '<i class="fa-solid fa-paper-plane"></i>' +
+                    '</button>' +
+                '</div>';
+    }
+
+    html += '</div></div></div>';
+
+    return html;
+}
+
+
+// Binds Popup and Tooltip to Feature Layer
+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 });
+
+    // Loads Comments when Popup opens
+    layer.on('popupopen', function () {
+        loadComments(feature.properties.contribution_id);
+    });
+
+    // Tooltip on Hover
+    layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(feature.properties.title), {
         direction: 'top',
         offset: [0, -10]
     });
@@ -423,8 +500,9 @@ function submitCreate() {
     const description = document.getElementById('create-description').value.trim();
     const geom = document.getElementById('create-geom').value;
     const geomType = document.getElementById('create-geom-type').value;
+    const photoInput = document.getElementById('create-photo');
 
-    // Validates
+    // Validates required Fields
     if (!category) {
         Swal.fire('Kategorie fehlt', 'Bitte wählen Sie eine Kategorie aus.', 'warning');
         return;
@@ -438,24 +516,47 @@ function submitCreate() {
         return;
     }
 
-    apiCall({
+    // Builds FormData manually to include Photo File
-        action: 'create',
+    const formData = new FormData();
-        municipality_id: MUNICIPALITY.id,
+    formData.append('action', 'create');
-        category: category,
+    formData.append('municipality_id', MUNICIPALITY.id);
-        title: title,
+    formData.append('category', category);
-        description: description,
+    formData.append('title', title);
-        geom: geom,
+    formData.append('description', description);
-        geom_type: geomType,
+    formData.append('geom', geom);
-        author_name: currentUser
+    formData.append('geom_type', geomType);
-    }, function (response) {
+    formData.append('author_name', currentUser);
+    formData.append('browser_id', browserId);
+
+    // Appends Photo File if selected
+    if (photoInput.files.length > 0) {
+        formData.append('photo', photoInput.files[0]);
+    }
+
+    // Sends directly via fetch not through apiCall, because of File Upload
+    fetch(API_URL, { method: 'POST', body: formData })
+        .then(function (response) { return response.json(); })
+        .then(function (response) {
             if (response.error) {
                 Swal.fire('Fehler', response.error, 'error');
                 return;
             }
 
+            // Triggers Reverse Geocoding in Background
+            if (response.contribution_id && drawnGeometry) {
+                const coords = drawnGeomType === 'point' ? drawnGeometry.coordinates :
+                               drawnGeomType === 'line' ? drawnGeometry.coordinates[0] :
+                               drawnGeometry.coordinates[0][0];
+                reverseGeocode(response.contribution_id, coords[1], coords[0]);
+            }
+
             Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.', 'success');
             closeCreateModal();
             loadContributions();
+        })
+        .catch(function (error) {
+            console.error('Upload Error:', error);
+            Swal.fire('Verbindungsfehler', 'Verbindung zum Server fehlgeschlagen.', 'error');
         });
 }
 
@@ -471,6 +572,9 @@ function closeCreateModal() {
     document.getElementById('create-description').value = '';
     document.getElementById('create-geom').value = '';
     document.getElementById('create-geom-type').value = '';
+    // Resets Photo Upload
+    document.getElementById('create-photo').value = '';
+    document.getElementById('photo-preview').style.display = 'none';
     drawnGeometry = null;
     drawnGeomType = null;
 }
@@ -490,10 +594,14 @@ function editContribution(contributionId) {
         title: 'Beitrag bearbeiten',
         html:
             '<div style="text-align:left;">' +
-                '<label style="font-weight:600;font-size:0.85rem;">Titel</label>' +
+                '<div style="margin-bottom:12px;">' +
-                '<input id="swal-title" class="swal2-input" value="' + escapeHtml(props.title) + '">' +
+                    '<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
-                '<label style="font-weight:600;font-size:0.85rem;">Beschreibung</label>' +
+                    '<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(props.title) + '">' +
-                '<textarea id="swal-description" class="swal2-textarea">' + escapeHtml(props.description || '') + '</textarea>' +
+                '</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',
@@ -563,7 +671,8 @@ function voteContribution(contributionId, voteType) {
         action: 'vote',
         contribution_id: contributionId,
         voter_name: currentUser,
-        vote_type: voteType
+        vote_type: voteType,
+        browser_id: browserId
     }, function (response) {
         if (response.error) {
             return;
@@ -575,39 +684,53 @@ function voteContribution(contributionId, voteType) {
         const likesSpan = document.getElementById('likes-' + contributionId);
         const dislikesSpan = document.getElementById('dislikes-' + contributionId);
 
+        // Finds Feature in Contributions to update Properties
+        const feature = contributionsData.find(function (f) {
+            return f.properties.contribution_id === contributionId;
+        });
+
         if (response.action === 'created') {
-            // New Vote — Highlights Button and updates Count
             userVotes[contributionId] = voteType;
             if (voteType === 'like') {
                 likeBtn.classList.add('liked');
                 likesSpan.textContent = parseInt(likesSpan.textContent) + 1;
+                if (feature) feature.properties.likes_count++;
             } else {
                 dislikeBtn.classList.add('disliked');
                 dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1;
+                if (feature) feature.properties.dislikes_count++;
             }
         } else if (response.action === 'removed') {
-            // Vote removed — Removes Button Highlight and updates Count
             delete userVotes[contributionId];
             if (voteType === 'like') {
                 likeBtn.classList.remove('liked');
                 likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1);
+                if (feature) feature.properties.likes_count = Math.max(0, feature.properties.likes_count - 1);
             } else {
                 dislikeBtn.classList.remove('disliked');
                 dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1);
+                if (feature) feature.properties.dislikes_count = Math.max(0, feature.properties.dislikes_count - 1);
             }
         } else if (response.action === 'changed') {
-            // Vote changed — Switches Highlights and updates both Counts
             userVotes[contributionId] = voteType;
             if (voteType === 'like') {
                 likeBtn.classList.add('liked');
                 dislikeBtn.classList.remove('disliked');
                 likesSpan.textContent = parseInt(likesSpan.textContent) + 1;
                 dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1);
+                if (feature) {
+                    feature.properties.likes_count++;
+                    feature.properties.dislikes_count = Math.max(0, feature.properties.dislikes_count - 1);
+                }
             } else {
                 dislikeBtn.classList.add('disliked');
                 likeBtn.classList.remove('liked');
                 dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1;
                 likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1);
+                if (feature) {
+                    feature.properties.dislikes_count++;
+                    feature.properties.likes_count = Math.max(0, feature.properties.likes_count - 1);
+                }
             }
         }
     });
@@ -664,6 +787,7 @@ function updateContributionsList() {
                     '<span class="contribution-card-votes">' +
                         '<span title="Likes"><i class="fa-solid fa-thumbs-up"></i> ' + props.likes_count + '</span>' +
                         '<span title="Dislikes"><i class="fa-solid fa-thumbs-down"></i> ' + props.dislikes_count + '</span>' +
+                        '<span title="Kommentare"><i class="fa-solid fa-comment"></i> ' + (props.comment_count || 0) + '</span>' +
                     '</span>' +
                 '</div>' +
             '</div>';
@@ -743,7 +867,14 @@ function toggleCategoryFilter(checkbox) {
             if (layer.feature) {
                 const cat = layer.feature.properties.category;
                 if (activeFilters.indexOf(cat) !== -1) {
-                    layer.setStyle({ opacity: 1, fillOpacity: layer.feature.geometry.type === 'Point' ? 0.9 : 0.25 });
+                    const catDef = CATEGORIES[cat] || CATEGORIES.other;
+                    layer.setStyle({
+                        color: catDef.color,
+                        weight: 3,
+                        opacity: 0.8,
+                        fillColor: catDef.color,
+                        fillOpacity: 0.25
+                    });
                     if (layer.setRadius) layer.setRadius(8);
                     layer.options.interactive = true;
                 } else {
@@ -767,24 +898,24 @@ function updateStatistics() {
     const total = contributionsData.length;
 
     // Counts per Category
-    const counts = {};
+    // const counts = {};
-    contributionsData.forEach(function (f) {
+    // contributionsData.forEach(function (f) {
-        const cat = f.properties.category;
+    //     const cat = f.properties.category;
-        counts[cat] = (counts[cat] || 0) + 1;
+    //     counts[cat] = (counts[cat] || 0) + 1;
-    });
+    // });
 
-    let html = '<p style="font-size:0.9rem;"><strong>' + total + '</strong> Beiträge insgesamt</p>';
+    let html = '<p style="font-size:0.8rem;"><strong>' + total + '</strong> Hinweise insgesamt</p>';
 
-    for (const key in CATEGORIES) {
+    // for (const key in CATEGORIES) {
-        const cat = CATEGORIES[key];
+    //     const cat = CATEGORIES[key];
-        const count = counts[key] || 0;
+    //     const count = counts[key] || 0;
-        if (count > 0) {
+    //     if (count > 0) {
-            html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
+    //         html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.8rem;">' +
-                categoryIcon(cat) + ' ' +
+    //             categoryIcon(cat) + ' ' +
-                cat.label + ': ' + count +
+    //             cat.label + ': ' + count +
-            '</div>';
+    //         '</div>';
-        }
+    //     }
-    }
+    // }
 
     container.innerHTML = html;
 }
@@ -823,6 +954,7 @@ function submitLogin() {
     }
     currentUser = name;
     sessionStorage.setItem('webgis_user', currentUser);
+    document.cookie = 'webgis_user=' + encodeURIComponent(name) + ';path=/;max-age=31536000;SameSite=Lax';
     document.getElementById('login-modal').style.display = 'none';
 
     // Open Create Modal if Geometry is pending 
@@ -846,31 +978,15 @@ function showInfoModal() {
               '<strong>' + MUNICIPALITY.name + '</strong> mitzuwirken.</p>' +
               '<p style="text-align:left;line-height:1.6;">Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
               'mithilfe der Zeichenwerkzeuge auf der Karte ein.</p>',
-        confirmButtonColor: MUNICIPALITY.primaryColor
+        showDenyButton: true,
-    });
+        confirmButtonText: 'Schließen',
-}
+        denyButtonText: '<i class="fa-solid fa-route"></i> Tutorial starten',
-
+        confirmButtonColor: MUNICIPALITY.primaryColor,
-// Privacy Modal
+        denyButtonColor: '#546E7A'
-function showPrivacyModal() {
+    }).then(function (result) {
-    Swal.fire({
+        if (result.isDenied && typeof restartOnboarding === 'function') {
-        title: 'Datenschutz',
+            restartOnboarding();
-        html: '<p style="text-align:left;line-height:1.6;">Das Bürgerbeteiligungsportal speichert die von Ihnen ' +
+        }
-              'hinterlegten Daten zur Durchführung der Bürgerbeteiligung.</p>' +
-              '<p style="text-align:left;line-height:1.6;">Ihre Daten werden nicht an Dritte weitergegeben. ' +
-              'Details entnehmen Sie bitte der vollständigen Datenschutzerklärung von ' +
-              MUNICIPALITY.name + '.</p>',
-        confirmButtonColor: MUNICIPALITY.primaryColor
-    });
-}
-
-// Imprint Modal
-function showImprintModal() {
-    Swal.fire({
-        title: 'Impressum',
-        html: '<p style="text-align:left;line-height:1.6;">Stadt ' + MUNICIPALITY.name + '</p>' +
-              '<p style="text-align:left;line-height:1.6;color:#777;">Die vollständigen Angaben ' +
-              'werden hier hinzugefügt, sobald das Portal in den Produktivbetrieb geht.</p>',
-        confirmButtonColor: MUNICIPALITY.primaryColor
     });
 }
 
@@ -921,6 +1037,163 @@ function categoryIcon(cat) {
     return '<i class="fa-solid ' + cat.faIcon + '" style="color:' + cat.color + ';"></i>';
 }
 
+// Reverse Geocodes Coordinates and saves Address to Contribution via API
+function reverseGeocode(contributionId, lat, lng) {
+    fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lng + '&zoom=18&addressdetails=1', {
+        headers: { 'Accept-Language': 'de' }
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (data) {
+        if (data.display_name) {
+            const addr = data.address || {};
+            const parts = [];
+            if (addr.road) parts.push(addr.road + (addr.house_number ? ' ' + addr.house_number : ''));
+            if (addr.city || addr.town || addr.village) parts.push(addr.city || addr.town || addr.village);
+            const shortAddress = parts.length > 0 ? parts.join(', ') : data.display_name.split(',').slice(0, 2).join(',');
+
+            // Saves Address to Database via API
+            apiCall({
+                action: 'update',
+                contribution_id: contributionId,
+                address: shortAddress
+            }, function () {});
+        }
+    })
+    .catch(function () {});
+}
+
+// Filters News Items in Sidebar by Search Term
+function filterNews() {
+    const searchTerm = document.getElementById('news-search-input').value.toLowerCase();
+    const newsItems = document.querySelectorAll('#news-list .news-item');
+
+    newsItems.forEach(function (item) {
+        const title = item.dataset.title || '';
+        const content = item.dataset.content || '';
+        const author = item.dataset.author || '';
+
+        // Shows Item if Search Term matches Title, Content or Author
+        if (!searchTerm || title.indexOf(searchTerm) !== -1 || content.indexOf(searchTerm) !== -1 || author.indexOf(searchTerm) !== -1) {
+            item.style.display = '';
+        } else {
+            item.style.display = 'none';
+        }
+    });
+}
+
+// Loads and Displays Comments forContributions in Popups
+function loadComments(contributionId) {
+    apiCall({
+        action: 'read_comments',
+        contribution_id: contributionId
+    }, function (response) {
+        const listContainer = document.getElementById('comments-list-' + contributionId);
+        const countSpan = document.getElementById('comment-count-' + contributionId);
+
+        if (!listContainer) return;
+
+        if (response.error || !response.comments || response.comments.length === 0) {
+            listContainer.innerHTML = '<div class="popup-comment-empty">Noch keine Kommentare.</div>';
+            if (countSpan) countSpan.textContent = '(0)';
+            return;
+        }
+
+        if (countSpan) countSpan.textContent = '(' + response.count + ')';
+
+        let html = '';
+        response.comments.forEach(function (comment) {
+            const commentDate = new Date(comment.created_at).toLocaleDateString('de-DE');
+            const canDelete = comment.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN);
+
+            html += '<div class="popup-comment">' +
+                        '<div class="popup-comment-meta">' +
+                            '<strong>' + escapeHtml(comment.author_name) + '</strong>' +
+                            ' · ' + commentDate +
+                            (canDelete ? ' · <a href="#" onclick="deleteComment(' + comment.comment_id + ', ' + contributionId + ');return false;" class="popup-comment-delete"><i class="fa-solid fa-trash"></i></a>' : '') +
+                        '</div>' +
+                        '<div class="popup-comment-text">' + escapeHtml(comment.content) + '</div>' +
+                    '</div>';
+        });
+
+        listContainer.innerHTML = html;
+    });
+}
+
+// Submits a new Comment on a Contribution
+function submitComment(contributionId) {
+    const input = document.getElementById('comment-input-' + contributionId);
+    const content = input ? input.value.trim() : '';
+
+    if (!content) return;
+
+    apiCall({
+        action: 'create_comment',
+        contribution_id: contributionId,
+        author_name: currentUser,
+        browser_id: browserId,
+        content: content
+    }, function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        if (input) input.value = '';
+        Swal.fire({
+            title: 'Eingereicht!',
+            text: 'Ihr Kommentar wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.',
+            icon: 'success',
+            timer: 3000,
+            showConfirmButton: true
+        });
+    });
+}
+
+// Deletes a Comment
+function deleteComment(commentId, contributionId) {
+    apiCall({
+        action: 'delete_comment',
+        comment_id: commentId
+    }, function (response) {
+        if (response.error) return;
+        // Reloads Comments after Deletion
+        loadComments(contributionId);
+    });
+}
+
+// Toggles Photo Visibility in Popup
+function togglePhoto(contributionId) {
+    const container = document.getElementById('photo-container-' + contributionId);
+    const label = document.getElementById('photo-label-' + contributionId);
+    if (!container) return;
+
+    if (container.style.display === 'none') {
+        container.style.display = 'block';
+        label.textContent = 'Foto verbergen';
+    } else {
+        container.style.display = 'none';
+        label.textContent = 'Foto anzeigen';
+    }
+}
+
+// Toggles Comments Section Visibility in Popup
+function toggleComments(contributionId) {
+    const section = document.getElementById('comments-section-' + contributionId);
+    const toggle = document.getElementById('comments-toggle-' + contributionId);
+    if (!section) return;
+
+    if (section.style.display === 'none') {
+        section.style.display = 'block';
+        toggle.classList.remove('fa-chevron-down');
+        toggle.classList.add('fa-chevron-up');
+        // Loads Comments
+        loadComments(contributionId);
+    } else {
+        section.style.display = 'none';
+        toggle.classList.remove('fa-chevron-up');
+        toggle.classList.add('fa-chevron-down');
+    }
+}
+
 
 // =====================================================================
 // Block 16: Application Startup
@@ -939,6 +1212,7 @@ function buildCategoryDropdown() {
     }
 }
 
+
 // Populates Category Dropdown
 buildCategoryDropdown();
 
@@ -950,3 +1224,21 @@ loadContributions();
 
 // Shows Welcome Modal on first Visit
 checkWelcomeModal();
+
+
+// Photo Preview in Create Modal
+document.getElementById('create-photo').addEventListener('change', function () {
+    const preview = document.getElementById('photo-preview');
+    const previewImg = document.getElementById('photo-preview-img');
+
+    if (this.files && this.files[0]) {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            previewImg.src = e.target.result;
+            preview.style.display = 'block';
+        };
+        reader.readAsDataURL(this.files[0]);
+    } else {
+        preview.style.display = 'none';
+    }
+});

public/js/onboarding.js

@@ -0,0 +1,277 @@
+// =====================================================================
+// WebGIS Citizen Participation Portal — Onboarding Tour
+// Guides Users through the Participation Portal
+// =====================================================================
+
+
+// =================================================================
+// Block 1: Onboarding Configuration
+// =================================================================
+
+// ONBOARDING_MODE — Controls when the Tutorial is shown:
+const ONBOARDING_MODE = 'once';
+//     'once'    — Shown on first Visit, stored in localStorage
+//     'session' — Shown per Browser Session, stored in sessionStorage
+//     'always'  — Shows always, nothing stored
+
+// Prevents double Initialization
+let onboardingStarted = false;
+
+
+// =================================================================
+// Block 2: Tour Initialization
+// =================================================================
+
+function initOnboardingTour() {
+
+    // Checks if Tutorial should be shown based on Onboarding Mode
+    if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+    if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+
+    // Waits for Welcome and Login Modals to be closed
+    waitForModalsToClose(function () {
+        setTimeout(startTour, 600);
+    });
+}
+
+
+// =================================================================
+// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
+// =================================================================
+
+function waitForModalsToClose(callback) {
+    const welcomeModal = document.getElementById('welcome-modal');
+    const loginModal = document.getElementById('login-modal');
+
+    const checkInterval = setInterval(function () {
+        const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
+        const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
+
+        if (welcomeHidden && loginHidden) {
+            clearInterval(checkInterval);
+            callback();
+        }
+    }, 300);
+
+    // Safety Timeout
+    setTimeout(function () {
+        clearInterval(checkInterval);
+        callback();
+    }, 30000);
+}
+
+
+// =================================================================
+// Block 4: Tour Definition
+// =================================================================
+
+function startTour() {
+    // Prevents double Start
+    if (onboardingStarted) return;
+    onboardingStarted = true;
+
+    const tour = new Shepherd.Tour({
+        useModalOverlay: true,
+        defaultStepOptions: {
+            cancelIcon: { enabled: true },
+            scrollTo: false,
+            classes: 'onboarding-step',
+            popperOptions: {
+                modifiers: [
+                    { name: 'offset', options: { offset: [0, 14] } }
+                ]
+            }
+        }
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 1: Welcome
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'welcome',
+        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
+        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+              '<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+        buttons: [
+            {
+                text: 'Überspringen',
+                action: tour.cancel,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 2: Drawing Tools
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'drawing-tools',
+        title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
+        text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
+        attachTo: {
+            element: '.leaflet-pm-toolbar',
+            on: 'left'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
+            });
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 3: Address Search
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'address-search',
+        title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
+        text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
+        attachTo: {
+            element: '.leaflet-control-geocoder',
+            on: 'left'
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 4: Layer Control
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'layer-control',
+        title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
+        text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
+        attachTo: {
+            element: '.leaflet-control-layers',
+            on: 'left'
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Step 5: Sidebar
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'sidebar',
+        title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
+        text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
+        attachTo: {
+            element: '#sidebar',
+            on: 'right'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
+            });
+        },
+        buttons: [
+            {
+                text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
+                action: tour.back,
+                classes: 'shepherd-button-secondary'
+            },
+            {
+                text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
+                action: tour.next,
+                classes: 'shepherd-button-primary'
+            }
+        ]
+    });
+
+
+    // -----------------------------------------------------------------
+    // Completion and Cancellation
+    // -----------------------------------------------------------------
+    tour.on('complete', function () {
+        markOnboardingDone();
+        onboardingStarted = false;
+    });
+
+    tour.on('cancel', function () {
+        markOnboardingDone();
+        onboardingStarted = false;
+    });
+
+    tour.start();
+}
+
+
+// =================================================================
+// Marks Onboarding as completed
+// =================================================================
+
+function markOnboardingDone() {
+    if (ONBOARDING_MODE === 'once') {
+        localStorage.setItem('webgis_onboarding_done', 'true');
+    } else if (ONBOARDING_MODE === 'session') {
+        sessionStorage.setItem('webgis_onboarding_done', 'true');
+    }
+}
+
+
+// =================================================================
+// Manual Tour Restart
+// =================================================================
+
+function restartOnboarding() {
+    localStorage.removeItem('webgis_onboarding_done');
+    sessionStorage.removeItem('webgis_onboarding_done');
+    onboardingStarted = false;
+    startTour();
+}
+
+
+// =================================================================
+// Auto-Start on Page Load
+// =================================================================
+
+initOnboardingTour();

public/privacy.php

@@ -0,0 +1,39 @@
+<?php
+require_once __DIR__ . '/api/db.php';
+$pdo = get_db();
+$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
+$municipality = $stmt->fetch();
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <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="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>
+</head>
+<body>
+    <div class="page-header">
+        <div class="page-header-inner">
+            <h1><i class="fa-solid fa-lock"></i> Datenschutz</h1>
+            <div class="page-header-nav">
+                <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            </div>
+        </div>
+    </div>
+    <div class="page-container">
+        <div class="page-content-box">
+            <div class="dev-notice">
+                <i class="fa-solid fa-triangle-exclamation"></i>
+                Dieses Portal befindet sich in der Entwicklung und wurde nicht offiziell beauftragt. Die Datenschutzerklärung wird mit der offiziellen Inbetriebnahme hier hinzugefügt.
+            </div>
+            <h2>Datenschutz</h2>
+            <p>Die Datenschutzerklärung wird hier hinzugefügt, sobald das Portal in den Produktivbetrieb geht.</p>
+        </div>
+    </div>
+</body>
+</html>

public/uploads/.htaccess

@@ -0,0 +1,7 @@
+# Prevents PHP in Upload Directory
+php_flag engine off
+
+# Allows Image Files
+<FilesMatch "\.(?i:jpg|jpeg|png|gif|webp)$">
+    Require all granted
+</FilesMatch>

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