diff --git a/ui.R b/ui.R
index 8047d51..d604e2c 100644
--- a/ui.R
+++ b/ui.R
@@ -6,6 +6,159 @@ ui <- function() {
       style = "color: #003064; background: #dae5ed; padding: 20px 0px 20px 20px; background-clip: padding-box; font-family: Lato,Arial,Helvetica,sans-serif;font-weight: 400", #text-align: center
       class = "display-4"
     ),
+    tags$head(
+      tags$style(
+        HTML("
+          .selectize-dropdown-content .option {
+            border-bottom: 1px solid #dee2e6; /* Die Trennlinie */
+            padding: 8px 10px;               /* Abstand zwischen Text und Linie */
+          }
+          .legend {
+            background: white !important; /* Der Hintergrund der Legenden-Box */
+            opacity: 1 !important;        /* Die Box selbst ist nicht transparent */
+          }
+          /* Erzwingt den Dropdown-Pfeil auch bei Multiple Inputs */
+          .selectize-control.multi .selectize-input:after {
+            content: ' ';
+            display: block;
+            position: absolute;
+            top: 50%;
+            right: 15px;
+            margin-top: -3px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 5px 5px 0 5px;
+            border-color: #333 transparent transparent transparent;
+          }
+          /* Platz für den Pfeil lassen, damit Text nicht darunter rutscht */
+          .selectize-control.multi .selectize-input {
+            padding-right: 35px !important;
+          }
+          /* 1. GRUND-LAYOUT */
+          body {
+            background-color: #f4f7f9 !important; /* Ganz leichtes Blaugrau für Tiefe */
+          }
+          /* 2. DIE KARTE (HHMAP) */
+          #hhmap { 
+            border-radius: 20px !important; 
+            box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
+            border: 5px solid white !important;
+            overflow: hidden !important;
+          }
+          /* 3. ALLE CARDS (Diagramme & Container) */
+          .card {
+            border-radius: 20px !important;
+            border: none !important;
+            box-shadow: 0 10px 30px rgba(149, 157, 165, 0.15) !important;
+            background-color: #ffffff !important;
+            transition: box-shadow 0.3s ease;
+          }
+          .card:hover {
+            transform: none !important; /* Sanfter Schwebeprozess beim Hovern */
+          }
+          /* 4. SIDEBAR & INPUTS */
+          .sidebar {
+            background-color: #ffffff !important;
+            border-right: none !important;
+            box-shadow: 5px 0 25px rgba(0,0,0,0.03) !important;
+            border-radius: 0 25px 25px 0 !important;
+          }
+          .selectize-input {
+            border-radius: 12px !important;
+            border: 1px solid #e2e8f0 !important;
+            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02) !important;
+            padding: 10px 15px !important;
+          }
+          .selectize-input.focus {
+            border-color: #3182bd !important;
+            box-shadow: 0 0 0 3px rgba(49, 130, 189, 0.1) !important;
+          }
+          /* 5. BUTTONS (Falls du welche hast) */
+          .btn {
+            border-radius: 12px !important;
+            font-weight: 600 !important;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
+            transition: background-color 0.2s, box-shadow 0.2s !important;
+          }
+          .btn:active {
+            transform: scale(0.98); /* Drück-Effekt */
+          }
+          /* 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; 
+            background-color: #fcfcfc !important;
+            color: #000000 !important;
+          }
+          /* 4. Der Inhaltsbereich (wenn es offen ist) */
+          .accordion-body {
+            padding: 20px !important;
+            font-size: 14px;
+            line-height: 1.6;
+            color: #555;
+            background-color: #ffffff !important;
+            border-top: 1px solid #f0f0f0 !important; /* Dezente Trennung zum Header */
+          }
+          /* Speziell für geschachtelte Accordions (die inneren Ebenen) */
+          .accordion .accordion {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #fcfcfc !important; /* Leichter Kontrast zur äußeren Card */
+            border-radius: 15px;
+          }
+          /* Den Text in den Unterpunkten etwas eleganter machen */
+          .accordion-body p {
+            color: #444;
+            line-height: 1.7;
+            font-size: 15px;
+            padding: 5px;
+          }
+          .accordion-button h4 {
+            font-weight: 600 !important;
+            margin: 0 !important;
+            transition: color 0.2s ease; /* Macht den Farbwechsel beim Klicken weicher */
+            color: #1a1a1a !important;
+          }
+          /* Den aktiven Header der Unterpunkte hervorheben */
+          .accordion-button:not(.collapsed) h4 {
+            color: #2b74a9 !important;
+          }
+          /* 4. Der Hover-Effekt (Damit es beim Drüberfahren reagiert) */
+          .accordion-button:hover, 
+          .accordion-button:hover h4 {
+            color: #666666 !important; /* Ein weiches Dunkelgrau beim Hovern */
+          }
+        ")
+      )
+    ),
     navset_card_tab(
       nav_panel("Karte",
         page_sidebar(