From c6e9612ceb91a5307ef02c2fc4fdaf79e430ca9b Mon Sep 17 00:00:00 2001
From: "Tizian.Breuch" <breuchtizian@lebk24.de>
Date: Mon, 8 Sep 2025 14:54:15 +0200
Subject: [PATCH] styling

---
 src/app/app.component.html                    |    3 +-
 src/app/app.component.ts                      |    3 +-
 .../demo/components/demo/demo.component.html  |  529 ++++----
 .../demo/components/demo/demo.component.ts    |  139 +-
 .../snackbar-container.component.css          |   17 +
 .../snackbar-container.component.html         |    8 +
 .../snackbar-container.component.ts           |   46 +
 .../snackbar/snackbar.component.css           |   46 +
 .../snackbar/snackbar.component.html          |   10 +
 .../components/snackbar/snackbar.component.ts |   17 +
 .../snackbar/services/snackbar.service.ts     |   55 +
 src/styles.css                                | 1203 +++++++----------
 12 files changed, 1049 insertions(+), 1027 deletions(-)
 create mode 100644 src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.css
 create mode 100644 src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.html
 create mode 100644 src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.ts
 create mode 100644 src/app/shared/snackbar/components/snackbar/snackbar.component.css
 create mode 100644 src/app/shared/snackbar/components/snackbar/snackbar.component.html
 create mode 100644 src/app/shared/snackbar/components/snackbar/snackbar.component.ts
 create mode 100644 src/app/shared/snackbar/services/snackbar.service.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 66364fa..211245e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
-<router-outlet style="height: 100vh; width: 100vw;"></router-outlet>
+<router-outlet></router-outlet>
+<app-snackbar-container></app-snackbar-container>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b412f0c..c41fa4d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SnackbarContainerComponent } from './shared/snackbar/components/snackbar-container/snackbar-container.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet,SnackbarContainerComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/src/app/features/demo/components/demo/demo.component.html b/src/app/features/demo/components/demo/demo.component.html
index 328545b..d852fb4 100644
--- a/src/app/features/demo/components/demo/demo.component.html
+++ b/src/app/features/demo/components/demo/demo.component.html
@@ -1,15 +1,15 @@
-<!-- FINALE demo.component.html -->
+<!-- =================================================================================
+    FINALES & VOLLSTÄNDIGES DEMO-LAYOUT (VERSION 3.0)
+================================================================================== -->
 <div class="dashboard-container">
   <!-- =================================================================== -->
-  <!-- SIDEBAR                                                             -->
+  <!-- 1. SIDEBAR                                                          -->
   <!-- =================================================================== -->
   <aside class="sidebar">
-    <div class="sidebar-header">
-      <h1 class="sidebar-title">CustomDash</h1>
-    </div>
+    <div class="sidebar-header"><h1 class="sidebar-title">CustomDash</h1></div>
     <nav class="sidebar-nav">
-      <a href="#" class="nav-item active">
-        <svg
+      <a href="#" class="nav-item active"
+        ><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -21,12 +21,11 @@
           stroke-linejoin="round"
         >
           <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-          <polyline points="9 22 9 12 15 12 15 22"></polyline>
-        </svg>
-        <span>Übersicht</span>
-      </a>
-      <a href="#" class="nav-item">
-        <svg
+          <polyline points="9 22 9 12 15 12 15 22"></polyline></svg
+        ><span>Übersicht</span></a
+      >
+      <a href="#" class="nav-item"
+        ><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -39,12 +38,11 @@
         >
           <line x1="18" y1="20" x2="18" y2="10"></line>
           <line x1="12" y1="20" x2="12" y2="4"></line>
-          <line x1="6" y1="20" x2="6" y2="14"></line>
-        </svg>
-        <span>Analysen</span>
-      </a>
-      <a href="#" class="nav-item">
-        <svg
+          <line x1="6" y1="20" x2="6" y2="14"></line></svg
+        ><span>Analysen</span></a
+      >
+      <a href="#" class="nav-item"
+        ><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -57,14 +55,13 @@
         >
           <path
             d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-          ></path>
-        </svg>
-        <span>Berichte</span>
-      </a>
+          ></path></svg
+        ><span>Berichte</span></a
+      >
     </nav>
     <div class="sidebar-footer">
-      <a href="#" class="nav-item">
-        <svg
+      <a href="#" class="nav-item"
+        ><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -77,15 +74,14 @@
         >
           <path
             d="M10.3 21.7c.9.9 2.5.9 3.4 0l6.9-6.9c.9-.9.9-2.5 0-3.4l-6.9-6.9c-.9-.9-2.5-.9-3.4 0l-6.9 6.9c-.9.9-.9-2.5 0 3.4l6.9 6.9z"
-          ></path>
-        </svg>
-        <span>Einstellungen</span>
-      </a>
+          ></path></svg
+        ><span>Einstellungen</span></a
+      >
     </div>
   </aside>
 
   <!-- =================================================================== -->
-  <!-- HAUPTINHALT                                                         -->
+  <!-- 2. HAUPTINHALT                                                      -->
   <!-- =================================================================== -->
   <main class="main-content">
     <header class="main-header">
@@ -102,14 +98,13 @@
           stroke-linejoin="round"
         >
           <circle cx="11" cy="11" r="8"></circle>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-        </svg>
-        <input type="text" placeholder="Dashboard durchsuchen..." />
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg
+        ><input type="text" placeholder="Dashboard durchsuchen..." />
       </div>
       <div class="header-actions">
         <div class="theme-switcher">
-          <label for="theme-toggle">Dark Mode</label>
-          <input
+          <label for="theme-toggle">Dark Mode</label
+          ><input
             type="checkbox"
             id="theme-toggle"
             class="slider-checkbox"
@@ -132,7 +127,7 @@
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            viewBox="0 0 24 24"
+            ViewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -154,7 +149,7 @@
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            viewBox="0 0 24 24"
+            ViewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -178,7 +173,7 @@
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            viewBox="0 0 24 24"
+            ViewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -201,7 +196,7 @@
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            viewBox="0 0 24 24"
+            ViewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -230,24 +225,21 @@
         </div>
       </section>
 
-      <!-- =================================================================== -->
-      <!-- Sektion: Datentabelle (Final & Korrigiert)                          -->
-      <!-- =================================================================== -->
+      <!-- Sektion: Datentabelle -->
       <section class="card grid-col-span-2">
         <h3 class="card-header">Letzte Bestellungen</h3>
-
         <div class="table-container">
           <table class="modern-table">
             <thead>
               <tr>
                 <th class="sortable">
-                  <span>Kunde</span>
-                  <svg
+                  <span>Kunde</span
+                  ><svg
                     class="sort-icon"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="16"
-                    viewBox="0 0 24 24"
+                    ViewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
@@ -267,7 +259,6 @@
               </tr>
             </thead>
             <tbody>
-              <!-- Zeile 1 -->
               <tr>
                 <td>
                   <div class="user-cell">
@@ -282,7 +273,6 @@
                   </div>
                 </td>
                 <td><span class="mono">#10543</span></td>
-                <!-- HIER WURDE DIE KORREKTE STATUS-PILLE HINZUGEFÜGT -->
                 <td>
                   <span class="status-pill pill-success">Abgeschlossen</span>
                 </td>
@@ -293,7 +283,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -304,14 +294,13 @@
                         d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                       ></path>
                       <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                  </button>
-                  <button class="btn btn-icon" data-tooltip="Bearbeiten">
+                    </svg></button
+                  ><button class="btn btn-icon" data-tooltip="Bearbeiten">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -324,11 +313,33 @@
                       <path
                         d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                       ></path>
+                    </svg></button
+                  ><button
+                    class="btn btn-icon btn-icon-danger"
+                    data-tooltip="Löschen"
+                    (click)="openDialog()"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      ViewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="3 6 5 6 21 6"></polyline>
+                      <path
+                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                      ></path>
+                      <line x1="10" y1="11" x2="10" y2="17"></line>
+                      <line x1="14" y1="11" x2="14" y2="17"></line>
                     </svg>
                   </button>
                 </td>
               </tr>
-              <!-- Zeile 2 -->
               <tr>
                 <td>
                   <div class="user-cell">
@@ -343,7 +354,6 @@
                   </div>
                 </td>
                 <td><span class="mono">#10542</span></td>
-                <!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
                 <td>
                   <span class="status-pill pill-warning">In Bearbeitung</span>
                 </td>
@@ -354,7 +364,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -365,14 +375,13 @@
                         d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                       ></path>
                       <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                  </button>
-                  <button class="btn btn-icon" data-tooltip="Bearbeiten">
+                    </svg></button
+                  ><button class="btn btn-icon" data-tooltip="Bearbeiten">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -385,11 +394,33 @@
                       <path
                         d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                       ></path>
+                    </svg></button
+                  ><button
+                    class="btn btn-icon btn-icon-danger"
+                    data-tooltip="Löschen"
+                    (click)="openDialog()"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      ViewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="3 6 5 6 21 6"></polyline>
+                      <path
+                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                      ></path>
+                      <line x1="10" y1="11" x2="10" y2="17"></line>
+                      <line x1="14" y1="11" x2="14" y2="17"></line>
                     </svg>
                   </button>
                 </td>
               </tr>
-              <!-- Zeile 3 -->
               <tr>
                 <td>
                   <div class="user-cell">
@@ -404,7 +435,6 @@
                   </div>
                 </td>
                 <td><span class="mono">#10541</span></td>
-                <!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
                 <td><span class="status-pill pill-danger">Storniert</span></td>
                 <td class="text-right amount">€ 87,00</td>
                 <td class="actions-cell">
@@ -413,7 +443,7 @@
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -424,14 +454,13 @@
                         d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                       ></path>
                       <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                  </button>
-                  <button class="btn btn-icon" data-tooltip="Bearbeiten">
+                    </svg></button
+                  ><button class="btn btn-icon" data-tooltip="Bearbeiten">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
@@ -444,65 +473,29 @@
                       <path
                         d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                       ></path>
-                    </svg>
-                  </button>
-                </td>
-              </tr>
-              <!-- Zeile 4 (Bonus) -->
-              <tr>
-                <td>
-                  <div class="user-cell">
-                    <img
-                      src="https://i.pravatar.cc/40?u=anna"
-                      alt="Avatar Anna Kurz"
-                    />
-                    <div>
-                      <div class="user-name">Anna Kurz</div>
-                      <div class="user-email">anna.kurzATexample.com</div>
-                    </div>
-                  </div>
-                </td>
-                <td><span class="mono">#10540</span></td>
-                <!-- HIER WURDE DIE KLASSE ZU status-pill GEÄNDERT -->
-                <td><span class="status-pill pill-info">Versendet</span></td>
-                <td class="text-right amount">€ 214,20</td>
-                <td class="actions-cell">
-                  <button class="btn btn-icon" data-tooltip="Details anzeigen">
+                    </svg></button
+                  ><button
+                    class="btn btn-icon btn-icon-danger"
+                    data-tooltip="Löschen"
+                    (click)="openDialog()"
+                  >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="20"
                       height="20"
-                      viewBox="0 0 24 24"
+                      ViewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
                       stroke-width="2"
                       stroke-linecap="round"
                       stroke-linejoin="round"
                     >
+                      <polyline points="3 6 5 6 21 6"></polyline>
                       <path
-                        d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-                      ></path>
-                      <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                  </button>
-                  <button class="btn btn-icon" data-tooltip="Bearbeiten">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <path
-                        d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
-                      ></path>
-                      <path
-                        d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                       ></path>
+                      <line x1="10" y1="11" x2="10" y2="17"></line>
+                      <line x1="14" y1="11" x2="14" y2="17"></line>
                     </svg>
                   </button>
                 </td>
@@ -552,7 +545,7 @@
         </div>
       </section>
       <section class="card grid-col-span-2">
-        <h3 class="card-header">Buttons, Chips & Badges</h3>
+        <h3 class="card-header">Buttons, Chips & Interaktion</h3>
         <div class="card-body component-grid">
           <div class="button-group">
             <button class="btn btn-primary">Primary</button
@@ -564,7 +557,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
-                viewBox="0 0 24 24"
+                ViewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
@@ -592,7 +585,7 @@
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
-                viewBox="0 0 24 24"
+                ViewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
@@ -604,33 +597,33 @@
               ><span class="badge-dot">3</span>
             </div>
           </div>
+          <div class="menu-container" [class.open]="isMenuOpen">
+            <button
+              class="btn btn-secondary"
+              (click)="isMenuOpen = !isMenuOpen"
+            >
+              Menü öffnen
+            </button>
+            <div class="menu-panel card">
+              <a href="#" class="menu-item">Bearbeiten</a
+              ><a href="#" class="menu-item">Kopieren</a>
+              <hr class="divider" />
+              <a href="#" class="menu-item menu-item-danger">Löschen</a>
+            </div>
+          </div>
         </div>
       </section>
       <section class="card grid-col-span-2">
         <h3 class="card-header">Indikatoren & Feedback</h3>
-        <div class="card-body component-grid">
-          <div>
-            <label>Fortschritt</label>
-            <div class="progress-bar">
-              <div class="progress-bar-value" style="width: 75%"></div>
-            </div>
-          </div>
-          <div class="spinner-container">
-            <div class="progress-spinner"></div>
-          </div>
-          <div class="alert alert-success">
-            <strong>Erfolg!</strong> Ihre Änderungen wurden gespeichert.
-          </div>
-          <div class="alert alert-danger">
-            <strong>Fehler!</strong> Bitte füllen Sie alle Felder aus.
-          </div>
+        <div class="button-group" style="align-items: center">
+          <button class="btn btn-secondary" (click)="triggerSnackbar()">
+            Snackbar anzeigen
+          </button>
         </div>
       </section>
-
-      <!-- Karte: Navigation & Layout -->
       <section class="card grid-col-span-2">
         <h3 class="card-header">Navigation & Layout</h3>
-        <div class="card-body">
+        <div class="card-body component-grid">
           <div class="tab-group">
             <button class="tab-link active">Profil</button
             ><button class="tab-link">Konto</button
@@ -640,16 +633,20 @@
             <p>Hier wäre der Inhalt für den aktiven Tab "Profil".</p>
           </div>
           <hr class="divider" />
-          <!-- HIER IST DIE WICHTIGE ÄNDERUNG FÜR DIE ANIMATION -->
-          <details class="expansion-panel">
-            <summary class="expansion-panel-header">
+          <div class="expansion-panel" [class.is-open]="isPanelOpen">
+            <!-- Das <summary> wird zu einem <button> für bessere Kontrolle & Zugänglichkeit -->
+            <button
+              type="button"
+              class="expansion-panel-header"
+              (click)="isPanelOpen = !isPanelOpen"
+            >
               <span>Weitere Details anzeigen</span>
               <svg
                 class="expansion-panel-icon"
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
-                viewBox="0 0 24 24"
+                ViewBox="0 0 0 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
@@ -658,7 +655,9 @@
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
-            </summary>
+            </button>
+
+            <!-- Der Inhalt bleibt strukturell gleich -->
             <div class="expansion-panel-content-wrapper">
               <div class="expansion-panel-content">
                 Hier steht der Inhalt, der ein- und ausgeklappt werden kann.
@@ -667,129 +666,151 @@
                 eget.
               </div>
             </div>
-          </details>
+          </div>
+          <div class="stepper">
+            <div class="step step-complete">
+              <div class="step-icon">✓</div>
+              <span>Profil</span>
+            </div>
+            <div class="step-connector"></div>
+            <div class="step step-active">
+              <div class="step-icon">2</div>
+              <span>Konto</span>
+            </div>
+            <div class="step-connector"></div>
+            <div class="step">
+              <div class="step-icon">3</div>
+              <span>Abschluss</span>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Hierarchische Daten & Paginierung</h3>
+        <div class="card-body component-grid">
+          <ul class="tree">
+            <li class="tree-node">
+              <details open>
+                <summary class="tree-node-label">Ordner 1</summary>
+                <ul class="tree-node-children">
+                  <li class="tree-node">
+                    <span class="tree-node-label">Datei 1.1</span>
+                  </li>
+                  <li class="tree-node">
+                    <span class="tree-node-label">Datei 1.2</span>
+                  </li>
+                </ul>
+              </details>
+            </li>
+            <li class="tree-node">
+              <details>
+                <summary class="tree-node-label">Ordner 2</summary>
+                <ul class="tree-node-children">
+                  <li class="tree-node">
+                    <span class="tree-node-label">Datei 2.1</span>
+                  </li>
+                </ul>
+              </details>
+            </li>
+          </ul>
+          <div class="paginator">
+            <span class="paginator-info">1-10 von 100</span>
+            <div class="paginator-controls">
+              <button class="btn btn-icon">&lt;</button
+              ><button class="btn btn-icon">&gt;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Ladezustände (Skeleton)</h3>
+        <div class="card-body component-grid">
+          <div class="skeleton-card card">
+            <div class="skeleton-item skeleton-avatar"></div>
+            <div class="skeleton-content">
+              <div class="skeleton-item skeleton-line"></div>
+              <div class="skeleton-item skeleton-line" style="width: 70%"></div>
+            </div>
+          </div>
         </div>
       </section>
     </div>
     <!-- Ende .dashboard-grid -->
   </main>
-</div>
-<!-- =================================================================== -->
-<!-- DYNAMISCHER DIALOG (Standardmäßig unsichtbar)                       -->
-<!-- =================================================================== -->
-<div 
-  class="dialog-backdrop" 
-  *ngIf="isDialogOpen" 
-  (click)="closeDialog()"
-  [@fade]> <!-- Angular Animation -->
 
-  <!-- (click.stop) verhindert, dass der Klick auf den Container den Backdrop schließt -->
-  <div class="dialog-container card" (click)="$event.stopPropagation()" [@slideIn]>
-    
-    <div class="dialog-header">
-      <h3 class="dialog-title">Aktion bestätigen</h3>
-      <!-- (click) ruft die closeDialog Methode auf -->
-      <button class="btn btn-icon" (click)="closeDialog()" data-tooltip="Schließen">&times;</button>
-    </div>
+  <!-- =================================================================== -->
+  <!-- 3. OVERLAYS (Dynamisch, außerhalb des Haupt-Layouts)              -->
+  <!-- =================================================================== -->
 
-    <div class="dialog-content">
-      <div class="dialog-icon-container">
-        <!-- Ein Icon, um die Art des Dialogs zu verdeutlichen -->
-        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+  <div
+    class="dialog-backdrop"
+    *ngIf="isDialogOpen"
+    (click)="closeDialog()"
+    [@fade]
+  >
+    <div
+      class="dialog-container card"
+      (click)="$event.stopPropagation()"
+      [@slideIn]
+    >
+      <div class="dialog-header">
+        <h3 class="dialog-title">Aktion bestätigen</h3>
+        <button
+          class="btn btn-icon"
+          (click)="closeDialog()"
+          data-tooltip="Schließen"
+        >
+          &times;
+        </button>
+      </div>
+      <div class="dialog-content">
+        <div class="dialog-icon-container">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            ViewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+            ></path>
+            <line x1="12" y1="9" x2="12" y2="13"></line>
+            <line x1="12" y1="17" x2="12.01" y2="17"></line>
+          </svg>
+        </div>
+        <p>
+          Sind Sie sicher, dass Sie die Bestellung
+          <strong>#10543</strong> löschen möchten? Diese Aktion kann nicht
+          rückgängig gemacht werden.
+        </p>
+      </div>
+      <div class="dialog-actions">
+        <button class="btn btn-stroked" (click)="closeDialog()">
+          Abbrechen</button
+        ><button class="btn btn-danger" (click)="closeDialog()">
+          Ja, endgültig löschen
+        </button>
       </div>
-      <p>Sind Sie sicher, dass Sie die Bestellung <strong>#10543</strong> löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.</p>
     </div>
-
-    <div class="dialog-actions">
-      <!-- (click) ruft die closeDialog Methode auf -->
-      <button class="btn btn-stroked" (click)="closeDialog()">Abbrechen</button>
-      <button class="btn btn-danger" (click)="closeDialog()">Ja, endgültig löschen</button>
-    </div>
-
-  </div>
-</div>
-
-
-
-<div class="menu-container">
-  <button class="btn btn-icon">...</button> <!-- Der Auslöser -->
-  
-  <div class="menu-panel card"> <!-- Das Panel, das erscheint -->
-    <a href="#" class="menu-item">Bearbeiten</a>
-    <a href="#" class="menu-item">Kopieren</a>
-    <hr class="divider">
-    <a href="#" class="menu-item menu-item-danger">Löschen</a>
-  </div>
-</div>
-
-<div class="skeleton-card card">
-  <div class="skeleton-item skeleton-avatar"></div>
-  <div class="skeleton-content">
-    <div class="skeleton-item skeleton-line"></div>
-    <div class="skeleton-item skeleton-line" style="width: 70%;"></div>
-  </div>
-</div>
-
-<div class="stepper">
-  <div class="step step-complete"><div class="step-icon">✓</div><span>Profil</span></div>
-  <div class="step-connector"></div>
-  <div class="step step-active"><div class="step-icon">2</div><span>Konto</span></div>
-  <div class="step-connector"></div>
-  <div class="step"><div class="step-icon">3</div><span>Abschluss</span></div>
-</div>
-
-<div class="paginator">
-  <span class="paginator-info">1-10 von 100</span>
-  <div class="paginator-controls">
-    <button class="btn btn-icon">&lt;</button>
-    <button class="btn btn-icon">&gt;</button>
-  </div>
-</div>
-
-<ul class="tree">
-  <li class="tree-node">
-    <details open>
-      <summary class="tree-node-label">Ordner 1</summary>
-      <ul class="tree-node-children">
-        <li class="tree-node"><span class="tree-node-label">Datei 1.1</span></li>
-        <li class="tree-node"><span class="tree-node-label">Datei 1.2</span></li>
-      </ul>
-    </details>
-  </li>
-</ul>
-
-<div *ngIf="isLoading; else content">
-  <div class="skeleton-card">...</div>
-</div>
-<ng-template #content>
-  <!-- Echte Daten hier -->
-</ng-template>
-
- <button class="btn btn-icon btn-icon-danger" data-tooltip="Löschen" (click)="openDialog()">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-  </button>
-
-      
-<!-- =================================================================== -->
-<!-- DYNAMISCHE SNACKBAR (Standardmäßig unsichtbar)                      -->
-<!-- =================================================================== -->
-<div 
-  class="snackbar" 
-  *ngIf="isSnackbarVisible"
-  [@fadeSlideIn]> <!-- Angular Animation -->
-
-  <!-- Das Icon ist optional, wertet die Snackbar aber auf -->
-  <div class="snackbar-icon-container">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
   </div>
 
-  <span class="snackbar-message">{{ snackbarMessage }}</span>
+  <!-- <div class="snackbar-container-wrapper" [class.position-top]="snackbarPosition === 'top'">
+  <div 
+    *ngFor="let snack of snackbars; let i = index"
+    class="snackbar"
+    [style]="getSnackbarStyle(i, snack.state)">
 
-  <button class="btn btn-icon snackbar-close-btn" (click)="closeSnackbar()" data-tooltip="Schließen">
-    &times;
-  </button>
-  
+    <div class="snackbar-icon-container">icon</div>
+    <span class="snackbar-message">{{ snack.message }}</span>
+    <button class="btn btn-icon snackbar-close-btn" (click)="closeSnackbar(snack.id)">
+      &times;
+    </button>
+    
+  </div>
+</div> -->
 </div>
-
-  
-
diff --git a/src/app/features/demo/components/demo/demo.component.ts b/src/app/features/demo/components/demo/demo.component.ts
index d40b56c..d7a7ebc 100644
--- a/src/app/features/demo/components/demo/demo.component.ts
+++ b/src/app/features/demo/components/demo/demo.component.ts
@@ -1,58 +1,93 @@
-import { Component, Renderer2 } from '@angular/core';
+import { Component, Renderer2, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+import { SnackbarService } from '../../../../shared/snackbar/services/snackbar.service';
 
 @Component({
   selector: 'app-demo',
+  standalone: true, // Hinzugefügt für moderne, eigenständige Komponenten
   imports: [CommonModule],
   templateUrl: './demo.component.html',
   styleUrl: './demo.component.css',
-   animations: [
+  animations: [
     trigger('fade', [
       transition(':enter', [
         style({ opacity: 0 }),
-        animate('300ms ease-out', style({ opacity: 1 }))
+        animate('300ms ease-out', style({ opacity: 1 })),
       ]),
-      transition(':leave', [
-        animate('300ms ease-in', style({ opacity: 0 }))
-      ])
+      transition(':leave', [animate('300ms ease-in', style({ opacity: 0 }))]),
     ]),
     trigger('slideIn', [
       transition(':enter', [
         style({ transform: 'translateY(20px)', opacity: 0 }),
-        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+        animate(
+          '300ms ease-out',
+          style({ transform: 'translateY(0)', opacity: 1 })
+        ),
       ]),
       transition(':leave', [
-        animate('300ms ease-in', style({ transform: 'translateY(20px)', opacity: 0 }))
-      ])
+        animate(
+          '300ms ease-in',
+          style({ transform: 'translateY(20px)', opacity: 0 })
+        ),
+      ]),
     ]),
-      trigger('fadeSlideIn', [
+    trigger('fadeSlideIn', [
       transition(':enter', [
         style({ bottom: '-100px', opacity: 0 }),
-        animate('300ms ease-out', style({ bottom: '2rem', opacity: 1 }))
+        animate('300ms ease-out', style({ bottom: '2rem', opacity: 1 })),
       ]),
       transition(':leave', [
-        animate('300ms ease-in', style({ bottom: '-100px', opacity: 0 }))
-      ])
-    ])
-  ]
+        animate('300ms ease-in', style({ bottom: '-100px', opacity: 0 })),
+      ]),
+    ]),
+  ],
 })
-export class DemoComponent {
-  // 1. Eine Eigenschaft, die den aktuellen Zustand des Dark Mode speichert.
-  //    Sie ist an [checked]="isDarkMode" in der HTML gebunden.
+export class DemoComponent implements OnInit {
+  // ===================================================================
+  // 1. ZUSTANDS-EIGENSCHAFTEN DER KOMPONENTE
+  // ===================================================================
+
   isDarkMode = false;
-  isLoading = true;
-  // 2. Wir "injizieren" den Renderer2. Das ist der sichere Weg in Angular,
-  //    um das DOM (z.B. den <body>-Tag) zu manipulieren.
-  constructor(private renderer: Renderer2) {}
+  isLoading = true; // Startet im Ladezustand, um Skeleton Loader zu zeigen
+  isDialogOpen = false;
+  isSnackbarVisible = false;
+  isMenuOpen = false; // Hinzugefügt für das interaktive Menü
+  isPanelOpen = false;
+
+  snackbarMessage = '';
+  private snackbarTimer: any;
+
+  // Eindeutige Variablen für jedes Menü
+  isComponentMenuOpen = false;
+
+  // ===================================================================
+  // 2. DEPENDENCY INJECTION & LIFECYCLE
+  // ===================================================================
+
+  constructor(
+    private renderer: Renderer2,
+    private snackbarService: SnackbarService
+  ) {}
+
+  /**
+   * Wird einmalig nach der Initialisierung der Komponente aufgerufen.
+   * Perfekt, um initiale Daten zu laden.
+   */
+  ngOnInit(): void {
+    // Simuliert das Laden von Daten. Nach 2 Sekunden wird der Inhalt angezeigt.
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 2000);
+  }
+
+  // ===================================================================
+  // 3. METHODEN FÜR DAS THEME-MANAGEMENT
+  // ===================================================================
 
-  // 3. Das ist die Funktion, die vom (change)-Event des Schalters aufgerufen wird.
   toggleTheme(): void {
-    // Kehre den aktuellen Zustand um (true -> false, false -> true)
     this.isDarkMode = !this.isDarkMode;
-
-    // Überprüfe den neuen Zustand und füge die Klasse 'dark-theme'
-    // zum <body>-Tag hinzu oder entferne sie.
     if (this.isDarkMode) {
       this.renderer.addClass(document.body, 'dark-theme');
     } else {
@@ -60,54 +95,28 @@ export class DemoComponent {
     }
   }
 
-  isDialogOpen = false;
+  // ===================================================================
+  // 4. METHODEN FÜR DEN DIALOG
+  // ===================================================================
 
-  // 2. Eine Methode, um den Dialog zu öffnen
   openDialog(): void {
     this.isDialogOpen = true;
-    // Optional: Verhindert das Scrollen der Seite im Hintergrund
-    this.renderer.addClass(document.body, 'no-scroll'); 
+    this.renderer.addClass(document.body, 'no-scroll');
   }
 
-  // 3. Eine Methode, um den Dialog zu schließen
   closeDialog(): void {
     this.isDialogOpen = false;
-    // Optional: Gibt das Scrollen der Seite wieder frei
     this.renderer.removeClass(document.body, 'no-scroll');
   }
 
+  // demo.component.ts
 
-    isSnackbarVisible = false;
-  snackbarMessage = '';
-  private snackbarTimer: any; // Hier speichern wir den Timer
+  // ===================================================================
+  // FINALE, ROBUSTE METHODEN FÜR DIE SNACKBAR (VERSION 5.0)
+  // ===================================================================
 
-  // 2. Eine Methode, um die Snackbar anzuzeigen
-  //    Wir übergeben eine Nachricht, um sie wiederverwendbar zu machen
-  showSnackbar(message: string): void {
-    // Falls bereits eine Snackbar sichtbar ist, schließen wir sie zuerst
-    if (this.isSnackbarVisible) {
-      this.closeSnackbar();
-      // Kurze Verzögerung, damit die Animation sauber neustartet
-      setTimeout(() => this.displaySnackbar(message), 300);
-    } else {
-      this.displaySnackbar(message);
-    }
+  triggerSnackbar(): void {
+    const time = new Date().toLocaleTimeString();
+    this.snackbarService.show('Neues Ereignis um ' + time);
   }
-
-  private displaySnackbar(message: string): void {
-    this.snackbarMessage = message;
-    this.isSnackbarVisible = true;
-
-    // Setze einen Timer, um die Snackbar nach 5 Sekunden automatisch zu schließen
-    this.snackbarTimer = setTimeout(() => {
-      this.closeSnackbar();
-    }, 5000); // 5000 Millisekunden = 5 Sekunden
-  }
-
-  // 3. Eine Methode, um die Snackbar zu schließen (manuell oder durch Timer)
-  closeSnackbar(): void {
-    // Lösche den Timer, falls der Benutzer manuell schließt
-    clearTimeout(this.snackbarTimer);
-    this.isSnackbarVisible = false;
-}
 }
diff --git a/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.css b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.css
new file mode 100644
index 0000000..1030818
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.css
@@ -0,0 +1,17 @@
+/* Stile, die NUR für den Container gelten */
+.snackbar-container-wrapper {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1050;
+  width: 350px;
+  max-width: 90vw;
+  height: 300px;
+  pointer-events: none;
+}
+
+.snackbar-container-wrapper.position-top {
+  bottom: auto;
+  top: 2rem;
+}
\ No newline at end of file
diff --git a/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.html b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.html
new file mode 100644
index 0000000..afd1b67
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.html
@@ -0,0 +1,8 @@
+<div class="snackbar-container-wrapper" [class.position-top]="(position$ | async) === 'top'">
+  <app-snackbar
+    *ngFor="let snack of (snackbars$ | async); let i = index"
+    [message]="snack.message"
+    [style]="getSnackbarStyle(i, snack.state, (position$ | async)!)"
+    (close)="closeSnackbar(snack.id)">
+  </app-snackbar>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.ts b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.ts
new file mode 100644
index 0000000..1951b4b
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar-container/snackbar-container.component.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { Snackbar, SnackbarService } from '../../services/snackbar.service';
+import { SnackbarComponent } from '../snackbar/snackbar.component';
+
+@Component({
+  selector: 'app-snackbar-container',
+  standalone: true,
+  imports: [CommonModule, SnackbarComponent],
+  templateUrl: './snackbar-container.component.html',
+  styleUrl: './snackbar-container.component.css'
+})
+export class SnackbarContainerComponent {
+  snackbars$: Observable<Snackbar[]>;
+  position$: Observable<'top' | 'bottom'>;
+  
+  constructor(private snackbarService: SnackbarService) {
+    this.snackbars$ = this.snackbarService.snackbars$;
+    this.position$ = this.snackbarService.position$;
+  }
+
+  // Diese Methode gehört hierher, da der Container die Position aller Kinder kennen muss.
+  getSnackbarStyle(index: number, state: 'visible' | 'fading', position: 'top' | 'bottom'): { [key: string]: any } {
+    const snackbarHeight = 75; 
+    const verticalOffset = index * snackbarHeight;
+    const positionProperty = position === 'bottom' ? 'bottom' : 'top';
+
+    const opacity = 1 - (index * 0.2);
+    const scale = 1 - (index * 0.02);
+
+    const visibleStyle = {
+      [positionProperty]: `${verticalOffset}px`,
+      'opacity': opacity,
+      'transform': `scale(${scale})`,
+      'z-index': 1000 - index
+    };
+    const fadingStyle = { ...visibleStyle, 'opacity': 0, 'transform': 'scale(0.8)' };
+    
+    return state === 'visible' ? visibleStyle : fadingStyle;
+  }
+
+  closeSnackbar(id: number): void {
+    this.snackbarService.close(id);
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/snackbar/components/snackbar/snackbar.component.css b/src/app/shared/snackbar/components/snackbar/snackbar.component.css
new file mode 100644
index 0000000..d6c00de
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar/snackbar.component.css
@@ -0,0 +1,46 @@
+/* Stile, die NUR für eine einzelne Snackbar gelten */
+:host {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--box-shadow-md);
+  pointer-events: auto;
+  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.snackbar-icon-container {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background-color: #dcfce7;
+  color: #166534;
+}
+:host-context(body.dark-theme) .snackbar-icon-container {
+  background-color: #166534;
+  color: #dcfce7;
+}
+.snackbar-message {
+  flex-grow: 1;
+  font-weight: 500;
+}
+.snackbar-close-btn {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  color: var(--color-text-light);
+}
+.snackbar-close-btn:hover {
+  background-color: var(--color-body-bg);
+}
diff --git a/src/app/shared/snackbar/components/snackbar/snackbar.component.html b/src/app/shared/snackbar/components/snackbar/snackbar.component.html
new file mode 100644
index 0000000..8cfcd28
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar/snackbar.component.html
@@ -0,0 +1,10 @@
+<div class="snackbar-icon-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+  </svg>
+</div>
+<span class="snackbar-message">{{ message }}</span>
+<button class="btn btn-icon snackbar-close-btn" (click)="onClose()" data-tooltip="Schließen">
+  &times;
+</button>
\ No newline at end of file
diff --git a/src/app/shared/snackbar/components/snackbar/snackbar.component.ts b/src/app/shared/snackbar/components/snackbar/snackbar.component.ts
new file mode 100644
index 0000000..612d815
--- /dev/null
+++ b/src/app/shared/snackbar/components/snackbar/snackbar.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-snackbar',
+  standalone: true,
+  imports: [],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.css'
+})
+export class SnackbarComponent {
+  @Input() message: string = '';
+  @Output() close = new EventEmitter<void>();
+
+  onClose() {
+    this.close.emit();
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/snackbar/services/snackbar.service.ts b/src/app/shared/snackbar/services/snackbar.service.ts
new file mode 100644
index 0000000..977bea0
--- /dev/null
+++ b/src/app/shared/snackbar/services/snackbar.service.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+// Exportiere das Interface, damit es wiederverwendbar ist
+export interface Snackbar {
+  id: number;
+  message: string;
+  state: 'visible' | 'fading';
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnackbarService {
+  // BehaviorSubject hält den aktuellen Zustand und benachrichtigt alle "Zuhörer"
+  private snackbarsSubject = new BehaviorSubject<Snackbar[]>([]);
+  snackbars$: Observable<Snackbar[]> = this.snackbarsSubject.asObservable();
+  
+  // Die Position wird ebenfalls hier als globaler Zustand verwaltet
+  private positionSubject = new BehaviorSubject<'top' | 'bottom'>('top');
+  position$: Observable<'top' | 'bottom'> = this.positionSubject.asObservable();
+
+  private nextId = 0;
+
+  // Öffentliche Methode zum Anzeigen einer Snackbar
+  show(message: string): void {
+    const newSnackbar: Snackbar = { id: this.nextId++, message, state: 'visible' };
+    const currentSnackbars = [newSnackbar, ...this.snackbarsSubject.value];
+    this.snackbarsSubject.next(currentSnackbars);
+
+    // Timer zum automatischen Schließen
+    setTimeout(() => this.close(newSnackbar.id), 5000);
+  }
+
+  // Öffentliche Methode zum Schließen einer Snackbar
+  close(id: number): void {
+    let currentSnackbars = this.snackbarsSubject.value;
+    const index = currentSnackbars.findIndex(s => s.id === id);
+
+    if (index > -1 && currentSnackbars[index].state === 'visible') {
+      currentSnackbars[index].state = 'fading';
+      this.snackbarsSubject.next([...currentSnackbars]);
+
+      setTimeout(() => {
+        currentSnackbars = this.snackbarsSubject.value.filter(s => s.id !== id);
+        this.snackbarsSubject.next(currentSnackbars);
+      }, 100); // Muss zur CSS-Dauer passen
+    }
+  }
+  
+  // Öffentliche Methode zum Ändern der Position
+  setPosition(position: 'top' | 'bottom'): void {
+    this.positionSubject.next(position);
+  }
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 930f9ff..87f2a03 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,37 +1,27 @@
-/* You can add global styles to this file, and also import other style files */
-@import "tailwindcss";
-/* FINALE styles.css */
+/* =================================================================================
+    FINALES & PRODUKTIONSREIFES STYLING-SYSTEM (VERSION 5.0)
+================================================================================== */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
 
 /* =================================================================================
  * 1. CSS-VARIABLEN (DESIGN TOKENS)
  * ================================================================================= */
 :root {
-  /* Farbpalette */
   --color-primary-gradient: linear-gradient(135deg, #3498db, #2980b9);
   --color-primary: #3498db;
-  --color-primary-dark: #2980b9;
   --color-secondary: #2ecc71;
-  --color-success: #27ae60;
-  --color-warning: #f39c12;
   --color-danger: #e74c3c;
-  --color-info: #3498db;
-  /* Neutrale Farben (Light Mode) */
   --color-text: #2c3e50;
   --color-text-light: #7f8c8d;
   --color-body-bg: #f4f7fa;
   --color-surface: #ffffff;
   --color-border: #e0e6ed;
-  --color-input-bg: #ffffff;
-  /* Glasmorphismus */
   --glass-backdrop-filter: blur(10px);
   --glass-bg: rgba(255, 255, 255, 0.6);
-  /* Typografie */
   --font-family-base: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   --font-size-base: 16px;
   --line-height-base: 1.6;
-  /* Sonstiges */
   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -40,14 +30,12 @@
   --transition-speed: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Dark Theme Variablen */
 body.dark-theme {
   --color-text: #ecf0f1;
   --color-text-light: #95a5a6;
   --color-body-bg: #1a202c;
   --color-surface: #2d3748;
   --color-border: #4a5568;
-  --color-input-bg: #4a5568;
   --glass-bg: rgba(45, 55, 72, 0.6);
 }
 
@@ -70,6 +58,9 @@ body {
   transition: background-color var(--transition-speed),
     color var(--transition-speed);
 }
+body.no-scroll {
+  overflow: hidden;
+}
 
 /* =================================================================================
  * 3. DASHBOARD-LAYOUT & SIDEBAR
@@ -171,7 +162,7 @@ body.dark-theme .nav-item:hover {
   padding: 0.75rem 1rem 0.75rem 3rem;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
-  background-color: var(--color-input-bg);
+  background-color: var(--color-surface);
   color: var(--color-text);
   font-size: 1rem;
   transition: all var(--transition-speed);
@@ -269,30 +260,319 @@ body.dark-theme .nav-item:hover {
 }
 
 /* =================================================================================
- * 6. DATEN-KOMPONENTEN (DIAGRAMM, TABELLE)
+ * 6. UI-KOMPONENTEN-BIBLIOTHEK (STATISCH)
  * ================================================================================= */
-.chart-container {
+.component-grid {
   display: flex;
-  justify-content: space-around;
-  align-items: flex-end;
-  height: 250px;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 2rem;
 }
-.chart-bar {
-  width: 40px;
+.form-group-inline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.button-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.btn {
+  border: none;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0.6rem 1.2rem;
+  transition: all var(--transition-speed);
+}
+.btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--box-shadow-md);
+}
+.btn-primary {
   background: var(--color-primary-gradient);
-  border-radius: var(--border-radius-sm);
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  position: relative;
-  transition: height 0.5s ease-out;
+  color: #fff;
+  box-shadow: var(--box-shadow-sm);
 }
-.chart-bar span {
-  position: absolute;
-  bottom: -25px;
-  font-size: 0.8rem;
+.btn-secondary {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.btn-stroked {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+.btn-flat {
+  background-color: transparent;
+  color: var(--color-primary);
+}
+.btn-icon {
+  background-color: transparent;
   color: var(--color-text-light);
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+}
+.btn-icon:hover {
+  background-color: var(--color-border);
+  box-shadow: none;
+}
+.btn-icon-danger:hover {
+  background-color: #fee2e2;
+  color: var(--color-danger);
+}
+body.dark-theme .btn-icon-danger:hover {
+  background-color: #991b1b;
+}
+.form-field {
+  position: relative;
+}
+.form-label {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1rem;
+  color: var(--color-text-light);
+  background-color: var(--color-surface);
+  padding: 0 0.25rem;
+  transition: all 0.2s ease-out;
+  pointer-events: none;
+}
+.form-input:focus ~ .form-label,
+.form-input:not(:placeholder-shown) ~ .form-label {
+  top: 0;
+  font-size: 0.8rem;
+  color: var(--color-primary);
+}
+.form-input {
+  width: 100%;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  font-size: 1rem;
+  transition: border-color var(--transition-speed);
+}
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+.slide-toggle-input {
+  display: none;
+}
+.slide-toggle-label {
+  display: block;
+  width: 44px;
+  height: 24px;
+  background-color: var(--color-border);
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color var(--transition-speed);
+}
+.slide-toggle-label::before {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform var(--transition-speed);
+}
+.slide-toggle-input:checked + .slide-toggle-label {
+  background-color: var(--color-primary);
+}
+.slide-toggle-input:checked + .slide-toggle-label::before {
+  transform: translateX(20px);
+}
+.chip-set {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  background-color: var(--color-border);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all var(--transition-speed);
+}
+.chip:hover {
+  background-color: #d1d5db;
+}
+body.dark-theme .chip:hover {
+  background-color: #5a6578;
+}
+.chip.chip-active {
+  background-color: var(--color-primary);
+  color: #fff;
+}
+.chip-remove {
+  margin-left: 0.5rem;
+  font-weight: bold;
+  opacity: 0.5;
+}
+.chip-remove:hover {
+  opacity: 1;
+}
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-out;
+}
+.status-pill:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.status-pill::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.pill-success {
+  color: #15803d;
+  background-color: #ecfdf5;
+  border-color: #bbf7d0;
+}
+body.dark-theme .pill-success {
+  color: #a7f3d0;
+  background-color: #166534;
+  border-color: #22c55e;
+}
+.pill-warning {
+  color: #b45309;
+  background-color: #fffbeb;
+  border-color: #fde68a;
+}
+body.dark-theme .pill-warning {
+  color: #fde047;
+  background-color: #92400e;
+  border-color: #f59e0b;
+}
+.pill-danger {
+  color: #b91c1c;
+  background-color: #fef2f2;
+  border-color: #fecaca;
+}
+body.dark-theme .pill-danger {
+  color: #fca5a5;
+  background-color: #991b1b;
+  border-color: #ef4444;
+}
+.pill-info {
+  color: #1d4ed8;
+  background-color: #eff6ff;
+  border-color: #bfdbfe;
+}
+body.dark-theme .pill-info {
+  color: #93c5fd;
+  background-color: #1e40af;
+  border-color: #3b82f6;
+}
+.badge-container {
+  position: relative;
+  display: inline-block;
+}
+.badge-dot {
+  position: absolute;
+  top: -5px;
+  right: -8px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background-color: var(--color-danger);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: bold;
+  display: grid;
+  place-items: center;
+  border: 2px solid var(--color-surface);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.progress-bar-value {
+  height: 100%;
+  background: var(--color-primary-gradient);
+  border-radius: 4px;
+  transition: width 0.5s ease-in-out;
+}
+.spinner-container {
+  display: grid;
+  place-items: center;
+}
+.progress-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.alert {
+  padding: 1rem;
+  border-radius: var(--border-radius-md);
+  border: 1px solid transparent;
+}
+.alert-success {
+  background-color: #d1fae5;
+  color: #065f46;
+  border-color: #6ee7b7;
+}
+.alert-danger {
+  background-color: #fee2e2;
+  color: #991b1b;
+  border-color: #fca5a5;
+}
+body.dark-theme .alert-success {
+  background-color: #064e3b;
+  color: #a7f3d0;
+  border-color: #34d399;
+}
+body.dark-theme .alert-danger {
+  background-color: #7f1d1d;
+  color: #fecaca;
+  border-color: #f87171;
 }
 .table-container {
   width: 100%;
@@ -376,230 +656,6 @@ body.dark-theme .nav-item:hover {
   justify-content: center;
   gap: 0.5rem;
 }
-.text-right {
-  text-align: right;
-}
-.text-center {
-  text-align: center;
-}
-
-/* =================================================================================
- * 7. UI-KOMPONENTEN-BIBLIOTHEK (CUSTOM)
- * ================================================================================= */
-.component-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-.form-group-inline {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.form-field {
-  position: relative;
-}
-.form-label {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 1rem;
-  color: var(--color-text-light);
-  background-color: var(--color-surface);
-  padding: 0 0.25rem;
-  transition: all 0.2s ease-out;
-  pointer-events: none;
-}
-.form-input:focus ~ .form-label,
-.form-input:not(:placeholder-shown) ~ .form-label {
-  top: 0;
-  font-size: 0.8rem;
-  color: var(--color-primary);
-}
-.form-input {
-  width: 100%;
-  padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  font-size: 1rem;
-  transition: border-color var(--transition-speed);
-}
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-.slide-toggle-input {
-  display: none;
-}
-.slide-toggle-label {
-  display: block;
-  width: 44px;
-  height: 24px;
-  background-color: var(--color-border);
-  border-radius: 12px;
-  position: relative;
-  cursor: pointer;
-  transition: background-color var(--transition-speed);
-}
-.slide-toggle-label::before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: #fff;
-  top: 2px;
-  left: 2px;
-  transition: transform var(--transition-speed);
-}
-.slide-toggle-input:checked + .slide-toggle-label {
-  background-color: var(--color-primary);
-}
-.slide-toggle-input:checked + .slide-toggle-label::before {
-  transform: translateX(20px);
-}
-.button-group {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-.btn {
-  border: none;
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-  font-weight: 600;
-  padding: 0.6rem 1.2rem;
-  transition: all var(--transition-speed);
-}
-.btn-primary {
-  background: var(--color-primary-gradient);
-  color: #fff;
-  box-shadow: var(--box-shadow-sm);
-}
-.btn-secondary {
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-.btn-stroked {
-  background-color: transparent;
-  color: var(--color-primary);
-  border: 1px solid var(--color-primary);
-}
-.btn-flat {
-  background-color: transparent;
-  color: var(--color-primary);
-}
-.btn-icon {
-  background-color: transparent;
-  color: var(--color-text-light);
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-}
-.btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: var(--box-shadow-md);
-}
-.btn-icon:hover {
-  background-color: var(--color-border);
-  box-shadow: none;
-}
-.chip-set {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-.chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  border-radius: 1rem;
-  background-color: var(--color-border);
-  color: var(--color-text);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all var(--transition-speed);
-}
-.chip:hover {
-  background-color: #d1d5db;
-}
-body.dark-theme .chip:hover {
-  background-color: #5a6578;
-}
-.chip.chip-active {
-  background-color: var(--color-primary);
-  color: #fff;
-}
-.chip-remove {
-  margin-left: 0.5rem;
-  font-weight: bold;
-  opacity: 0.5;
-}
-.chip-remove:hover {
-  opacity: 1;
-}
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background-color: var(--color-border);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.progress-bar-value {
-  height: 100%;
-  background: var(--color-primary-gradient);
-  border-radius: 4px;
-  transition: width 0.5s ease-in-out;
-}
-.spinner-container {
-  display: grid;
-  place-items: center;
-}
-.progress-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--color-border);
-  border-top-color: var(--color-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.alert {
-  padding: 1rem;
-  border-radius: var(--border-radius-md);
-  border: 1px solid transparent;
-}
-.alert-success {
-  background-color: #d1fae5;
-  color: #065f46;
-  border-color: #6ee7b7;
-}
-.alert-danger {
-  background-color: #fee2e2;
-  color: #991b1b;
-  border-color: #fca5a5;
-}
-body.dark-theme .alert-success {
-  background-color: #064e3b;
-  color: #a7f3d0;
-  border-color: #34d399;
-}
-body.dark-theme .alert-danger {
-  background-color: #7f1d1d;
-  color: #fecaca;
-  border-color: #f87171;
-}
 .tab-group {
   display: flex;
   border-bottom: 1px solid var(--color-border);
@@ -633,16 +689,17 @@ body.dark-theme .alert-danger {
 .expansion-panel {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease-out;
+  transition: box-shadow var(--transition-speed);
 }
-.expansion-panel[open] {
-  grid-template-rows: 1fr;
+.expansion-panel.is-open {
   box-shadow: var(--box-shadow-sm);
-  margin: 1rem 0;
 }
 .expansion-panel-header {
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -651,19 +708,20 @@ body.dark-theme .alert-danger {
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-  list-style: none;
-}
-.expansion-panel-header::-webkit-details-marker {
-  display: none;
 }
 .expansion-panel-icon {
   transition: transform 0.3s ease-out;
 }
-.expansion-panel[open] .expansion-panel-icon {
+.expansion-panel.is-open .expansion-panel-icon {
   transform: rotate(180deg);
 }
 .expansion-panel-content-wrapper {
+  max-height: 0;
   overflow: hidden;
+  transition: max-height 0.35s ease-in-out;
+}
+.expansion-panel.is-open .expansion-panel-content-wrapper {
+  max-height: 200px;
 }
 .expansion-panel-content {
   padding: 0 1.25rem 1.25rem 1.25rem;
@@ -692,352 +750,34 @@ body.dark-theme .alert-danger {
   visibility: visible;
   transform: translateX(-50%) translateY(-12px);
 }
-
-/* =================================================================================
- * 8. STATUS-ANZEIGEN & NOTIFICATION-DOTS (KONFLIKTFREI)
- * ================================================================================= */
-
-/* -------------------------------------------------- */
-/* A. STATUS-PILLS (für Tabellen, Listen etc.)
-/*    Garantiert fehlerfrei, da kein 'position' gesetzt wird.
-/* -------------------------------------------------- */
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px; /* Ergibt immer eine perfekte Pillenform */
-  font-size: 0.8rem;
-  font-weight: 500;
-  line-height: 1.4;
-  white-space: nowrap;
-  border: 1px solid transparent; /* Wichtig für konsistente Größe */
-  transition: all 0.2s ease-out;
-}
-
-.status-pill:hover {
-  transform: scale(1.05); /* Leichter Zoom-Effekt beim Hovern */
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-}
-
-/* Kleiner Status-Punkt innerhalb der Pille */
-.status-pill::before {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
-/* -- Success -- */
-.pill-success {
-  color: #15803d;
-  background-color: #ecfdf5;
-  border-color: #bbf7d0;
-}
-body.dark-theme .pill-success {
-  color: #a7f3d0;
-  background-color: #166534;
-  border-color: #22c55e;
-}
-
-/* -- Warning -- */
-.pill-warning {
-  color: #b45309;
-  background-color: #fffbeb;
-  border-color: #fde68a;
-}
-body.dark-theme .pill-warning {
-  color: #fde047;
-  background-color: #92400e;
-  border-color: #f59e0b;
-}
-
-/* -- Danger -- */
-.pill-danger {
-  color: #b91c1c;
-  background-color: #fef2f2;
-  border-color: #fecaca;
-}
-body.dark-theme .pill-danger {
-  color: #fca5a5;
-  background-color: #991b1b;
-  border-color: #ef4444;
-}
-
-/* -- Info -- */
-.pill-info {
-  color: #1d4ed8;
-  background-color: #eff6ff;
-  border-color: #bfdbfe;
-}
-body.dark-theme .pill-info {
-  color: #93c5fd;
-  background-color: #1e40af;
-  border-color: #3b82f6;
-}
-
-/* -------------------------------------------------- */
-/* B. NOTIFICATION-DOTS (für Icons)
-/*    Dieser Teil bleibt gleich, da er funktionierte.
-/* -------------------------------------------------- */
-.badge-container {
-  position: relative;
-  display: inline-block;
-}
-
-.badge-dot {
-  position: absolute; 
-  top: -5px;
-  right: -8px;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 10px;
-  background-color: var(--color-danger);
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: bold;
-  display: grid;
-  place-items: center;
-  border: 2px solid var(--color-surface);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-/* =================================================================================
- * 9. RESPONSIVITÄT
- * ================================================================================= */
-@media (max-width: 1200px) {
-  .dashboard-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 768px) {
-  .sidebar {
-    display: none;
-  }
-  .main-content {
-    padding: 1rem;
-  }
-  .dashboard-grid {
-    grid-template-columns: 1fr;
-  }
-  .main-header {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-  }
-  .search-bar {
-    width: 100%;
-  }
-}
-
-
-/* =================================================================================
- * 10. ERWEITERTE UI-KOMPONENTEN-BIBLIOTHEK (TEIL 2)
- * ================================================================================= */
-
-/* -------------------------------------------------- */
-/* 10.1 DIALOG / MODAL
-/* -------------------------------------------------- */
-
-.dialog-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  opacity: 1; /* Für Animationen anpassen */
-  transition: opacity var(--transition-speed);
-}
-
-.dialog-container {
-  width: 100%;
-  max-width: 500px; /* Standardbreite für Dialoge */
+.chart-container {
   display: flex;
-  flex-direction: column;
-  box-shadow: var(--box-shadow-md);
-  /* Animation: von leicht unten nach oben sliden */
-  transform: translateY(0);
-  transition: transform var(--transition-speed);
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.dialog-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 0;
-}
-
-.dialog-content {
-  padding: 1.5rem;
-  line-height: 1.7;
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--color-border);
-  background-color: var(--color-body-bg);
-}
-
-/* -------------------------------------------------- */
-/* 10.2 SNACKBAR / TOAST
-/* -------------------------------------------------- */
-
-@keyframes snackbar-in {
-  from { transform: translate(-50%, 100px); opacity: 0; }
-  to { transform: translate(-50%, 0); opacity: 1; }
-}
-
-.snackbar {
-  position: fixed;
-  bottom: 2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 300px;
-  max-width: 500px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1.25rem;
-  border-radius: var(--border-radius-md);
-  background-color: #2c3e50; /* Typischerweise dunkel */
-  color: #fff;
-  box-shadow: var(--box-shadow-md);
-  z-index: 1050;
-  animation: snackbar-in 0.3s ease-out;
-}
-
-body.dark-theme .snackbar {
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-.snackbar-action {
-  color: var(--color-primary);
-  font-weight: 600;
-}
-body.dark-theme .snackbar-action {
-  color: #60a5fa; /* Helleres Blau für Dark Mode */
-}
-
-/* -------------------------------------------------- */
-/* 10.3 MENU / DROPDOWN
-/* -------------------------------------------------- */
-
-.menu-container {
-  position: relative;
-  display: inline-block;
-}
-
-.menu-panel {
-  position: absolute;
-  top: calc(100% + 8px); /* Etwas Abstand zum Auslöser */
-  right: 0;
-  min-width: 200px;
-  padding: 0.5rem 0;
-  z-index: 900;
-  border: 1px solid var(--color-border);
-  box-shadow: var(--box-shadow-md);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: opacity var(--transition-speed), transform var(--transition-speed);
-}
-/* Zustand, wenn das Menü offen ist (z.B. durch eine JS-Klasse) */
-.menu-container.open .menu-panel {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.menu-item {
-  display: block;
-  padding: 0.6rem 1.25rem;
-  color: var(--color-text);
-  text-decoration: none;
-  font-size: 0.95rem;
-  transition: background-color 0.2s ease-out;
-}
-
-.menu-item:hover {
-  background-color: var(--color-body-bg);
-}
-
-.menu-item-danger {
-  color: var(--color-danger);
-}
-
-/* -------------------------------------------------- */
-/* 10.4 SKELETON LOADER
-/* -------------------------------------------------- */
-
-@keyframes skeleton-shimmer {
-  0% { background-position: -200px 0; }
-  100% { background-position: calc(200px + 100%) 0; }
-}
-
-.skeleton-item {
-  background-color: var(--color-border);
-  background-image: linear-gradient(
-    90deg,
-    var(--color-border) 0px,
-    var(--color-body-bg) 40px,
-    var(--color-border) 80px
-  );
-  background-size: 200px 100%;
-  background-repeat: no-repeat;
-  animation: skeleton-shimmer 1.5s infinite;
-}
-
-.skeleton-card {
-  display: flex;
-  align-items: center;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 250px;
   gap: 1rem;
 }
-.skeleton-avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-.skeleton-content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-.skeleton-line {
-  width: 100%;
-  height: 1rem;
+.chart-bar {
+  width: 40px;
+  background: var(--color-primary-gradient);
   border-radius: var(--border-radius-sm);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  position: relative;
+  transition: height 0.5s ease-out;
+}
+.chart-bar span {
+  position: absolute;
+  bottom: -25px;
+  font-size: 0.8rem;
+  color: var(--color-text-light);
 }
-
-/* -------------------------------------------------- */
-/* 10.5 STEPPER
-/* -------------------------------------------------- */
-
 .stepper {
   display: flex;
   align-items: center;
   width: 100%;
 }
-
 .step {
   display: flex;
   flex-direction: column;
@@ -1047,7 +787,6 @@ body.dark-theme .snackbar-action {
   font-weight: 500;
   font-size: 0.9rem;
 }
-
 .step-icon {
   width: 32px;
   height: 32px;
@@ -1073,19 +812,13 @@ body.dark-theme .snackbar-action {
   border-color: var(--color-primary);
   color: #fff;
 }
-
 .step-connector {
   flex-grow: 1;
   height: 2px;
   background-color: var(--color-border);
   margin: 0 1rem;
-  transform: translateY(-12px); /* Auf Höhe der Icons ausrichten */
+  transform: translateY(-12px);
 }
-
-/* -------------------------------------------------- */
-/* 10.6 PAGINATOR
-/* -------------------------------------------------- */
-
 .paginator {
   display: flex;
   justify-content: flex-end;
@@ -1103,20 +836,13 @@ body.dark-theme .snackbar-action {
   display: flex;
   gap: 0.5rem;
 }
-
-/* -------------------------------------------------- */
-/* 10.7 TREE
-/* -------------------------------------------------- */
-
 .tree {
   list-style: none;
   padding-left: 1rem;
 }
-
 .tree-node {
   position: relative;
 }
-
 .tree-node-label {
   display: flex;
   align-items: center;
@@ -1129,13 +855,13 @@ body.dark-theme .snackbar-action {
   background-color: var(--color-body-bg);
 }
 .tree-node details > summary::-webkit-details-marker {
-  display: none; /* Icon entfernen */
+  display: none;
 }
 .tree-node details > summary {
   list-style: none;
 }
-.tree-node details > summary::before { /* Chevron-Icon */
-  content: '▶';
+.tree-node details > summary::before {
+  content: "▶";
   display: inline-block;
   font-size: 0.7rem;
   margin-right: 0.5rem;
@@ -1144,15 +870,13 @@ body.dark-theme .snackbar-action {
 .tree-node details[open] > summary::before {
   transform: rotate(90deg);
 }
-
 .tree-node-children {
   list-style: none;
   padding-left: 1.75rem;
   position: relative;
 }
-/* Verbindungs-Linie */
 .tree-node-children::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 8px;
   top: 0;
@@ -1160,42 +884,88 @@ body.dark-theme .snackbar-action {
   width: 1px;
   background-color: var(--color-border);
 }
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+.skeleton-item {
+  background-color: var(--color-border);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-border) 0px,
+    var(--color-body-bg) 40px,
+    var(--color-border) 80px
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+.skeleton-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.skeleton-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.skeleton-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.skeleton-line {
+  width: 100%;
+  height: 1rem;
+  border-radius: var(--border-radius-sm);
+}
 
 /* =================================================================================
- * 11. VERBESSERTES DIALOG-STYLING & HELFER-KLASSEN
+ * 7. OVERLAYS (DIALOG, MENÜ)
  * ================================================================================= */
-
-/* Verhindert das Scrollen des Body, wenn ein Overlay aktiv ist */
-body.no-scroll {
-  overflow: hidden;
-}
-
-/* Neuer Button-Typ für gefährliche Aktionen */
-.btn-icon-danger:hover {
-  background-color: #fee2e2; /* Rötlicher Hover-Effekt */
-  color: var(--color-danger);
-}
-body.dark-theme .btn-icon-danger:hover {
-  background-color: #991b1b;
-}
-
-/* Verbessertes Dialog-Styling */
 .dialog-backdrop {
-  /* ... bestehende Regeln (position: fixed, z-index etc.) bleiben gleich ... */
-  backdrop-filter: blur(4px); /* Moderner Blur-Effekt */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
 }
-
 .dialog-container {
-  /* ... bestehende Regeln (max-width, display: flex etc.) bleiben gleich ... */
-  border-radius: var(--border-radius-md);
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--box-shadow-md);
   border: 1px solid var(--color-border);
 }
-
-/* Icon-Styling innerhalb des Dialogs */
-.dialog-content {
-  text-align: center; /* Zentriert den Inhalt für einen besseren Look */
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+.dialog-content {
+  padding: 1.5rem;
+  line-height: 1.7;
+  text-align: center;
 }
-
 .dialog-icon-container {
   width: 64px;
   height: 64px;
@@ -1203,13 +973,12 @@ body.dark-theme .btn-icon-danger:hover {
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background-color: #fee2e2; /* Roter Hintergrund für das Icon */
+  background-color: #fee2e2;
   color: var(--color-danger);
 }
 body.dark-theme .dialog-icon-container {
   background-color: #7f1d1d;
 }
-
 .dialog-content p {
   font-size: 1rem;
   color: var(--color-text-light);
@@ -1218,61 +987,83 @@ body.dark-theme .dialog-icon-container {
   color: var(--color-text);
   font-weight: 600;
 }
-
-/* =================================================================================
- * 12. VERBESSERTES SNACKBAR-STYLING
- * ================================================================================= */
-
-.snackbar {
-  position: fixed;
-  bottom: 2rem;
-  left: 50%;
-  transform: translateX(-50%); /* Startposition für Animation */
-  
-  min-width: 320px;
-  max-width: 500px;
+.dialog-actions {
   display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem; /* Etwas weniger Padding, da der Button eigenes hat */
-  border-radius: var(--border-radius-md);
-  
-  background-color: var(--color-surface);
-  color: var(--color-text);
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-body-bg);
+}
+
+
+
+.menu-container {
+  position: relative;
+  display: inline-block;
+}
+.menu-container.menu-right .menu-panel {
+  left: auto;
+  right: 0;
+}
+.menu-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 200px;
+  padding: 0.5rem 0;
+  z-index: 900;
   border: 1px solid var(--color-border);
   box-shadow: var(--box-shadow-md);
-  z-index: 1050;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity var(--transition-speed), transform var(--transition-speed);
 }
-
-/* Der @keyframes-Block wird nicht mehr benötigt, da wir Angular Animations nutzen */
-
-.snackbar-icon-container {
-  flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background-color: #dcfce7; /* Success-Farbe */
-  color: #166534;
+.menu-container.open .menu-panel {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }
-body.dark-theme .snackbar-icon-container {
-  background-color: #166534;
-  color: #dcfce7;
+.menu-item {
+  display: block;
+  padding: 0.6rem 1.25rem;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease-out;
 }
-
-.snackbar-message {
-  flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
-  font-weight: 500;
-}
-
-.snackbar-close-btn {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  font-size: 1.5rem; /* Größeres "x" */
-  color: var(--color-text-light);
-}
-.snackbar-close-btn:hover {
+.menu-item:hover {
   background-color: var(--color-body-bg);
-}
\ No newline at end of file
+}
+.menu-item-danger {
+  color: var(--color-danger);
+}
+
+/* =================================================================================
+ * 8. RESPONSIVITÄT
+ * ================================================================================= */
+@media (max-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+  .main-content {
+    padding: 1rem;
+  }
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  .main-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  .search-bar {
+    width: 100%;
+  }
+}