diff --git a/public/styles.css b/public/styles.css
index f27c4df..ece1910 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,41 +1,627 @@
-#mapdiv {
-	height: 100vh;
+/* =====================================================================
+   WebGIS Citizen Participation Portal — Styles
+   Mobile-First Layout with CSS Custom Properties for Municipality Theming.
+   ===================================================================== */
+
+
+/* -----------------------------------------------------------------
+   CSS Custom Properties (Defaults — overridden per Municipality)
+   ----------------------------------------------------------------- */
+:root {
+    /* Municipality Colors (set dynamically in index.php) */
+    --color-primary: #00376D;
+    --color-primary-light: #00376D22;
+    --color-primary-dark: #00376D;
+
+    /* Neutral Colors */
+    --color-bg: #f4f5f7;
+    --color-surface: #ffffff;
+    --color-text: #1a1a2e;
+    --color-text-secondary: #5a5a7a;
+    --color-border: #e0e0e0;
+
+    /* Feedback Colors */
+    --color-success: #2e7d32;
+    --color-error: #c62828;
+    --color-warning: #f57f17;
+
+    /* Spacing */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 16px;
+    --space-lg: 24px;
+    --space-xl: 32px;
+
+    /* Layout */
+    --header-height: 56px;
+    --footer-height: 40px;
+    --map-side-padding: 0px;
+
+    /* Typography */
+    --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
 }
 
-.popup-container {
-    width: 80vw;  /* 80% of the viewport width */
-    max-width: 300px;  /* Maximum width */
-    height: 60vh;  /* 60% of the viewport height */
-    max-height: 350px;  /* Maximum height */
-    padding: 10px;  /* Add some padding */
-    box-sizing: border-box;  /* Ensure padding is included in width/height */
+
+/* -----------------------------------------------------------------
+   Reset and Base
+   ----------------------------------------------------------------- */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
-.popup-form-group {
-    display: flex;          /* popup-label und popup-input nebeneinander statt untereinander */
+html, body {
+    height: 100%;
+    overflow: hidden;
+    font-family: var(--font-body);
+    font-size: 15px;
+    color: var(--color-text);
+    background: var(--color-bg);
+}
+
+
+/* -----------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------- */
+#app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    height: var(--header-height);
+    display: flex;
     align-items: center;
-    margin-bottom: 15px;
+    justify-content: space-between;
+    padding: 0 var(--space-md);
+    background: var(--color-primary);
+    color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.popup-label {
-    flex: 1;
-    margin-right: 10px;
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-width: 0;
 }
 
-.popup-input {
-    flex: 2;
+.header-logo {
+    height: 36px;
+    width: auto;
+    object-fit: contain;
+    flex-shrink: 0;
 }
 
-.popup-button-group {
+.header-title {
+    font-family: var(--font-heading);
+    font-size: 1.1rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.header-nav {
+    display: flex;
+    gap: var(--space-xs);
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: background var(--transition-fast);
+}
+
+.nav-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.header-menu-toggle {
+    display: none;
+    border: none;
+    background: none;
+    color: white;
+    font-size: 1.4rem;
+    cursor: pointer;
+    padding: var(--space-sm);
+}
+
+
+/* -----------------------------------------------------------------
+   Main / Map Container
+   ----------------------------------------------------------------- */
+#app-main {
+    position: fixed;
+    top: var(--header-height);
+    bottom: var(--footer-height);
+    left: var(--map-side-padding);
+    right: var(--map-side-padding);
+}
+
+#map {
+    width: 100%;
+    height: 100%;
+}
+
+
+/* -----------------------------------------------------------------
+   Footer
+   ----------------------------------------------------------------- */
+#app-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    height: var(--footer-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-md);
+    background: var(--color-surface);
+    border-top: 1px solid var(--color-border);
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+}
+
+.footer-content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.footer-logo {
+    height: 22px;
+    width: auto;
+    object-fit: contain;
+}
+
+
+/* -----------------------------------------------------------------
+   Sidebar Overrides (leaflet-sidebar-v2)
+   ----------------------------------------------------------------- */
+.leaflet-sidebar {
+    z-index: 999;
+    top: var(--header-height);
+    bottom: var(--footer-height);
+}
+
+.leaflet-sidebar-header {
+    background: var(--color-primary);
+    color: white;
+}
+
+.leaflet-sidebar-close {
+    color: white;
+}
+
+.leaflet-sidebar-tabs > ul > li > a {
+    color: var(--color-text-secondary);
+    transition: color var(--transition-fast);
+}
+
+.leaflet-sidebar-tabs > ul > li.active > a {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+.sidebar-body {
+    padding: var(--space-md);
+}
+
+.sidebar-body h3 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin: var(--space-lg) 0 var(--space-sm) 0;
+    color: var(--color-primary);
+}
+
+.sidebar-body h3:first-child {
+    margin-top: 0;
+}
+
+.sidebar-body p {
+    margin-bottom: var(--space-sm);
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+}
+
+
+/* -----------------------------------------------------------------
+   Contributions List (Sidebar Tab)
+   ----------------------------------------------------------------- */
+.list-search {
+    margin-bottom: var(--space-md);
+}
+
+.contribution-card {
+    padding: var(--space-md);
+    margin-bottom: var(--space-sm);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
+}
+
+.contribution-card:hover {
+    border-color: var(--color-primary);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.contribution-card-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-xs);
+}
+
+.contribution-card-category {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--color-primary);
+}
+
+.contribution-card-title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    margin-bottom: var(--space-xs);
+}
+
+.contribution-card-meta {
     display: flex;
     justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
 }
 
-.popup-button {
+.contribution-card-votes {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+
+/* -----------------------------------------------------------------
+   News Items (Sidebar Tab)
+   ----------------------------------------------------------------- */
+.news-item {
+    padding: var(--space-md);
+    margin-bottom: var(--space-sm);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+}
+
+.news-date {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.news-item h3 {
+    font-size: 0.95rem;
+    margin: var(--space-xs) 0;
+    color: var(--color-text);
+}
+
+
+/* -----------------------------------------------------------------
+   Modals (Welcome, Login, Create Contribution)
+   ----------------------------------------------------------------- */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background: var(--color-surface);
+    border-radius: 12px;
+    padding: var(--space-xl);
+    max-width: 480px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+}
+
+.modal-small {
+    max-width: 380px;
+}
+
+.modal-content h2 {
+    font-family: var(--font-heading);
+    font-size: 1.3rem;
+    margin-bottom: var(--space-md);
+    color: var(--color-primary);
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.modal-content p {
+    line-height: 1.6;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-secondary);
+}
+
+.modal-content ul {
+    margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
+    line-height: 1.8;
+    color: var(--color-text-secondary);
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-sm);
+    margin-top: var(--space-lg);
+}
+
+
+/* -----------------------------------------------------------------
+   Form Elements
+   ----------------------------------------------------------------- */
+.form-group {
+    margin-bottom: var(--space-md);
+}
+
+.form-group label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: var(--space-xs);
+    color: var(--color-text);
+}
+
+.form-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    color: var(--color-text);
+    background: var(--color-surface);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+textarea.form-input {
+    resize: vertical;
+}
+
+select.form-input {
+    cursor: pointer;
+}
+
+
+/* -----------------------------------------------------------------
+   Buttons
+   ----------------------------------------------------------------- */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xs);
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background var(--transition-fast), transform var(--transition-fast);
+    min-height: 44px;
+    min-width: 44px;
+}
+
+.btn:active {
+    transform: scale(0.97);
+}
+
+.btn-primary {
+    background: var(--color-primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    filter: brightness(1.15);
+}
+
+.btn-secondary {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover {
+    background: var(--color-border);
+}
+
+.btn-success {
+    background: var(--color-success);
+    color: white;
+}
+
+.btn-danger {
+    background: var(--color-error);
+    color: white;
+}
+
+
+/* -----------------------------------------------------------------
+   Map Popup Overrides (Contribution Detail View)
+   ----------------------------------------------------------------- */
+.popup-detail {
+    min-width: 220px;
+    max-width: 300px;
+}
+
+.popup-detail-title {
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: var(--space-xs);
+}
+
+.popup-detail-category {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--color-primary-light);
+    color: var(--color-primary);
+    margin-bottom: var(--space-sm);
+}
+
+.popup-detail-description {
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-sm);
+}
+
+.popup-detail-meta {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-sm);
+    padding-top: var(--space-sm);
+    border-top: 1px solid var(--color-border);
+}
+
+.popup-detail-votes {
+    display: flex;
+    gap: var(--space-sm);
+    margin-top: var(--space-sm);
+}
+
+.popup-vote-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: 20px;
+    background: var(--color-surface);
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all var(--transition-fast);
+}
+
+.popup-vote-btn:hover {
+    border-color: var(--color-primary);
+    background: var(--color-primary-light);
+}
+
+.popup-vote-btn.liked {
+    border-color: var(--color-success);
+    background: #e8f5e9;
+    color: var(--color-success);
+}
+
+.popup-vote-btn.disliked {
+    border-color: var(--color-error);
+    background: #ffebee;
+    color: var(--color-error);
+}
+
+.popup-detail-actions {
+    display: flex;
+    gap: var(--space-sm);
+    margin-top: var(--space-sm);
+}
+
+.popup-detail-actions .btn {
     flex: 1;
-    margin-right: 10px;
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    min-height: 36px;
 }
 
-.popup-button:last-child {
-    margin-right: 0;
+
+/* -----------------------------------------------------------------
+   Mobile Responsive Overrides (max-width: 768px)
+   ----------------------------------------------------------------- */
+@media (max-width: 768px) {
+    :root {
+        --header-height: 48px;
+        --footer-height: 32px;
+        --map-side-padding: 0px;
+    }
+
+    .header-title {
+        font-size: 0.9rem;
+    }
+
+    .header-nav {
+        display: none;
+        position: absolute;
+        top: var(--header-height);
+        right: 0;
+        background: var(--color-primary);
+        flex-direction: column;
+        padding: var(--space-sm);
+        border-radius: 0 0 0 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    .header-nav.open {
+        display: flex;
+    }
+
+    .header-menu-toggle {
+        display: block;
+    }
+
+    .nav-label {
+        display: inline;
+    }
+
+    .modal-content {
+        padding: var(--space-lg);
+        border-radius: 8px;
+    }
 }
+
+
+/* -----------------------------------------------------------------
+   Desktop Overrides (min-width: 769px)
+   ----------------------------------------------------------------- */
+@media (min-width: 769px) {
+    :root {
+        --map-side-padding: 8px;
+    }
+}
\ No newline at end of file