From 24d6da6e89adebfc7f06803c96493f70cf481e82 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Tue, 28 Jul 2026 13:01:21 +0200
Subject: [PATCH] style: accordion headers - light blue bg with dark blue icon
 block (rounded)

---
 frontend/src/pages/ContactsList.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/ContactsList.tsx b/frontend/src/pages/ContactsList.tsx
index 3ebeaa5..9d036f3 100644
--- a/frontend/src/pages/ContactsList.tsx
+++ b/frontend/src/pages/ContactsList.tsx
@@ -395,10 +395,12 @@ export function ContactsListPage() {
             <div className="p-0.5">
               <button
                 onClick={() => setViewsOpen(!viewsOpen)}
-                className="w-full flex items-center justify-between px-3 py-2.5 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2.5 rounded-md text-sm font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 transition-colors"
               >
                 <span className="flex items-center gap-1.5">
-                  <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />
+                  <span className="flex items-center justify-center w-6 h-6 rounded-md bg-primary-600 text-white">
+                    <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />
+                  </span>
                   Ansichten
                 </span>
                 <svg className={`w-3.5 h-3.5 transition-transform ${viewsOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
@@ -475,10 +477,12 @@ export function ContactsListPage() {
             <div className="flex-1 p-0.5">
               <button
                 onClick={() => setFoldersOpen(!foldersOpen)}
-                className="w-full flex items-center justify-between px-3 py-2.5 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 transition-colors"
+                className="w-full flex items-center justify-between px-3 py-2.5 rounded-md text-sm font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 transition-colors"
               >
                 <span className="flex items-center gap-1.5">
-                  <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />
+                  <span className="flex items-center justify-center w-6 h-6 rounded-md bg-primary-600 text-white">
+                    <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />
+                  </span>
                   Ordner
                 </span>
                 <svg className={`w-3.5 h-3.5 transition-transform ${foldersOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">