From d6786396d150fbfddabddf1fa1ba199e08d66daa Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Fri, 11 Sep 2026 15:44:59 +0200
Subject: [PATCH] =?UTF-8?q?fix(admin):=20Gruppen-Sidebar-Kontrast/Abst?=
 =?UTF-8?q?=C3=A4nde=20verbessert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.card + Tailwind-p-2 kollidierten (Tailwind-Layer gewann, Card-Padding
faktisch wirkungslos) - eigener Rahmen statt .card-Klasse. Gruppen jetzt
per Trennlinie abgesetzt statt nur Abstand, aktiver Tab mit linkem
Akzentbalken statt nur schwachem Soft-Hintergrund.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012BmsfwPHiAjwtJetgykazx
---
 frontend/src/components/ui/sidebar.tsx | 8 ++++----
 frontend/src/pages/AdminPage.tsx       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 2ce992c..295bc23 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -142,9 +142,9 @@ export function SidebarFooter({ children }: { children: React.ReactNode }) {
 export function SidebarGroup({ label, children }: { label?: string; children: React.ReactNode }) {
   const { eingeklappt, istMobil } = useSidebar();
   return (
-    <div className="flex flex-col gap-0.5 py-1">
+    <div className="flex flex-col gap-0.5 border-b border-[var(--color-border)] py-2 last:border-b-0 last:pb-1">
       {label && !(eingeklappt && !istMobil) && (
-        <div className="px-2 pb-1 pt-2 text-[0.7rem] font-semibold uppercase tracking-wide text-[var(--color-text-muted)]">
+        <div className="px-2 pb-1.5 text-[0.7rem] font-semibold uppercase tracking-wide text-[var(--color-text-muted)]">
           {label}
         </div>
       )}
@@ -171,8 +171,8 @@ export const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarItemProps>
         title={nurIcon ? titel : undefined}
         aria-current={aktiv ? "page" : undefined}
         className={cn(
-          "flex h-9 w-full items-center gap-2 overflow-hidden rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-[var(--color-surface-sunken)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
-          aktiv && "bg-[var(--color-primary-soft)] font-medium text-[var(--color-primary)]",
+          "flex h-9 w-full items-center gap-2 overflow-hidden rounded-md border-l-2 border-transparent px-2 text-left text-sm outline-none transition-colors hover:bg-[var(--color-surface-sunken)] focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+          aktiv && "border-l-[var(--color-primary)] bg-[var(--color-primary-soft)] font-medium text-[var(--color-primary)]",
           nurIcon && "justify-center px-0",
           className
         )}
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 250de1e..b0addd0 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -258,7 +258,7 @@ export function AdminPage() {
 
       <div className="split-layout">
           <SidebarProvider>
-            <nav className="card split-layout-sidebar flex flex-col gap-1 p-2">
+            <nav className="split-layout-sidebar flex flex-col gap-1 rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-sidebar)] p-2 shadow-[var(--shadow-sm)]">
               {GRUPPEN_REIHENFOLGE.map((gruppe) => {
                 const tabsInGruppe = sichtbareTabs.filter((t) => t.gruppe === gruppe);
                 if (tabsInGruppe.length === 0) return null;