news sort control in sidebar

Reviewed-on: #1

.env.example

@@ -0,0 +1,8 @@
+# Example Environment Configfile
+POSTGRES_HOSTNAME=postgres_host
+POSTGRES_PORT=postgres_port
+POSTGRES_DB=postgres_database
+POSTGRES_USER=postgres_user
+POSTGRES_PASSWORD=
+ADMIN_PASSWORD=
+MUNICIPALITY_SLUG=lohne

.gitattributes

@@ -0,0 +1,8 @@
+# Specifies Line Feed (LF) Line Endings for Shell Scripts
+*.sh    text eol=lf
+
+# # Specifies Line Feed (LF) Line Endings for SQL Files
+*.sql   text eol=lf
+
+# Letd Git decide for other Files
+*       text=auto

.gitignore

@@ -0,0 +1,7 @@
+.env
+.vscode/
+*.log
+scripts
+
+public/uploads/photos/*
+!public/uploads/photos/.gitkeep

EXTENSION.md

@@ -0,0 +1,78 @@
+## Neue Ideenkarte anlegen
+1.	DNS record ```<name>``` A 195.59.32.237 600s
+2.	Nginx Weiterleitung in ```default.conf```: 
+
+```
+server {
+    listen 443 ssl;
+    server_name <name>.endex-geodaten.de;
+
+    ssl_certificate /etc/letsencrypt/live/endex-geodaten.de/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/endex-geodaten.de/privkey.pem;
+
+    root /var/www/webgis-<name>/public;
+    index index.php index.html;
+
+    location / {
+        try_files $uri $uri/ /index.php?$query_string;
+    }
+
+    location ~ \.php$ {
+        fastcgi_pass webgis-<name>-php:9000; 
+        fastcgi_index index.php;
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+    }
+}
+```
+
+3. Docker container für UI
+```
+  webgis-<name>-php:
+    build: php-docker/
+    container_name: webgis-<name>-php
+    volumes:
+      - ./webgis-<name>:/var/www/webgis-<name>
+    networks:
+      - frontend
+      - webgis-<name>-nw
+```
+
+und Datenbank anlegen.
+
+```
+  webgis-<name>db:
+    image: postgis/postgis:15-3.3
+    container_name: webgis-<name>-db
+    restart: always
+    ports:
+      - "127.0.0.1:543<ID>:5432" # inside the container always 5432
+    environment:
+      - POSTGRES_USER=${WEBGIS_DB_USER} # maybe go back to default username
+      - POSTGRES_PASSWORD=${WEBGIS_DB_PW} # must be secure and unique
+      - POSTGRES_DB=${WEBGIS_DB_NAME} #same as container name
+    volumes:
+      - ./webgis-<name>-data:/var/lib/postgresql/data
+    networks:
+      - webgis-<name>-nw
+```
+
+4.	nginx Volume für neue Stadt in ```docker-compose.yml``` anlegen
+```
+./webgis-<name>:/var/www/webgis-<name>
+```
+
+
+5. Frontend source code nach ```webgis-<name>``` klonen
+```
+git submodule add -b <branch-name> https://git.endex-geodaten.de/lukas.uptmoor/webgis-<name>.git
+```
+
+Jede Kommune sollte ein eigenes Repo kriegen, da Features am Anfang variieren.
+
+
+6. Mit der Datenbank verbinden über SSH-Tunnel
+```
+ssh -L 5433:localhost:543<ID> root@endex-geodaten.de
+```
+und Datenbank für Anwendung vorbereiten.

index.php

@@ -1,56 +0,0 @@
-<?php
-$host = 'webgis-db'; // Matches the service name in docker-compose
-$db   = getenv('POSTGRES_DB');
-$user = getenv('POSTGRES_USER');
-$pass = getenv('POSTGRES_PASSWORD');
-
-try {
-    $dsn = "pgsql:host=$host;port=5432;dbname=$db;";
-    $pdo = new PDO($dsn, $user, $pass, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
-
-    if ($pdo) {
-        echo "<h1>✅ Connected to PostGIS!</h1>";
-        
-        // Check PostGIS version
-        $query = $pdo->query("SELECT PostGIS_full_version();");
-        $version = $query->fetch();
-        echo "<p><strong>PostGIS Version:</strong> " . $version[0] . "</p>";
-    }
-} catch (PDOException $e) {
-    echo "<h1>❌ Connection Failed</h1>";
-    echo "<p>" . $e->getMessage() . "</p>";
-}
-?>
-
-
-
-
-
-<?php
-
-// ========================================================================================
-// INIT.PHP — Datenbankverbindung und Session-Initialisierung
-// ========================================================================================
-//
-    // ob_start();
-
-    // session_start();
-
-    // try {
-
-    //     $opt = [
-    //         PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
-    //         PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,   
-    //         PDO::ATTR_EMULATE_PREPARES   => false
-    //     ];
-
-
-    //     $dsn = "pgsql:host=localhost;dbname=getenv('POSTGRES_DB');port=5432";
-    //     $pdo = new PDO($dsn, getenv('POSTGRES_USER'), 'getenv('POSTGRES_PASSWORD'), $opt);
-    
-
-    // } catch(PDOException $e) {
-    //     echo "Error: ".$e->getMessage();
-    // }
-?>
-

migrations/001_initial_schema.sql

@@ -0,0 +1,169 @@
+-- =====================================================================
+-- WebGIS Citizen Participation Portal — Initial Schema
+-- Migration: 001_initial_schema.sql
+-- Description: Creates Core Tables for a multi-tenant Citizen
+--              Participation Platform with Point/Line/Polygon
+--              Contributions, Voting, and Moderation Workflow.
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Checks PostGIS Extension
+-- ---------------------------------------------------------------------
+CREATE EXTENSION IF NOT EXISTS postgis;
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Creates Table "municipalities"
+-- One Row per Municipalitiy using the Portal (multi-tenant setup).
+-- ---------------------------------------------------------------------
+CREATE TABLE municipalities (
+    municipality_id   SERIAL PRIMARY KEY,
+    name              VARCHAR(100)     NOT NULL UNIQUE,        -- Municipalitiy Name
+    slug              VARCHAR(50)      NOT NULL UNIQUE,        -- URL-safe Identifier, e.g. "lohne"
+    center_lat        DOUBLE PRECISION NOT NULL,               -- Map Center Latitude
+    center_lng        DOUBLE PRECISION NOT NULL,               -- Map Center Longitude
+    default_zoom      SMALLINT         NOT NULL DEFAULT 13,    -- Map Default Zoom Level
+    logo_path         VARCHAR(255),                            -- Relative Path to Municipality Logo
+    primary_color     VARCHAR(7)       DEFAULT '#6a6a6a',    -- HexColor for UI Theme
+    created_at        TIMESTAMPTZ      NOT NULL DEFAULT NOW(),
+    updated_at        TIMESTAMPTZ      NOT NULL DEFAULT NOW()
+);
+
+COMMENT ON TABLE municipalities IS 'Configuration Per Municipality (Tenant) using the Citizen Participation Portal.';
+
+
+-- ---------------------------------------------------------------------
+-- Block 3: Table "contributions"
+-- Aitizen and Administration Contributions as Points, Lines, and
+-- Polygons stored together in one mixed-geometry Column.
+-- ---------------------------------------------------------------------
+CREATE TABLE contributions (
+    contribution_id   SERIAL PRIMARY KEY,
+    municipality_id   INTEGER       NOT NULL REFERENCES municipalities(municipality_id) ON DELETE CASCADE,
+    geom              GEOMETRY(Geometry, 4326) NOT NULL,       -- Mixed Geometry: Point, Line, Polygon, ... (WGS84)
+    geom_type         VARCHAR(20)   NOT NULL,                  -- 'point' | 'line' | 'polygon'
+    category          VARCHAR(50)   NOT NULL,                  -- Contribution Category
+    title             VARCHAR(200)  NOT NULL,
+    description       TEXT,
+    author_name       VARCHAR(100)  NOT NULL,
+    status            VARCHAR(20)   NOT NULL DEFAULT 'pending',
+    likes_count       INTEGER       NOT NULL DEFAULT 0,
+    dislikes_count    INTEGER       NOT NULL DEFAULT 0,
+    created_at        TIMESTAMPTZ   NOT NULL DEFAULT NOW(),
+    updated_at        TIMESTAMPTZ   NOT NULL DEFAULT NOW(),
+
+    CONSTRAINT contributions_geom_type_check
+        CHECK (geom_type IN ('point', 'line', 'polygon')),
+    CONSTRAINT contributions_status_check
+        CHECK (status IN ('pending', 'approved', 'rejected', 'in_progress', 'done'))
+);
+
+COMMENT ON TABLE contributions IS 'Citizen and Administration Contributions with mixed Geometry Types.';
+
+
+-- ---------------------------------------------------------------------
+-- Block 4: Indexes for fast Queries
+-- ---------------------------------------------------------------------
+CREATE INDEX contributions_geom_idx         ON contributions USING GIST (geom);
+CREATE INDEX contributions_municipality_idx ON contributions (municipality_id);
+CREATE INDEX contributions_status_idx       ON contributions (status);
+CREATE INDEX contributions_category_idx     ON contributions (category);
+
+
+-- ---------------------------------------------------------------------
+-- Block 5: Table "votes"
+-- Individual like and dislike Records. UNIQUE Constraint prevents the
+-- same voter from liking or disliking the same contribution multiple times.
+-- ---------------------------------------------------------------------
+CREATE TABLE votes (
+    vote_id           SERIAL PRIMARY KEY,
+    contribution_id   INTEGER       NOT NULL REFERENCES contributions(contribution_id) ON DELETE CASCADE,
+    voter_name        VARCHAR(100)  NOT NULL,                  -- ToDo: Replace with user_id once Authentification exists
+    vote_type         VARCHAR(10)   NOT NULL,
+    created_at        TIMESTAMPTZ   NOT NULL DEFAULT NOW(),
+
+    CONSTRAINT votes_unique_per_voter UNIQUE (contribution_id, voter_name),
+    CONSTRAINT votes_vote_type_check  CHECK (vote_type IN ('like', 'dislike'))
+);
+
+COMMENT ON TABLE votes IS 'Individual Votes to prevent duplicate Likes and Dislikes.';
+
+
+-- ---------------------------------------------------------------------
+-- Block 6: Trigger Functions
+-- ---------------------------------------------------------------------
+
+-- Automatically Refresh updated_at on every UPDATE.
+CREATE OR REPLACE FUNCTION set_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = NOW();
+    RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER contributions_updated_at
+    BEFORE UPDATE ON contributions
+    FOR EACH ROW EXECUTE FUNCTION set_updated_at();
+
+CREATE TRIGGER municipalities_updated_at
+    BEFORE UPDATE ON municipalities
+    FOR EACH ROW EXECUTE FUNCTION set_updated_at();
+
+
+-- Keeps likes_count / dislikes_count synchronized with the votes Table.
+CREATE OR REPLACE FUNCTION update_vote_counts()
+RETURNS TRIGGER AS $$
+BEGIN
+    IF TG_OP = 'INSERT' THEN
+        IF NEW.vote_type = 'like' THEN
+            UPDATE contributions SET likes_count = likes_count + 1
+                WHERE contribution_id = NEW.contribution_id;
+        ELSE
+            UPDATE contributions SET dislikes_count = dislikes_count + 1
+                WHERE contribution_id = NEW.contribution_id;
+        END IF;
+    ELSIF TG_OP = 'DELETE' THEN
+        IF OLD.vote_type = 'like' THEN
+            UPDATE contributions SET likes_count = GREATEST(likes_count - 1, 0)
+                WHERE contribution_id = OLD.contribution_id;
+        ELSE
+            UPDATE contributions SET dislikes_count = GREATEST(dislikes_count - 1, 0)
+                WHERE contribution_id = OLD.contribution_id;
+        END IF;
+    END IF;
+    RETURN NULL;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER votes_count_sync
+    AFTER INSERT OR DELETE ON votes
+    FOR EACH ROW EXECUTE FUNCTION update_vote_counts();
+
+
+-- ---------------------------------------------------------------------
+-- Block 7: Typed Geometry Views for QGIS
+-- QGIS handles mixed-geometry Tables awkwardly, so one View per
+-- Geometry Type is created. Reflects live Data from the Contributions Table.
+-- ---------------------------------------------------------------------
+CREATE VIEW contributions_points AS
+    SELECT * FROM contributions WHERE geom_type = 'point';
+
+CREATE VIEW contributions_lines AS
+    SELECT * FROM contributions WHERE geom_type = 'line';
+
+CREATE VIEW contributions_polygons AS
+    SELECT * FROM contributions WHERE geom_type = 'polygon';
+
+
+-- ---------------------------------------------------------------------
+-- Block 8: Seed Data — Initial Municipality
+-- ---------------------------------------------------------------------
+INSERT INTO municipalities (name, slug, center_lat, center_lng, default_zoom, primary_color)
+VALUES ('Lohne (Oldenburg)', 'lohne', 52.66639, 8.23306, 14, '#00376D');
+
+
+-- =====================================================================
+-- End of migration 001_initial_schema.sql
+-- =====================================================================

migrations/002_add_votes_index.sql

@@ -0,0 +1,48 @@
+-- =====================================================================
+-- WebGIS Citizen Participation Portal
+-- Migration: 002_add_votes_index.sql
+-- Description: Adds missing Index on votes.contribution_id for fast
+--              Vote Lookups per Contribution.
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Index for fast Queries
+-- The UNIQUE Constraint on contribution_id and voter_name creates a
+-- composite Index, but Queries filtering only by contribution_id
+-- cannot use it efficiently. This single-column Index covers that Case.
+-- ---------------------------------------------------------------------
+CREATE INDEX votes_contribution_idx ON votes (contribution_id);
+
+
+-- =====================================================================
+-- ToDo's for future Migrations
+-- =====================================================================
+--
+-- 1. Categories Table
+--    Create a "categories" Table with municipality_id, slug, label,
+--    icon (FontAwesome), color, and sort_order. Replace the free-text
+--    "category" Column in Contributions with a Foreign Key Reference.
+--    This prevents Typos and inconsistent Category Names, and allows
+--    each Municipality to define its own Set of Categories.
+--
+-- 2. Soft Delete
+--    Add "deleted_at TIMESTAMPTZ DEFAULT NULL" to Contributions.
+--    Instead of DELETE, set deleted_at = NOW(). Filter all Queries
+--    with "WHERE deleted_at IS NULL". Allows Moderation Audit Trail
+--    and accidental Deletion Recovery.
+--
+-- 3. Audit Log
+--    Create an "audit_log" Table recording who changed what and when.
+--    Columns: audit_id, table_name, record_id, action (insert/update/
+--    delete), changed_by, old_values (JSONB), new_values (JSONB),
+--    created_at. Populate via Triggers on Contributions and Votes.
+--
+-- 4. Geometry Validation
+--    Add CHECK Constraint "ST_IsValid(geom)" on Contributions, or
+--    validate in the API Layer before Insert. Prevents self-crossing
+--    Polygons and other invalid Geometries.
+--
+-- =====================================================================
+-- End of migration 002_add_votes_index.sql
+-- =====================================================================

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

public/admin.php

@@ -0,0 +1,672 @@
+<?php
+// =====================================================================
+// Moderation Page
+// Lists Contributions for Review. Moderators can approve, reject,
+// edit and delete Contributions. Includes Map Preview and Filtering.
+// =====================================================================
+
+// 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';
+
+// Handles Login
+if ($page === 'login' && $_SERVER['REQUEST_METHOD'] === 'POST') {
+    $password = $_POST['password'] ?? '';
+    if (admin_login($password)) {
+        header('Location: admin.php');
+        exit;
+    } else {
+        $login_error = 'Falsches Passwort.';
+    }
+}
+
+// Handles Logout
+if ($page === 'logout') {
+    admin_logout();
+    header('Location: admin.php?page=login');
+    exit;
+}
+
+// -----------------------------------------------------------------
+// Loads Municipality Configuration for Theming
+// -----------------------------------------------------------------
+$pdo = get_db();
+$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
+$municipality = $stmt->fetch();
+
+
+// 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;
+}
+
+// -----------------------------------------------------------------
+// Loads shared Category Definitions
+// -----------------------------------------------------------------
+$categories = get_categories();
+
+// -----------------------------------------------------------------
+// Loads Contributions and Statistics
+// -----------------------------------------------------------------
+
+// Loads all Contributions for Municipality
+$stmt = $pdo->prepare("
+    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
+    ORDER BY created_at DESC
+");
+$stmt->execute([':mid' => $municipality['municipality_id']]);
+$all_contributions = $stmt->fetchAll();
+
+// Counts per Status
+$counts = ['pending' => 0, 'approved' => 0, 'rejected' => 0];
+foreach ($all_contributions as $item) {
+    if (isset($counts[$item['status']])) {
+        $counts[$item['status']]++;
+    }
+}
+$counts['total'] = count($all_contributions);
+
+// -----------------------------------------------------------------
+// Renders Main Page
+// -----------------------------------------------------------------
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <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">
+    
+    <!-- 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>
+
+    <!-- ============================================================= -->
+    <!-- Header                                                        -->
+    <!-- ============================================================= -->
+    <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>
+
+    <div class="page-container">
+
+        <!-- ========================================================= -->
+        <!-- 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-inbox"></i>
+                        Noch keine Beiträge vorhanden.
+                    </div>
+                <?php else: ?>
+                    <?php foreach ($all_contributions as $item):
+                        $cat = $categories[$item['category']] ?? ['label' => $item['category'], 'faIcon' => 'fa-question', 'color' => '#999'];
+                        $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-category">
+                                        <i class="fa-solid <?= $cat['faIcon'] ?>"></i>
+                                        <?= $cat['label'] ?>
+                                    </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>
+
+                            <!-- 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 empty">Keine Beschreibung vorhanden.</div>
+                                        <?php endif; ?>
+
+                                        <div class="detail-meta">
+                                            <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">
+                                    <?php if ($item['status'] !== 'approved'): ?>
+                                        <button class="btn btn-approve" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'approved')">
+                                            <i class="fa-solid fa-check"></i> Akzeptieren
+                                        </button>
+                                    <?php endif; ?>
+
+                                    <?php if ($item['status'] !== 'rejected'): ?>
+                                        <button class="btn btn-reject" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'rejected')">
+                                            <i class="fa-solid fa-xmark"></i> Ablehnen
+                                        </button>
+                                    <?php endif; ?>
+
+                                    <?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>
+                        </div>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </div>
+        </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"></i>
+                        Noch keine Kommentare vorhanden.
+                    </div>
+                <?php else: ?>
+                    <?php foreach ($all_comments as $comment):
+                        $comment_cat = $categories[$comment['contribution_category'] ?? ''] ?? ['label' => 'Unbekannt', 'faIcon' => 'fa-question', 'color' => '#999'];
+                        $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($comment['contribution_title']) ?></span>
+                                    <span class="badge badge-<?= $comment['status'] ?>"><?= $comment_status_label[$comment['status']] ?? $comment['status'] ?></span>
+                                    <span class="badge badge-category">
+                                        <i class="fa-solid <?= $comment_cat['faIcon'] ?>"></i>
+                                        <?= $comment_cat['label'] ?>
+                                    </span>
+                                </div>
+                                <i class="fa-solid fa-chevron-down collapse-icon"></i>
+                            </div>
+
+                            <!-- Expanded Detail -->
+                            <div class="contribution-row-detail">
+                                <div>
+                                    <!-- Comment Content -->
+                                    <div class="detail-block">
+                                        <?= nl2br(htmlspecialchars($comment['content'])) ?>
+                                    </div>
+                                    <!-- Meta -->
+                                    <div class="detail-meta">
+                                        <span><i class="fa-solid fa-user"></i> <?= htmlspecialchars($comment['author_name']) ?></span>
+                                        <span><i class="fa-solid fa-calendar"></i> <?= date('d.m.Y, H:i', strtotime($comment['created_at'])) ?> Uhr</span>
+                                    </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; ?>
+                                    <?php if ($comment['status'] !== 'rejected'): ?>
+                                        <button class="btn btn-reject" onclick="changeCommentStatus(<?= $comment['comment_id'] ?>, 'rejected')">
+                                            <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;">
+
+            <!-- Filter -->
+            <div class="filter-tabs" id="news-filter-tabs">
+                    <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
+                        Alle <span class="tab-count"><?= count($news_items) ?></span>
+                    </button>
+                </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="news-visible-count"><?= count($news_items) ?> Neuigkeiten</span>
+                <div style="display:flex;gap:var(--space-sm);align-items:center;">
+                    <select onchange="sortNewsRows(this.value)">
+                        <option value="date-desc">Neueste zuerst</option>
+                        <option value="date-asc">Älteste zuerst</option>
+                    </select>
+                </div>
+            </div>
+
+            <?php if (empty($news_items)): ?>
+                <div class="empty-state">
+                    <i class="fa-solid fa-newspaper"></i>
+                    Noch keine Neuigkeiten veröffentlicht.
+                </div>
+            <?php else: ?>
+                <?php foreach ($news_items as $news): ?>
+                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>" data-date="<?= $news['published_at'] ?>">
+                        <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
+                            <div class="contribution-row-summary">
+                                <span class="title"><?= htmlspecialchars($news['title']) ?></span>
+                                <span class="detail-block-meta">
+                                    <?= 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 class="detail-block">
+                                <?= 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 class="tab-footer-action">
+                    <button class="btn btn-approve" onclick="createNews()">
+                        <i class="fa-solid fa-plus"></i> Neuigkeit hinzufügen
+                    </button>
+            </div>
+        </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>
+
+        <div id="tab-users" class="page-tab-content" style="display:none;">
+            <div class="placeholder-content">
+                <i class="fa-solid fa-users"></i>
+                <p>Benutzerverwaltung - geplant in zukünftiger Version.</p>
+            </div>
+        </div>
+
+    </div>
+
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal (Admin)                               -->
+    <!-- ============================================================= -->
+    <div id="admin-edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-edit-title">Titel</label>
+                <input type="text" id="admin-edit-title" class="form-input">
+            </div>
+            <div class="form-group">
+                <label for="admin-edit-description">Beschreibung</label>
+                <textarea id="admin-edit-description" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-edit-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-edit-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Edit Comment Modal (Admin)                                    -->
+    <!-- ============================================================= -->
+    <div id="admin-comment-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Kommentar bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-comment-content">Inhalt</label>
+                <textarea id="admin-comment-content" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-comment-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-comment-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminComment()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Create/Edit News Modal (Admin)                                -->
+    <!-- ============================================================= -->
+    <div id="admin-news-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2 id="admin-news-modal-title"><i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen</h2>
+            <div class="form-group">
+                <label for="admin-news-title">Titel</label>
+                <input type="text" id="admin-news-title" class="form-input" placeholder="Titel der Neuigkeit">
+            </div>
+            <div class="form-group">
+                <label for="admin-news-content">Inhalt</label>
+                <textarea id="admin-news-content" class="form-input" rows="4" placeholder="Neuigkeit verfassen..."></textarea>
+            </div>
+            <div class="form-group">
+                <label for="admin-news-author">Autor</label>
+                <input type="text" id="admin-news-author" class="form-input" value="Stadtverwaltung">
+            </div>
+            <input type="hidden" id="admin-news-id">
+            <input type="hidden" id="admin-news-mode">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-news-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminNews()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- ============================================================= -->
+    <!-- Loads JavaScript Dependencies                                 -->
+    <!-- ============================================================= -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+
+    
+    <!-- ============================================================= -->
+    <!-- Admin Configuration passed to JavaScript                      -->
+    <!-- ============================================================= -->
+    <script>
+        const ADMIN_CONFIG = {
+            id: <?= $municipality['municipality_id'] ?>,
+            name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
+            slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
+            center: [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>],
+            zoom: <?= $municipality['default_zoom'] ?>,
+            primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
+        };
+    </script>
+
+    <!-- Application Logic -->
+    <script src="js/admin.js"></script>
+
+</body>
+</html>
+
+
+<?php
+// -----------------------------------------------------------------
+// Login Page
+// -----------------------------------------------------------------
+function show_login_page($municipality, $error = null) {
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Moderation - Anmeldung</title>
+    <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="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> Moderationsportal</h1>
+            <p>Bitte geben Sie das Moderationspasswort ein.</p>
+            <?php if ($error): ?>
+                <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"><i class="fa fa-arrow-left"></i> <a href="index.php">Zurück zum Bürgerportal</a></div>
+        </div>
+    </div>
+</body>
+</html>
+<?php
+}
+?>

public/api/auth.php

@@ -0,0 +1,28 @@
+<?php
+// =====================================================================
+// Admin Authentication Helper
+// Provides simple Password-based Session Authentication for the
+// Moderation Page. Reads Password from .env File.
+// ToDo: Replace with full User Authentication in Phase 3-3.
+// =====================================================================
+
+// Checks if current Session is authenticated as Admin
+function is_admin() {
+    return isset($_SESSION['is_admin']) && $_SESSION['is_admin'] === true;
+}
+
+// Authenticates with Password, returns true on Success
+function admin_login($password) {
+    $correct = getenv('ADMIN_PASSWORD');
+    if ($correct && $password === $correct) {
+        $_SESSION['is_admin'] = true;
+        return true;
+    }
+    return false;
+}
+
+// Logs out Admin Session
+function admin_logout() {
+    $_SESSION['is_admin'] = false;
+    session_destroy();
+}

public/api/contributions.php

@@ -0,0 +1,712 @@
+<?php
+// =====================================================================
+// Contributions API Endpoint
+// Handles CRUD Operations for Contributions (Points, Lines, Polygons)
+// and Voting. Actions are  determined by the 'action' Parameter in 
+// the Request.
+//
+// Supported Actions:
+//   read   — Load approved Contributions
+//   create — Insert Contributions
+//   update — Update Contributions
+//   delete — Delete Contributions
+//   vote   — Like or Dislike Contributions
+// =====================================================================
+
+require_once __DIR__ . '/db.php';
+
+
+// ---------------------------------------------------------------------
+// Read Action Parameter and Route to correct Handler
+// ---------------------------------------------------------------------
+$input = get_input();
+$action = $input['action'] ?? '';
+
+switch ($action) {
+    case 'read':
+        handle_read($input);
+        break;
+    case 'create':
+        handle_create($input);
+        break;
+    case 'update':
+        handle_update($input);
+        break;
+    case 'delete':
+        handle_delete($input);
+        break;
+    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;
+    default:
+        error_response('Unknown Action. Supported Actions are read, create, update, delete, vote.');
+}
+
+
+// =====================================================================
+// Action Handlers for Contributions
+// =====================================================================
+
+
+// ---------------------------------------------------------------------
+// READ: Loads approved Contributions as GeoJSON FeatureCollection
+// Required: municipality_id
+// Optional: category
+// ---------------------------------------------------------------------
+function handle_read($input) {
+    $pdo = get_db();
+
+    // Validate Input
+    $missing = validate_required($input, ['municipality_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $municipality_id = $input['municipality_id'];
+
+    // Builds SQL Query with Placeholders for prepared Statement
+    $sql = "SELECT *, ST_AsGeoJSON(geom) AS geojson
+            FROM contributions
+            WHERE municipality_id = :mid";
+    $params = [':mid' => $municipality_id];
+
+    // Optional: Filters by Status (Default: only approved)
+    $status = $input['status'] ?? 'approved';
+    if ($status !== 'all') {
+        $sql .= " AND status = :status";
+        $params[':status'] = $status;
+    }
+
+    // Optional: Filters by Category
+    if (!empty($input['category'])) {
+        $sql .= " AND category = :cat";
+        $params[':cat'] = $input['category'];
+    }
+
+    $sql .= " ORDER BY created_at DESC";
+
+    try {
+        // Prepared Statement to prevent SQL Injection
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute($params);
+        // Fetches Results as PHP-Array
+        $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']);
+
+        // Removes raw Geometry Columns from Properties
+        unset($row['geom']);
+        unset($row['geojson']);
+
+        $features[] = [
+            'type'       => 'Feature',
+            'geometry'   => $geometry,
+            'properties' => $row
+        ];
+    }
+
+    $featureCollection = [
+        'type'     => 'FeatureCollection',
+        '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);
+}
+
+
+// ---------------------------------------------------------------------
+// CREATE: Inserts new Contributions
+// 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();
+
+    // Validates Input
+    $missing = validate_required($input, [
+        'municipality_id', 'geom', 'geom_type', 'category', 'title', 'author_name'
+    ]);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Validates Geometry Type
+    $valid_geom_types = ['point', 'line', 'polygon'];
+    if (!in_array($input['geom_type'], $valid_geom_types)) {
+        error_response('Invalid Geometry Type. Must be: ' . implode(', ', $valid_geom_types));
+    }
+
+    // Validates GeoJSON
+    $geojson = json_decode($input['geom']);
+    if (!$geojson || !isset($geojson->type)) {
+        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, 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'         => 'Contribution created successfully.',
+            'contribution_id' => (int) $pdo->lastInsertId()
+        ], 201);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// UPDATE: Updates existing Contributions
+// Required: contribution_id
+// Optional: category, title, description, status
+// Provided Fields are updated. Others remain unchanged.
+// ---------------------------------------------------------------------
+function handle_update($input) {
+    $pdo = get_db();
+
+    // Validates Input
+    $missing = validate_required($input, ['contribution_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $contribution_id = $input['contribution_id'];
+
+    // Checks if Contribution exists
+    $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
+    $stmt->execute([':id' => $contribution_id]);
+    if (!$stmt->fetch()) {
+        error_response('Contribution not found.', 404);
+    }
+
+    // Builds dynamic SQL Query to only update sent Fields
+    $updatable_fields = ['category', 'title', 'description', 'status', 'address'];
+    $set_clauses = [];
+    $params = [':id' => $contribution_id];
+
+    foreach ($updatable_fields as $field) {
+        if (isset($input[$field]) && $input[$field] !== '') {
+            $set_clauses[] = "$field = :$field";
+            $params[":$field"] = $input[$field];
+        }
+    }
+
+    if (empty($set_clauses)) {
+        error_response('No Fields to update. Provide at least one of: ' . implode(', ', $updatable_fields));
+    }
+
+    // Validates Status
+    if (isset($params[':status'])) {
+        $valid_statuses = ['pending', 'approved', 'rejected', 'in_progress', 'done'];
+        if (!in_array($params[':status'], $valid_statuses)) {
+            error_response('Invalid Status. Must be: ' . implode(', ', $valid_statuses));
+        }
+    }
+    
+    // Builds SQL Statement
+    $sql = "UPDATE contributions SET " . implode(', ', $set_clauses) . " WHERE contribution_id = :id";
+
+    // Prepared SQL Statement
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute($params);
+
+        json_response(['message' => 'Contribution updated successfully.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// DELETE: Deletes existing Contributions
+// Required: contribution_id
+// Associated Votes are deleted automatically
+// ---------------------------------------------------------------------
+function handle_delete($input) {
+    $pdo = get_db();
+
+    // Validates Input
+    $missing = validate_required($input, ['contribution_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $contribution_id = $input['contribution_id'];
+
+    // Checks if Contribution exists
+    $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
+    $stmt->execute([':id' => $contribution_id]);
+    if (!$stmt->fetch()) {
+        error_response('Contribution not found.', 404);
+    }
+
+    // Prepared SQL Statement
+    try {
+        $stmt = $pdo->prepare("DELETE FROM contributions WHERE contribution_id = :id");
+        $stmt->execute([':id' => $contribution_id]);
+
+        json_response(['message' => 'Contribution deleted successfully.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// VOTE: Likes or Dislikes a Contribution
+// Required: contribution_id, voter_name, vote_type
+// Database Trigger automatically updates Likes and Dislikes Count
+// UNIQUE Constraint prevents duplicate Votes per Voter.
+// ---------------------------------------------------------------------
+function handle_vote($input) {
+    $pdo = get_db();
+
+    // Validates Input
+    $missing = validate_required($input, ['contribution_id', 'voter_name', 'vote_type']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Validates Vote Type
+    $valid_vote_types = ['like', 'dislike'];
+    if (!in_array($input['vote_type'], $valid_vote_types)) {
+        error_response('Invalid vote_type. Must be: ' . implode(', ', $valid_vote_types));
+    }
+
+    // Checks if Contribution exists
+    $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
+    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.');
+        }
+
+        $stmt = $pdo->prepare("
+            SELECT vote_id, vote_type FROM votes
+            WHERE contribution_id = :cid AND browser_id = :bid
+        ");
+        $stmt->execute([':cid' => $input['contribution_id'], ':bid' => $browser_id]);
+        $existing = $stmt->fetch();
+
+        if ($existing) {
+            if ($existing['vote_type'] === $input['vote_type']) {
+                // Same Vote Type — Removes Vote
+                $stmt = $pdo->prepare("DELETE FROM votes WHERE vote_id = :vid");
+                $stmt->execute([':vid' => $existing['vote_id']]);
+                json_response(['message' => 'Vote removed.', 'action' => 'removed']);
+            } else {
+                // Different Vote Type — Switches Vote
+                $stmt = $pdo->prepare("DELETE FROM votes WHERE vote_id = :vid");
+                $stmt->execute([':vid' => $existing['vote_id']]);
+
+                $stmt = $pdo->prepare("
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
+                    VALUES (:cid, :voter, :vtype, :bid)
+                ");
+                $stmt->execute([
+                    ':cid'   => $input['contribution_id'],
+                    ':voter' => $input['voter_name'],
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
+                ]);
+                json_response(['message' => 'Vote changed.', 'action' => 'changed'], 200);
+            }
+        } else {
+            // No existing Vote — Inserts Vote
+            $stmt = $pdo->prepare("
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
+                    VALUES (:cid, :voter, :vtype, :bid)
+                ");
+                $stmt->execute([
+                    ':cid'   => $input['contribution_id'],
+                    ':voter' => $input['voter_name'],
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
+                ]);
+            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 a Contribution
+// Returns Comments sorted by Date (newest first)
+// Required: contribution_id
+// ---------------------------------------------------------------------
+function handle_read_comments($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['contribution_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            SELECT comment_id, contribution_id, author_name, browser_id, content, status, created_at
+            FROM comments
+            WHERE contribution_id = :cid AND status = 'approved'
+            ORDER BY created_at ASC
+        ");
+        $stmt->execute([':cid' => $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 to Contributions
+// Required: contribution_id, author_name, content
+// Optional: browser_id
+// ---------------------------------------------------------------------
+function handle_create_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['contribution_id', 'author_name', 'content']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Validates Content Length
+    if (strlen($input['content']) > 1000) {
+        error_response('Comment too long. Maximum 1000 Characters.');
+    }
+
+    // Checks if Contribution exists
+    $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);
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO comments (contribution_id, author_name, browser_id, content)
+            VALUES (:cid, :author, :bid, :content)
+        ");
+        $stmt->execute([
+            ':cid'     => $input['contribution_id'],
+            ':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);
+    }
+}

public/api/db.php

@@ -0,0 +1,113 @@
+<?php
+// =====================================================================
+// Database Helper Functions
+// Provides PDO Connection, JSON Response Helpers, Category Definitions
+// and shared miscellaneous Functions for all API Endpoints.
+// =====================================================================
+
+require_once __DIR__ . '/init.php';
+
+
+// ---------------------------------------------------------------------
+// JSON Response
+// Creates JSON Response including HTTP Status Code and HTTP Header 
+// for every API Endpoint and terminates the Script.
+// ---------------------------------------------------------------------
+function json_response($data, $status_code = 200) {
+    // Defines HTTP Status Code and HTTP Header
+    // 1XX Informational, 2XX Successful, 3XX Redirection,
+    // 4XX Client Error, 5XX Server Error
+    http_response_code($status_code);
+    header('Content-Type: application/json; charset=utf-8');
+    // Converts PHP-Array to JSON-String
+    echo json_encode($data, JSON_UNESCAPED_UNICODE);
+    exit;
+}
+
+
+// ---------------------------------------------------------------------
+// Error Response
+// Creates standardized Error Responses with Error Message and HTTP Status
+// Code. Uses json_response() for consistent Formatting.
+// ---------------------------------------------------------------------
+function error_response($message, $status_code = 400) {
+    json_response(['error' => $message], $status_code);
+}
+
+
+// ---------------------------------------------------------------------
+// Validate Required Fields
+// Checks if specified Fields exist in the given Data Array and are
+// non-empty. Returns an Array of missing Field Names, or an empty
+// Array if all Fields are present.
+// ---------------------------------------------------------------------
+function validate_required($data, $fields) {
+    $missing = [];
+
+    foreach ($fields as $field) {
+        // Checks if Fields exists in Data Array and are not empty
+        if (!isset($data[$field]) || trim($data[$field]) === '') {
+            $missing[] = $field;
+        }
+    }
+    // Returns Array of missing Fields or emty Array
+    return $missing;
+}
+
+
+// ---------------------------------------------------------------------
+// Get POST Input
+// Reads POST Parameters. Returns an associative Array.
+// Fallback to JSON Request Body if no POST Data is present.
+// ---------------------------------------------------------------------
+function get_input() {
+    // Checks for standard POST Requests
+    if (!empty($_POST)) {
+        return array_map('trim', $_POST);
+    }
+
+    // Fall back for JSON POST Requests
+    $json = file_get_contents('php://input');
+    $data = json_decode($json, true);
+
+    if (is_array($data)) {
+        return array_map('trim', $data);
+    }
+
+    return [];
+}
+
+
+// ---------------------------------------------------------------------
+// Get PDO Connection
+// Returns PDO Instance wrapped in a Function to prevent global 
+// Variable Dependencies in Endpoint Files.
+// ---------------------------------------------------------------------
+function get_db() {
+    global $pdo;
+
+    if (!$pdo) {
+        error_response('Database Connection failed.', 500);
+    }
+
+    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'],
+    ];
+}

public/api/init.php

@@ -0,0 +1,43 @@
+<?php
+// =====================================================================
+// Database Connection
+// =====================================================================
+
+
+// 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");
+    }
+}
+
+// Defines Environment Variables
+$host = getenv('POSTGRES_HOSTNAME');
+$port = getenv('POSTGRES_PORT');
+$db   = getenv('POSTGRES_DB');
+$user = getenv('POSTGRES_USER');
+$pass = getenv('POSTGRES_PASSWORD');
+
+// Output Buffering and Session Start
+ob_start();
+session_start();
+
+// Initializes Database Connection
+try {
+    $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
+    ]);
+
+// Creates Error Message
+} catch (PDOException $e) {
+    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

@@ -0,0 +1,455 @@
+<?php
+// =====================================================================
+// WebGIS Citizen Participation Portal — Main Page
+// Loads Municipality Configuration from the Database.
+// Renders Leaflet Map Interface including Leaflet Plugins
+// =====================================================================
+
+require_once __DIR__ . '/api/db.php';
+require_once __DIR__ . '/api/auth.php';
+
+// -----------------------------------------------------------------
+// Loads Municipality Configuration
+// -----------------------------------------------------------------
+$pdo = get_db();
+$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
+$municipality = $stmt->fetch();
+
+if (!$municipality) {
+    http_response_code(404);
+    echo "<!DOCTYPE html><html><body><h1>404 — Municipality not listed in Database.</h1></body></html>";
+    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>Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></title>
+    <link rel="icon" href="assets/user-group-solid-off-black.png" type="image/png">
+    <meta name="description" content="Bürgerbeteiligungsportal. Hinweise und Vorschläge auf der Karte eintragen.">
+
+
+    <!-- ============================================================= -->
+    <!-- Loads CSS Dependencies                                        -->
+    <!-- ============================================================= -->
+
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
+
+    <!-- Geoman Drawing Tools -->
+    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@2.17.0/dist/leaflet-geoman.css">
+
+    <!-- Leaflet Sidebar -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-sidebar-v2@3.2.3/css/leaflet-sidebar.min.css">
+
+    <!-- Leaflet Fullscreen -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/3.0.2/Control.FullScreen.css">
+
+    <!-- Leaflet Geocoder for Address Search -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css">
+
+    <!-- Leaflet Polyline Measurement Tool -->
+    <!-- <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css"> -->
+
+    <!-- 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                       -->
+    <!-- ============================================================= -->
+    <style>
+        :root {
+            --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>;
+            --color-primary-light: <?= htmlspecialchars($municipality['primary_color']) ?>22;
+        }
+    </style>
+</head>
+
+<body class="portal-page">
+
+    <!-- ============================================================= -->
+    <!-- Header                                                        -->
+    <!-- ============================================================= -->
+    <header id="app-header">
+        <div class="header-left">
+            <?php if (!empty($municipality['logo_path'])): ?>
+                <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">
+            <button class="nav-btn" onclick="showInfoModal()">
+                <i class="fa-solid fa-circle-info"></i>
+                <span class="nav-label">Informationen</span>
+            </button>
+            <a href="privacy.php" class="nav-btn" target="_blank">
+                <i class="fa-solid fa-shield-halved"></i>
+                <span class="nav-label">Datenschutz</span>
+            </a>
+            <a href="imprint.php" class="nav-btn" target="_blank">
+                <i class="fa-solid fa-scale-balanced"></i>
+                <span class="nav-label">Impressum</span>
+            </a>
+            <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>
+
+
+    <!-- ============================================================= -->
+    <!-- Map Container with Sidebar                                    -->
+    <!-- ============================================================= -->
+    <main id="app-main">
+
+        <!-- Leaflet Sidebar -->
+        <div id="sidebar" class="leaflet-sidebar collapsed">
+
+            <!-- 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-list" role="tab"><i class="fa-solid fa-list"></i></a></li>
+                    <li><a href="#tab-news" role="tab"><i class="fa-solid fa-newspaper"></i></a></li>
+                    <li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
+                </ul>
+            </div>
+
+            <!-- Sidebar Tab Content -->
+            <div class="leaflet-sidebar-content">
+
+                <!-- Home Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-home">
+                    <h2 class="leaflet-sidebar-header">
+                        Start
+                        <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 Hinweise für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge zu betrachten, zu bewerten und zu kommentieren.</p>
+
+                        <h3>Kategorien</h3>
+                        <div id="category-filter">
+                            <!-- Category Filter Checkboxes — populated by app.js -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- List Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-list">
+                    <h2 class="leaflet-sidebar-header">
+                        Beiträge
+                        <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="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
+                        </div>
+                        <div class="list-controls">
+                            <select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                                <option value="category">Nach Kategorie</option>
+                                <option value="likes">Meiste Bewertungen</option>
+                                <option value="comments">Meiste Kommentare</option>
+                            </select>
+                            <span id="list-count" class="list-count"></span>
+                        </div>
+                        <div id="contributions-list">
+                            <!-- Contribution Cards — populated by app.js -->
+                        </div>
+                    </div>
+                </div>            
+
+                <!-- News Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-news">
+                    <h2 class="leaflet-sidebar-header">
+                        Neuigkeiten
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <!-- News Search -->
+                        <div class="list-search">
+                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
+                        </div>
+
+                        <div class="list-controls">
+                            <select id="news-sort" class="form-input list-sort-select" onchange="sortNews()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                            </select>
+                            <span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
+                        </div>
+
+                        <!-- News Items Container -->
+                        <div id="news-list">
+                            <?php if (empty($news_items)): ?>
+                                <p class="empty-state">Noch keine Neuigkeiten veröffentlicht.</p>
+                            <?php else: ?>
+                                <?php foreach ($news_items as $news): ?>
+                                    <div class="news-item"
+                                        data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                        data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                        data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
+                                        data-date="<?= $news['published_at'] ?>">
+                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
+                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                                        <span class="news-date">
+                                            <?= htmlspecialchars($news['author_name']) ?>
+                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+                            <?php endif; ?>
+                        </div>
+                    </div>
+                </div>
+
+                    <!-- Help Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-help">
+                    <h2 class="leaflet-sidebar-header">
+                        Hilfe
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3>
+                        <p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p>
+                        <p>
+                            <button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}">
+                                <i class="fa-solid fa-route"></i> Tutorial starten
+                            </button>
+                        </p>
+
+                        <h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
+                        <p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
+
+                        <h3><i class="fa-solid fa-location-dot"></i> Beitrag hinzufügen</h3>
+                        <p>Verwenden Sie die Zeichenwerkzeuge rechts, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.</p>
+
+                        <h3><i class="fa-solid fa-thumbs-up"></i> Bewerten</h3>
+                        <p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Bewertungsfunktion, um Ihre Meinung zu äußern.</p>
+
+                        <h3><i class="fa-solid fa-comments"></i> Kommentieren</h3>
+                        <p>Gerne können Sie Ihre Meinung zu bestehenden Beiträgen auch durch die Kommentarfunktion äußern.</p>
+
+                        <h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
+                        <p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>         
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Leaflet Map -->
+        <div id="map"></div>
+
+    </main>
+
+
+    <!-- ============================================================= -->
+    <!-- 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">
+            <span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
+        </div>
+    </footer>
+
+
+    <!-- ============================================================= -->
+    <!-- Welcome Modal shown on first Visit                            -->
+    <!-- ============================================================= -->
+    <div id="welcome-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-hand-wave"></i> Willkommen!</h2>
+            <p>Herzlich willkommen beim Bürgerbeteiligungsportal <strong><?= htmlspecialchars($municipality['name']) ?></strong>.</p>
+            <p>Hier können Sie:</p>
+            <ul>
+                <li>Hinweise und Verbesserungsvorschläge für die Stadtverwaltung hinzufügen</li>
+                <li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li>
+            </ul>
+            <p class="dev-notice">
+                <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
+            </p>
+            <p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p>            <div class="modal-actions">
+                <button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- ============================================================= -->
+    <!-- Login Modal for Identification                                -->
+    <!-- ToDo's: User Authentification and Administration              -->
+    <!-- ============================================================= -->
+    <div id="login-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content modal-small">
+            <h2><i class="fa-solid fa-user"></i> Anmelden</h2>
+            <p>Bitte geben Sie Ihren Namen ein, um Beiträge hinzufügen und abstimmen zu können.</p>
+            <div class="form-group">
+                <label for="user-name-input">Ihr Name</label>
+                <input type="text" id="user-name-input" class="form-input" placeholder="Vor- und Nachname">
+            </div>
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="skipLogin()">Gastuser</button>
+                <button class="btn btn-primary" onclick="submitLogin()">Anmelden</button>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- ============================================================= -->
+    <!-- Create Contribution Modal                                     -->
+    <!-- ============================================================= -->
+    <div id="create-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pencil"></i> Beitrag hinzufügen</h2>
+ 
+            <div class="form-group">
+                <label for="create-category">Kategorie</label>
+                <select id="create-category" class="form-input">
+                    <option value="">— Bitte wählen —</option>
+                    <!-- Categories populated dynamically -->
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="create-title">Titel</label>
+                <input type="text" id="create-title" class="form-input" placeholder="Kurze Beschreibung des Anliegens">
+            </div>
+
+            <div class="form-group">
+                <label for="create-description">Beschreibung</label>
+                <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">
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="cancelCreate()">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitCreate()">Beitrag einreichen</button>
+            </div>
+        </div>
+    </div>
+
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal                                       -->
+    <!-- ============================================================= -->
+    <div id="edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+
+            <div class="form-group">
+                <label for="edit-title">Titel</label>
+                <input type="text" id="edit-title" class="form-input">
+            </div>
+
+            <div class="form-group">
+                <label for="edit-description">Beschreibung</label>
+                <textarea id="edit-description" class="form-input" rows="4"></textarea>
+            </div>
+
+            <input type="hidden" id="edit-contribution-id">
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- ============================================================= -->
+    <!-- Loads JavaScript Dependencies                                 -->
+    <!-- ============================================================= -->
+
+    <!-- Leaflet 1.9.4 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+
+    <!-- Geoman Drawing Tools -->
+    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@2.17.0/dist/leaflet-geoman.min.js"></script>
+
+    <!-- Leaflet Sidebar v2 -->
+    <script src="https://unpkg.com/leaflet-sidebar-v2@3.2.3/js/leaflet-sidebar.min.js"></script>
+
+    <!-- Leaflet Fullscreen -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/3.0.2/Control.FullScreen.min.js"></script>
+
+    <!-- Leaflet Geocoder (Address Search) -->
+    <script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.min.js"></script>
+
+    <!-- Leaflet PolylineMeasure -->
+    <!-- <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script> -->
+
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
+
+    <!-- Shepherd.js Library -->
+    <script src="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/js/shepherd.min.js"></script>
+
+    <!-- Onboarding Logic -->
+    <script src="js/onboarding.js"></script>
+
+
+    <!-- ============================================================= -->
+    <!-- Municipality Configuration passed to JavaScript               -->
+    <!-- ============================================================= -->
+    <script>
+        // Municipality Configuration from Database
+        const MUNICIPALITY = {
+            id: <?= $municipality['municipality_id'] ?>,
+            name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
+            slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
+            center: [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>],
+            zoom: <?= $municipality['default_zoom'] ?>,
+            primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
+        };
+
+        // Category Definitions from Database
+        const CATEGORIES = <?= json_encode(get_categories(), JSON_UNESCAPED_UNICODE) ?>;
+
+        // Admin Status from PHP Session
+        const IS_ADMIN = <?= (function_exists('is_admin') && is_admin()) ? 'true' : 'false' ?>;
+    </script>
+
+    <!-- Application Logic -->
+    <script src="js/app.js"></script>
+
+</body>
+</html>

public/js/admin.js

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

public/js/onboarding.js

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

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

@@ -1 +0,0 @@
-obst

scripts/backup.sh

@@ -0,0 +1,129 @@
+#!/usr/bin/env bash
+# =====================================================================
+# WebGIS Database Backup Script
+# Location: /opt/webgis-lohne/scripts/backup.sh (on Server)
+# Purpose:  Creates compressed pg_dump Backups with daily/weekly/monthly
+#           Rotation. Intended to be run via Cron.
+# =====================================================================
+
+
+# Safety Switches
+set -euo pipefail
+
+# Logs Error Messages
+trap 'echo "[$(date)] ERROR: Script failed at Line ${LINENO} with Exit Code $?."' ERR
+
+
+# ---------------------------------------------------------------------
+# Configuration
+# ---------------------------------------------------------------------
+DB_HOST="localhost"
+DB_PORT="5432"
+DB_NAME="webgis-db"
+DB_USER="webgis-db-admin"
+
+
+BACKUP_ROOT="/var/backups/webgis"
+BACKUP_DIR_DAILY="${BACKUP_ROOT}/daily"
+BACKUP_DIR_WEEKLY="${BACKUP_ROOT}/weekly"
+BACKUP_DIR_MONTHLY="${BACKUP_ROOT}/monthly"
+
+# Retention Periods in Days
+KEEP_DAILY=7
+KEEP_WEEKLY=28
+KEEP_MONTHLY=365
+
+# Minimum acceptable Backup File Size in Bytes
+# Valid Dumps of even empty Databases are several KBs
+MIN_BACKUP_SIZE=10000
+
+# Password is read from  protected File
+# pg_dump honors the PGPASSFILE Environment Variable.
+export PGPASSFILE="/root/.pgpass_webgis"
+
+
+# ---------------------------------------------------------------------
+# Preflight Checks
+# ---------------------------------------------------------------------
+
+# Check pg_dump Availability
+if ! command -v pg_dump &> /dev/null; then
+    echo "[$(date)] ERROR: pg_dump not found. Install postgresql-client."
+    exit 1
+fi
+
+# Check Password File Existence and Permissions
+if [[ ! -f "${PGPASSFILE}" ]]; then
+    echo "[$(date)] ERROR: Password File ${PGPASSFILE} not found."
+    exit 1
+fi
+
+PGPASS_PERMS=$(stat -c "%a" "${PGPASSFILE}")
+if [[ "${PGPASS_PERMS}" != "600" ]]; then
+    echo "[$(date)] ERROR: ${PGPASSFILE} has Permissions ${PGPASS_PERMS}, expected 600."
+    exit 1
+fi
+
+
+# ---------------------------------------------------------------------
+# Preparation
+# ---------------------------------------------------------------------
+TIMESTAMP=$(date +"%Y-%m-%d_%H-%M-%S")
+DAY_OF_WEEK=$(date +"%u")      # 1=Monday ... 7=Sunday
+DAY_OF_MONTH=$(date +"%d")
+
+mkdir -p "${BACKUP_DIR_DAILY}" "${BACKUP_DIR_WEEKLY}" "${BACKUP_DIR_MONTHLY}"
+
+
+# ---------------------------------------------------------------------
+# Create Daily Backup in compressed Custom Format
+# ---------------------------------------------------------------------
+DAILY_FILE="${BACKUP_DIR_DAILY}/webgis_${TIMESTAMP}.dump"
+
+echo "[$(date)] Starting daily Backup -> ${DAILY_FILE}"
+
+pg_dump \
+    --host="${DB_HOST}" \
+    --port="${DB_PORT}" \
+    --username="${DB_USER}" \
+    --format=custom \
+    --compress=9 \
+    --file="${DAILY_FILE}" \
+    "${DB_NAME}"
+
+# Verify Backup File Size
+BACKUP_SIZE=$(stat -c "%s" "${DAILY_FILE}")
+if [[ "${BACKUP_SIZE}" -lt "${MIN_BACKUP_SIZE}" ]]; then
+    echo "[$(date)] ERROR: Backup File is only ${BACKUP_SIZE} Bytes (Minimum: ${MIN_BACKUP_SIZE}). Dump probably corrupt."
+    exit 1
+fi
+
+echo "[$(date)] Daily Backup complete (${BACKUP_SIZE} Bytes)."
+
+
+# ---------------------------------------------------------------------
+# Promote to Weekly Backup on Sundays
+# ---------------------------------------------------------------------
+if [[ "${DAY_OF_WEEK}" == "7" ]]; then
+    cp "${DAILY_FILE}" "${BACKUP_DIR_WEEKLY}/webgis_${TIMESTAMP}.dump"
+    echo "[$(date)] Promoted to weekly Backup."
+fi
+
+
+# ---------------------------------------------------------------------
+# Promote to Monthly Backup on the First of the Month
+# ---------------------------------------------------------------------
+if [[ "${DAY_OF_MONTH}" == "01" ]]; then
+    cp "${DAILY_FILE}" "${BACKUP_DIR_MONTHLY}/webgis_${TIMESTAMP}.dump"
+    echo "[$(date)] Promoted to monthly Backup."
+fi
+
+
+# ---------------------------------------------------------------------
+# Rotation: Delete Backups older than Retention Period
+# ---------------------------------------------------------------------
+find "${BACKUP_DIR_DAILY}"   -name "*.dump" -mtime +${KEEP_DAILY}   -delete
+find "${BACKUP_DIR_WEEKLY}"  -name "*.dump" -mtime +${KEEP_WEEKLY}  -delete
+find "${BACKUP_DIR_MONTHLY}" -name "*.dump" -mtime +${KEEP_MONTHLY} -delete
+
+echo "[$(date)] Backup Rotation complete."

README.md

@@ -0,0 +1,19 @@
+# WebGIS Citizen Participation Portal
+
+Citizen Participation Portal for Lohne (Oldenburg).
+
+## Project Structure
+
+- `migrations/` — versioned SQL Schema Migrations
+- `public/` — Frontend (HTML, CSS, JS)
+- `scripts/` — Maintenance Scripts (backup, deployment)
+
+## Local Setup
+
+1. Copy `.env.example` to `.env` and fill in Database Credentials.
+2. Run the SQL Migration in pgAdmin and execute in the target database.
+3. Serve `public/` with a PHP-capable Web Server.
+
+## SSH tunnel to database server
+
+1. Create SSH Tunnel to Database Server.