init

src/styles.css

@@ -19,7 +19,8 @@
   /* Neutrale Farben (Light Mode) */
   --color-text: #2c3e50;
   --color-text-light: #7f8c8d;
-  --color-body-bg: #f4f7fa;
+  --color-body-bg: rgb(243, 243, 243);
+  --color-body-bg-lighter: #ffffff;
   --color-body-bg-active: rgb(238, 238, 240);
   --color-body-bg-hover: #f2f3f5;
   --color-surface: #ffffff;
@@ -41,11 +42,32 @@
 }
 
 body.dark-theme {
+  /* Textfarben werden heller */
   --color-text: #ecf0f1;
   --color-text-light: #95a5a6;
+
+  /* 
+   * Die Hierarchie der Hintergrundfarben wird umgekehrt:
+   * Was im Light Mode hell war, ist jetzt dunkel.
+   * Was leicht abgedunkelt war (hover, active), wird jetzt leicht aufgehellt.
+   */
+
+  /* Der Hintergrund für den Body (am dunkelsten) */
   --color-body-bg: #1a202c;
-  --color-body-bg-hover: rgb(34, 41, 56);
+
+  /* Der Hintergrund für Elemente, die darauf liegen (etwas heller) */
   --color-surface: #2d3748;
+
+  /* NEU: Die "hellste" Hintergrundfarbe aus dem Light Mode wird zur dunkelsten */
+  --color-body-bg-lighter: #131720; /* Ein sehr dunkler Ton für besondere Fälle */
+
+  /* Die Hover-Farbe ist jetzt heller als der Standard-Hintergrund */
+  --color-body-bg-hover: #374151; /* ÜBERARBEITET für besseren Kontrast */
+
+  /* NEU: Die "active"-Farbe ist noch einen Schritt heller als die Hover-Farbe */
+  --color-body-bg-active: #4a5568;
+
+  /* Die Rahmenfarbe ist heller als die Oberfläche, um sichtbar zu sein */
   --color-border: #4a5568;
 }
 
@@ -85,16 +107,16 @@ body.no-scroll {
   text-align: center !important;
 }
 
-/* .dashboard-grid {
+.grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
-} */
+}
 
 main {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  /* padding: 1rem; */
   gap: 1rem;
 }
 
@@ -142,12 +164,12 @@ main {
 }
 
 @media (max-width: 1200px) {
-  .dashboard-grid {
+  .grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (max-width: 768px) {
-  .dashboard-grid {
+  .grid {
     grid-template-columns: 1fr;
   }
 }
@@ -166,4 +188,4 @@ main {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-}
+}