styling und routing

src/app/app.component.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
-:root{
+/*
+ * =================================================================================
+ * STYLING GUIDELINES & GLOBALES STYLING
+ * =================================================================================
+ */
 
-}
+/* 1. CSS Variablen (Custom Properties) für das Theming
+ * =================================================================================
+ * Hier definieren wir alle wiederverwendbaren Werte. Dies ist die "Single Source of Truth"
+ * für Ihr Design-System.
+ */

src/app/app.routes.ts

@@ -1,29 +1,34 @@
-// src/app/app.routes.ts
 import { Routes } from '@angular/router';
-import { LandingpageComponent } from './features/landingpage/landingpage.component';
-import { NotFoundComponent } from './core/components/not-found/not-found.component';
 
 export const routes: Routes = [
-  // REGEL 1: Für alle "normalen" Seiten, nutze das MainLayout
+  // Regel 1: Leerer Pfad (Startseite der Anwendung)
+  // Ein Benutzer, der die Haupt-URL Ihrer Seite aufruft (z.B. "http://localhost:4200/"),
+  // wird sofort und ohne Umwege zur Login-Seite weitergeleitet.
   {
     path: '',
-    children: [
+    redirectTo: 'auth', // Leitet zur /auth-Route weiter
-      { path: '', component: LandingpageComponent }, // ... zeige das Landing-Bild darin
+    pathMatch: 'full'     // Wichtig: Gilt nur für den exakt leeren Pfad
-      //   { path: 'shop', loadChildren: ... },      // ... zeige das Shop-Bild darin
-      //   { path: 'cart', loadChildren: ... }       // ... zeige das Warenkorb-Bild darin
-    ],
   },
   
-  //   // REGEL 2: Für alle Authentifizierungs-Seiten, nutze das AuthLayout
+  // Regel 2: Authentifizierungs-Feature
-  //   {
+  // Alle URLs, die mit "auth/" beginnen (z.B. "/auth/login", "/auth/register"),
-  //     path: 'auth',
+  // werden von dieser Regel abgefangen und an die auth.routes.ts zur
-  //     component: AuthLayoutComponent, // <- Hänge den "Auth"-Rahmen an die Wand
+  // weiteren Verarbeitung übergeben.
-  //     children: [
+  {
-  //       // Annahme: auth.routes.ts definiert /login, /register etc.
+    path: 'auth',
-  //       { path: '', loadChildren: () => import('./features/auth/auth.routes').then(r => r.AUTH_ROUTES) }
+    loadChildren: () => import('./features/auth/auth.routes').then(r => r.AUTH_ROUTES)
-  //     ]
+  },
-  //   },
+  {
+    path: 'demo',
+    loadChildren: () => import('./features/demo/demo.routes').then(r => r.DEMO_ROUTES)
+  },
 
-  // REGEL 3: Die 404-Seite hat kein spezielles Layout
+  // Regel 3: Fallback-Route (Wildcard)
-  { path: '**', component: NotFoundComponent },
+  // JEDE ANDERE URL, die nicht von den obigen Regeln abgefangen wurde,
+  // wird als ungültig betrachtet und ebenfalls zum Auth-Feature (und von dort zum Login) umgeleitet.
+  // Das stellt sicher, dass Benutzer immer auf einer validen Seite landen.
+  {
+    path: '**',
+    redirectTo: 'auth'
+  }
 ];

src/app/features/auth/auth.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AuthLayoutComponent } from './components/auth-layout/auth-layout.component';
+import { LoginComponent } from './components/login/login.component';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    AuthLayoutComponent,
+    LoginComponent,
+  ],
+})
+export class AuthModule {}

src/app/features/auth/auth.routes.ts

@@ -0,0 +1,22 @@
+import { Routes } from '@angular/router';
+
+// Importiere dein spezielles Layout für Auth-Seiten und alle Komponenten
+import { AuthLayoutComponent } from './components/auth-layout/auth-layout.component';
+import { LoginComponent } from './components/login/login.component';
+import { RegisterComponent } from './components/register/register.component';
+import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
+import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
+
+export const AUTH_ROUTES: Routes = [
+  {
+    path: '',
+    component: AuthLayoutComponent,
+    children: [
+      { path: '', redirectTo: 'login', pathMatch: 'full' },
+      { path: 'login', component: LoginComponent, title: 'Anmelden' },
+      { path: 'register', component: RegisterComponent, title: 'Registrieren' },
+      { path: 'forgot-password', component: ForgotPasswordComponent, title: 'Passwort vergessen' },
+      { path: 'reset-password/:token', component: ResetPasswordComponent, title: 'Neues Passwort' }
+    ]
+  }
+];

src/app/features/auth/components/auth-layout/auth-layout.component.html

@@ -0,0 +1 @@
+<p>auth-layout works!</p>

src/app/features/auth/components/auth-layout/auth-layout.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-auth-layout',
+  imports: [],
+  templateUrl: './auth-layout.component.html',
+  styleUrl: './auth-layout.component.css',
+})
+export class AuthLayoutComponent {}

src/app/features/auth/components/forgot-password/forgot-password.component.html

@@ -0,0 +1 @@
+<p>forgot-password works!</p>

src/app/features/auth/components/forgot-password/forgot-password.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-forgot-password',
+  imports: [],
+  templateUrl: './forgot-password.component.html',
+  styleUrl: './forgot-password.component.css'
+})
+export class ForgotPasswordComponent {
+
+}

src/app/features/auth/components/login/login.component.html

@@ -0,0 +1 @@
+<p>login works!</p>

src/app/features/auth/components/login/login.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+
+}

src/app/features/auth/components/register/register.component.html

@@ -0,0 +1 @@
+<p>register works!</p>

src/app/features/auth/components/register/register.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  imports: [],
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.css'
+})
+export class RegisterComponent {
+
+}

src/app/features/auth/components/reset-password/reset-password.component.html

@@ -0,0 +1 @@
+<p>reset-password works!</p>

src/app/features/auth/components/reset-password/reset-password.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-reset-password',
+  imports: [],
+  templateUrl: './reset-password.component.html',
+  styleUrl: './reset-password.component.css'
+})
+export class ResetPasswordComponent {
+
+}

src/app/features/auth/components/verify-email/verify-email.component.html

@@ -0,0 +1 @@
+<p>verify-email works!</p>

src/app/features/auth/components/verify-email/verify-email.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-verify-email',
+  imports: [],
+  templateUrl: './verify-email.component.html',
+  styleUrl: './verify-email.component.css'
+})
+export class VerifyEmailComponent {
+
+}

src/app/features/demo/components/demo/demo.component.html

@@ -0,0 +1,676 @@
+<!-- FINALE demo.component.html -->
+<div class="dashboard-container">
+  <!-- =================================================================== -->
+  <!-- SIDEBAR                                                             -->
+  <!-- =================================================================== -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <h1 class="sidebar-title">CustomDash</h1>
+    </div>
+    <nav class="sidebar-nav">
+      <a href="#" class="nav-item active">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          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
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <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
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <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>
+    </nav>
+    <div class="sidebar-footer">
+      <a href="#" class="nav-item">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <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>
+    </div>
+  </aside>
+
+  <!-- =================================================================== -->
+  <!-- HAUPTINHALT                                                         -->
+  <!-- =================================================================== -->
+  <main class="main-content">
+    <header class="main-header">
+      <div class="search-bar">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          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..." />
+      </div>
+      <div class="header-actions">
+        <div class="theme-switcher">
+          <label for="theme-toggle">Dark Mode</label>
+          <input
+            type="checkbox"
+            id="theme-toggle"
+            class="slider-checkbox"
+            (change)="toggleTheme()"
+            [checked]="isDarkMode"
+          />
+        </div>
+        <div class="user-profile">
+          <img src="https://i.pravatar.cc/40" alt="User Avatar" />
+        </div>
+      </div>
+    </header>
+
+    <!-- Haupt-Grid für alle Dashboard-Inhalte und Komponenten -->
+    <div class="dashboard-grid">
+      <!-- Sektion: KPI-Karten -->
+      <div class="card kpi-card">
+        <div class="kpi-icon icon-sales">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="12" y1="1" x2="12" y2="23"></line>
+            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+          </svg>
+        </div>
+        <div class="kpi-content">
+          <span class="kpi-value">€ 14.750</span
+          ><span class="kpi-label">Umsatz (Monat)</span>
+        </div>
+      </div>
+      <div class="card kpi-card">
+        <div class="kpi-icon icon-users">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="9" cy="7" r="4"></circle>
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+          </svg>
+        </div>
+        <div class="kpi-content">
+          <span class="kpi-value">1.284</span
+          ><span class="kpi-label">Neue Nutzer</span>
+        </div>
+      </div>
+      <div class="card kpi-card">
+        <div class="kpi-icon icon-orders">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <path d="M16 10a4 4 0 0 1-8 0"></path>
+          </svg>
+        </div>
+        <div class="kpi-content">
+          <span class="kpi-value">312</span
+          ><span class="kpi-label">Bestellungen</span>
+        </div>
+      </div>
+      <div class="card kpi-card">
+        <div class="kpi-icon icon-performance">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+          </svg>
+        </div>
+        <div class="kpi-content">
+          <span class="kpi-value">99.8%</span
+          ><span class="kpi-label">Verfügbarkeit</span>
+        </div>
+      </div>
+
+      <!-- Sektion: Diagramm -->
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Umsatzentwicklung</h3>
+        <div class="card-body chart-container">
+          <div class="chart-bar" style="height: 60%"><span>Jan</span></div>
+          <div class="chart-bar" style="height: 75%"><span>Feb</span></div>
+          <div class="chart-bar" style="height: 50%"><span>Mär</span></div>
+          <div class="chart-bar" style="height: 85%"><span>Apr</span></div>
+          <div class="chart-bar" style="height: 90%"><span>Mai</span></div>
+          <div class="chart-bar" style="height: 65%"><span>Jun</span></div>
+        </div>
+      </section>
+
+      <!-- =================================================================== -->
+      <!-- Sektion: Datentabelle (Final & Korrigiert)                          -->
+      <!-- =================================================================== -->
+      <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
+                    class="sort-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M8 3v18l8-9L8 3z"
+                      transform="rotate(90 12 12)"
+                    ></path>
+                  </svg>
+                </th>
+                <th>Bestell-ID</th>
+                <th>Status</th>
+                <th class="text-right">Betrag</th>
+                <th class="text-center">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- Zeile 1 -->
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <img
+                      src="https://i.pravatar.cc/40?u=max"
+                      alt="Avatar Max Mustermann"
+                    />
+                    <div>
+                      <div class="user-name">Max Mustermann</div>
+                      <div class="user-email">max.mustermannATexample.com</div>
+                    </div>
+                  </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>
+                <td class="text-right amount">€ 129,99</td>
+                <td class="actions-cell">
+                  <button class="btn btn-icon" data-tooltip="Details anzeigen">
+                    <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="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"
+                      ></path>
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+              <!-- Zeile 2 -->
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <img
+                      src="https://i.pravatar.cc/40?u=erika"
+                      alt="Avatar Erika Mustermann"
+                    />
+                    <div>
+                      <div class="user-name">Erika Mustermann</div>
+                      <div class="user-email">erika.mATexample.com</div>
+                    </div>
+                  </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>
+                <td class="text-right amount">€ 49,50</td>
+                <td class="actions-cell">
+                  <button class="btn btn-icon" data-tooltip="Details anzeigen">
+                    <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="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"
+                      ></path>
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+              <!-- Zeile 3 -->
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <img
+                      src="https://i.pravatar.cc/40?u=peter"
+                      alt="Avatar Peter Pan"
+                    />
+                    <div>
+                      <div class="user-name">Peter Pan</div>
+                      <div class="user-email">peter.panATexample.com</div>
+                    </div>
+                  </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">
+                  <button class="btn btn-icon" data-tooltip="Details anzeigen">
+                    <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="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"
+                      ></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
+                      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="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"
+                      ></path>
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- BEGINN DER UI-KOMPONENTEN-BIBLIOTHEK -->
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Moderne Formular-Elemente</h3>
+        <div class="card-body component-grid">
+          <div class="form-field">
+            <input
+              type="text"
+              class="form-input"
+              id="name"
+              placeholder=" "
+            /><label for="name" class="form-label">Name</label>
+          </div>
+          <div class="form-field">
+            <select class="form-input" id="city">
+              <option>Berlin</option>
+              <option>München</option></select
+            ><label for="city" class="form-label">Stadt</label>
+          </div>
+          <div class="form-field">
+            <textarea
+              class="form-input"
+              id="message"
+              placeholder=" "
+              rows="2"
+            ></textarea
+            ><label for="message" class="form-label">Nachricht</label>
+          </div>
+          <div class="form-group-inline">
+            <label>Benachrichtigungen</label>
+            <div class="slide-toggle">
+              <input
+                type="checkbox"
+                id="toggle-1"
+                class="slide-toggle-input"
+              /><label for="toggle-1" class="slide-toggle-label"></label>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Buttons, Chips & Badges</h3>
+        <div class="card-body component-grid">
+          <div class="button-group">
+            <button class="btn btn-primary">Primary</button
+            ><button class="btn btn-secondary">Secondary</button
+            ><button class="btn btn-stroked">Stroked</button
+            ><button class="btn btn-flat">Flat</button
+            ><button class="btn btn-icon" data-tooltip="Favorit">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+              </svg>
+            </button>
+          </div>
+          <div class="chip-set">
+            <span class="chip"
+              >Technologie<span class="chip-remove">&times;</span></span
+            ><span class="chip"
+              >Design<span class="chip-remove">&times;</span></span
+            ><span class="chip chip-active"
+              >Angular<span class="chip-remove">&times;</span></span
+            >
+          </div>
+          <div class="badge-showcase">
+            <div class="badge-container">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg
+              ><span class="badge-dot">3</span>
+            </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>
+      </section>
+
+      <!-- Karte: Navigation & Layout -->
+      <section class="card grid-col-span-2">
+        <h3 class="card-header">Navigation & Layout</h3>
+        <div class="card-body">
+          <div class="tab-group">
+            <button class="tab-link active">Profil</button
+            ><button class="tab-link">Konto</button
+            ><button class="tab-link">Sicherheit</button>
+          </div>
+          <div class="tab-content">
+            <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">
+              <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"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </summary>
+            <div class="expansion-panel-content-wrapper">
+              <div class="expansion-panel-content">
+                Hier steht der Inhalt, der ein- und ausgeklappt werden kann.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
+                eget.
+              </div>
+            </div>
+          </details>
+        </div>
+      </section>
+    </div>
+    <!-- Ende .dashboard-grid -->
+  </main>
+</div>

src/app/features/demo/components/demo/demo.component.ts

@@ -0,0 +1,32 @@
+import { Component, Renderer2 } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  imports: [],
+  templateUrl: './demo.component.html',
+  styleUrl: './demo.component.css'
+})
+export class DemoComponent {
+
+  // 1. Eine Eigenschaft, die den aktuellen Zustand des Dark Mode speichert.
+  //    Sie ist an [checked]="isDarkMode" in der HTML gebunden.
+  isDarkMode = false;
+
+  // 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) {}
+
+  // 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 {
+      this.renderer.removeClass(document.body, 'dark-theme');
+    }
+  }
+}

src/app/features/demo/demo.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, ReactiveFormsModule],
+})
+export class DemoModule {}

src/app/features/demo/demo.routes.ts

@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+
+import { DemoComponent } from './components/demo/demo.component';
+
+export const DEMO_ROUTES: Routes = [
+  {
+    path: '',
+    component: DemoComponent,
+    children: [
+      { path: '', redirectTo: '1', pathMatch: 'full' },
+      { path: '1', component: DemoComponent, title: 'Demo' },
+    ]
+  }
+];

src/app/features/landingpage/landingpage.component.css

@@ -1,290 +0,0 @@
-/* ==========================================================================
-   GLOBALE STILE & GRUNDEINSTELLUNGEN
-   ========================================================================== */
-:root {
-  --primary-color: #3f51b5;
-  --accent-color: #ef4444;
-  --text-color: #333;
-  --light-gray-border: #e5e7eb;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  color: var(--text-color);
-  line-height: 1.6;
-}
-
-/* ==========================================================================
-   WIEDERVERWENDBARE LAYOUT- & KOMPONENTEN-STILE
-   ========================================================================== */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.section {
-  padding: 80px 0;
-}
-
-.section-heading {
-  text-align: center;
-  margin-bottom: 60px;
-}
-
-.section-title {
-  font-size: 36px;
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-
-.section-subtitle {
-  font-size: 22px;
-  max-width: 800px;
-  margin: 0 auto;
-  font-weight: 300;
-}
-
-/* ==========================================================================
-   HEADER
-   ========================================================================== */
-.main-header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.9);
-  height: 80px;
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-}
-
-.logo-image {
-  width: 128px;
-  border-radius: 8px;
-}
-
-.social-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease-in-out;
-}
-.social-button:hover {
-  transform: scale(1.1);
-}
-
-/* ==========================================================================
-   HERO SECTION
-   ========================================================================== */
-.hero-section {
-  position: relative;
-  overflow: hidden;
-  color: black;
-  padding: 100px 0;
-}
-
-.hero-content {
-  position: relative;
-  z-index: 10;
-  max-width: 576px;
-  text-align: center;
-  margin: 200px auto 0 auto;
-}
-
-.hero-headline {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.hero-sub-headline {
-  display: block;
-  font-weight: 400;
-}
-
-.hero-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  text-decoration: none;
-  color: white;
-  background-color: var(--accent-color);
-  padding: 14px 28px;
-  font-weight: 500;
-  border-radius: 8px;
-  transition: background-color 0.3s, opacity 0.3s;
-}
-.hero-button:hover {
-  opacity: 0.85;
-}
-
-.hero-background-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding-top: 48px;
-}
-.hero-image {
-  width: 384px;
-  opacity: 0.8;
-}
-
-/* ==========================================================================
-   ABOUT SECTION
-   ========================================================================== */
-.about-cards-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  justify-content: center;
-}
-
-.about-card {
-  flex: 1 1 270px;
-  max-width: 300px;
-  text-align: center;
-  padding: 20px;
-}
-
-.about-icon {
-  font-size: 64px;
-  color: var(--primary-color);
-  margin-bottom: 20px;
-}
-
-.about-card-title {
-  font-size: 20px;
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-/* ==========================================================================
-   WORKSPACE SECTION
-   ========================================================================== */
-.workspace-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 30px;
-}
-
-.workspace-card {
-  border: 2px solid var(--light-gray-border);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
-  padding: 80px 20px;
-  text-align: center;
-  font-size: 1.2rem;
-  font-weight: 500;
-}
-
-/* ==========================================================================
-   FOOTER
-   ========================================================================== */
-.main-footer {
-  text-align: center;
-  padding: 20px 0;
-}
-.main-footer hr {
-  border: none;
-  border-top: 1px solid var(--light-gray-border);
-  margin-bottom: 20px;
-}
-.main-footer span {
-  font-weight: 900;
-}
-
-/* ==========================================================================
-   MEDIA QUERIES (RESPONSIVE ANPASSUNGEN)
-   ========================================================================== */
-
-/* Ab 600px (Tablets im Hochformat und größer) */
-@media (min-width: 600px) {
-  .workspace-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .hero-content {
-    margin: 4px 0 0 auto;
-    text-align: right;
-  }
-  .hero-headline {
-    font-size: 3.5rem;
-  }
-}
-
-/* Ab 960px (Tablets im Querformat und Desktops) */
-@media (min-width: 960px) {
-  .workspace-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-/* Bis 959px (Tablets und kleiner) */
-@media (max-width: 959px) {
-  .section {
-    padding: 60px 0;
-  }
-  .about-cards-container {
-    flex-direction: column;
-    align-items: center;
-  }
-  .about-card {
-    max-width: 450px;
-    width: 100%;
-    padding: 20px;
-  }
-  .about-icon {
-    font-size: 56px;
-  }
-}
-
-/* Bis 599px (Mobiltelefone) */
-@media (max-width: 599px) {
-  .section {
-    padding: 40px 0;
-  }
-  .section-title,
-  .hero-headline {
-    font-size: 2rem;
-  }
-  .section-subtitle {
-    font-size: 1rem;
-  }
-  .hero-content {
-    margin-top: 250px; /* Mehr Platz für Hintergrundbild */
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .hero-background-image {
-    justify-content: center;
-  }
-  .hero-image {
-    width: 280px;
-  }
-}

src/app/features/landingpage/landingpage.component.html

@@ -1,148 +0,0 @@
-
-  
-  <body>
-    <main class="page-wrapper">
-      <!-- ======================= HEADER ======================= -->
-      <header class="main-header">
-        <div class="container header-content">
-          <div class="header-logo">
-            <img
-              class="logo-image"
-              src="https://i.ibb.co/tQqTvrz/unipod.png"
-              alt="unipod logo"
-            />
-          </div>
-          <div class="header-social">
-            <a href="https://twitter.com/sahilnetic" aria-label="Twitter">
-              <button class="social-button">
-                <svg
-                  fill="white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
-                  />
-                </svg>
-              </button>
-            </a>
-          </div>
-        </div>
-      </header>
-
-      <!-- ======================= HERO SECTION ======================= -->
-      <section id="hero" class="hero-section">
-        <div class="hero-background-image">
-          <img
-            class="hero-image"
-            src="https://i.ibb.co/5BCcDYB/Remote2.png"
-            alt="Remote work illustration"
-          />
-        </div>
-        <div class="container">
-          <div class="hero-content">
-            <h1 class="hero-headline">
-              Download Now
-              <span class="hero-sub-headline"> Lorem Ipsum </span>
-            </h1>
-            <a class="hero-button" href="https://twitter.com/sahilnetic">
-              <svg
-                fill="white"
-                width="24"
-                height="24"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z"
-                />
-              </svg>
-              <span>Download now</span>
-            </a>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======================= ABOUT SECTION ======================= -->
-      <section id="about" class="section mat-typography">
-        <div class="container">
-          <div class="section-heading">
-            <h2 class="section-title">About</h2>
-            <h3 class="section-subtitle">
-              Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
-              Doloribus numquam quis.
-            </h3>
-          </div>
-
-          <div class="about-cards-container">
-            <div class="about-card">
-              <i class="material-icons about-icon">build</i>
-              <h4 class="about-card-title">This is the expansion title</h4>
-              <p>
-                Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
-                Doloribus numquam quis.
-              </p>
-            </div>
-            <div class="about-card">
-              <i class="material-icons about-icon">alarm</i>
-              <h4 class="about-card-title">This is the expansion title</h4>
-              <p>
-                Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
-                Doloribus numquam quis.
-              </p>
-            </div>
-            <div class="about-card">
-              <i class="material-icons about-icon">stars</i>
-              <h4 class="about-card-title">This is the expansion title</h4>
-              <p>
-                Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
-                Doloribus numquam quis.
-              </p>
-            </div>
-            <div class="about-card">
-              <i class="material-icons about-icon">settings</i>
-              <h4 class="about-card-title">This is the expansion title</h4>
-              <p>
-                Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
-                Doloribus numquam quis.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======================= WORKSPACE SECTION ======================= -->
-      <section id="workspace" class="section">
-        <div class="container">
-          <div class="section-heading">
-            <h2 class="section-title">Lorem Ipsum Yojo</h2>
-          </div>
-          <div class="workspace-grid">
-            <div class="workspace-card">Workspace 1</div>
-            <div class="workspace-card">Workspace 2</div>
-            <div class="workspace-card">Workspace 3</div>
-            <div class="workspace-card">Workspace 4</div>
-            <div class="workspace-card">Workspace 5</div>
-            <div class="workspace-card">Workspace 6</div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ======================= FOOTER ======================= -->
-      <footer class="main-footer">
-        <div class="container">
-          <hr />
-          <p>Crafted with ❤️ by <span>Sahil</span></p>
-        </div>
-      </footer>
-    </main>
-
-    <!-- Externes Skript -->
-    <script
-      data-name="BMC-Widget"
-      src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
-      data-id="sahilnetic"
-    ></script>
-  </body>

src/app/features/landingpage/landingpage.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-
-
-@Component({
-  selector: 'app-landingpage',
-  imports: [],
-  templateUrl: './landingpage.component.html',
-  styleUrl: './landingpage.component.css',
-  schemas: [],
-})
-export class LandingpageComponent {
-
-}

src/styles.css

@@ -1,5 +1,833 @@
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
+/* FINALE styles.css */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
 
-html, body { height: 100%; }
+/* =================================================================================
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+ * 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);
+  --box-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --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);
+}
+
+/* =================================================================================
+ * 2. GLOBALER RESET UND BASIS-STILE
+ * ================================================================================= */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-body-bg);
+  transition: background-color var(--transition-speed),
+    color var(--transition-speed);
+}
+
+/* =================================================================================
+ * 3. DASHBOARD-LAYOUT & SIDEBAR
+ * ================================================================================= */
+.dashboard-container {
+  display: flex;
+  background-color: var(--color-body-bg);
+}
+.sidebar {
+  width: 260px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  border-right: 1px solid var(--color-border);
+  transition: background-color var(--transition-speed),
+    border-color var(--transition-speed);
+}
+.sidebar-header {
+  margin-bottom: 2rem;
+}
+.sidebar-title {
+  font-size: 1.5rem;
+  font-weight: 900;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+.sidebar-footer {
+  margin-top: auto;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-light);
+  font-weight: 500;
+  text-decoration: none;
+  transition: all var(--transition-speed);
+}
+.nav-item svg {
+  width: 20px;
+  height: 20px;
+  transition: stroke var(--transition-speed);
+}
+.nav-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--color-text);
+}
+body.dark-theme .nav-item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.nav-item.active {
+  background: var(--color-primary-gradient);
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
+}
+.nav-item.active svg {
+  stroke: #fff;
+}
+
+/* =================================================================================
+ * 4. HAUPTINHALT & HEADER
+ * ================================================================================= */
+.main-content {
+  flex-grow: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+.main-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+.search-bar {
+  position: relative;
+  width: 300px;
+}
+.search-bar svg {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-light);
+}
+.search-bar input {
+  width: 100%;
+  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);
+  color: var(--color-text);
+  font-size: 1rem;
+  transition: all var(--transition-speed);
+}
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+.user-profile img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* =================================================================================
+ * 5. DASHBOARD GRID & KARTEN
+ * ================================================================================= */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+}
+.grid-col-span-2 {
+  grid-column: span 2;
+}
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-sm);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-speed);
+}
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--box-shadow-md);
+}
+.card-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+.card-body {
+  padding: 1.5rem;
+}
+.kpi-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+.kpi-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+}
+.kpi-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.icon-sales {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+}
+.icon-users {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+}
+.icon-orders {
+  background: linear-gradient(135deg, #f39c12, #f1c40f);
+}
+.icon-performance {
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
+}
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+}
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+.kpi-label {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}
+
+/* =================================================================================
+ * 6. DATEN-KOMPONENTEN (DIAGRAMM, TABELLE)
+ * ================================================================================= */
+.chart-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  height: 250px;
+  gap: 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);
+}
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+.modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+}
+.modern-table thead th {
+  padding: 0.75rem 1.5rem;
+  color: var(--color-text-light);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: left;
+  border-bottom: 2px solid var(--color-border);
+}
+.modern-table th.sortable {
+  cursor: pointer;
+  position: relative;
+}
+.modern-table th.sortable:hover {
+  color: var(--color-text);
+}
+.modern-table .sort-icon {
+  color: var(--color-text-light);
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  transition: all var(--transition-speed);
+}
+.modern-table th.sortable:hover .sort-icon {
+  opacity: 1;
+}
+.modern-table tbody tr {
+  transition: background-color var(--transition-speed);
+  border-bottom: 1px solid var(--color-border);
+}
+.modern-table tbody tr:last-of-type {
+  border-bottom: none;
+}
+.modern-table tbody tr:hover {
+  background-color: var(--color-body-bg);
+}
+.modern-table tbody td {
+  padding: 1rem 1.5rem;
+  vertical-align: middle;
+}
+.user-cell {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.user-cell img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.user-name {
+  font-weight: 600;
+  color: var(--color-text);
+}
+.user-email {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}
+.amount {
+  font-weight: 600;
+}
+.mono {
+  font-family: "Courier New", Courier, monospace;
+}
+.actions-cell {
+  display: flex;
+  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);
+}
+.tab-link {
+  padding: 0.75rem 1.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--color-text-light);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all var(--transition-speed);
+}
+.tab-link:hover {
+  color: var(--color-text);
+}
+.tab-link.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+.tab-content {
+  padding: 1.5rem 0;
+}
+.divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1.5rem 0;
+}
+.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;
+}
+.expansion-panel[open] {
+  grid-template-rows: 1fr;
+  box-shadow: var(--box-shadow-sm);
+  margin: 1rem 0;
+}
+.expansion-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  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 {
+  transform: rotate(180deg);
+}
+.expansion-panel-content-wrapper {
+  overflow: hidden;
+}
+.expansion-panel-content {
+  padding: 0 1.25rem 1.25rem 1.25rem;
+}
+[data-tooltip] {
+  position: relative;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  background-color: #2c3e50;
+  color: #fff;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--border-radius-sm);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-speed), transform var(--transition-speed);
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  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%;
+  }
+}