Initial improved accordion design

ui.R

@@ -105,9 +105,8 @@ ui <- function() {
           .bslib-card .card-body {
             padding: 0;
           }
-          .card-body.bslib-gap-spacing.html-fill-item.html-fill-container{
+          #hhmap {
             border-radius: 12px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
           }
           #grph_top3 {
             height: 100% !important;
@@ -163,37 +162,43 @@ ui <- function() {
             overflow: hidden;
             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
           }
+          .accordion-scroll-container {
+            background-color: #f4f7f9;
+            padding: 0 10px 20px 10px;
+          }
+
+          .accordion {
+            border: none;
+            background: #transparent;
+          }
+
+          .accordion-item {
+            border: none;
+            margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
+            border-radius: 12px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            overflow: hidden;
+          }
+          .accordion-item:first-of-type, .accordion-item:last-of-type {
+            border-radius: 12px;
+          }
+
+          .accordion-item:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0, 0.3);
+          }
+
+          .accordion-button {
+            font-weight: 600;
+            font-size: 16px !important;
+            color: #1a1a1a !important;
+            background-color: #ffffff !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
         "
         )
 
-      #     /* 1. Das gesamte Accordion-Container-Design */
+
-      #     .accordion {
-      #       border: none !important;
-      #       background: transparent !important;
-      #     }
-      #     /* 2. Die einzelnen Accordion-Items (die 'Streifen') */
-      #     .accordion-item {
-      #       border: none !important;
-      #       margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
-      #       border-radius: 15px !important; /* Abgerundete Ecken für jedes Item */
-      #       box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Weicher Schatten */
-      #       overflow: hidden;
-      #       background-color: #ffffff !important;
-      #       transition: box-shadow 0.2s ease;
-      #     }
-      #     .accordion-item:hover {
-      #       transform: none !important;
-      #       box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
-      #     }
-      #     /* Erzeugt dauerhafte Fettschrift für alle Accordion-Titel */
-      #     .accordion-button {
-      #       font-weight: 600 !important; /* Extra fett */
-      #       font-size: 16px !important;
-      #       color: #1a1a1a !important;
-      #       background-color: #ffffff !important;
-      #       border: none !important;
-      #       box-shadow: none !important;
-      #     }
       #     /* Wenn das Accordion ausgeklappt ist */
       #     .accordion-button:not(.collapsed) {
       #       font-weight: 600 !important;