Update color palette and styles across components for improved visual consistency

- Changed theme color in index.html to a brighter orange for better aesthetics.
- Introduced a modern color palette in styles.scss for enhanced readability and consistency.
- Updated various components (AppFooter, AppNavigation, DialogWidget, etc.) to utilize new color variables, ensuring a cohesive look throughout the application.
- Adjusted button styles and hover effects for improved user interaction feedback.
- Enhanced background colors and text colors for better contrast and visibility.

frontend/src/assets/styles.scss

@@ -1,3 +1,16 @@
+:root {
+  /* Moderne Farbpalette für bessere Lesbarkeit */
+  --color-primary-orange: #FF8C5A;      /* Helleres, freundliches Orange */
+  --color-primary-orange-hover: #FFA366; /* Noch helleres Orange für Hover */
+  --color-primary-orange-light: #FFF4F0; /* Sehr helles Orange für Hover-Hintergründe */
+  --color-primary-green: #4ADE80;       /* Helles, freundliches Grün - passt zum Orange */
+  --color-primary-green-hover: #6EE7B7; /* Noch helleres Grün für Hover */
+  --color-text-primary: #1F2937;        /* Dunkles Grau für Haupttext (bessere Lesbarkeit) */
+  --color-text-secondary: #5D4037;      /* Dunkles Braun für sekundären Text/Hover */
+  --color-text-on-orange: #000000;       /* Schwarz auf Orange */
+  --color-text-on-green: #000000;        /* Schwarz auf Grün */
+}
+
 html,
 body {
   height: 100%;
@@ -8,7 +21,7 @@ body {
   margin: 0;
   padding: 0;
   background-color: #f4f4f4;
-  color: #333;
+  color: var(--color-text-primary);
 }
 
 a {
@@ -20,18 +33,18 @@ button {
   margin-left: 10px;
   padding: 5px 12px;
   cursor: pointer;
-  background: #F9A22C;
-  color: #000000;
-  border: 1px solid #F9A22C;
+  background: var(--color-primary-orange);
+  color: var(--color-text-on-orange);
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   transition: background 0.05s;
   border: 1px solid transparent;
 }
 
 button:hover {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-text-secondary);
 }
 
 .rc-system {
@@ -49,7 +62,7 @@ button:hover {
 }
 
 .link {
-  color: #F9A22C;
+  color: var(--color-primary-orange);
   cursor: pointer;
 }
 
@@ -67,17 +80,17 @@ h3 {
 .multiselect__option--highlight[data-selected],
 .multiselect__option--highlight[data-deselect] {
   background: none;
-  background-color: #F9A22C;
-  color: #000;
+  background-color: var(--color-primary-orange);
+  color: var(--color-text-on-orange);
 }
 
 span.button {
   padding: 2px 2px;
   margin-left: 4px;
   cursor: pointer;
-  background: #F9A22C;
-  color: #000000;
-  border: 1px solid #F9A22C;
+  background: var(--color-primary-orange);
+  color: var(--color-text-on-orange);
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   transition: background 0.05s;
   border: 1px solid transparent;
@@ -89,9 +102,9 @@ span.button {
 }
 
 span.button:hover {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-text-secondary);
 }
 
 .font-color-gender-male {