adapted comments and votes handlers

migrations/001_initial_schema.sql

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

migrations/009_tasks-module.sql

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

public/admin.php

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

public/api/contributions.php

@@ -17,7 +17,7 @@ require_once __DIR__ . '/db.php';
 
 
 // ---------------------------------------------------------------------
-// Read Action Parameter and Route to correct Handler
+// Reads Action Parameter and Routes to correct Handler
 // ---------------------------------------------------------------------
 $input = get_input();
 $action = $input['action'] ?? '';
@@ -59,6 +59,27 @@ switch ($action) {
     case 'update_comment':
         handle_update_comment($input);
         break;
+    case 'read_tasks':
+        handle_read_tasks($input);
+        break;
+    case 'create_task':
+        handle_create_task($input);
+        break;
+    case 'update_task':
+        handle_update_task($input);
+        break;
+    case 'delete_task':
+        handle_delete_task($input);
+        break;
+    case 'complete_task':
+        handle_complete_task($input);
+        break;
+    case 'verify_task':
+        handle_verify_task($input);
+        break;
+    case 'read_leaderboard':
+        handle_read_leaderboard($input);
+        break;
     default:
         error_response('Unknown Action. Supported Actions are read, create, update, delete, vote.');
 }
@@ -335,8 +356,8 @@ function handle_delete($input) {
 
 
 // ---------------------------------------------------------------------
-// VOTE: Likes or Dislikes a Contribution
+// VOTE: Likes or Dislikes Contributions or Tasks
-// Required: contribution_id, voter_name, vote_type
+// Required: contribution_id or task_id, voter_name, vote_type
 // Database Trigger automatically updates Likes and Dislikes Count
 // UNIQUE Constraint prevents duplicate Votes per Voter.
 // ---------------------------------------------------------------------
@@ -344,7 +365,7 @@ function handle_vote($input) {
     $pdo = get_db();
 
     // Validates Input
-    $missing = validate_required($input, ['contribution_id', 'voter_name', 'vote_type']);
+    $missing = validate_required($input, ['voter_name', 'vote_type']);
     if (!empty($missing)) {
         error_response('Missing Fields: ' . implode(', ', $missing));
     }
@@ -355,13 +376,6 @@ function handle_vote($input) {
         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
@@ -370,11 +384,39 @@ function handle_vote($input) {
             error_response('Browser ID required for Voting.');
         }
 
+        // Determines Vote Type
+        $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
+        if ($is_task) {
+            // Checks for Tasks
+            $stmt = $pdo->prepare("SELECT task_id FROM tasks WHERE task_id = :id");
+            $stmt->execute([':id' => $input['task_id']]);
+            if (!$stmt->fetch()) {
+                error_response('Task not found.', 404);
+            }
+
+            // Checks if Browser already voted on Task
             $stmt = $pdo->prepare("
                 SELECT vote_id, vote_type FROM votes
-            WHERE contribution_id = :cid AND browser_id = :bid
+                WHERE task_id = :id AND browser_id = :bid
             ");
-        $stmt->execute([':cid' => $input['contribution_id'], ':bid' => $browser_id]);
+            $stmt->execute([':id' => $input['task_id'], ':bid' => $browser_id]);
+        } else {
+            // Checks for Contributions
+            $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
+            $stmt->execute([':id' => $input['contribution_id']]);
+            if (!$stmt->fetch()) {
+                error_response('Contribution not found.', 404);
+            }
+
+            // Checks if Browser already voted on Contribution
+            $stmt = $pdo->prepare("
+                SELECT vote_id, vote_type FROM votes
+                WHERE contribution_id = :id AND browser_id = :bid
+            ");
+            $stmt->execute([':id' => $input['contribution_id'], ':bid' => $browser_id]);
+        }
+
         $existing = $stmt->fetch();
 
         if ($existing) {
@@ -384,36 +426,48 @@ function handle_vote($input) {
                 $stmt->execute([':vid' => $existing['vote_id']]);
                 json_response(['message' => 'Vote removed.', 'action' => 'removed']);
             } else {
-                // Different Vote Type — Switches Vote
+                // Different Vote Type — Removes old Vote before Inserting new one
                 $stmt = $pdo->prepare("DELETE FROM votes WHERE vote_id = :vid");
                 $stmt->execute([':vid' => $existing['vote_id']]);
-
+                $this_insert = true;
-                $stmt = $pdo->prepare("
-                    INSERT INTO votes (contribution_id, voter_name, vote_type, 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
+            $this_insert = true;
+        }
+
+        if (!empty($this_insert)) {
+            if ($is_task) {
                 $stmt = $pdo->prepare("
-                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
+                    INSERT INTO votes (task_id, voter_name, vote_type, browser_id)
-                    VALUES (:cid, :voter, :vtype, :bid)
+                    VALUES (:id, :voter, :vtype, :bid)
                 ");
                 $stmt->execute([
-                    ':cid'   => $input['contribution_id'],
+                    ':id'    => $input['task_id'],
                     ':voter' => $input['voter_name'],
                     ':vtype' => $input['vote_type'],
                     ':bid'   => $browser_id
                 ]);
+            } else {
+                $stmt = $pdo->prepare("
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
+                    VALUES (:id, :voter, :vtype, :bid)
+                ");
+                $stmt->execute([
+                    ':id'    => $input['contribution_id'],
+                    ':voter' => $input['voter_name'],
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
+                ]);
+            }
+
+            // Returns changed or created
+            if ($existing) {
+                json_response(['message' => 'Vote changed.', 'action' => 'changed'], 200);
+            } else {
                 json_response(['message' => 'Vote recorded.', 'action' => 'created'], 201);
             }
+        }
 
     } catch (PDOException $e) {
         error_response('Database Error: ' . $e->getMessage(), 500);
@@ -565,26 +619,40 @@ function handle_photo_upload($file) {
 // =====================================================================
 
 // ---------------------------------------------------------------------
-// READ COMMENTS: Loads Comments for a Contribution
+// READ COMMENTS: Loads Comments for Contributions or Tasks
-// Returns Comments sorted by Date (newest first)
+// Returns Comments sorted by Date (oldest first)
-// Required: contribution_id
+// Required: contribution_id or task_id
 // ---------------------------------------------------------------------
 function handle_read_comments($input) {
     $pdo = get_db();
 
-    $missing = validate_required($input, ['contribution_id']);
+    // Checks for contribution_id or task_id
-    if (!empty($missing)) {
+    if (empty($input['contribution_id']) && empty($input['task_id'])) {
-        error_response('Missing Fields: ' . implode(', ', $missing));
+        error_response('Either contribution_id or task_id is required.');
     }
 
+    // Determines Vote Type
+    $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
     try {
+        if ($is_task) {
+            $stmt = $pdo->prepare("
+                SELECT comment_id, task_id, author_name, browser_id, content, status, created_at
+                FROM comments
+                WHERE task_id = :id AND status = 'approved'
+                ORDER BY created_at ASC
+            ");
+        } else {
             $stmt = $pdo->prepare("
                 SELECT comment_id, contribution_id, author_name, browser_id, content, status, created_at
                 FROM comments
-            WHERE contribution_id = :cid AND status = 'approved'
+                WHERE contribution_id = :id AND status = 'approved'
                 ORDER BY created_at ASC
             ");
-        $stmt->execute([':cid' => $input['contribution_id']]);
+        }
+        
+        // Prepared Statement
+        $stmt->execute([':id' => $is_task ? $input['task_id'] : $input['contribution_id']]);
         $comments = $stmt->fetchAll();
 
         json_response(['comments' => $comments, 'count' => count($comments)]);
@@ -596,37 +664,56 @@ function handle_read_comments($input) {
 
 
 // ---------------------------------------------------------------------
-// CREATE COMMENT: Adds Comments to Contributions
+// CREATE COMMENT: Adds Comments Contributions or Tasks
-// Required: contribution_id, author_name, content
+// Required: author_name, content, contribution_id or task_id
 // Optional: browser_id
 // ---------------------------------------------------------------------
 function handle_create_comment($input) {
     $pdo = get_db();
 
-    $missing = validate_required($input, ['contribution_id', 'author_name', 'content']);
+    $missing = validate_required($input, ['author_name', 'content']);
     if (!empty($missing)) {
         error_response('Missing Fields: ' . implode(', ', $missing));
     }
 
-    // Validates Content Length
+    // Checks for contribution_id or task_id
+    if (empty($input['contribution_id']) && empty($input['task_id'])) {
+        error_response('Either contribution_id or task_id is required.');
+    }
+
+    // Validates Length
     if (strlen($input['content']) > 1000) {
         error_response('Comment too long. Maximum 1000 Characters.');
     }
 
-    // Checks if Contribution exists
+    // Determines Comment Type
+    $is_task = isset($input['task_id']) && $input['task_id'] !== '';
+
+    if ($is_task) {
+        // Checks for Tasks
+        $stmt = $pdo->prepare("SELECT task_id FROM tasks WHERE task_id = :id");
+        $stmt->execute([':id' => $input['task_id']]);
+        if (!$stmt->fetch()) {
+            error_response('Task not found.', 404);
+        }
+    } else {
+        // Checks for Contributions
         $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
         $stmt->execute([':id' => $input['contribution_id']]);
         if (!$stmt->fetch()) {
             error_response('Contribution not found.', 404);
         }
+    }
     
+    // Prepared Statement
     try {
         $stmt = $pdo->prepare("
-            INSERT INTO comments (contribution_id, author_name, browser_id, content)
+            INSERT INTO comments (contribution_id, task_id, author_name, browser_id, content)
-            VALUES (:cid, :author, :bid, :content)
+            VALUES (:cid, :tid, :author, :bid, :content)
         ");
         $stmt->execute([
-            ':cid'     => $input['contribution_id'],
+            ':cid'     => $is_task ? null : $input['contribution_id'],
+            ':tid'     => $is_task ? $input['task_id'] : null,
             ':author'  => $input['author_name'],
             ':bid'     => $input['browser_id'] ?? null,
             ':content' => $input['content']
@@ -710,3 +797,386 @@ function handle_update_comment($input) {
         error_response('Database Error: ' . $e->getMessage(), 500);
     }
 }
+
+
+// =====================================================================
+// Action Handlers for Tasks
+// =====================================================================
+
+
+// ---------------------------------------------------------------------
+// READ TASKS: Loads Tasks as GeoJSON FeatureCollection
+// Required: municipality_id
+// Optional: status, browser_id
+// ---------------------------------------------------------------------
+function handle_read_tasks($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['municipality_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $sql = "SELECT *, ST_AsGeoJSON(geom) AS geojson
+            FROM tasks
+            WHERE municipality_id = :mid";
+    $params = [':mid' => $input['municipality_id']];
+
+    // Status Filter
+    $status = $input['status'] ?? 'visible';
+    if ($status === 'visible') {
+        $sql .= " AND status IN ('open', 'completed', 'verified')";
+    } elseif ($status !== 'all') {
+        $sql .= " AND status = :status";
+        $params[':status'] = $status;
+    }
+
+    $sql .= " ORDER BY created_at DESC";
+
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute($params);
+        $rows = $stmt->fetchAll();
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+
+    // Builds GeoJSON FeatureCollection
+    $features = [];
+    foreach ($rows as $row) {
+        $geometry = json_decode($row['geojson']);
+        unset($row['geom'], $row['geojson']);
+        $features[] = [
+            'type'       => 'Feature',
+            'geometry'   => $geometry,
+            'properties' => $row
+        ];
+    }
+
+    $result = [
+        'type'     => 'FeatureCollection',
+        'features' => $features
+    ];
+
+    // User Votes for Tasks
+    $browser_id = $input['browser_id'] ?? '';
+    if ($browser_id !== '') {
+        $stmt = $pdo->prepare("
+            SELECT task_id, vote_type FROM votes
+            WHERE browser_id = :bid AND task_id IS NOT NULL
+        ");
+        $stmt->execute([':bid' => $browser_id]);
+        $user_votes = [];
+        foreach ($stmt->fetchAll() as $v) {
+            $user_votes[$v['task_id']] = $v['vote_type'];
+        }
+        $result['user_votes'] = $user_votes;
+    }
+
+    json_response($result);
+}
+
+
+// ---------------------------------------------------------------------
+// CREATE TASK: Inserts new Task with optional Photo
+// Required: municipality_id, geom, geom_type, category, title, author_name
+// Optional: description, browser_id, photo
+// ---------------------------------------------------------------------
+function handle_create_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, [
+        'municipality_id', 'geom', 'geom_type', 'category', 'title', 'author_name'
+    ]);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $valid_geom_types = ['point', 'line', 'polygon'];
+    if (!in_array($input['geom_type'], $valid_geom_types)) {
+        error_response('Invalid Geometry Type.');
+    }
+
+    $geojson = json_decode($input['geom']);
+    if (!$geojson || !isset($geojson->type)) {
+        error_response('Invalid GeoJSON.');
+    }
+
+    // Handles optional Photo Upload
+    $photo_path = null;
+    if (isset($_FILES['photo']) && $_FILES['photo']['error'] === UPLOAD_ERR_OK) {
+        $photo_path = handle_photo_upload($_FILES['photo']);
+        if (!$photo_path) {
+            error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB.');
+        }
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO tasks
+                (municipality_id, geom, geom_type, category, title, description, author_name, browser_id, photo_path)
+            VALUES
+                (:mid, ST_SetSRID(ST_GeomFromGeoJSON(:geom), 4326), :geom_type,
+                 :category, :title, :description, :author_name, :browser_id, :photo_path)
+        ");
+        $stmt->execute([
+            ':mid'         => $input['municipality_id'],
+            ':geom'        => $input['geom'],
+            ':geom_type'   => $input['geom_type'],
+            ':category'    => $input['category'],
+            ':title'       => $input['title'],
+            ':description' => $input['description'] ?? '',
+            ':author_name' => $input['author_name'],
+            ':browser_id'  => $input['browser_id'] ?? null,
+            ':photo_path'  => $photo_path
+        ]);
+
+        json_response([
+            'message' => 'Task created successfully.',
+            'task_id' => (int) $pdo->lastInsertId()
+        ], 201);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// UPDATE TASK: Updates existing Tasks or Status
+// Required: task_id
+// Optional: category, title, description, status, address
+// ---------------------------------------------------------------------
+function handle_update_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $updatable = ['category', 'title', 'description', 'status', 'address'];
+    $set = [];
+    $params = [':id' => $input['task_id']];
+
+    foreach ($updatable as $field) {
+        if (isset($input[$field]) && $input[$field] !== '') {
+            $set[] = "$field = :$field";
+            $params[":$field"] = $input[$field];
+        }
+    }
+
+    if (empty($set)) {
+        error_response('No Fields to update.');
+    }
+
+    if (isset($params[':status'])) {
+        $valid = ['pending', 'rejected', 'open', 'completed', 'verified'];
+        if (!in_array($params[':status'], $valid)) {
+            error_response('Invalid Status.');
+        }
+    }
+
+    try {
+        $stmt = $pdo->prepare("UPDATE tasks SET " . implode(', ', $set) . " WHERE task_id = :id");
+        $stmt->execute($params);
+        json_response(['message' => 'Task updated successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// DELETE TASK: Removes existing Tasks
+// Required: task_id
+// ---------------------------------------------------------------------
+function handle_delete_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("DELETE FROM tasks WHERE task_id = :id");
+        $stmt->execute([':id' => $input['task_id']]);
+        json_response(['message' => 'Task deleted successfully.']);
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// COMPLETE TASK: Completes existing Tasks with Photo Proof
+// Required: task_id, author_name, browser_id
+// Required File: completion_photo
+// Optional: completion_comment
+// ---------------------------------------------------------------------
+function handle_complete_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id', 'author_name', 'browser_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Checks if Task exists and is open
+    $stmt = $pdo->prepare("SELECT task_id, status FROM tasks WHERE task_id = :id");
+    $stmt->execute([':id' => $input['task_id']]);
+    $task = $stmt->fetch();
+
+    if (!$task) {
+        error_response('Task not found.', 404);
+    }
+    if ($task['status'] !== 'open') {
+        error_response('Task is not available for Completion.');
+    }
+
+    // Handles required Completion Photo
+    if (!isset($_FILES['completion_photo']) || $_FILES['completion_photo']['error'] !== UPLOAD_ERR_OK) {
+        error_response('Completion Photo is required.');
+    }
+
+    $photo_path = handle_photo_upload($_FILES['completion_photo']);
+    if (!$photo_path) {
+        error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB.');
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            UPDATE tasks SET
+                status = 'completed',
+                completed_by_name = :name,
+                completed_by_browser = :browser,
+                completion_photo = :photo,
+                completion_comment = :comment,
+                completed_at = NOW()
+            WHERE task_id = :id
+        ");
+        $stmt->execute([
+            ':id'      => $input['task_id'],
+            ':name'    => $input['author_name'],
+            ':browser' => $input['browser_id'],
+            ':photo'   => $photo_path,
+            ':comment' => $input['completion_comment'] ?? ''
+        ]);
+
+        json_response(['message' => 'Task Completion submitted for Review.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// VERIFY TASK: Moderator confirms or rejects Completions
+// Required: task_id, action
+// Awards Points and sets Status if verified
+// Clears Completion Fields, resets Status if rejected
+// ---------------------------------------------------------------------
+function handle_verify_task($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['task_id', 'verify_action']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Loads Task
+    $stmt = $pdo->prepare("SELECT * FROM tasks WHERE task_id = :id");
+    $stmt->execute([':id' => $input['task_id']]);
+    $task = $stmt->fetch();
+
+    if (!$task) {
+        error_response('Task not found.', 404);
+    }
+    if ($task['status'] !== 'completed') {
+        error_response('Task is not in completed State.');
+    }
+
+    try {
+        if ($input['verify_action'] === 'verify') {
+            // Accepts Completion and Awards Points
+            $stmt = $pdo->prepare("UPDATE tasks SET status = 'verified' WHERE task_id = :id");
+            $stmt->execute([':id' => $input['task_id']]);
+
+            // Awards Points to User
+            $stmt = $pdo->prepare("
+                INSERT INTO user_points (municipality_id, user_name, points, task_id)
+                VALUES (:mid, :name, :points, :tid)
+            ");
+            $stmt->execute([
+                ':mid'    => $task['municipality_id'],
+                ':name'   => $task['completed_by_name'],
+                ':points' => $task['points_reward'],
+                ':tid'    => $input['task_id']
+            ]);
+
+            json_response(['message' => 'Task verified. Points awarded.']);
+
+        } elseif ($input['verify_action'] === 'reject') {
+            // Rejects Completion and Clears Fields
+            $stmt = $pdo->prepare("
+                UPDATE tasks SET
+                    status = 'open',
+                    completed_by_name = NULL,
+                    completed_by_browser = NULL,
+                    completion_photo = NULL,
+                    completion_comment = NULL,
+                    completed_at = NULL
+                WHERE task_id = :id
+            ");
+            $stmt->execute([':id' => $input['task_id']]);
+
+            json_response(['message' => 'Completion rejected. Task is open again.']);
+
+        } else {
+            error_response('Invalid Action. Must be: verify or reject.');
+        }
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// READ LEADERBOARD: Returns Citizen Leaderboard
+// Required: municipality_id
+// Optional: limit
+// ---------------------------------------------------------------------
+function handle_read_leaderboard($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['municipality_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    $limit = min((int)($input['limit'] ?? 10), 50);
+
+    try {
+        $stmt = $pdo->prepare("
+            SELECT user_name,
+                   SUM(points) AS total_points,
+                   COUNT(*) AS tasks_completed
+            FROM user_points
+            WHERE municipality_id = :mid
+            GROUP BY user_name
+            ORDER BY total_points DESC
+            LIMIT :lim
+        ");
+        $stmt->bindValue(':mid', $input['municipality_id'], PDO::PARAM_INT);
+        $stmt->bindValue(':lim', $limit, PDO::PARAM_INT);
+        $stmt->execute();
+
+        json_response(['leaderboard' => $stmt->fetchAll()]);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}

public/api/db.php

@@ -111,3 +111,21 @@ function get_categories() {
         'other'       => ['label' => 'Sonstiges',   'faIcon' => 'fa-thumbtack',     'color' => '#7F7F7F'],
     ];
 }
+
+// ---------------------------------------------------------------------
+// Task Category Definitions
+// Returns associative Array of Task Category Keys to Labels, Icons,
+// and Colors. Shared between Citizen Participation Portal and
+// Moderation Page.
+// ToDo: Move to Database Table. 
+// ---------------------------------------------------------------------
+function get_task_categories() {
+    return [
+        'repair'     => ['label' => 'Reparatur',       'faIcon' => 'fa-wrench',         'color' => '#C00000'],
+        'social'     => ['label' => 'Nachbarschaft',   'faIcon' => 'fa-people-group',   'color' => '#E65100'],
+        'safety'     => ['label' => 'Sicherheit',      'faIcon' => 'fa-shield-halved',  'color' => '#FFC000'],
+        'greenery'   => ['label' => 'Grünpflege',      'faIcon' => 'fa-leaf',           'color' => '#92D050'],
+        'cleanup'    => ['label' => 'Sauberkeit',      'faIcon' => 'fa-broom',          'color' => '#0070C0'],
+        'other_task' => ['label' => 'Sonstiges',       'faIcon' => 'fa-clipboard-check','color' => '#7F7F7F'],
+    ];
+}

public/index.php

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

public/js/admin.js

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

public/js/app.js

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

public/js/onboarding.js

@@ -1,7 +1,6 @@
 // =====================================================================
 // WebGIS Citizen Participation Portal — Onboarding Tour
-// Guides Users through the Participation Portal.
+// Guides Users through the Participation Portal
-// On Mobile centered Overlays. On Desktop attached to User Interface.
 // =====================================================================
 
 
@@ -9,30 +8,76 @@
 // Block 1: Onboarding Configuration
 // =================================================================
 
+// ONBOARDING_MODE — Controls when the Tutorial is shown:
+const ONBOARDING_MODE = 'once';
+//     'once'    — Shown on first Visit, stored in localStorage
+//     'session' — Shown per Browser Session, stored in sessionStorage
+//     'always'  — Shows always, nothing stored
+
 // Prevents double Initialization
 let onboardingStarted = false;
 
-// Detects Mobile Viewport
+
-function isMobile() {
+// =================================================================
-    return window.innerWidth < 769;
+// Block 2: Tour Initialization
+// =================================================================
+
+function initOnboardingTour() {
+
+    // Checks if Tutorial should be shown based on Onboarding Mode
+    if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+    if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
+        return;
+    }
+
+    // Waits for Welcome and Login Modals to be closed
+    waitForModalsToClose(function () {
+        setTimeout(startTour, 600);
+    });
 }
 
 
 // =================================================================
-// Block 2: Tour Definition
+// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
 // =================================================================
 
-function startTour(manual) {
+function waitForModalsToClose(callback) {
+    const welcomeModal = document.getElementById('welcome-modal');
+    const loginModal = document.getElementById('login-modal');
+
+    const checkInterval = setInterval(function () {
+        const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
+        const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
+
+        if (welcomeHidden && loginHidden) {
+            clearInterval(checkInterval);
+            callback();
+        }
+    }, 300);
+
+    // Safety Timeout
+    setTimeout(function () {
+        clearInterval(checkInterval);
+        callback();
+    }, 30000);
+}
+
+
+// =================================================================
+// Block 4: Tour Definition
+// =================================================================
+
+function startTour() {
     // Prevents double Start
     if (onboardingStarted) return;
     onboardingStarted = true;
 
-    const mobile = isMobile();
-
     const tour = new Shepherd.Tour({
-        useModalOverlay: !mobile,
+        useModalOverlay: true,
         defaultStepOptions: {
-            cancelIcon: { enabled: false },
+            cancelIcon: { enabled: true },
             scrollTo: false,
             classes: 'onboarding-step',
             popperOptions: {
@@ -44,54 +89,46 @@ function startTour(manual) {
     });
 
 
-// -----------------------------------------------------------------
-    // Step 1: Welcome — Skip Timer at automatic Start
     // -----------------------------------------------------------------
-    var welcomeButtons = [
+    // Step 1: Welcome
+    // -----------------------------------------------------------------
+    tour.addStep({
+        id: 'welcome',
+        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
+        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+              '<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+        buttons: [
             {
                 text: 'Überspringen',
                 action: tour.cancel,
-            classes: 'shepherd-button-secondary' + (manual ? '' : ' skip-btn-locked')
+                classes: 'shepherd-button-secondary'
             },
             {
                 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 = {
+    tour.addStep({
         id: 'drawing-tools',
         title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
+        text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
+        attachTo: {
+            element: '.leaflet-pm-toolbar',
+            on: 'left'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
+            });
+        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -104,32 +141,20 @@ function startTour(manual) {
                 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 = {
+    tour.addStep({
         id: 'address-search',
         title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
+        text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
+        attachTo: {
+            element: '.leaflet-control-geocoder',
+            on: 'left'
+        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -142,25 +167,20 @@ function startTour(manual) {
                 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 = {
+    tour.addStep({
         id: 'layer-control',
         title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
+        text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
+        attachTo: {
+            element: '.leaflet-control-layers',
+            on: 'left'
+        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -173,25 +193,26 @@ function startTour(manual) {
                 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 = {
+    tour.addStep({
         id: 'sidebar',
         title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
+        text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
+        attachTo: {
+            element: '#sidebar',
+            on: 'right'
+        },
+        beforeShowPromise: function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
+            });
+        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -199,106 +220,58 @@ function startTour(manual) {
                 classes: 'shepherd-button-secondary'
             },
             {
-                text: 'Abschließen <i class="fa-solid fa-check"></i>',
+                text: 'Tutorial 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
+    // Completion and Cancellation
     // -----------------------------------------------------------------
-    function onTourEnd() {
+    tour.on('complete', function () {
+        markOnboardingDone();
         onboardingStarted = false;
-        if (mobile) sidebar.close();
+    });
 
-        // Shows Arrow Hint
+    tour.on('cancel', function () {
-        if (!localStorage.getItem('webgis_onboarding_done')) {
+        markOnboardingDone();
-            localStorage.setItem('webgis_onboarding_done', 'true');
+        onboardingStarted = false;
-            showDrawingArrow();
+    });
-        }
-    }
-
-    tour.on('complete', onTourEnd);
-    tour.on('cancel', onTourEnd);
 
     tour.start();
 }
 
 
 // =================================================================
-// Drawing Arrow — Points to Geoman Toolbar after Tour
+// Marks Onboarding as completed
 // =================================================================
 
-function showDrawingArrow() {
+function markOnboardingDone() {
-    var hint = document.createElement('div');
+    if (ONBOARDING_MODE === 'once') {
-    hint.id = 'drawing-hint-arrow';
+        localStorage.setItem('webgis_onboarding_done', 'true');
-    hint.innerHTML = '<span class="drawing-hint-label">' +
+    } else if (ONBOARDING_MODE === 'session') {
-                         '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen' +
+        sessionStorage.setItem('webgis_onboarding_done', 'true');
-                     '</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)
+// Manual Tour Restart
 // =================================================================
 
 function restartOnboarding() {
+    localStorage.removeItem('webgis_onboarding_done');
+    sessionStorage.removeItem('webgis_onboarding_done');
     onboardingStarted = false;
-    startTour(true);
+    startTour();
 }
+
+
+// =================================================================
+// Auto-Start on Page Load
+// =================================================================
+
+initOnboardingTour();

public/landing.css

@@ -1,745 +0,0 @@
-/* =====================================================================
-   Mitmachkarte — Promotional Landing Page Styles
-   Civic Tech Product Page for Municipalities and Planning Offices
-   ===================================================================== */
-
-/* Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
-
-/* =================================================================
-   Tokens
-   ================================================================= */
-:root {
-    --lp-navy: #00376D;
-    --lp-navy-deep: #001F3F;
-    --lp-navy-light: #E8EFF6;
-    --lp-sky: #4A90D9;
-    --lp-amber: #E8A838;
-    --lp-amber-hover: #D4962E;
-    --lp-green: #28a745;
-    --lp-white: #FFFFFF;
-    --lp-offwhite: #F8F9FB;
-    --lp-text: #1A1A2E;
-    --lp-text-muted: #5A6A7A;
-    --lp-border: #E0E5EB;
-
-    --lp-font-display: 'Plus Jakarta Sans', sans-serif;
-    --lp-font-body: 'Inter', sans-serif;
-
-    --lp-max-width: 1140px;
-    --lp-section-padding: 100px 0;
-    --lp-radius: 12px;
-    --lp-radius-lg: 20px;
-
-    --lp-shadow: 0 4px 20px rgba(0, 55, 109, 0.08);
-    --lp-shadow-lg: 0 12px 40px rgba(0, 55, 109, 0.12);
-}
-
-/* =================================================================
-   Reset
-   ================================================================= */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html { scroll-behavior: smooth; }
-
-body.landing-page {
-    font-family: var(--lp-font-body);
-    font-size: 16px;
-    color: var(--lp-text);
-    background: var(--lp-white);
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-}
-
-a { text-decoration: none; color: inherit; }
-img { max-width: 100%; height: auto; }
-
-
-/* =================================================================
-   Navigation
-   ================================================================= */
-.lp-nav {
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    z-index: 100;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--lp-border);
-    transition: box-shadow 0.3s ease;
-}
-
-.lp-nav.scrolled {
-    box-shadow: var(--lp-shadow);
-}
-
-.lp-nav-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-    padding: 0 24px;
-    height: 72px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.lp-nav-brand {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-family: var(--lp-font-display);
-    font-weight: 800;
-    font-size: 1.3rem;
-    color: var(--lp-navy);
-}
-
-.lp-nav-brand i { font-size: 1.5rem; }
-
-.lp-nav-links {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    list-style: none;
-}
-
-.lp-nav-links a {
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: var(--lp-text-muted);
-    transition: color 0.2s;
-}
-
-.lp-nav-links a:hover { color: var(--lp-navy); }
-
-.lp-nav-cta {
-    background: var(--lp-navy);
-    color: var(--lp-white) !important;
-    padding: 10px 24px;
-    border-radius: 8px;
-    font-weight: 600;
-    transition: background 0.2s, transform 0.2s;
-}
-
-.lp-nav-cta:hover {
-    background: var(--lp-navy-deep);
-    transform: translateY(-1px);
-}
-
-.lp-nav-toggle {
-    display: none;
-    border: none;
-    background: none;
-    font-size: 1.5rem;
-    color: var(--lp-navy);
-    cursor: pointer;
-}
-
-
-/* =================================================================
-   Hero
-   ================================================================= */
-.lp-hero {
-    padding: 160px 24px 100px;
-    background: linear-gradient(170deg, var(--lp-white) 0%, var(--lp-navy-light) 100%);
-    position: relative;
-    overflow: hidden;
-}
-
-.lp-hero-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 60px;
-    align-items: center;
-}
-
-.lp-hero-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: var(--lp-white);
-    border: 1px solid var(--lp-border);
-    border-radius: 100px;
-    padding: 6px 16px;
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: var(--lp-navy);
-    margin-bottom: 24px;
-}
-
-.lp-hero-badge .badge-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--lp-green);
-    animation: pulse-dot 2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(1.3); }
-}
-
-.lp-hero h1 {
-    font-family: var(--lp-font-display);
-    font-size: 3.2rem;
-    font-weight: 800;
-    line-height: 1.15;
-    color: var(--lp-navy-deep);
-    margin-bottom: 20px;
-    letter-spacing: -0.02em;
-}
-
-.lp-hero h1 span {
-    color: var(--lp-sky);
-}
-
-.lp-hero-subtitle {
-    font-size: 1.15rem;
-    color: var(--lp-text-muted);
-    line-height: 1.7;
-    margin-bottom: 36px;
-    max-width: 520px;
-}
-
-.lp-hero-actions {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-}
-
-.lp-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 14px 28px;
-    border-radius: 10px;
-    font-family: var(--lp-font-display);
-    font-size: 0.95rem;
-    font-weight: 700;
-    cursor: pointer;
-    border: none;
-    transition: all 0.2s;
-}
-
-.lp-btn-primary {
-    background: var(--lp-amber);
-    color: var(--lp-navy-deep);
-    box-shadow: 0 4px 14px rgba(232, 168, 56, 0.3);
-}
-
-.lp-btn-primary:hover {
-    background: var(--lp-amber-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(232, 168, 56, 0.4);
-}
-
-.lp-btn-outline {
-    background: transparent;
-    color: var(--lp-navy);
-    border: 2px solid var(--lp-navy);
-}
-
-.lp-btn-outline:hover {
-    background: var(--lp-navy);
-    color: var(--lp-white);
-}
-
-/* Hero Map Preview */
-.lp-hero-visual {
-    position: relative;
-    border-radius: var(--lp-radius-lg);
-    overflow: hidden;
-    box-shadow: var(--lp-shadow-lg);
-    border: 1px solid var(--lp-border);
-    aspect-ratio: 4/3;
-    background: var(--lp-offwhite);
-}
-
-.lp-hero-visual iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-
-.lp-hero-visual-overlay {
-    position: absolute;
-    bottom: 0; left: 0; right: 0;
-    padding: 16px 20px;
-    background: linear-gradient(transparent, rgba(0, 31, 63, 0.85));
-    color: white;
-    font-size: 0.85rem;
-    font-weight: 500;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    pointer-events: none;
-}
-
-.lp-hero-visual-overlay .lp-btn {
-    pointer-events: all;
-    padding: 8px 18px;
-    font-size: 0.82rem;
-}
-
-
-/* =================================================================
-   Trust Bar
-   ================================================================= */
-.lp-trust {
-    padding: 48px 24px;
-    background: var(--lp-white);
-    border-bottom: 1px solid var(--lp-border);
-}
-
-.lp-trust-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-    text-align: center;
-}
-
-.lp-trust-label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: var(--lp-text-muted);
-    margin-bottom: 24px;
-}
-
-.lp-trust-logos {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 48px;
-    flex-wrap: wrap;
-    opacity: 0.5;
-}
-
-.lp-trust-logos span {
-    font-family: var(--lp-font-display);
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--lp-text-muted);
-}
-
-
-/* =================================================================
-   Section Base
-   ================================================================= */
-.lp-section {
-    padding: var(--lp-section-padding);
-    padding-left: 24px;
-    padding-right: 24px;
-}
-
-.lp-section-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-}
-
-.lp-section-header {
-    text-align: center;
-    margin-bottom: 64px;
-}
-
-.lp-section-eyebrow {
-    font-family: var(--lp-font-display);
-    font-size: 0.82rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: var(--lp-sky);
-    margin-bottom: 12px;
-}
-
-.lp-section-title {
-    font-family: var(--lp-font-display);
-    font-size: 2.4rem;
-    font-weight: 800;
-    color: var(--lp-navy-deep);
-    line-height: 1.2;
-    letter-spacing: -0.02em;
-    margin-bottom: 16px;
-}
-
-.lp-section-subtitle {
-    font-size: 1.1rem;
-    color: var(--lp-text-muted);
-    max-width: 600px;
-    margin: 0 auto;
-    line-height: 1.7;
-}
-
-
-/* =================================================================
-   Features Grid
-   ================================================================= */
-.lp-section-alt { background: var(--lp-offwhite); }
-
-.lp-features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 28px;
-}
-
-.lp-feature-card {
-    background: var(--lp-white);
-    border: 1px solid var(--lp-border);
-    border-radius: var(--lp-radius);
-    padding: 36px 28px;
-    transition: box-shadow 0.3s, transform 0.3s;
-}
-
-.lp-feature-card:hover {
-    box-shadow: var(--lp-shadow-lg);
-    transform: translateY(-4px);
-}
-
-.lp-feature-icon {
-    width: 52px;
-    height: 52px;
-    border-radius: 12px;
-    background: var(--lp-navy-light);
-    color: var(--lp-navy);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.3rem;
-    margin-bottom: 20px;
-}
-
-.lp-feature-card h3 {
-    font-family: var(--lp-font-display);
-    font-size: 1.15rem;
-    font-weight: 700;
-    margin-bottom: 10px;
-    color: var(--lp-navy-deep);
-}
-
-.lp-feature-card p {
-    font-size: 0.92rem;
-    color: var(--lp-text-muted);
-    line-height: 1.6;
-}
-
-
-/* =================================================================
-   Modules / Roadmap
-   ================================================================= */
-.lp-modules {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.lp-module-card {
-    display: grid;
-    grid-template-columns: 80px 1fr auto;
-    gap: 24px;
-    align-items: start;
-    background: var(--lp-white);
-    border: 1px solid var(--lp-border);
-    border-radius: var(--lp-radius);
-    padding: 32px;
-    transition: border-color 0.3s;
-}
-
-.lp-module-card:hover { border-color: var(--lp-sky); }
-
-.lp-module-icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    flex-shrink: 0;
-}
-
-.lp-module-icon.core    { background: #E3F2FD; color: #1565C0; }
-.lp-module-icon.social  { background: #E8F5E9; color: #2E7D32; }
-.lp-module-icon.survey  { background: #FFF3E0; color: #E65100; }
-.lp-module-icon.twin    { background: #F3E5F5; color: #7B1FA2; }
-.lp-module-icon.open    { background: #E0F7FA; color: #00838F; }
-.lp-module-icon.access  { background: #FCE4EC; color: #C62828; }
-
-.lp-module-content h3 {
-    font-family: var(--lp-font-display);
-    font-size: 1.15rem;
-    font-weight: 700;
-    margin-bottom: 6px;
-    color: var(--lp-navy-deep);
-}
-
-.lp-module-content p {
-    font-size: 0.92rem;
-    color: var(--lp-text-muted);
-    line-height: 1.6;
-}
-
-.lp-module-badge {
-    padding: 4px 14px;
-    border-radius: 100px;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.lp-module-badge.live     { background: #E8F5E9; color: #2E7D32; }
-.lp-module-badge.dev      { background: #FFF3E0; color: #E65100; }
-.lp-module-badge.planned  { background: #F3E5F5; color: #7B1FA2; }
-
-
-/* =================================================================
-   Stats Bar
-   ================================================================= */
-.lp-stats {
-    padding: 64px 24px;
-    background: var(--lp-navy-deep);
-    color: white;
-}
-
-.lp-stats-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 32px;
-    text-align: center;
-}
-
-.lp-stat-number {
-    font-family: var(--lp-font-display);
-    font-size: 2.8rem;
-    font-weight: 800;
-    color: var(--lp-amber);
-    line-height: 1;
-    margin-bottom: 8px;
-}
-
-.lp-stat-label {
-    font-size: 0.9rem;
-    opacity: 0.7;
-}
-
-
-/* =================================================================
-   Demo Section
-   ================================================================= */
-.lp-demo-container {
-    max-width: 900px;
-    margin: 0 auto;
-    border-radius: var(--lp-radius-lg);
-    overflow: hidden;
-    box-shadow: var(--lp-shadow-lg);
-    border: 1px solid var(--lp-border);
-    aspect-ratio: 16/10;
-    background: var(--lp-offwhite);
-}
-
-.lp-demo-container iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-
-
-/* =================================================================
-   Team
-   ================================================================= */
-.lp-team-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-}
-
-.lp-team-card {
-    text-align: center;
-    padding: 32px 24px;
-}
-
-.lp-team-avatar {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    background: var(--lp-navy-light);
-    margin: 0 auto 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    color: var(--lp-navy);
-}
-
-.lp-team-card h3 {
-    font-family: var(--lp-font-display);
-    font-size: 1.1rem;
-    font-weight: 700;
-    margin-bottom: 4px;
-}
-
-.lp-team-role {
-    font-size: 0.88rem;
-    color: var(--lp-sky);
-    font-weight: 600;
-    margin-bottom: 10px;
-}
-
-.lp-team-card p {
-    font-size: 0.88rem;
-    color: var(--lp-text-muted);
-    line-height: 1.5;
-}
-
-
-/* =================================================================
-   Contact / CTA
-   ================================================================= */
-.lp-cta-section {
-    padding: 100px 24px;
-    background: linear-gradient(170deg, var(--lp-navy) 0%, var(--lp-navy-deep) 100%);
-    color: white;
-    text-align: center;
-}
-
-.lp-cta-section .lp-section-eyebrow { color: var(--lp-amber); }
-
-.lp-cta-section .lp-section-title {
-    color: white;
-    max-width: 700px;
-    margin: 0 auto 16px;
-}
-
-.lp-cta-section .lp-section-subtitle {
-    color: rgba(255, 255, 255, 0.7);
-    margin-bottom: 40px;
-}
-
-.lp-contact-grid {
-    max-width: 800px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 40px;
-    text-align: left;
-}
-
-.lp-contact-info h3 {
-    font-family: var(--lp-font-display);
-    font-size: 1.3rem;
-    font-weight: 700;
-    margin-bottom: 16px;
-}
-
-.lp-contact-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-    font-size: 0.95rem;
-    opacity: 0.85;
-}
-
-.lp-contact-item i {
-    width: 20px;
-    text-align: center;
-    color: var(--lp-amber);
-}
-
-.lp-contact-form {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.lp-contact-form input,
-.lp-contact-form textarea {
-    padding: 14px 16px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
-    font-family: var(--lp-font-body);
-    font-size: 0.95rem;
-    outline: none;
-    transition: border-color 0.2s;
-}
-
-.lp-contact-form input::placeholder,
-.lp-contact-form textarea::placeholder {
-    color: rgba(255, 255, 255, 0.4);
-}
-
-.lp-contact-form input:focus,
-.lp-contact-form textarea:focus {
-    border-color: var(--lp-amber);
-}
-
-.lp-contact-form textarea { resize: vertical; min-height: 100px; }
-
-.lp-contact-form .lp-btn { width: 100%; justify-content: center; }
-
-
-/* =================================================================
-   Footer
-   ================================================================= */
-.lp-footer {
-    padding: 48px 24px;
-    background: var(--lp-navy-deep);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.lp-footer-inner {
-    max-width: var(--lp-max-width);
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.85rem;
-}
-
-.lp-footer-links {
-    display: flex;
-    gap: 24px;
-}
-
-.lp-footer-links a {
-    color: rgba(255, 255, 255, 0.5);
-    transition: color 0.2s;
-}
-
-.lp-footer-links a:hover { color: white; }
-
-
-/* =================================================================
-   Responsive
-   ================================================================= */
-@media (max-width: 900px) {
-    .lp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
-    .lp-hero h1 { font-size: 2.4rem; }
-    .lp-features-grid { grid-template-columns: 1fr; }
-    .lp-module-card { grid-template-columns: 56px 1fr; }
-    .lp-module-badge { display: none; }
-    .lp-stats-inner { grid-template-columns: repeat(2, 1fr); }
-    .lp-team-grid { grid-template-columns: 1fr; }
-    .lp-contact-grid { grid-template-columns: 1fr; }
-    .lp-section-title { font-size: 1.8rem; }
-    .lp-nav-links { display: none; }
-    .lp-nav-toggle { display: block; }
-    .lp-footer-inner { flex-direction: column; gap: 16px; text-align: center; }
-}
-
-@media (max-width: 600px) {
-    .lp-hero { padding: 120px 16px 60px; }
-    .lp-hero h1 { font-size: 2rem; }
-    .lp-hero-subtitle { font-size: 1rem; }
-    .lp-section { padding: 60px 16px; }
-    .lp-stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
-    .lp-stat-number { font-size: 2rem; }
-}

public/landing.php

@@ -1,437 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mitmachkarte — Bürgerbeteiligung, die auf der Karte stattfindet</title>
-    <meta name="description" content="Das WebGIS-Portal für kommunale Bürgerbeteiligung. Hinweise, Vorschläge und Ideen räumlich erfassen, moderieren und auswerten.">
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="landing.css">
-</head>
-
-<body class="landing-page">
-
-    <!-- ============================================================= -->
-    <!-- Navigation                                                    -->
-    <!-- ============================================================= -->
-    <nav class="lp-nav" id="nav">
-        <div class="lp-nav-inner">
-            <a href="#" class="lp-nav-brand">
-                <i class="fa-solid fa-people-group"></i>
-                Mitmachkarte
-            </a>
-
-            <ul class="lp-nav-links">
-                <li><a href="#features">Funktionen</a></li>
-                <li><a href="#modules">Module</a></li>
-                <li><a href="#demo">Live-Demo</a></li>
-                <li><a href="#team">Team</a></li>
-                <li><a href="#contact" class="lp-nav-cta">Demo anfragen</a></li>
-            </ul>
-
-            <button class="lp-nav-toggle" onclick="document.querySelector('.lp-nav-links').classList.toggle('open')">
-                <i class="fa-solid fa-bars"></i>
-            </button>
-        </div>
-    </nav>
-
-
-    <!-- ============================================================= -->
-    <!-- Hero                                                          -->
-    <!-- ============================================================= -->
-    <section class="lp-hero">
-        <div class="lp-hero-inner">
-            <div class="lp-hero-content">
-                <div class="lp-hero-badge">
-                    <span class="badge-dot"></span>
-                    Open Source · Made in Germany
-                </div>
-
-                <h1>
-                    Bürgerbeteiligung,<br>
-                    die auf der <span>Karte</span> stattfindet.
-                </h1>
-
-                <p class="lp-hero-subtitle">
-                    Die Mitmachkarte gibt Ihrer Kommune ein WebGIS-Portal, auf dem Bürgerinnen und Bürger 
-                    Hinweise, Vorschläge und Ideen räumlich verorten — und die Verwaltung sie direkt bearbeiten kann.
-                </p>
-
-                <div class="lp-hero-actions">
-                    <a href="#contact" class="lp-btn lp-btn-primary">
-                        <i class="fa-solid fa-rocket"></i> Kostenlose Demo anfragen
-                    </a>
-                    <a href="#demo" class="lp-btn lp-btn-outline">
-                        <i class="fa-solid fa-play"></i> Live-Demo ansehen
-                    </a>
-                </div>
-            </div>
-
-            <div class="lp-hero-visual">
-                <!-- Replace src with your actual demo URL -->
-                <iframe src="index.php" loading="lazy" title="Mitmachkarte Live-Vorschau"></iframe>
-                <div class="lp-hero-visual-overlay">
-                    <span><i class="fa-solid fa-map-location-dot"></i> Interaktive Vorschau — Lohne (Oldenburg)</span>
-                    <a href="index.php" target="_blank" class="lp-btn lp-btn-primary">
-                        Vollbild öffnen <i class="fa-solid fa-arrow-up-right-from-square"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Trust Bar                                                     -->
-    <!-- ============================================================= -->
-    <section class="lp-trust">
-        <div class="lp-trust-inner">
-            <div class="lp-trust-label">Entwickelt für Kommunen jeder Größe</div>
-            <div class="lp-trust-logos">
-                <span><i class="fa-solid fa-city"></i> Kleinstädte</span>
-                <span><i class="fa-solid fa-building-columns"></i> Mittelstädte</span>
-                <span><i class="fa-solid fa-landmark"></i> Landkreise</span>
-                <span><i class="fa-solid fa-compass-drafting"></i> Planungsbüros</span>
-                <span><i class="fa-solid fa-map"></i> Regionalverbände</span>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Features                                                      -->
-    <!-- ============================================================= -->
-    <section class="lp-section lp-section-alt" id="features">
-        <div class="lp-section-inner">
-            <div class="lp-section-header">
-                <div class="lp-section-eyebrow">Funktionen</div>
-                <h2 class="lp-section-title">Alles, was kommunale Beteiligung braucht</h2>
-                <p class="lp-section-subtitle">
-                    Von der Bürger-Eingabe bis zur Verwaltungs-Auswertung — in einem Portal, räumlich verortet.
-                </p>
-            </div>
-
-            <div class="lp-features-grid">
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-map-pin"></i></div>
-                    <h3>Räumliche Eingabe</h3>
-                    <p>Bürger zeichnen Punkte, Linien und Flächen direkt auf der Karte — intuitiv wie Google Maps, präzise wie ein GIS.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-shield-halved"></i></div>
-                    <h3>Moderationsportal</h3>
-                    <p>Alle Beiträge durchlaufen eine Moderation. Freigeben, ablehnen, bearbeiten — mit Kartenvorschau und Kommentarübersicht.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-thumbs-up"></i></div>
-                    <h3>Bewertung & Kommentare</h3>
-                    <p>Like/Dislike und Kommentarfunktion für jeden Beitrag. Die Verwaltung sieht, was die Bürgerschaft bewegt.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-layer-group"></i></div>
-                    <h3>Kategorien & Filter</h3>
-                    <p>Frei definierbare Kategorien mit Icons und Farben. Filter in Sidebar und auf der Karte, Sortierung nach Datum, Likes oder Kategorie.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-camera"></i></div>
-                    <h3>Foto-Upload</h3>
-                    <p>Bürger können Fotos zu ihren Beiträgen hochladen — direkt vom Smartphone, sichtbar im Popup auf der Karte.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-palette"></i></div>
-                    <h3>Kommunales Branding</h3>
-                    <p>Logo, Farben und Name Ihrer Kommune — automatisch aus der Datenbank geladen. Jede Mitmachkarte sieht aus wie Ihre eigene.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-mobile-screen"></i></div>
-                    <h3>Mobiloptimiert</h3>
-                    <p>Responsive Design für Smartphone, Tablet und Desktop. Bürgerbeteiligung funktioniert auch unterwegs — am Ort des Geschehens.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-route"></i></div>
-                    <h3>Interaktives Onboarding</h3>
-                    <p>Ein geführtes Tutorial erklärt die Kernfunktionen Schritt für Schritt. Keine Schulung nötig — auch für weniger technikaffine Bürger.</p>
-                </div>
-
-                <div class="lp-feature-card">
-                    <div class="lp-feature-icon"><i class="fa-solid fa-newspaper"></i></div>
-                    <h3>Neuigkeiten-System</h3>
-                    <p>Die Verwaltung veröffentlicht Neuigkeiten direkt in der Sidebar — informiert über Fortschritte, Termine und Beschlüsse.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Stats Bar                                                     -->
-    <!-- ============================================================= -->
-    <section class="lp-stats">
-        <div class="lp-stats-inner">
-            <div>
-                <div class="lp-stat-number">100%</div>
-                <div class="lp-stat-label">Open Source</div>
-            </div>
-            <div>
-                <div class="lp-stat-number">DSGVO</div>
-                <div class="lp-stat-label">Konform & selbst gehostet</div>
-            </div>
-            <div>
-                <div class="lp-stat-number">&lt;5 Min</div>
-                <div class="lp-stat-label">Setup für neue Kommune</div>
-            </div>
-            <div>
-                <div class="lp-stat-number">∞</div>
-                <div class="lp-stat-label">Kommunen gleichzeitig</div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Modules / Roadmap                                             -->
-    <!-- ============================================================= -->
-    <section class="lp-section" id="modules">
-        <div class="lp-section-inner">
-            <div class="lp-section-header">
-                <div class="lp-section-eyebrow">Module & Roadmap</div>
-                <h2 class="lp-section-title">Wächst mit Ihren Anforderungen</h2>
-                <p class="lp-section-subtitle">
-                    Die Mitmachkarte ist modular aufgebaut. Starten Sie mit dem Kernmodul und aktivieren Sie weitere Module nach Bedarf.
-                </p>
-            </div>
-
-            <div class="lp-modules">
-                <!-- Core Module -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon core"><i class="fa-solid fa-map-location-dot"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Kernmodul — Bürgerbeteiligung</h3>
-                        <p>Räumliche Beiträge, Moderation, Bewertung, Kommentare, Kategorien, Neuigkeiten, Foto-Upload. Das vollständige Beteiligungsportal.</p>
-                    </div>
-                    <span class="lp-module-badge live">Verfügbar</span>
-                </div>
-
-                <!-- Module 1: Social -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon social"><i class="fa-solid fa-people-carry-box"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Gemeinschaft — Nachbarschaftshilfe & Aufgaben</h3>
-                        <p>Verwandelt die Mitmachkarte in ein lokales Netzwerk: Aufgaben der Stadtverwaltung, gegenseitige Nachbarschaftshilfe, Rangliste für engagierte Bürger und Veranstaltungskalender.</p>
-                    </div>
-                    <span class="lp-module-badge dev">In Entwicklung</span>
-                </div>
-
-                <!-- Module 2: Surveys -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon survey"><i class="fa-solid fa-clipboard-question"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Umfragen — Standortbezogene Beteiligung</h3>
-                        <p>Planungsbüros erstellen kartenbasierte Umfragen: "Wo fühlen Sie sich unsicher?", "Zeichnen Sie Ihren täglichen Weg ein." Auswertung als Report mit räumlicher Analyse.</p>
-                    </div>
-                    <span class="lp-module-badge planned">Geplant</span>
-                </div>
-
-                <!-- Module 3: Digital Twin -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon twin"><i class="fa-solid fa-tower-broadcast"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Digitaler Zwilling — Sensorik & Dashboards</h3>
-                        <p>Echtzeit-Daten auf der Karte: Wetterstationen, Luftqualität, Pegelstände, Verkehrsaufkommen, Energieverbrauch. Routenplanung für Bauhof-Teams und Live-Standorte von Einsatzfahrzeugen.</p>
-                    </div>
-                    <span class="lp-module-badge planned">Geplant</span>
-                </div>
-
-                <!-- Module 4: Open Data -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon open"><i class="fa-solid fa-database"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Open Data — Kommunale Geodatenplattform</h3>
-                        <p>Bebauungspläne, Baumkataster, Spielplätze, Radwege als durchsuchbare Layer. Die Mitmachkarte wird zum zentralen Geo-Hub Ihrer Kommune.</p>
-                    </div>
-                    <span class="lp-module-badge planned">Geplant</span>
-                </div>
-
-                <!-- Module 5: Accessibility -->
-                <div class="lp-module-card">
-                    <div class="lp-module-icon access"><i class="fa-solid fa-wheelchair-move"></i></div>
-                    <div class="lp-module-content">
-                        <h3>Barrierefreiheit — Inklusions-Melder</h3>
-                        <p>Bürger melden Barrieren und barrierefreie Orte auf der Karte. Integration mit Rollstuhl-Routing für eine inklusivere Kommune.</p>
-                    </div>
-                    <span class="lp-module-badge planned">Geplant</span>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Live Demo                                                     -->
-    <!-- ============================================================= -->
-    <section class="lp-section lp-section-alt" id="demo">
-        <div class="lp-section-inner">
-            <div class="lp-section-header">
-                <div class="lp-section-eyebrow">Live-Demo</div>
-                <h2 class="lp-section-title">Jetzt selbst ausprobieren</h2>
-                <p class="lp-section-subtitle">
-                    Die Demoversion zeigt alle Kernfunktionen am Beispiel der Stadt Lohne (Oldenburg). 
-                    Zeichnen Sie einen Beitrag, bewerten Sie, kommentieren Sie.
-                </p>
-            </div>
-
-            <div class="lp-demo-container">
-                <iframe src="index.php" loading="lazy" title="Mitmachkarte Live-Demo"></iframe>
-            </div>
-
-            <div style="text-align:center;margin-top:32px;">
-                <a href="index.php" target="_blank" class="lp-btn lp-btn-primary" style="font-size:1.05rem;padding:16px 36px;">
-                    <i class="fa-solid fa-arrow-up-right-from-square"></i> Demo im Vollbild öffnen
-                </a>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Team                                                          -->
-    <!-- ============================================================= -->
-    <section class="lp-section" id="team">
-        <div class="lp-section-inner">
-            <div class="lp-section-header">
-                <div class="lp-section-eyebrow">Team</div>
-                <h2 class="lp-section-title">Die Menschen hinter der Mitmachkarte</h2>
-                <p class="lp-section-subtitle">
-                    Geoinformatik, Stadtplanung und Webentwicklung — aus einer Hand.
-                </p>
-            </div>
-
-            <div class="lp-team-grid">
-                <div class="lp-team-card">
-                    <div class="lp-team-avatar"><i class="fa-solid fa-user"></i></div>
-                    <h3>Patrick Zerhusen</h3>
-                    <div class="lp-team-role">GIS-Entwickler & Urbanklimatologie</div>
-                    <p>Full-Stack WebGIS-Entwicklung, PALM-4U Stadtklimasimulationen, QGIS-Tooling. Verbindet Geodaten mit Bürgerbeteiligung.</p>
-                </div>
-
-                <div class="lp-team-card">
-                    <div class="lp-team-avatar"><i class="fa-solid fa-user"></i></div>
-                    <h3>Ihr Name</h3>
-                    <div class="lp-team-role">Position</div>
-                    <p>Kurzbeschreibung der Rolle und Expertise im Team.</p>
-                </div>
-
-                <div class="lp-team-card">
-                    <div class="lp-team-avatar"><i class="fa-solid fa-user"></i></div>
-                    <h3>Ihr Name</h3>
-                    <div class="lp-team-role">Position</div>
-                    <p>Kurzbeschreibung der Rolle und Expertise im Team.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Contact / CTA                                                 -->
-    <!-- ============================================================= -->
-    <section class="lp-cta-section" id="contact">
-        <div class="lp-section-inner">
-            <div class="lp-section-header">
-                <div class="lp-section-eyebrow">Kontakt</div>
-                <h2 class="lp-section-title">Bürgerbeteiligung für Ihre Kommune starten</h2>
-                <p class="lp-section-subtitle">
-                    Kostenlose Demo, unverbindliches Erstgespräch, oder direkt ein Pilotprojekt — wir freuen uns auf Ihre Nachricht.
-                </p>
-            </div>
-
-            <div class="lp-contact-grid">
-                <div class="lp-contact-info">
-                    <h3>Sprechen Sie uns an</h3>
-
-                    <div class="lp-contact-item">
-                        <i class="fa-solid fa-building"></i>
-                        <span>INKEK GmbH / endex GmbH</span>
-                    </div>
-                    <div class="lp-contact-item">
-                        <i class="fa-solid fa-envelope"></i>
-                        <a href="mailto:info@endex-geodaten.de">info@endex-geodaten.de</a>
-                    </div>
-                    <div class="lp-contact-item">
-                        <i class="fa-solid fa-phone"></i>
-                        <span>+49 (0) XXX XXXXXXX</span>
-                    </div>
-                    <div class="lp-contact-item">
-                        <i class="fa-solid fa-location-dot"></i>
-                        <span>Kassel, Deutschland</span>
-                    </div>
-
-                    <div style="margin-top:24px;">
-                        <h3>Das erwartet Sie</h3>
-                        <div class="lp-contact-item"><i class="fa-solid fa-check"></i> Persönliche Live-Demo (30 Min.)</div>
-                        <div class="lp-contact-item"><i class="fa-solid fa-check"></i> Individuelles Angebot</div>
-                        <div class="lp-contact-item"><i class="fa-solid fa-check"></i> Setup in unter einer Woche</div>
-                        <div class="lp-contact-item"><i class="fa-solid fa-check"></i> DSGVO-konform auf Ihrem Server</div>
-                    </div>
-                </div>
-
-                <form class="lp-contact-form" onsubmit="event.preventDefault();alert('Danke! Wir melden uns.');">
-                    <input type="text" placeholder="Ihr Name" required>
-                    <input type="email" placeholder="E-Mail-Adresse" required>
-                    <input type="text" placeholder="Kommune / Organisation">
-                    <textarea placeholder="Ihre Nachricht oder Frage..." rows="4"></textarea>
-                    <button type="submit" class="lp-btn lp-btn-primary">
-                        <i class="fa-solid fa-paper-plane"></i> Nachricht senden
-                    </button>
-                </form>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- ============================================================= -->
-    <!-- Footer                                                        -->
-    <!-- ============================================================= -->
-    <footer class="lp-footer">
-        <div class="lp-footer-inner">
-            <span>© 2026 endex GmbH · Mitmachkarte</span>
-            <div class="lp-footer-links">
-                <a href="privacy.php">Datenschutz</a>
-                <a href="imprint.php">Impressum</a>
-                <a href="https://github.com" target="_blank"><i class="fa-brands fa-github"></i> GitHub</a>
-            </div>
-        </div>
-    </footer>
-
-
-    <!-- ============================================================= -->
-    <!-- Scroll Effects                                                -->
-    <!-- ============================================================= -->
-    <script>
-        // Navigation Shadow on Scroll
-        window.addEventListener('scroll', function () {
-            document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 10);
-        });
-
-        // Smooth Scroll for Anchor Links
-        document.querySelectorAll('a[href^="#"]').forEach(function (link) {
-            link.addEventListener('click', function (e) {
-                var target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    e.preventDefault();
-                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
-            });
-        });
-    </script>
-
-</body>
-</html>