From 91f15bc62fe83e5daae418e33295c3f9ae2bbd37 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Wed, 29 Apr 2026 16:34:02 +0200
Subject: [PATCH] feat: sticky toolbars in all module pages

---
 public/styles/calendar.css |  7 ++++++-
 public/styles/contacts.css |  7 ++++++-
 public/styles/layout.css   | 15 +++++++++++++++
 public/styles/notes.css    |  7 ++++++-
 public/styles/shopping.css |  6 ++++++
 public/styles/tasks.css    |  7 ++++++-
 6 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/public/styles/calendar.css b/public/styles/calendar.css
index 2cddff7..0e25fc6 100644
--- a/public/styles/calendar.css
+++ b/public/styles/calendar.css
@@ -36,7 +36,12 @@
   gap: var(--space-2);
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-surface);
+  background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
   flex-shrink: 0;
   border-top: 3px solid var(--module-accent);
 }
diff --git a/public/styles/contacts.css b/public/styles/contacts.css
index 6fae55b..d1dd325 100644
--- a/public/styles/contacts.css
+++ b/public/styles/contacts.css
@@ -34,7 +34,12 @@
   gap: var(--space-2);
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-surface);
+  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
   flex-shrink: 0;
   border-top: 3px solid var(--module-accent);
 }
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 243c0fb..79f43ae 100755
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -1625,6 +1625,21 @@
   margin-bottom: var(--space-4);
 }
 
+/* ── prefers-reduced-transparency Fallback ──
+ * Deaktiviert Blur und transparente Hintergründe für bessere Zugänglichkeit.
+ */
+@media (prefers-reduced-transparency: reduce) {
+  .tasks-toolbar,
+  .notes-toolbar,
+  .cal-toolbar,
+  .contacts-toolbar,
+  .list-header {
+    background-color: var(--color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 /* --------------------------------------------------------
  * Toast-Benachrichtigungen
  * -------------------------------------------------------- */
diff --git a/public/styles/notes.css b/public/styles/notes.css
index c683d8d..d4a81aa 100644
--- a/public/styles/notes.css
+++ b/public/styles/notes.css
@@ -34,7 +34,12 @@
   justify-content: space-between;
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-surface);
+  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
   flex-shrink: 0;
   gap: var(--space-3);
   border-top: 3px solid var(--module-accent);
diff --git a/public/styles/shopping.css b/public/styles/shopping.css
index 8882558..4109275 100644
--- a/public/styles/shopping.css
+++ b/public/styles/shopping.css
@@ -115,6 +115,12 @@
   padding: var(--space-3) var(--space-4) var(--space-2);
   flex-shrink: 0;
   border-top: 3px solid var(--module-accent);
+  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
 }
 
 .list-header__name {
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index b714bff..9b1c76a 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -43,7 +43,12 @@
   padding: var(--space-3) var(--space-4);
   border-top: 3px solid var(--module-accent);
   border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-surface);
+  background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
 }
 
 .tasks-toolbar__title {