feat: aktualisiere Stile und verbessere das Layout der Kontomenü-Komponente

frontend/src/components/AppContent.vue

@@ -5,7 +5,10 @@
         <AppSectionBar />
         <div
           class="app-content__route-root"
-          :class="{ 'app-content__route--fill': Boolean($route.meta?.contentFill) }"
+          :class="{
+            'app-content__route--fill': Boolean($route.meta?.contentFill),
+            'app-content__route--panel': !Boolean($route.meta?.contentFill)
+          }"
         >
           <router-view />
         </div>
@@ -32,10 +35,11 @@
   min-height: 0;
   padding: 0;
   overflow: hidden;
+  background: #ffffff;
 }
 
 .app-content__scroll {
-  background: transparent;
+  background: #ffffff;
   height: 100%;
   min-height: 0;
 }
@@ -46,16 +50,26 @@
      height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
   min-height: 100%;
   margin: 0 auto;
-  padding: 14px 18px 12px;
+  padding: 20px 18px 16px;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 8px;
 }
 
 .app-content__route-root {
   min-width: 0;
 }
 
+.app-content__route--panel {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(93, 64, 55, 0.08);
+  background: #ffffff;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 10px 22px rgba(93, 64, 55, 0.05);
+}
+
 /* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */
 .app-content__inner > .app-content__route-root.app-content__route--fill {
   flex: 1 1 0%;
@@ -64,7 +78,12 @@
 
 @media (max-width: 960px) {
   .app-content__inner {
-    padding: 12px 12px 10px;
+    padding: 14px 12px 10px;
+    gap: 6px;
+  }
+
+  .app-content__route--panel {
+    padding: 10px;
   }
 }
 </style>