diff --git a/public/styles/budget.css b/public/styles/budget.css
index 6233920..3958ad0 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.budget-page { --module-accent: var(--module-budget); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */
diff --git a/public/styles/contacts.css b/public/styles/contacts.css
index eb9e5da..85e78c6 100644
--- a/public/styles/contacts.css
+++ b/public/styles/contacts.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.contacts-page { --module-accent: var(--module-contacts); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 1600c0b..9a10f04 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -4,6 +4,13 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.dashboard {
+  --module-accent: var(--module-dashboard);
+}
+
 /* --------------------------------------------------------
  * Dashboard-Layout
  * -------------------------------------------------------- */
@@ -761,7 +768,7 @@
   width: 52px;
   height: 52px;
   border-radius: var(--radius-full);
-  background-color: var(--color-accent);
+  background-color: var(--module-accent, var(--color-accent));
   color: #ffffff;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -783,7 +790,7 @@
 }
 
 .fab-main:hover {
-  background-color: var(--color-accent-hover);
+  background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
 }
 
 .fab-main:active {
diff --git a/public/styles/layout.css b/public/styles/layout.css
index cff0133..33c5eec 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -192,7 +192,7 @@
   width: 52px;
   height: 52px;
   border-radius: var(--radius-full);
-  background-color: var(--color-accent);
+  background-color: var(--module-accent, var(--color-accent));
   color: #ffffff;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -206,7 +206,7 @@
 }
 
 .page-fab:hover {
-  background-color: var(--color-accent-hover);
+  background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
 }
 
 .page-fab:active {
@@ -774,7 +774,7 @@
   width: 52px;
   height: 52px;
   border-radius: var(--radius-full);
-  background-color: var(--color-accent);
+  background-color: var(--module-accent, var(--color-btn-primary));
   color: #ffffff;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -787,6 +787,7 @@
 }
 
 .fab:hover {
+  background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
   transform: scale(1.05);
 }
 
diff --git a/public/styles/meals.css b/public/styles/meals.css
index 88461e1..0821bab 100644
--- a/public/styles/meals.css
+++ b/public/styles/meals.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.meals-page { --module-accent: var(--module-meals); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */
diff --git a/public/styles/notes.css b/public/styles/notes.css
index baf8e44..f507830 100644
--- a/public/styles/notes.css
+++ b/public/styles/notes.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.notes-page { --module-accent: var(--module-notes); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */
diff --git a/public/styles/shopping.css b/public/styles/shopping.css
index 1292d2e..4e43851 100644
--- a/public/styles/shopping.css
+++ b/public/styles/shopping.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.shopping-page { --module-accent: var(--module-shopping); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index f1e70fc..c905ae7 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -4,6 +4,11 @@
  * Abhängigkeiten: tokens.css, layout.css
  */
 
+/* --------------------------------------------------------
+ * Modul-Akzent
+ * -------------------------------------------------------- */
+.tasks-page { --module-accent: var(--module-tasks); }
+
 /* --------------------------------------------------------
  * Seiten-Layout
  * -------------------------------------------------------- */