diff --git a/app/core/plugins.py b/app/core/plugins.py
index c48dec6..143b5ca 100644
--- a/app/core/plugins.py
+++ b/app/core/plugins.py
@@ -1,16 +1,29 @@
 import logging
-from flask import Blueprint, g, abort, redirect, url_for, flash
+from flask import Blueprint, g, abort, redirect, url_for, flash, current_app
 from functools import wraps
 from app.models.feature_system import is_feature_enabled
 
 logger = logging.getLogger(__name__)
 
+class MenuItem:
+    def __init__(self, label, endpoint, icon, order=100, group=None, required_role=None, feature_name=None, badge_count_key=None, label_is_key=False):
+        self.label = label
+        self.endpoint = endpoint
+        self.icon = icon
+        self.order = order
+        self.group = group
+        self.required_role = required_role
+        self.feature_name = feature_name
+        self.badge_count_key = badge_count_key
+        self.label_is_key = label_is_key # If True, label is a key in app_labels
+
 class Plugin:
-    def __init__(self, name, blueprint, feature_name=None, url_prefix=None):
+    def __init__(self, name, blueprint, feature_name=None, url_prefix=None, menu_items=None):
         self.name = name
         self.blueprint = blueprint
         self.feature_name = feature_name or name
         self.url_prefix = url_prefix
+        self.menu_items = menu_items or []
 
 def plugin_required(feature_name):
     """Decorator to check if a feature is enabled for the current department"""
@@ -27,6 +40,7 @@ def decorated_function(*args, **kwargs):
 
 class PluginManager:
     _plugins = {}
+    _core_menu_items = []
 
     @classmethod
     def register(cls, plugin):
@@ -40,6 +54,37 @@ def check_enabled():
                 # Redirect or 404
                 return redirect(url_for('dashboard.index'))
 
+    @classmethod
+    def register_menu_item(cls, menu_item):
+        cls._core_menu_items.append(menu_item)
+
+    @classmethod
+    def get_menu_items(cls):
+        all_items = list(cls._core_menu_items)
+        for plugin in cls._plugins.values():
+            all_items.extend(plugin.menu_items)
+
+        # Sort by order
+        all_items.sort(key=lambda x: (x.order, x.label))
+        return all_items
+
+    @classmethod
+    def get_grouped_menu_items(cls):
+        items = cls.get_menu_items()
+        groups = {}
+        for item in items:
+            group = item.group or 'Sonstiges'
+            if group not in groups:
+                groups[group] = []
+            groups[group].append(item)
+
+        # Define group order
+        group_order = ['Übersicht', 'Inventar', 'Personal', 'Service', 'Allgemein', 'Sonstiges']
+
+        # Sort groups based on group_order, then alphabetically for unknown groups
+        sorted_groups = sorted(groups.items(), key=lambda x: (group_order.index(x[0]) if x[0] in group_order else 999, x[0]))
+        return sorted_groups
+
     @classmethod
     def init_app(cls, app):
         for plugin in cls._plugins.values():
diff --git a/app/plugins/canteen/__init__.py b/app/plugins/canteen/__init__.py
index 0d6cfdf..0eb5e2d 100644
--- a/app/plugins/canteen/__init__.py
+++ b/app/plugins/canteen/__init__.py
@@ -1,4 +1,6 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
 
-plugin_manager.register(Plugin('canteen', bp, 'canteen_plan'))
+plugin_manager.register(Plugin('canteen', bp, 'canteen_plan', url_prefix='/canteen', menu_items=[
+    MenuItem('Kantinenplan', 'canteen.index', 'fas fa-utensils', order=80, group='Allgemein', feature_name='canteen_plan')
+]))
diff --git a/app/plugins/consumables/__init__.py b/app/plugins/consumables/__init__.py
index 532274d..7e52276 100644
--- a/app/plugins/consumables/__init__.py
+++ b/app/plugins/consumables/__init__.py
@@ -1,4 +1,6 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
 
-plugin_manager.register(Plugin('consumables', bp, 'consumables', url_prefix='/consumables'))
+plugin_manager.register(Plugin('consumables', bp, 'consumables', url_prefix='/consumables', menu_items=[
+    MenuItem('consumables', 'consumables.index', 'fas fa-box-open', order=30, group='Inventar', feature_name='consumables', label_is_key=True)
+]))
diff --git a/app/plugins/jobs/__init__.py b/app/plugins/jobs/__init__.py
index bba2f04..a566161 100644
--- a/app/plugins/jobs/__init__.py
+++ b/app/plugins/jobs/__init__.py
@@ -1,4 +1,6 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
 
-plugin_manager.register(Plugin('jobs', bp, 'job_board', url_prefix='/jobs'))
+plugin_manager.register(Plugin('jobs', bp, 'job_board', url_prefix='/jobs', menu_items=[
+    MenuItem('Jobbörse', 'jobs.job_list', 'fas fa-briefcase', order=70, group='Allgemein', feature_name='job_board')
+]))
diff --git a/app/plugins/tickets/__init__.py b/app/plugins/tickets/__init__.py
index 9594072..ebb380b 100644
--- a/app/plugins/tickets/__init__.py
+++ b/app/plugins/tickets/__init__.py
@@ -1,6 +1,10 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
+
+plugin_manager.register(Plugin('tickets', bp, 'ticket_system', url_prefix='/tickets', menu_items=[
+    MenuItem('tickets', 'tickets.create', 'fas fa-ticket-alt', order=50, group='Service', feature_name='ticket_system', label_is_key=True, badge_count_key='unread_tickets_count'),
+    MenuItem('Auftragserstellung', 'tickets.public_create_order', 'fas fa-file-alt', order=60, group='Service', feature_name='ticket_system')
+]))
 
-plugin_manager.register(Plugin('tickets', bp, 'ticket_system', url_prefix='/tickets'))
 from .history_routes import bp as history_bp
 plugin_manager.register(Plugin('ticket_history', history_bp, 'ticket_system', url_prefix='/api/tickets'))
diff --git a/app/plugins/tools/__init__.py b/app/plugins/tools/__init__.py
index 17b95b2..f9a20f6 100644
--- a/app/plugins/tools/__init__.py
+++ b/app/plugins/tools/__init__.py
@@ -1,4 +1,6 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
 
-plugin_manager.register(Plugin('tools', bp, 'tools', url_prefix='/tools'))
+plugin_manager.register(Plugin('tools', bp, 'tools', url_prefix='/tools', menu_items=[
+    MenuItem('tools', 'tools.index', 'fas fa-tools', order=20, group='Inventar', feature_name='tools', label_is_key=True)
+]))
diff --git a/app/plugins/workers/__init__.py b/app/plugins/workers/__init__.py
index 16d730b..ef65744 100644
--- a/app/plugins/workers/__init__.py
+++ b/app/plugins/workers/__init__.py
@@ -1,4 +1,7 @@
 from .routes import bp
-from app.core.plugins import Plugin, plugin_manager
+from app.core.plugins import Plugin, plugin_manager, MenuItem
 
-plugin_manager.register(Plugin('workers', bp, 'workers', url_prefix='/workers'))
+plugin_manager.register(Plugin('workers', bp, 'workers', url_prefix='/workers', menu_items=[
+    MenuItem('Mitarbeiter', 'workers.index', 'fas fa-users', order=40, group='Personal', feature_name='workers'),
+    MenuItem('Wochenberichte', 'workers.timesheet_list', 'fas fa-clock', order=45, group='Personal', feature_name='weekly_reports', badge_count_key='unfilled_timesheet_days')
+]))
diff --git a/app/routes/__init__.py b/app/routes/__init__.py
index 29d49a5..6ede288 100755
--- a/app/routes/__init__.py
+++ b/app/routes/__init__.py
@@ -6,7 +6,7 @@
 from app.routes.main import bp as main_bp
 from app.routes.dashboard import bp as dashboard_bp
 from app.routes.setup import bp as setup_bp
-from app.core.plugins import plugin_manager
+from app.core.plugins import plugin_manager, MenuItem
 
 # Import plugins to register them
 import app.plugins.tools
@@ -33,6 +33,10 @@ def init_app(app):
     app.register_blueprint(api_bp)
     app.register_blueprint(setup_bp)
 
+    # Register Core Menu Items
+    plugin_manager.register_menu_item(MenuItem('Dashboard', 'dashboard.index', 'fas fa-th-large', order=10, group='Übersicht'))
+    plugin_manager.register_menu_item(MenuItem('Über Scandy', 'main.about', 'fas fa-info-circle', order=100, group='Allgemein'))
+
     # Register Plugins
     plugin_manager.init_app(app)
 
diff --git a/app/static/css/main.css b/app/static/css/main.css
index b653e45..56d2c6b 100755
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -1,3 +1,41 @@
+/* ========================================
+   BTZ-KÖLN CORPORATE DESIGN SYSTEM
+   ======================================== */
+
+:root {
+  /* BTZ-Köln Farbpalette - Mapped to Theme Variables */
+  --btz-primary: oklch(var(--p));
+  --btz-primary-light: oklch(var(--p) / 0.8);
+  --btz-primary-dark: oklch(var(--p) / 1.1);
+  --btz-primary-hover: oklch(var(--p) / 0.9);
+  --btz-secondary: oklch(var(--b2));
+  --btz-secondary-dark: oklch(var(--b3));
+  --btz-accent: oklch(var(--a));
+  --btz-accent-dark: oklch(var(--a) / 0.8);
+  --btz-text: oklch(var(--bc));
+  --btz-text-light: oklch(var(--bc) / 0.7);
+  --btz-text-muted: oklch(var(--bc) / 0.5);
+  --btz-success: oklch(var(--su));
+  --btz-warning: oklch(var(--wa));
+  --btz-danger: oklch(var(--er));
+  --btz-info: oklch(var(--in));
+
+  /* Schatten und Effekte */
+  --btz-shadow-sm: 0 1px 2px 0 rgba(0, 102, 204, 0.05);
+  --btz-shadow: 0 1px 3px 0 rgba(0, 102, 204, 0.1), 0 1px 2px 0 rgba(0, 102, 204, 0.06);
+  --btz-shadow-lg: 0 10px 15px -3px rgba(0, 102, 204, 0.1), 0 4px 6px -2px rgba(0, 102, 204, 0.05);
+  --btz-shadow-xl: 0 20px 25px -5px rgba(0, 102, 204, 0.1), 0 10px 10px -5px rgba(0, 102, 204, 0.04);
+
+  /* Abstände */
+  --btz-radius-sm: 0.25rem;
+  --btz-radius: 0.375rem;
+  --btz-radius-lg: 0.5rem;
+  --btz-radius-xl: 0.75rem;
+
+  /* Übergänge */
+  --btz-transition: all 0.2s ease-in-out;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -22,7 +60,7 @@
   --tw-numeric-fraction:  ;
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
+  --tw-ring-offset-color: oklch(var(--b1));
   --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
@@ -76,7 +114,7 @@
   --tw-numeric-fraction:  ;
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
+  --tw-ring-offset-color: oklch(var(--b1));
   --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
@@ -106,6 +144,567 @@
   --tw-contain-style:  ;
 }
 
+/* ========================================
+   BTZ-KÖLN COMPONENT STYLES
+   ======================================== */
+
+/* Body Background - Sicherstellen, dass er hell ist */
+body {
+
+
+}
+
+/* Hauptinhaltsbereich */
+.main-content-with-sidebar {
+
+}
+
+/* ========================================
+   BTZ-KÖLN COMPONENT STYLES
+   ======================================== */
+
+/* Button Styles */
+.btn-primary {
+  background-color: var(--btz-primary) ;
+  border-color: var(--btz-primary) ;
+  color: white ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-primary:hover {
+  background-color: var(--btz-primary-hover) ;
+  border-color: var(--btz-primary-hover) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+.btn-secondary {
+  background-color: var(--btz-secondary) ;
+  border-color: var(--btz-secondary-dark) ;
+  color: var(--btz-text) ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-secondary:hover {
+  background-color: var(--btz-secondary-dark) ;
+  border-color: var(--btz-secondary-dark) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+.btn-success {
+  background-color: var(--btz-success) ;
+  border-color: var(--btz-success) ;
+  color: white ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-success:hover {
+  background-color: oklch(var(--su)) ;
+  border-color: oklch(var(--su)) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+.btn-danger {
+  background-color: var(--btz-danger) ;
+  border-color: var(--btz-danger) ;
+  color: white ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-danger:hover {
+  background-color: oklch(var(--er)) ;
+  border-color: oklch(var(--er)) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+.btn-warning {
+  background-color: var(--btz-warning) ;
+  border-color: var(--btz-warning) ;
+  color: var(--btz-text) ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-warning:hover {
+  background-color: oklch(var(--wa)) ;
+  border-color: oklch(var(--wa)) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+.btn-info {
+  background-color: var(--btz-info) ;
+  border-color: var(--btz-info) ;
+  color: white ;
+  transition: var(--btz-transition) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.btn-info:hover {
+  background-color: oklch(var(--in)) ;
+  border-color: oklch(var(--in)) ;
+  box-shadow: var(--btz-shadow) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Card Styles */
+.card {
+  border: none ;
+  border-radius: var(--btz-radius-lg) !important;
+  box-shadow: var(--btz-shadow) !important;
+  transition: var(--btz-transition) !important;
+  background-color: oklch(var(--b1)) ;
+}
+
+.card:hover {
+  box-shadow: var(--btz-shadow-lg) !important;
+  transform: translateY(-2px) !important;
+}
+
+.card-header {
+  background: oklch(var(--p) / 0.1) ;
+  color: oklch(var(--p)) ;
+  border-radius: 0.5rem 0.5rem 0 0 !important;
+  border-bottom: 2px solid oklch(var(--p)) !important;
+  padding: 1.25rem 1.5rem !important;
+}
+
+.card-title {
+  margin: 0 !important;
+  font-weight: 600 !important;
+  font-size: 1.125rem !important;
+  letter-spacing: -0.01em !important;
+  color: oklch(var(--p)) ;
+}
+
+.card-body {
+  padding: 1.5rem !important;
+  background-color: transparent ;
+}
+
+/* Form Styles */
+.form-control {
+  border: 2px solid #e1e5e9 ;
+  border-radius: var(--btz-radius) !important;
+  padding: 0.75rem 1rem !important;
+  transition: var(--btz-transition) !important;
+  background-color: oklch(var(--b1)) ;
+  font-size: 0.875rem !important;
+}
+
+.form-control:focus {
+  border-color: var(--btz-primary) ;
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
+  outline: none !important;
+}
+
+.form-control:hover {
+  border-color: var(--btz-primary-light) ;
+}
+
+.form-label {
+  font-weight: 600 !important;
+  color: var(--btz-text) ;
+  margin-bottom: 0.5rem !important;
+  font-size: 0.875rem !important;
+}
+
+/* Table Styles - HELLE, LESBARE VERSION */
+.table {
+  border-radius: 0.5rem !important;
+  overflow: hidden !important;
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.08) !important;
+  background-color: oklch(var(--b1)) ;
+  border: 1px solid #e3f2fd ;
+}
+
+.table thead th {
+  background: oklch(var(--p) / 0.1) ;
+  border: none ;
+  color: oklch(var(--p)) ;
+  font-weight: 600 !important;
+  padding: 1rem !important;
+  font-size: 0.875rem !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  border-bottom: 2px solid oklch(var(--p)) !important;
+}
+
+.table tbody tr {
+  transition: all 0.2s ease-in-out !important;
+  border-bottom: 1px solid #f1f3f4 !important;
+  background-color: oklch(var(--b1)) ;
+}
+
+.table tbody tr:hover {
+  background-color: oklch(var(--b2)) ;
+  box-shadow: 0 1px 3px rgba(0, 102, 204, 0.05) !important;
+}
+
+.table tbody td {
+  padding: 1rem !important;
+  border: none ;
+  vertical-align: middle !important;
+
+  background: transparent ;
+}
+
+/* Navigation Styles - HELLE, LESBARE VERSION */
+.navbar {
+  background: linear-gradient(135deg, oklch(var(--b1)) 0%, oklch(var(--b2)) 100%) ;
+  border: none ;
+  border-bottom: 2px solid #e3f2fd !important;
+  box-shadow: 0 2px 10px rgba(0, 102, 204, 0.08) !important;
+  padding: 0 !important;
+}
+
+.navbar-brand {
+  color: oklch(var(--p)) ;
+  font-weight: 700 !important;
+  font-size: 1.25rem !important;
+  letter-spacing: -0.02em !important;
+  text-shadow: none !important;
+}
+
+.navbar-brand:hover {
+  color: oklch(var(--p) / 0.9) ;
+  text-decoration: none !important;
+}
+
+/* Alert Styles */
+.alert {
+  border: none ;
+  border-radius: var(--btz-radius) !important;
+  box-shadow: var(--btz-shadow-sm) !important;
+}
+
+.alert-success {
+  background-color: rgba(40, 167, 69, 0.1) ;
+  color: var(--btz-success) ;
+  border-left: 4px solid var(--btz-success) !important;
+}
+
+.alert-danger {
+  background-color: rgba(220, 53, 69, 0.1) ;
+  color: var(--btz-danger) ;
+  border-left: 4px solid var(--btz-danger) !important;
+}
+
+.alert-warning {
+  background-color: rgba(255, 193, 7, 0.1) ;
+  color: #856404 ;
+  border-left: 4px solid var(--btz-warning) !important;
+}
+
+.alert-info {
+  background-color: rgba(23, 162, 184, 0.1) ;
+  color: var(--btz-info) ;
+  border-left: 4px solid var(--btz-info) !important;
+}
+
+/* Badge Styles */
+.badge {
+  border-radius: var(--btz-radius-sm) !important;
+  font-weight: 600 !important;
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+}
+
+.badge-primary {
+  background-color: var(--btz-primary) ;
+  color: white ;
+}
+
+.badge-success {
+  background-color: var(--btz-success) ;
+  color: white ;
+}
+
+.badge-danger {
+  background-color: var(--btz-danger) ;
+  color: white ;
+}
+
+.badge-danger.badge-sm {
+  background-color: var(--btz-danger) ;
+  color: white ;
+  border-radius: var(--btz-radius-sm) !important;
+  font-weight: 600 !important;
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
+}
+
+.badge-warning {
+  background-color: var(--btz-warning) ;
+
+}
+
+.badge-error {
+  background-color: var(--btz-danger) ;
+  color: white ;
+}
+
+.badge-error.badge-sm {
+  background-color: var(--btz-danger) ;
+  color: white ;
+  border-radius: 50% !important;
+  min-width: 1.25rem !important;
+  height: 1.25rem !important;
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
+}
+
+/* Sidebar Styles - HELLE, LESBARE VERSION */
+.sidebar {
+  background-color: oklch(var(--b1)) ;
+  border-right: 2px solid #e3f2fd !important;
+  box-shadow: 0 0 10px rgba(0, 102, 204, 0.05) !important;
+}
+
+.sidebar .nav-link {
+
+  border-radius: 0.5rem !important;
+  margin: 0.25rem 0.5rem !important;
+  padding: 0.75rem 1rem !important;
+  transition: all 0.2s ease-in-out !important;
+  font-weight: 500 !important;
+  background: transparent ;
+  border: none ;
+}
+
+.sidebar .nav-link:hover {
+  background-color: #e3f2fd ;
+  color: oklch(var(--p)) ;
+  transform: translateX(4px) !important;
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1) !important;
+}
+
+.sidebar .nav-link.active {
+  background: oklch(var(--p) / 0.1) ;
+  color: oklch(var(--p)) ;
+  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15) !important;
+  font-weight: 600 !important;
+}
+
+/* Modal Styles */
+.modal-content {
+  border: none ;
+  border-radius: var(--btz-radius-lg) !important;
+  box-shadow: var(--btz-shadow-xl) !important;
+}
+
+.modal-header {
+  background: var(--btz-accent) ;
+  border-bottom: 2px solid var(--btz-primary-light) !important;
+  border-radius: var(--btz-radius-lg) var(--btz-radius-lg) 0 0 !important;
+}
+
+.modal-title {
+  color: var(--btz-text) ;
+  font-weight: 600 !important;
+}
+
+/* Loading States */
+.loading {
+  position: relative !important;
+}
+
+.loading::after {
+  content: "" !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: 20px !important;
+  height: 20px !important;
+  margin: -10px 0 0 -10px !important;
+  border: 2px solid var(--btz-primary-light) ;
+  border-top: 2px solid var(--btz-primary) !important;
+  border-radius: 50% !important;
+  animation: spin 1s linear infinite !important;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* ========================================
+   BTZ-KÖLN FORM ELEMENTS - IMPROVED
+   ======================================== */
+
+/* Checkbox Styles - Verbesserte Sichtbarkeit */
+input[type="checkbox"] {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  border: 2px solid #6c757d ;
+  background-color: oklch(var(--b1)) ;
+  border-radius: 0.25rem !important;
+  position: relative !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+input[type="checkbox"]:hover {
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
+}
+
+input[type="checkbox"]:checked {
+  background: oklch(var(--p)) ;
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "✓" !important;
+  color: white ;
+  font-size: 0.75rem !important;
+  font-weight: bold !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+/* Radio Button Styles */
+input[type="radio"] {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  border: 2px solid #6c757d ;
+  background-color: oklch(var(--b1)) ;
+  border-radius: 50% !important;
+  position: relative !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+input[type="radio"]:hover {
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
+}
+
+input[type="radio"]:checked {
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
+}
+
+input[type="radio"]:checked::after {
+  content: "" !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+  background: oklch(var(--p)) ;
+  border-radius: 50% !important;
+}
+
+/* Checkbox Styles - Verbesserte Sichtbarkeit (DaisyUI) */
+.checkbox {
+  border: 2px solid #6c757d ;
+  background-color: oklch(var(--b1)) ;
+  transition: all 0.2s ease-in-out !important;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  border-radius: 0.25rem !important;
+}
+
+.checkbox:hover {
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
+}
+
+.checkbox:checked {
+  background: oklch(var(--p)) ;
+  border-color: oklch(var(--p)) ;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
+}
+
+.checkbox:checked::after {
+  content: "✓" !important;
+  color: white ;
+  font-size: 0.75rem !important;
+  font-weight: bold !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+/* Dropdown Menu Styles - Weißer Hintergrund für Admin-Menü */
+.dropdown-content {
+  background-color: oklch(var(--b1)) ;
+  border: 1px solid #e3f2fd ;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 25px rgba(0, 102, 204, 0.1) !important;
+
+}
+
+.dropdown-content .menu li a {
+
+  transition: all 0.2s ease-in-out !important;
+  padding: 0.5rem 0.75rem !important;
+  border-radius: 0.25rem !important;
+}
+
+.dropdown-content .menu li a:hover {
+  background: #e3f2fd ;
+  color: oklch(var(--p)) ;
+}
+
+.dropdown-content .menu li a.active {
+  background: #bbdefb ;
+  color: oklch(var(--p)) ;
+  font-weight: 600 !important;
+}
+
+.dropdown-content .divider {
+  border-color: #e3f2fd ;
+}
+
+/* Menu Styles für bessere Konsistenz */
+.menu {
+  background-color: oklch(var(--b1)) ;
+}
+
+.menu li a {
+
+}
+
+.menu li a:hover {
+  background: #e3f2fd ;
+  color: oklch(var(--p)) ;
+}
+
+/* Modal/Dialog Hintergrund - Sicherstellen, dass er nicht transparent ist */
+.modal {
+  background: rgba(0, 0, 0, 0.5) ;
+}
+
+.modal-box {
+  background-color: oklch(var(--b1)) ;
+  border: 1px solid #e3f2fd ;
+  box-shadow: 0 20px 25px rgba(0, 102, 204, 0.1) !important;
+}
+
 /*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */
@@ -566,12 +1165,12 @@ video {
     --fallback-p: #491eff;
     --fallback-pc: #d4dbff;
     --fallback-s: #ff41c7;
-    --fallback-sc: #fff9fc;
+    --fallback-sc: oklch(var(--b1));
     --fallback-a: #00cfbd;
     --fallback-ac: #00100d;
     --fallback-n: #2b3440;
     --fallback-nc: #d7dde4;
-    --fallback-b1: #ffffff;
+    --fallback-b1: oklch(var(--b1));
     --fallback-b2: #e5e6e6;
     --fallback-b3: #e5e6e6;
     --fallback-bc: #1f2937;
@@ -842,7 +1441,7 @@ body {
   .\!table tr.hover:hover,
   .\!table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1 !important;
-    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
   }
 
   .table tr.hover:hover,
@@ -854,7 +1453,7 @@ body {
   .\!table tr.hover:hover,
   .\!table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1 !important;
-    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
   }
 
   .table-zebra tr.hover:hover,
@@ -877,8 +1476,8 @@ body {
   align-items: center !important;
   justify-content: center !important;
   border-radius: var(--rounded-btn, 0.5rem) !important;
-  border-color: transparent !important;
-  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)) !important;
+  border-color: transparent ;
+  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)) ;
   padding-left: 1rem !important;
   padding-right: 1rem !important;
   text-align: center !important;
@@ -892,12 +1491,12 @@ body {
   border-width: var(--border-btn, 1px) !important;
   transition-property: color, background-color, border-color, opacity, box-shadow, transform !important;
   --tw-text-opacity: 1 !important;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) ;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1)) !important;
-  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)) !important;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1)) ;
+  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)) ;
   --tw-bg-opacity: 1 !important;
   --tw-border-opacity: 1 !important;
 }
@@ -1392,9 +1991,9 @@ body {
 
   .\!btn:hover {
     --tw-border-opacity: 1 !important;
-    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important;
+    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) ;
     --tw-bg-opacity: 1 !important;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) ;
   }
 
   @supports (color: color-mix(in oklab, black, black)) {
@@ -1403,19 +2002,19 @@ body {
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
       border-color: color-mix(
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
     }
   }
 
   @supports not (color: oklch(0% 0 0)) {
     .\!btn:hover {
-      background-color: var(--btn-color, var(--fallback-b2)) !important;
-      border-color: var(--btn-color, var(--fallback-b2)) !important;
+      background-color: var(--btn-color, var(--fallback-b2)) ;
+      border-color: var(--btn-color, var(--fallback-b2)) ;
     }
   }
 
@@ -1450,9 +2049,9 @@ body {
 
   .\!btn:hover {
     --tw-border-opacity: 1 !important;
-    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important;
+    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) ;
     --tw-bg-opacity: 1 !important;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) ;
   }
 
   @supports (color: color-mix(in oklab, black, black)) {
@@ -1461,27 +2060,27 @@ body {
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
       border-color: color-mix(
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
     }
   }
 
   @supports not (color: oklch(0% 0 0)) {
     .\!btn:hover {
-      background-color: var(--btn-color, var(--fallback-b2)) !important;
-      border-color: var(--btn-color, var(--fallback-b2)) !important;
+      background-color: var(--btn-color, var(--fallback-b2)) ;
+      border-color: var(--btn-color, var(--fallback-b2)) ;
     }
   }
 
   .\!btn:hover {
     --tw-border-opacity: 1 !important;
-    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important;
+    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) ;
     --tw-bg-opacity: 1 !important;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) ;
   }
 
   @supports (color: color-mix(in oklab, black, black)) {
@@ -1490,19 +2089,19 @@ body {
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
       border-color: color-mix(
             in oklab,
             oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
             black
-          ) !important;
+          ) ;
     }
   }
 
   @supports not (color: oklch(0% 0 0)) {
     .\!btn:hover {
-      background-color: var(--btn-color, var(--fallback-b2)) !important;
-      border-color: var(--btn-color, var(--fallback-b2)) !important;
+      background-color: var(--btn-color, var(--fallback-b2)) ;
+      border-color: var(--btn-color, var(--fallback-b2)) ;
     }
   }
 
@@ -1633,16 +2232,16 @@ body {
     .\!btn[disabled]:hover,
     .\!btn:disabled:hover {
     --tw-border-opacity: 0 !important;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
+    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) ;
     --tw-bg-opacity: 0.2 !important;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
+    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) ;
     --tw-text-opacity: 0.2 !important;
   }
 
   @supports (color: color-mix(in oklab, black, black)) {
     .\!btn:is(input[type="checkbox"]:checked):hover, .\!btn:is(input[type="radio"]:checked):hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important;
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important;
+      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) ;
+      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) ;
     }
 
     .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
@@ -1651,8 +2250,8 @@ body {
     }
 
     .\!btn:is(input[type="checkbox"]:checked):hover, .\!btn:is(input[type="radio"]:checked):hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important;
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important;
+      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) ;
+      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) ;
     }
   }
 
@@ -1820,9 +2419,9 @@ body {
   line-height: 1.5rem !important;
   border-radius: var(--rounded-btn, 0.5rem) !important;
   border-width: 1px !important;
-  border-color: transparent !important;
+  border-color: transparent ;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) ;
 }
 
 .input {
@@ -2017,8 +2616,8 @@ body {
   opacity: 0 !important;
   overscroll-behavior: contain !important;
   z-index: 999 !important;
-  background-color: transparent !important;
-  color: inherit !important;
+
+  color: inherit ;
   transition-duration: 200ms !important;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
   transition-property: transform, opacity, visibility !important;
@@ -2488,7 +3087,7 @@ input.tab:checked + .tab-content,
   top: 0px !important;
   z-index: 1 !important;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) ;
 }
 
 .table :where(.table-pin-rows thead tr) {
@@ -2504,7 +3103,7 @@ input.tab:checked + .tab-content,
   bottom: 0px !important;
   z-index: 1 !important;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) ;
 }
 
 .table :where(.table-pin-rows tfoot tr) {
@@ -2520,7 +3119,7 @@ input.tab:checked + .tab-content,
   left: 0px !important;
   right: 0px !important;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) ;
 }
 
 .table :where(.table-pin-cols tr th) {
@@ -2689,11 +3288,11 @@ input.tab:checked + .tab-content,
 }
 
 .badge-error {
-  border-color: transparent;
+  border-color: transparent ;
   --tw-bg-opacity: 1;
-  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+  background-color: var(--btz-danger) ;
   --tw-text-opacity: 1;
-  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  color: white ;
 }
 
 .badge-ghost {
@@ -2749,7 +3348,12 @@ input.tab:checked + .tab-content,
 
 .badge-outline.badge-error {
   --tw-text-opacity: 1;
-  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
+  color: var(--btz-danger) ;
+}
+
+.badge-outline.badge-danger {
+  --tw-text-opacity: 1;
+  color: var(--btz-danger) ;
 }
 
 .btm-nav > *:where(.active) {
@@ -2803,8 +3407,8 @@ input.tab:checked + .tab-content,
 
 @supports not (color: oklch(0% 0 0)) {
   .\!btn {
-    background-color: var(--btn-color, var(--fallback-b2)) !important;
-    border-color: var(--btn-color, var(--fallback-b2)) !important;
+    background-color: var(--btn-color, var(--fallback-b2)) ;
+    border-color: var(--btn-color, var(--fallback-b2)) ;
   }
 
   .btn {
@@ -2983,7 +3587,7 @@ input.tab:checked + .tab-content,
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-  outline-color: currentColor !important;
+  outline-color: currentColor ;
 }
 
 .btn.glass {
@@ -3118,9 +3722,9 @@ input.tab:checked + .tab-content,
   .\!btn[disabled],
   .\!btn:disabled {
   --tw-border-opacity: 0 !important;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) ;
   --tw-bg-opacity: 0.2 !important;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) ;
   --tw-text-opacity: 0.2 !important;
 }
 
@@ -3138,20 +3742,20 @@ input.tab:checked + .tab-content,
   .\!btn[disabled],
   .\!btn:disabled {
   --tw-border-opacity: 0 !important;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) ;
   --tw-bg-opacity: 0.2 !important;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) ;
   --tw-text-opacity: 0.2 !important;
 }
 
 .\!btn:is(input[type="checkbox"]:checked),
 .\!btn:is(input[type="radio"]:checked) {
   --tw-border-opacity: 1 !important;
-  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) !important;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) ;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) ;
   --tw-text-opacity: 1 !important;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) !important;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) ;
 }
 
 .btn:is(input[type="checkbox"]:checked),
@@ -3167,15 +3771,15 @@ input.tab:checked + .tab-content,
 .\!btn:is(input[type="checkbox"]:checked),
 .\!btn:is(input[type="radio"]:checked) {
   --tw-border-opacity: 1 !important;
-  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) !important;
+  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) ;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) ;
   --tw-text-opacity: 1 !important;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) !important;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) ;
 }
 
 .\!btn:is(input[type="checkbox"]:checked):focus-visible, .\!btn:is(input[type="radio"]:checked):focus-visible {
-  outline-color: var(--fallback-p,oklch(var(--p)/1)) !important;
+  outline-color: var(--fallback-p,oklch(var(--p)/1)) ;
 }
 
 .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
@@ -3183,7 +3787,7 @@ input.tab:checked + .tab-content,
 }
 
 .\!btn:is(input[type="checkbox"]:checked):focus-visible, .\!btn:is(input[type="radio"]:checked):focus-visible {
-  outline-color: var(--fallback-p,oklch(var(--p)/1)) !important;
+  outline-color: var(--fallback-p,oklch(var(--p)/1)) ;
 }
 
 @keyframes button-pop {
@@ -3537,8 +4141,8 @@ details.collapse summary::-webkit-details-marker {
 
 .\!input input {
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) !important;
-  background-color: transparent !important;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) ;
+
 }
 
 .input input {
@@ -3572,11 +4176,11 @@ details.collapse summary::-webkit-details-marker {
 .\!input:focus,
   .\!input:focus-within {
   box-shadow: none !important;
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) ;
   outline-style: solid !important;
   outline-width: 2px !important;
   outline-offset: 2px !important;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)) ;
 }
 
 .input:focus,
@@ -3592,11 +4196,11 @@ details.collapse summary::-webkit-details-marker {
 .\!input:focus,
   .\!input:focus-within {
   box-shadow: none !important;
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) ;
   outline-style: solid !important;
   outline-width: 2px !important;
   outline-offset: 2px !important;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)) ;
 }
 
 .input-error {
@@ -3616,10 +4220,10 @@ details.collapse summary::-webkit-details-marker {
   .\!input[disabled] {
   cursor: not-allowed !important;
   --tw-border-opacity: 1 !important;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) ;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
-  color: var(--fallback-bc,oklch(var(--bc)/0.4)) !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
+  color: var(--fallback-bc,oklch(var(--bc)/0.4)) ;
 }
 
 .input:has(> input[disabled]),
@@ -3639,21 +4243,21 @@ details.collapse summary::-webkit-details-marker {
   .\!input[disabled] {
   cursor: not-allowed !important;
   --tw-border-opacity: 1 !important;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) ;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
-  color: var(--fallback-bc,oklch(var(--bc)/0.4)) !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
+  color: var(--fallback-bc,oklch(var(--bc)/0.4)) ;
 }
 
 .\!input:has(> input[disabled])::-moz-placeholder, .\!input:disabled::-moz-placeholder, .\!input[disabled]::-moz-placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) ;
   --tw-placeholder-opacity: 0.2 !important;
 }
 
 .\!input:has(> input[disabled])::placeholder,
   .\!input:disabled::placeholder,
   .\!input[disabled]::placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) ;
   --tw-placeholder-opacity: 0.2 !important;
 }
 
@@ -3671,14 +4275,14 @@ details.collapse summary::-webkit-details-marker {
 }
 
 .\!input:has(> input[disabled])::-moz-placeholder, .\!input:disabled::-moz-placeholder, .\!input[disabled]::-moz-placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) ;
   --tw-placeholder-opacity: 0.2 !important;
 }
 
 .\!input:has(> input[disabled])::placeholder,
   .\!input:disabled::placeholder,
   .\!input[disabled]::placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))) ;
   --tw-placeholder-opacity: 0.2 !important;
 }
 
@@ -3907,7 +4511,7 @@ details.collapse summary::-webkit-details-marker {
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
   padding-left: 2rem !important;
   direction: ltr !important;
 }
@@ -3939,7 +4543,7 @@ details.collapse summary::-webkit-details-marker {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
   border-radius: 9999px !important;
   border-width: 2px !important;
-  border-color: currentColor !important;
+  border-color: currentColor ;
   opacity: 0.6 !important;
 }
 
@@ -3969,7 +4573,7 @@ details.collapse summary::-webkit-details-marker {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
   border-radius: 9999px !important;
   border-width: 1px !important;
-  border-color: currentColor !important;
+  border-color: currentColor ;
   opacity: 0.6 !important;
 }
 
@@ -3990,7 +4594,7 @@ details.collapse summary::-webkit-details-marker {
 
 .\!modal:not(dialog:not(.modal-open)),
   .\!modal::backdrop {
-  background-color: #0006 !important;
+  background-color: #0006 ;
   animation: modal-pop 0.2s ease-out !important;
 }
 
@@ -4002,7 +4606,7 @@ details.collapse summary::-webkit-details-marker {
 
 .\!modal:not(dialog:not(.modal-open)),
   .\!modal::backdrop {
-  background-color: #0006 !important;
+  background-color: #0006 ;
   animation: modal-pop 0.2s ease-out !important;
 }
 
@@ -4591,7 +5195,7 @@ details.collapse summary::-webkit-details-marker {
 .\!table tr.active,
   .\!table tr.active:nth-child(even) {
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
 }
 
 .table tr.active,
@@ -4604,7 +5208,7 @@ details.collapse summary::-webkit-details-marker {
 .\!table tr.active,
   .\!table tr.active:nth-child(even) {
   --tw-bg-opacity: 1 !important;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) ;
 }
 
 .table-zebra tr.active,
@@ -4617,7 +5221,7 @@ details.collapse summary::-webkit-details-marker {
 .\!table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px !important;
   --tw-border-opacity: 1 !important;
-  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) ;
 }
 
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
@@ -4631,7 +5235,7 @@ details.collapse summary::-webkit-details-marker {
   font-size: 0.75rem !important;
   line-height: 1rem !important;
   font-weight: 700 !important;
-  color: var(--fallback-bc,oklch(var(--bc)/0.6)) !important;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6)) ;
 }
 
 .table :where(thead, tfoot) {
@@ -4645,7 +5249,7 @@ details.collapse summary::-webkit-details-marker {
 .\!table :where(tfoot) {
   border-top-width: 1px !important;
   --tw-border-opacity: 1 !important;
-  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) ;
 }
 
 .table :where(tfoot) {
@@ -4860,6 +5464,20 @@ details.collapse summary::-webkit-details-marker {
   padding-right: 0.438rem;
 }
 
+.badge-error.badge-sm {
+  height: 1.25rem !important;
+  min-width: 1.25rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1.25rem !important;
+  padding-left: 0.375rem !important;
+  padding-right: 0.375rem !important;
+  border-radius: 50% !important;
+  background-color: var(--btz-danger) ;
+  color: white ;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
+}
+
 .badge-lg {
   height: 1.5rem;
   font-size: 1rem;
diff --git a/app/static/css/quickscan.css b/app/static/css/quickscan.css
index d49362a..aa12ea2 100755
--- a/app/static/css/quickscan.css
+++ b/app/static/css/quickscan.css
@@ -1,340 +1,340 @@
-/* iOS Viewport-Fallbacks für Kamera-Container */
-.camera-container {
-  height: 45dvh;
-  min-height: 200px;
-  display: block;
-  visibility: visible;
-}
-@supports not (height: 1dvh) {
-  .camera-container { height: calc(45vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
-}
-@supports (height: 1svh) {
-  .camera-container { height: 45svh; }
-}
-/* QuickScan Styles */
-
-/* Card States - Spezifischere Selektoren */
-#itemCard.selected,
-#workerCard.selected {
-    border-color: #fbbf24 !important;
-    background-color: rgba(251, 191, 36, 0.1) !important;
-    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3) !important;
-}
-
-#itemCard.success,
-#workerCard.success {
-    border-color: #10b981 !important;
-    background-color: rgba(16, 185, 129, 0.1) !important;
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important;
-}
-
-.scan-area {
-    position: relative;
-    min-height: 60px;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: rgba(var(--b1) / 0.1);
-    backdrop-filter: blur(8px);
-}
-
-.scan-animation {
-    position: relative;
-    min-height: 3rem;
-}
-
-.scan-line {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        hsl(var(--p) / 0.3) 20%, 
-        hsl(var(--p)) 50%,
-        hsl(var(--p) / 0.3) 80%,
-        transparent 100%
-    );
-    box-shadow: 0 0 8px hsl(var(--p) / 0.5);
-    animation: scanning 1.5s ease-in-out infinite;
-    z-index: 10;
-}
-
-.scan-overlay {
-    position: absolute;
-    inset: 0;
-    border: 2px solid hsl(var(--p));
-    border-radius: 0.5rem;
-}
-
-@keyframes scanning {
-    0% {
-        top: 0;
-        opacity: 0.8;
-    }
-    50% {
-        top: calc(100% - 2px);
-        opacity: 1;
-    }
-    100% {
-        top: 0;
-        opacity: 0.8;
-    }
-}
-
-/* Step Styles */
-.step.step-primary .collapse-title {
-    background-color: hsl(var(--p));
-    color: hsl(var(--pc));
-}
-
-.step:not(.step-primary) .collapse-content {
-    opacity: 0.5;
-}
-
-/* Webcam Container */
-#webcamMode {
-    aspect-ratio: 16/9;
-    max-height: 200px;
-    overflow: hidden;
-    border-radius: 0.5rem;
-}
-
-#video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-/* Anpassungen für horizontale Steps */
-.modal-box {
-    max-height: min(600px, 80vh);
-    width: min(450px, 95vw);
-}
-
-.steps-horizontal {
-    margin-bottom: 1rem;
-}
-
-.step {
-    opacity: 0.7;
-    transition: all 0.3s ease;
-}
-
-.step.active {
-    opacity: 1;
-}
-
-/* Steps */
-.steps {
-    --connector-size: 2px;
-    --step-padding: 1rem;
-}
-
-.steps .step {
-    --size: 2rem;
-}
-
-.steps .step:before {
-    height: var(--connector-size);
-    background-color: hsl(var(--b3));
-}
-
-.steps .step.step-primary:before {
-    background-color: hsl(var(--p));
-}
-
-.steps .step:after {
-    width: var(--size);
-    height: var(--size);
-    background-color: hsl(var(--b3));
-    border: var(--connector-size) solid hsl(var(--b2));
-    font-size: 0.8rem;
-}
-
-.steps .step.step-primary:after {
-    background-color: hsl(var(--p));
-    border-color: hsl(var(--p));
-    color: hsl(var(--pc));
-}
-
-/* Content Area */
-#stepContent {
-    transition: all 0.3s ease-in-out;
-}
-
-/* Transitions */
-.transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-
-/* Alert Customization */
-.alert {
-    --padding-y: 0.5rem;
-    --padding-x: 0.75rem;
-}
-
-/* Input Customization */
-.input-sm {
-    height: 2rem;
-    font-size: 0.875rem;
-}
-
-/* Button Customization */
-.btn-sm {
-    height: 2rem;
-    min-height: 2rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-}
-
-/* Content Area */
-.bg-base-200 {
-    --tw-bg-opacity: 0.5;
-}
-
-/* Progress Steps Container */
-.w-full.px-4.py-2.bg-base-200 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-/* Content Area Padding anpassen */
-.p-4 {
-    padding: 0.75rem;
-}
-
-/* Alert Größe optimieren */
-.alert.shadow-sm {
-    padding: 0.5rem;
-    min-height: unset;
-}
-
-/* Toast Container */
-#toast-container {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 9999; /* Höher als Modal (normalerweise 999) */
-    pointer-events: none; /* Erlaubt Klicks durch den Container */
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-/* Individual Toast */
-#toast-container .alert {
-    pointer-events: auto; /* Macht den Toast selbst klickbar */
-    min-width: 250px;
-    max-width: 90vw;
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(0,0,0,0.1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-                0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-/* Toast Animation */
-#toast-container .alert {
-    transition: all 0.3s ease;
-}
-
-/* Toast Varianten */
-#toast-container .alert-error {
-    background-color: hsl(var(--er));
-    color: hsl(var(--erc));
-}
-
-#toast-container .alert-success {
-    background-color: hsl(var(--su));
-    color: hsl(var(--suc));
-}
-
-#toast-container .alert-info {
-    background-color: hsl(var(--in));
-    color: hsl(var(--inc));
-}
-
-#toast-container .alert-warning {
-    background-color: hsl(var(--wa));
-    color: hsl(var(--wac));
-}
-
-/* Scanning Animation */
-.scan-step {
-    transition: all 0.3s ease-in-out;
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.scan-step.hidden {
-    opacity: 0;
-    transform: translateY(20px);
-    pointer-events: none;
-}
-
-/* Confirmation Barcodes */
-canvas {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-}
-
-/* Success Animation */
-@keyframes success-pulse {
-    0% {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-    50% {
-        transform: scale(1.1);
-        opacity: 0.8;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-.success-icon {
-    animation: success-pulse 0.5s ease-out forwards;
-}
-
-/* Mobile Optimierungen */
-@media (max-width: 768px) {
-    .modal-box {
-        width: 100%;
-        height: 100%;
-        max-height: 100vh;
-        margin: 0;
-        border-radius: 0;
-    }
-
-    .scan-area {
-        min-height: 80px;
-    }
-
-    #webcamMode {
-        max-height: 300px;
-    }
-
-    .steps-horizontal {
-        flex-wrap: wrap;
-    }
-
-    .step {
-        min-width: 50%;
-    }
-}
-
-/* Touch-Optimierungen */
-@media (hover: none) {
-    .btn {
-        min-height: 44px; /* Bessere Touch-Targets */
-    }
-
-    .scan-area {
-        min-height: 100px;
-    }
-} 
\ No newline at end of file
+/* iOS Viewport-Fallbacks für Kamera-Container */
+.camera-container {
+  height: 45dvh;
+  min-height: 200px;
+  display: block;
+  visibility: visible;
+}
+@supports not (height: 1dvh) {
+  .camera-container { height: calc(45vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
+}
+@supports (height: 1svh) {
+  .camera-container { height: 45svh; }
+}
+/* QuickScan Styles */
+
+/* Card States - Spezifischere Selektoren */
+#itemCard.selected,
+#workerCard.selected {
+    border-color: oklch(var(--wa)) !important;
+    background-color: oklch(var(--wa) / 0.1) !important;
+    box-shadow: 0 0 20px oklch(var(--wa) / 0.3) !important;
+}
+
+#itemCard.success,
+#workerCard.success {
+    border-color: oklch(var(--su)) !important;
+    background-color: oklch(var(--su) / 0.1) !important;
+    box-shadow: 0 0 20px oklch(var(--su) / 0.3) !important;
+}
+
+.scan-area {
+    position: relative;
+    min-height: 60px;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: rgba(var(--b1) / 0.1);
+    backdrop-filter: blur(8px);
+}
+
+.scan-animation {
+    position: relative;
+    min-height: 3rem;
+}
+
+.scan-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        oklch(var(--p) / 0.3) 20%,
+        oklch(var(--p)) 50%,
+        oklch(var(--p) / 0.3) 80%,
+        transparent 100%
+    );
+    box-shadow: 0 0 8px oklch(var(--p) / 0.5);
+    animation: scanning 1.5s ease-in-out infinite;
+    z-index: 10;
+}
+
+.scan-overlay {
+    position: absolute;
+    inset: 0;
+    border: 2px solid oklch(var(--p));
+    border-radius: 0.5rem;
+}
+
+@keyframes scanning {
+    0% {
+        top: 0;
+        opacity: 0.8;
+    }
+    50% {
+        top: calc(100% - 2px);
+        opacity: 1;
+    }
+    100% {
+        top: 0;
+        opacity: 0.8;
+    }
+}
+
+/* Step Styles */
+.step.step-primary .collapse-title {
+    background-color: oklch(var(--p));
+    color: oklch(var(--pc));
+}
+
+.step:not(.step-primary) .collapse-content {
+    opacity: 0.5;
+}
+
+/* Webcam Container */
+#webcamMode {
+    aspect-ratio: 16/9;
+    max-height: 200px;
+    overflow: hidden;
+    border-radius: 0.5rem;
+}
+
+#video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Anpassungen für horizontale Steps */
+.modal-box {
+    max-height: min(600px, 80vh);
+    width: min(450px, 95vw);
+}
+
+.steps-horizontal {
+    margin-bottom: 1rem;
+}
+
+.step {
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
+.step.active {
+    opacity: 1;
+}
+
+/* Steps */
+.steps {
+    --connector-size: 2px;
+    --step-padding: 1rem;
+}
+
+.steps .step {
+    --size: 2rem;
+}
+
+.steps .step:before {
+    height: var(--connector-size);
+    background-color: oklch(var(--b3));
+}
+
+.steps .step.step-primary:before {
+    background-color: oklch(var(--p));
+}
+
+.steps .step:after {
+    width: var(--size);
+    height: var(--size);
+    background-color: oklch(var(--b3));
+    border: var(--connector-size) solid oklch(var(--b2));
+    font-size: 0.8rem;
+}
+
+.steps .step.step-primary:after {
+    background-color: oklch(var(--p));
+    border-color: oklch(var(--p));
+    color: oklch(var(--pc));
+}
+
+/* Content Area */
+#stepContent {
+    transition: all 0.3s ease-in-out;
+}
+
+/* Transitions */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Alert Customization */
+.alert {
+    --padding-y: 0.5rem;
+    --padding-x: 0.75rem;
+}
+
+/* Input Customization */
+.input-sm {
+    height: 2rem;
+    font-size: 0.875rem;
+}
+
+/* Button Customization */
+.btn-sm {
+    height: 2rem;
+    min-height: 2rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+/* Content Area */
+.bg-base-200 {
+    --tw-bg-opacity: 0.5;
+}
+
+/* Progress Steps Container */
+.w-full.px-4.py-2.bg-base-200 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+/* Content Area Padding anpassen */
+.p-4 {
+    padding: 0.75rem;
+}
+
+/* Alert Größe optimieren */
+.alert.shadow-sm {
+    padding: 0.5rem;
+    min-height: unset;
+}
+
+/* Toast Container */
+#toast-container {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 9999; /* Höher als Modal (normalerweise 999) */
+    pointer-events: none; /* Erlaubt Klicks durch den Container */
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Individual Toast */
+#toast-container .alert {
+    pointer-events: auto; /* Macht den Toast selbst klickbar */
+    min-width: 250px;
+    max-width: 90vw;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(0,0,0,0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Toast Animation */
+#toast-container .alert {
+    transition: all 0.3s ease;
+}
+
+/* Toast Varianten */
+#toast-container .alert-error {
+    background-color: oklch(var(--er));
+    color: oklch(var(--erc));
+}
+
+#toast-container .alert-success {
+    background-color: oklch(var(--su));
+    color: oklch(var(--suc));
+}
+
+#toast-container .alert-info {
+    background-color: oklch(var(--in));
+    color: oklch(var(--inc));
+}
+
+#toast-container .alert-warning {
+    background-color: oklch(var(--wa));
+    color: oklch(var(--wac));
+}
+
+/* Scanning Animation */
+.scan-step {
+    transition: all 0.3s ease-in-out;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.scan-step.hidden {
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+}
+
+/* Confirmation Barcodes */
+canvas {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+}
+
+/* Success Animation */
+@keyframes success-pulse {
+    0% {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.success-icon {
+    animation: success-pulse 0.5s ease-out forwards;
+}
+
+/* Mobile Optimierungen */
+@media (max-width: 768px) {
+    .modal-box {
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    .scan-area {
+        min-height: 80px;
+    }
+
+    #webcamMode {
+        max-height: 300px;
+    }
+
+    .steps-horizontal {
+        flex-wrap: wrap;
+    }
+
+    .step {
+        min-width: 50%;
+    }
+}
+
+/* Touch-Optimierungen */
+@media (hover: none) {
+    .btn {
+        min-height: 44px; /* Bessere Touch-Targets */
+    }
+
+    .scan-area {
+        min-height: 100px;
+    }
+}
diff --git a/app/templates/about.html b/app/templates/about.html
index 20f7b23..88b7c0f 100755
--- a/app/templates/about.html
+++ b/app/templates/about.html
@@ -3,13 +3,13 @@
 {% block title %}Über Scandy - Funktionsübersicht & Anleitung{% endblock %}
 
 {% block content %}
-<div class="container mx-auto p-4">
+<div class="max-w-7xl mx-auto px-4 py-8">
     <!-- Header -->
-    <div class="text-center mb-8">
-        <h1 class="text-3xl font-bold mb-2">Über Scandy</h1>
-        <p class="text-lg opacity-75">Universelles Verwaltungssystem für Inventar, Personal und Aufgaben</p>
-        <div class="mt-4 max-w-3xl mx-auto">
-            <div class="stats shadow bg-base-200 text-base-content">
+    <div class="text-center mb-12">
+        <h1 class="text-5xl font-black tracking-tight mb-4">Über <span class="text-primary">Scandy</span></h1>
+        <p class="text-xl opacity-50 max-w-2xl mx-auto font-medium">Universelles Verwaltungssystem für Inventar, Personal und Aufgaben</p>
+        <div class="mt-10">
+            <div class="stats glass-panel shadow-2xl rounded-3xl overflow-hidden border border-base-content/5">
                 <div class="stat">
                     <div class="stat-figure text-primary">
                         <i class="fas fa-code text-2xl"></i>
@@ -37,10 +37,10 @@ <h1 class="text-3xl font-bold mb-2">Über Scandy</h1>
 
     <div class="flex flex-col gap-8">
         <!-- Benutzerhandbuch – Inhaltsverzeichnis -->
-        <div class="card bg-base-100 shadow-lg border border-base-300">
-            <div class="card-body">
-                <h2 class="card-title text-xl"><i class="fas fa-book mr-2"></i>Benutzerhandbuch – Inhaltsverzeichnis</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
+        <div class="card-modern card bg-base-100">
+            <div class="card-body p-8">
+                <h2 class="card-title text-2xl font-black mb-6"><i class="fas fa-book text-primary mr-3"></i>Benutzerhandbuch</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                     <a class="link" href="#manual-roles">1. Rollen & Berechtigungen</a>
                     <a class="link" href="#manual-auth">2. Anmeldung & Navigation</a>
                     <a class="link" href="#manual-dashboard">3. Dashboard</a>
@@ -60,13 +60,13 @@ <h2 class="card-title text-xl"><i class="fas fa-book mr-2"></i>Benutzerhandbuch
         </div>
 
         <!-- 1. Rollen & Berechtigungen -->
-        <div id="manual-roles" class="card bg-base-100 shadow-lg collapse collapse-arrow border border-base-300">
+        <div id="manual-roles" class="card-modern card bg-base-100 collapse collapse-arrow overflow-hidden">
             <input type="checkbox" class="peer" />
-            <div class="collapse-title text-xl font-medium peer-checked:bg-base-200">
-                <i class="fas fa-user-shield mr-2"></i>1. Rollen & Berechtigungen
+            <div class="collapse-title text-xl font-bold py-6 px-8 flex items-center peer-checked:bg-base-200/50">
+                <i class="fas fa-user-shield text-primary mr-4"></i>1. Rollen & Berechtigungen
             </div>
-            <div class="collapse-content bg-base-100 peer-checked:bg-base-200">
-                <div class="card-body">
+            <div class="collapse-content bg-base-100 peer-checked:bg-base-200/50">
+                <div class="card-body px-4">
                 <ul class="list-disc list-inside text-sm space-y-1">
                     <li><strong>Admin</strong>: System verwalten (Benutzer, Abteilungen, Feature‑Schalter, Backups). Sieht/bearbeitet alle Abteilungen.</li>
                     <li><strong>Mitarbeiter</strong>: In der eigenen Abteilung arbeiten ({{ app_labels.tools.name }}, {{ app_labels.consumables.name }}, Tickets, Ausleihen/Rückgaben).</li>
diff --git a/app/templates/admin/auto_backup.html b/app/templates/admin/auto_backup.html
index aad70e8..d42df1c 100755
--- a/app/templates/admin/auto_backup.html
+++ b/app/templates/admin/auto_backup.html
@@ -4,50 +4,50 @@
 
 {% block content %}
 <div class="container mx-auto px-4 py-8">
-    <div class="card bg-white shadow-lg border border-gray-200">
+    <div class="card bg-base-100 shadow-lg border border-base-content/10">
         <div class="card-body">
-            <h2 class="card-title mb-6 text-gray-800">
+            <h2 class="card-title mb-6 text-base-content">
                 <i class="fas fa-clock mr-2 text-orange-500"></i>
                 Automatisches Backup-System
             </h2>
 
             <!-- Status-Karte -->
-            <div class="card bg-gray-50 border border-gray-200 mb-6">
+            <div class="card bg-base-200 border border-base-content/10 mb-6">
                 <div class="card-body">
-                    <h3 class="card-title text-lg mb-4 text-gray-700">System-Status</h3>
+                    <h3 class="card-title text-lg mb-4 text-base-content/90">System-Status</h3>
                     <div id="autoBackupStatus" class="space-y-4">
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Status:</span>
+                            <span class="font-semibold text-base-content/70">Status:</span>
                             <span id="statusIndicator" class="badge badge-info">Lade...</span>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Nächste Backups:</span>
-                            <span id="nextBackup" class="text-sm text-gray-700 font-medium">Lade...</span>
+                            <span class="font-semibold text-base-content/70">Nächste Backups:</span>
+                            <span id="nextBackup" class="text-sm text-base-content/90 font-medium">Lade...</span>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Backup-Zeiten:</span>
-                            <span id="backupTimes" class="text-sm text-gray-700 font-medium">Lade...</span>
+                            <span class="font-semibold text-base-content/70">Backup-Zeiten:</span>
+                            <span id="backupTimes" class="text-sm text-base-content/90 font-medium">Lade...</span>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Nächstes wöchentliches Backup:</span>
-                            <span id="nextWeeklyBackup" class="text-sm text-gray-700 font-medium">Lade...</span>
+                            <span class="font-semibold text-base-content/70">Nächstes wöchentliches Backup:</span>
+                            <span id="nextWeeklyBackup" class="text-sm text-base-content/90 font-medium">Lade...</span>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Letztes wöchentliches Backup:</span>
-                            <span id="lastWeeklyBackup" class="text-sm text-gray-700 font-medium">Lade...</span>
+                            <span class="font-semibold text-base-content/70">Letztes wöchentliches Backup:</span>
+                            <span id="lastWeeklyBackup" class="text-sm text-base-content/90 font-medium">Lade...</span>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="font-semibold text-gray-600">Wöchentliche Backup-E-Mail:</span>
-                            <span id="weeklyBackupEmail" class="text-sm text-gray-700 font-medium">Lade...</span>
+                            <span class="font-semibold text-base-content/70">Wöchentliche Backup-E-Mail:</span>
+                            <span id="weeklyBackupEmail" class="text-sm text-base-content/90 font-medium">Lade...</span>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- Steuerung -->
-            <div class="card bg-gray-50 border border-gray-200 mb-6">
+            <div class="card bg-base-200 border border-base-content/10 mb-6">
                 <div class="card-body">
-                    <h3 class="card-title text-lg mb-4 text-gray-700">Steuerung</h3>
+                    <h3 class="card-title text-lg mb-4 text-base-content/90">Steuerung</h3>
                     <div class="flex gap-4 flex-wrap">
                         <button id="startAutoBackup" class="btn btn-success">
                             <i class="fas fa-play mr-2"></i>
@@ -70,9 +70,9 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Steuerung</h3>
             </div>
 
             <!-- Konfiguration -->
-            <div class="card bg-gray-50 border border-gray-200 mb-6">
+            <div class="card bg-base-200 border border-base-content/10 mb-6">
                 <div class="card-body">
-                    <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
+                    <h3 class="card-title text-lg mb-4 text-base-content/90">Konfiguration</h3>
                     
                     <!-- Backup-Zeiten konfigurieren -->
                     <div class="mb-6">
@@ -81,9 +81,9 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
                             <input type="hidden" name="action" value="save_times">
                             <div>
                                 <label class="label">
-                                    <span class="label-text font-semibold text-gray-600">Backup-Zeiten konfigurieren:</span>
+                                    <span class="label-text font-semibold text-base-content/70">Backup-Zeiten konfigurieren:</span>
                                 </label>
-                                <div class="text-sm text-gray-500 mb-2">
+                                <div class="text-sm text-base-content/60 mb-2">
                                     Geben Sie die gewünschten Backup-Zeiten im Format HH:MM ein, getrennt durch Kommas (z.B. 06:00,18:00)
                                 </div>
                                 <input type="text" name="backup_times" 
@@ -105,9 +105,9 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
                             <input type="hidden" name="action" value="save_weekly_time">
                             <div>
                                 <label class="label">
-                                    <span class="label-text font-semibold text-gray-600">Wöchentliche Backup-Zeit (Freitag):</span>
+                                    <span class="label-text font-semibold text-base-content/70">Wöchentliche Backup-Zeit (Freitag):</span>
                                 </label>
-                                <div class="text-sm text-gray-500 mb-2">
+                                <div class="text-sm text-base-content/60 mb-2">
                                     Geben Sie die gewünschte Zeit für das wöchentliche Backup-Archiv im Format HH:MM ein
                                 </div>
                                 <input type="text" name="weekly_backup_time" 
@@ -129,9 +129,9 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
                             <input type="hidden" name="action" value="save_weekly_email">
                             <div>
                                 <label class="label">
-                                    <span class="label-text font-semibold text-gray-600">E-Mail für wöchentliche Backups:</span>
+                                    <span class="label-text font-semibold text-base-content/70">E-Mail für wöchentliche Backups:</span>
                                 </label>
-                                <div class="text-sm text-gray-500 mb-2">
+                                <div class="text-sm text-base-content/60 mb-2">
                                     Geben Sie die E-Mail-Adresse ein, an die das wöchentliche Backup-Archiv gesendet werden soll
                                 </div>
                                 <input type="email" name="weekly_backup_email" 
@@ -149,9 +149,9 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
                     <div class="space-y-4">
                         <div>
                             <label class="label">
-                                <span class="label-text font-semibold text-gray-600">Backup-Inhalt:</span>
+                                <span class="label-text font-semibold text-base-content/70">Backup-Inhalt:</span>
                             </label>
-                            <div class="text-sm text-gray-600">
+                            <div class="text-sm text-base-content/70">
                                 <p>• Werkzeuge, Verbrauchsmaterialien, Mitarbeiter</p>
                                 <p>• Ausleihen, Tickets, Einstellungen</p>
                                 <p>• Alle Datenbank-Collections</p>
@@ -159,18 +159,18 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
                         </div>
                         <div>
                             <label class="label">
-                                <span class="label-text font-semibold text-gray-600">Aufbewahrung:</span>
+                                <span class="label-text font-semibold text-base-content/70">Aufbewahrung:</span>
                             </label>
-                            <div class="text-sm text-gray-600">
+                            <div class="text-sm text-base-content/70">
                                 <p>• Letzte 10 Backups werden behalten</p>
                                 <p>• Alte Backups werden automatisch gelöscht</p>
                             </div>
                         </div>
                         <div>
                             <label class="label">
-                                <span class="label-text font-semibold text-gray-600">Wöchentliche Backup-Archive:</span>
+                                <span class="label-text font-semibold text-base-content/70">Wöchentliche Backup-Archive:</span>
                             </label>
-                            <div class="text-sm text-gray-600">
+                            <div class="text-sm text-base-content/70">
                                 <p>• Jeden Freitag wird ein ZIP-Archiv aller aktuellen Backups erstellt</p>
                                 <p>• Das Archiv wird automatisch per E-Mail versendet</p>
                                 <p>• Maximale E-Mail-Größe: 25MB</p>
@@ -182,12 +182,12 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Konfiguration</h3>
             </div>
 
             <!-- Logs -->
-            <div class="card bg-gray-50 border border-gray-200">
+            <div class="card bg-base-200 border border-base-content/10">
                 <div class="card-body">
-                    <h3 class="card-title text-lg mb-4 text-gray-700">Backup-Logs</h3>
-                    <div class="bg-white p-4 rounded-lg border border-gray-200">
-                        <div id="backupLogs" class="font-mono text-sm h-64 overflow-y-auto text-gray-700">
-                            <p class="text-center text-gray-500">Lade Logs...</p>
+                    <h3 class="card-title text-lg mb-4 text-base-content/90">Backup-Logs</h3>
+                    <div class="bg-base-100 p-4 rounded-lg border border-base-content/10">
+                        <div id="backupLogs" class="font-mono text-sm h-64 overflow-y-auto text-base-content/90">
+                            <p class="text-center text-base-content/60">Lade Logs...</p>
                         </div>
                     </div>
                     <div class="mt-4">
@@ -352,7 +352,7 @@ <h3 class="card-title text-lg mb-4 text-gray-700">Backup-Logs</h3>
                     ).join('');
                     logsContainer.scrollTop = logsContainer.scrollHeight;
                 } else {
-                    logsContainer.innerHTML = '<p class="text-center text-gray-500">Keine Logs verfügbar</p>';
+                    logsContainer.innerHTML = '<p class="text-center text-base-content/60">Keine Logs verfügbar</p>';
                 }
             } else {
                 showToast('error', 'Fehler beim Laden der Logs');
diff --git a/app/templates/admin/cleanup_status.html b/app/templates/admin/cleanup_status.html
index bc113d4..c515581 100755
--- a/app/templates/admin/cleanup_status.html
+++ b/app/templates/admin/cleanup_status.html
@@ -149,7 +149,7 @@ <h2 class="card-title">
                 <div class="text-center py-8">
                     <i class="fas fa-check-circle text-success text-5xl mb-4"></i>
                     <h3 class="text-xl font-semibold mb-2">Keine Benutzer zur Löschung vorgesehen</h3>
-                    <p class="text-gray-600">Alle Benutzer sind aktuell aktiv und nicht zur Löschung geplant.</p>
+                    <p class="text-base-content/70">Alle Benutzer sind aktuell aktiv und nicht zur Löschung geplant.</p>
                 </div>
             {% endif %}
         </div>
diff --git a/app/templates/admin/manual_lending.html b/app/templates/admin/manual_lending.html
index 7bb338f..a2e62d4 100755
--- a/app/templates/admin/manual_lending.html
+++ b/app/templates/admin/manual_lending.html
@@ -49,17 +49,17 @@ <h3 class="font-bold mb-2" id="itemDetailName"></h3>
                                class="input input-bordered mb-4">
 
                         <!-- Werkzeug-Liste -->
-                        <div id="toolsList" class="h-96 overflow-hidden bg-white rounded-lg shadow border border-gray-200">
-                            <div class="p-4 border-b bg-gray-50">
-                                <h3 class="font-semibold text-gray-800">{{ app_labels.tools.name }}</h3>
+                        <div id="toolsList" class="h-96 overflow-hidden bg-base-100 rounded-lg shadow border border-base-content/10">
+                            <div class="p-4 border-b bg-base-200">
+                                <h3 class="font-semibold text-base-content">{{ app_labels.tools.name }}</h3>
                             </div>
                             <select size="10" 
                                     id="toolSelect"
                                     onchange="ManualLending.selectItem(this.value)"
-                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-white text-gray-800 border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-base-100 text-base-content border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 {% for tool in tools %}
                                     <option value="tool:{{ tool.id }}:{{ tool.barcode }}:{{ tool.name }}"
-                                            class="p-3 hover:bg-blue-50 cursor-pointer text-gray-800">
+                                            class="p-3 hover:bg-blue-50 cursor-pointer text-base-content">
                                         {{ tool.name }} (#{{ tool.barcode }})
                                         {% if tool.current_status == 'lent' %}
                                             - Ausgeliehen
@@ -74,17 +74,17 @@ <h3 class="font-semibold text-gray-800">{{ app_labels.tools.name }}</h3>
                         </div>
 
                         <!-- Verbrauchsmaterial-Liste -->
-                        <div id="consumablesList" class="h-96 overflow-hidden bg-white rounded-lg shadow border border-gray-200 hidden">
-                            <div class="p-4 border-b bg-gray-50">
-                                <h3 class="font-semibold text-gray-800">{{ app_labels.consumables.name }}</h3>
+                        <div id="consumablesList" class="h-96 overflow-hidden bg-base-100 rounded-lg shadow border border-base-content/10 hidden">
+                            <div class="p-4 border-b bg-base-200">
+                                <h3 class="font-semibold text-base-content">{{ app_labels.consumables.name }}</h3>
                             </div>
                             <select size="10" 
                                     id="consumableSelect"
                                     onchange="ManualLending.selectItem(this.value)"
-                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-white text-gray-800 border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-base-100 text-base-content border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 {% for item in consumables %}
                                     <option value="consumable:{{ item.id }}:{{ item.barcode }}:{{ item.name }}"
-                                            class="p-3 hover:bg-blue-50 cursor-pointer text-gray-800">
+                                            class="p-3 hover:bg-blue-50 cursor-pointer text-base-content">
                                         {{ item.name }} ({{ item.quantity }} Stk)
                                     </option>
                                 {% endfor %}
@@ -123,17 +123,17 @@ <h3 class="font-bold mb-2" id="workerDetailName"></h3>
                                class="input input-bordered mb-4">
 
                         <!-- Mitarbeiter-Liste -->
-                        <div class="h-96 overflow-hidden bg-white rounded-lg shadow border border-gray-200">
-                            <div class="p-4 border-b bg-gray-50">
-                                <h3 class="font-semibold text-gray-800">Mitarbeiter</h3>
+                        <div class="h-96 overflow-hidden bg-base-100 rounded-lg shadow border border-base-content/10">
+                            <div class="p-4 border-b bg-base-200">
+                                <h3 class="font-semibold text-base-content">Mitarbeiter</h3>
                             </div>
                             <select size="10" 
                                     id="workerSelect"
                                     onchange="ManualLending.selectWorker(this.value)"
-                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-white text-gray-800 border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    class="w-full h-[calc(100%-4rem)] overflow-y-auto p-2 bg-base-100 text-base-content border-0 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                 {% for worker in workers %}
                                     <option value="worker:{{ worker.barcode }}:{{ worker.firstname }}:{{ worker.lastname }}:{{ worker.department }}"
-                                            class="p-3 hover:bg-blue-50 cursor-pointer text-gray-800">
+                                            class="p-3 hover:bg-blue-50 cursor-pointer text-base-content">
                                         {{ worker.firstname }} {{ worker.lastname }}
                                         {% if worker.department %}({{ worker.department }}){% endif %}
                                     </option>
@@ -162,13 +162,13 @@ <h3 class="font-bold mb-4">Zusammenfassung</h3>
                         
                         <!-- Item Vorschau -->
                         <div class="mb-4">
-                            <p class="text-sm font-medium text-gray-500">Artikel</p>
+                            <p class="text-sm font-medium text-base-content/60">Artikel</p>
                             <div id="previewItem">Kein Artikel ausgewählt</div>
                         </div>
                         
                         <!-- Mengenfeld (nur für {{ app_labels.consumables.name }}) -->
                         <div id="amountField" class="mb-4 hidden">
-                            <label class="text-sm font-medium text-gray-500">Menge</label>
+                            <label class="text-sm font-medium text-base-content/60">Menge</label>
                             <input type="number" 
                                    id="amount" 
                                    class="input input-bordered w-full" 
@@ -178,7 +178,7 @@ <h3 class="font-bold mb-4">Zusammenfassung</h3>
                         
                         <!-- Worker Vorschau -->
                         <div class="mb-4">
-                            <p class="text-sm font-medium text-gray-500">Mitarbeiter</p>
+                            <p class="text-sm font-medium text-base-content/60">Mitarbeiter</p>
                             <div id="previewWorker">Kein Mitarbeiter ausgewählt</div>
                         </div>
                     </div>
@@ -215,7 +215,7 @@ <h2 class="text-xl font-semibold mb-4">Aktuelle Ausleihen</h2>
     {% if current_lendings %}
     <div class="overflow-x-auto">
         <table class="min-w-full table-auto" id="lendingsTable">
-            <thead class="bg-gray-50">
+            <thead class="bg-base-200">
                 <tr>
                     <th class="px-4 py-2 text-left cursor-pointer" data-sort="item">
                         Artikel
@@ -274,7 +274,7 @@ <h2 class="text-xl font-semibold mb-4">Aktuelle Ausleihen</h2>
         </table>
     </div>
     {% else %}
-    <p class="text-gray-600">Keine aktiven Ausleihen vorhanden.</p>
+    <p class="text-base-content/70">Keine aktiven Ausleihen vorhanden.</p>
     {% endif %}
 </div>
 
diff --git a/app/templates/admin/trash.html b/app/templates/admin/trash.html
index 796c510..5ba0a3a 100755
--- a/app/templates/admin/trash.html
+++ b/app/templates/admin/trash.html
@@ -10,7 +10,7 @@ <h1 class="card-title text-2xl mb-4">
                 <i class="fas fa-trash-alt mr-2"></i>
                 Papierkorb
             </h1>
-            <div class="text-sm text-gray-500 mb-4">
+            <div class="text-sm text-base-content/60 mb-4">
                 <p>Anzahl gelöschter {{ app_labels.tools.name }}: {{ tools|length }}</p>
                 <p>Anzahl gelöschter {{ app_labels.consumables.name }}: {{ consumables|length }}</p>
                 <p>Anzahl gelöschter Mitarbeiter: {{ workers|length }}</p>
diff --git a/app/templates/admin/version_check.html b/app/templates/admin/version_check.html
index 24309d3..ee711ab 100755
--- a/app/templates/admin/version_check.html
+++ b/app/templates/admin/version_check.html
@@ -7,11 +7,11 @@
     <div class="max-w-4xl mx-auto">
         <!-- Header -->
         <div class="mb-8">
-            <h1 class="text-3xl font-bold text-gray-900 mb-2">
+            <h1 class="text-3xl font-bold text-base-content mb-2">
                 <i class="fas fa-code-branch text-primary mr-3"></i>
                 Versionscheck
             </h1>
-            <p class="text-gray-600">
+            <p class="text-base-content/70">
                 Prüft ob Updates für {{ app_labels.system_name }} verfügbar sind
             </p>
         </div>
diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html
index c00195f..0dee274 100755
--- a/app/templates/auth/login.html
+++ b/app/templates/auth/login.html
@@ -3,17 +3,17 @@
 {% block title %}Anmeldung - {{ config.SYSTEM_NAME }}{% endblock %}
 
 {% block content %}
-<div class="min-h-screen flex items-center justify-center" style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);">
-    <div class="card w-96 bg-white shadow-xl border-0" style="border-radius: 1rem; border: 1px solid #e3f2fd;">
+<div class="min-h-screen flex items-center justify-center bg-base-200 transition-colors duration-300">
+    <div class="card w-96 bg-base-100 shadow-2xl border border-base-content/5">
         <div class="card-body p-8">
-            <div class="text-center mb-6">
-                <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4" style="box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);">
-                    <i class="fas fa-sign-in-alt text-white text-xl"></i>
+            <div class="text-center mb-8">
+                <div class="w-20 h-20 bg-primary/10 rounded-3xl flex items-center justify-center mx-auto mb-6">
+                    <i class="fas fa-fingerprint text-primary text-3xl"></i>
                 </div>
-                <h1 class="text-2xl font-bold text-gray-800 mb-2">
+                <h1 class="text-3xl font-black text-base-content mb-2 tracking-tight">
                     Anmeldung
                 </h1>
-                <p class="text-sm text-gray-600">{{ config.SYSTEM_NAME }}</p>
+                <p class="text-xs uppercase tracking-widest font-bold text-base-content/40">{{ config.SYSTEM_NAME }}</p>
             </div>
 
             {% if error %}
diff --git a/app/templates/auth/session_error.html b/app/templates/auth/session_error.html
index c40fcbc..2333170 100644
--- a/app/templates/auth/session_error.html
+++ b/app/templates/auth/session_error.html
@@ -11,7 +11,7 @@ <h1 class="text-2xl font-bold">
                     <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
                     Session-Fehler
                 </h1>
-                <p class="text-sm text-gray-600">{{ config.SYSTEM_NAME }}</p>
+                <p class="text-sm text-base-content/70">{{ config.SYSTEM_NAME }}</p>
             </div>
 
             <div class="alert alert-warning mb-4">
@@ -19,7 +19,7 @@ <h1 class="text-2xl font-bold">
                 <span>Nach dem Update ist ein Session-Fehler aufgetreten. Bitte melden Sie sich erneut an.</span>
             </div>
 
-            <div class="text-sm text-gray-600 mb-6">
+            <div class="text-sm text-base-content/70 mb-6">
                 <p>Dies kann passieren nach:</p>
                 <ul class="list-disc list-inside mt-2">
                     <li>System-Updates</li>
diff --git a/app/templates/base.html b/app/templates/base.html
index b954995..7d9decc 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {# CSRF deaktiviert - Token nicht verfügbar #}
     <meta name="csrf-token" content="">
     <title>{% block title %}Scandy{% endblock %}</title>
     <meta name="current-department" content="{{ (departments_ctx.current or departments.current) or '' }}">
@@ -17,7 +16,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     
-    <!-- DaisyUI (vereinheitlicht auf v4) -->
+    <!-- DaisyUI (v4) -->
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.css" rel="stylesheet" type="text/css" />
     
     <!-- Font Awesome -->
@@ -26,10 +25,9 @@
     <!-- Chart.js -->
     <script nonce="{{ csp_nonce }}" src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
     
-    <!-- Eigene Styles nach den Framework Styles -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v=2">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/quickscan.css') }}?v=2">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar-fixes.css') }}">
+    <!-- Eigene Styles -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v=3">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/quickscan.css') }}?v=3">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/version-display.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/button-fixes.css') }}">
 
@@ -37,579 +35,346 @@
 
     <script nonce="{{ csp_nonce }}" src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
 
-    <!-- CSRF deaktiviert - AJAX-Requests ohne CSRF-Validierung -->
-    <script nonce="{{ csp_nonce }}">
-        // CSRF ist deaktiviert - alle AJAX-Requests werden ohne CSRF-Validierung gesendet
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('CSRF-Schutz ist deaktiviert - AJAX-Requests werden ohne CSRF-Validierung gesendet');
-        });
-    </script>
-
     <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-
-        /* Accessibility: Screen reader only utility */
-        .sr-only {
-            position: absolute;
-            width: 1px;
-            height: 1px;
-            padding: 0;
-            margin: -1px;
-            overflow: hidden;
-            clip: rect(0, 0, 0, 0);
-            white-space: nowrap;
-            border-width: 0;
-        }
-
-        /* Accessibility: Skip link visibility on focus */
-        .sr-only:focus,
-        .focus\:not-sr-only:focus {
-            position: fixed !important;
-            top: 1rem !important;
-            left: 1rem !important;
-            width: auto !important;
-            height: auto !important;
-            padding: 0.75rem 1.5rem !important;
-            margin: 0 !important;
-            overflow: visible !important;
-            clip: auto !important;
-            clip-path: none !important;
-            white-space: normal !important;
-            z-index: 10000 !important;
-            background-color: #004d99 !important;
-            color: white !important;
-            border-radius: 0.25rem !important;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-            text-decoration: none !important;
-            font-weight: 600 !important;
-        }
-
-        /* BTZ-Köln Farbschema */
         :root {
-            --btz-primary: #0066cc;
-            --btz-primary-light: #338fff;
-            --btz-primary-dark: #004d99;
-            --btz-secondary: #f8f9fa;
-            --btz-accent: #e3f2fd;
-            --btz-text: #212529;
-            --btz-text-light: #6c757d;
+            font-family: 'Inter', sans-serif;
+            --rounded-box: 1.5rem;
+            --rounded-btn: 0.75rem;
+            --rounded-badge: 1rem;
+            --animation-btn: 0.25s;
+            --animation-input: 0.2s;
+            --btn-focus-scale: 0.95;
         }
 
-        /* DaisyUI Theme Override for NetBox-inspired Design */
         [data-theme="scandy"] {
-            /* Primary colors - NetBox Blue */
-            --p: #004d99;
-            --pf: #ffffff;
-            --pc: #ffffff;
-
-            /* Secondary colors */
-            --s: #6c757d;
-            --sf: #ffffff;
-            --sc: #ffffff;
-
-            /* Accent colors - NetBox Yellow/Warning */
-            --a: #ffc107;
-            --af: #2b333d;
-            --ac: #2b333d;
-
-            /* Success, Warning, Error, Info */
-            --su: #28a745;
-            --suc: #ffffff;
-            --wa: #ffc107;
-            --wac: #2b333d;
-            --er: #dc3545;
-            --erc: #ffffff;
-            --in: #17a2b8;
-            --inc: #ffffff;
-
-            /* Neutral/Base colors */
-            --b1: #ffffff;
-            --b2: #f5f8fa;
-            --b3: #e9ecef;
-            --bc: #333333;
-            --n: #2b333d;
-            --nc: #ffffff;
-
-            /* Rectangular corners like NetBox */
-            --rounded-box: 0.25rem;
-            --rounded-btn: 0.25rem;
-            --rounded-badge: 0.125rem;
-
-            --animation-btn: 0.1s;
-            --animation-input: 0.1s;
-        }
-        
-        .nav-text {
-            font-weight: 600;
-            letter-spacing: -0.01em;
+            --p: 0.55 0.18 255; --pc: 0.99 0.01 255;
+            --s: 0.45 0.05 255; --sc: 0.99 0.01 255;
+            --a: 0.75 0.15 75;  --ac: 0.15 0.05 75;
+            --su: 0.70 0.15 150; --suc: 0.15 0.05 150;
+            --wa: 0.80 0.15 85;  --wac: 0.15 0.05 85;
+            --er: 0.60 0.18 25;  --erc: 0.99 0.01 25;
+            --in: 0.70 0.15 210; --inc: 0.15 0.05 210;
+            --b1: 1 0 0;        --b2: 0.97 0.01 255; --b3: 0.94 0.01 255;
+            --bc: 0.15 0.02 255;
+            --n: 0.25 0.03 255; --nc: 0.95 0.01 255;
         }
 
-        /* Optimierte Layout-Styles */
-        .main-content-with-sidebar {
-            margin-left: 226px;
-            min-height: calc(100vh - 4rem);
-            padding: 1rem;
+        @media (prefers-color-scheme: dark) {
+            [data-theme="scandy"] {
+                --b1: 0.14 0.02 255; --b2: 0.11 0.02 255; --b3: 0.08 0.02 255;
+                --bc: 0.95 0.01 255;
+                --n: 0.25 0.03 255;  --nc: 0.98 0.01 255;
+                --p: 0.60 0.16 255;
+            }
         }
 
-        .navbar-with-sidebar {
-            margin-left: 226px;
-            height: 3.5rem;
-            min-height: 3.5rem;
-            border-bottom: 1px solid #e9ecef;
+        body {
+            background-color: oklch(var(--b2));
+            color: oklch(var(--bc));
+            min-height: 100vh;
         }
 
-        /* Kompakte Cards */
-        .card-compact {
-            margin-bottom: 1rem;
+        /* Glassmorphism Effects */
+        .glass-panel {
+            background: oklch(var(--b1) / 0.7);
+            backdrop-filter: blur(12px);
+            border: 1px solid oklch(var(--bc) / 0.05);
         }
 
-        .card-compact .card-body {
-            padding: 1rem;
+        /* Modern Scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+            background: oklch(var(--bc) / 0.1);
+            border-radius: 10px;
         }
+        ::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / 0.2); }
 
-        /* Bessere Abstände */
-        .content-section {
-            margin-bottom: 1.5rem;
+        /* Card Hover Effects */
+        .card-modern {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid oklch(var(--bc) / 0.05);
         }
-
-        /* Optimierte Tabellen */
-        .table-container {
-            overflow-x: auto;
-            border-radius: 0.5rem;
-            border: 1px solid #d1d5db;
+        .card-modern:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px oklch(var(--bc) / 0.05), 0 8px 10px -6px oklch(var(--bc) / 0.05);
+            border-color: oklch(var(--p) / 0.1);
         }
 
-        /* Kompakte Formulare */
-        .form-compact .form-control {
-            margin-bottom: 0.75rem;
+        /* Nav Link Active State Indicator */
+        .menu li > a.active::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 25%;
+            height: 50%;
+            width: 4px;
+            background: oklch(var(--pc));
+            border-radius: 0 4px 4px 0;
         }
 
-        /* Bessere Grid-Layouts */
+        /* Responsive Grid Helper */
         .grid-responsive {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1rem;
-        }
-
-        /* Optimized NetBox Sidebar */
-        .sidebar-permanent {
-            width: 226px;
-            background: #2b333d;
-            border-right: none;
-            box-shadow: none;
-            color: #d2d3d3;
-        }
-
-        /* Compact Navigation */
-        .sidebar-nav-item {
-            height: 2.5rem;
-            margin-bottom: 0.125rem;
-            border-radius: 0;
-            margin-right: 0;
-            padding-left: 1rem !important;
-            transition: all 0.1s ease;
-            color: #d2d3d3 !important;
-            border-left: 3px solid transparent;
-        }
-
-        .sidebar-nav-item:hover {
-            background-color: #3d4852;
-            color: #ffffff !important;
-            transform: none;
-        }
-
-        .sidebar-nav-item.active {
-            background-color: #3d4852;
-            color: #ffffff !important;
-            border-left: 3px solid #004d99;
-            box-shadow: none;
-        }
-
-        /* QuickScan Button Styling */
-        #quickScanTrigger {
-            background: #2b333d;
-        }
-
-        #quickScanTrigger:hover {
-            background: #3d4852;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
         }
 
-        /* Trennlinie */
-        .sidebar-divider {
-            width: 80%;
-            height: 1px;
-            background: linear-gradient(to right, transparent, #3d4852, transparent);
-            margin: 1rem auto;
+        /* Custom Animations */
+        @keyframes scan-line {
+            0% { transform: scaleX(0); opacity: 0; }
+            50% { transform: scaleX(1); opacity: 1; }
+            100% { transform: scaleX(0); opacity: 0; }
         }
-
-        /* Bessere Responsive */
-        @media (max-width: 768px) {
-            .main-content-with-sidebar {
-                margin-left: 0;
-                padding: 0.5rem;
-            }
-            
-            .navbar-with-sidebar {
-                margin-left: 0;
-            }
-            
-            .sidebar-permanent {
-                transform: translateX(-100%);
-            }
+        .animate-scan-line {
+            animation: scan-line 2s infinite ease-in-out;
         }
     </style>
 </head>
 
 <body class="min-h-screen bg-base-200">
-    <a href="#main-content" class="sr-only focus:not-sr-only btn btn-primary fixed top-2 left-2 z-[9999]">Zum Hauptinhalt springen</a>
-    <div class="flex flex-col min-h-screen">
-        <!-- Vertikales Seitenmenü -->
-        <div class="fixed left-0 top-0 h-full w-[226px] flex flex-col pt-0 pb-4 z-[90] transition-all duration-300 group sidebar-permanent">
-            <!-- QuickScan-Trigger -->
-            <div class="w-full h-16 min-h-[4rem] px-0" id="quickScanTrigger" role="button" tabindex="0" aria-label="QuickScan öffnen" onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); this.click(); }" data-role="{{ current_user.role }}" title="{% if not current_user.is_authenticated %}Quick Scan (nicht verfügbar für nicht eingeloggte Benutzer){% elif current_user.role == 'teilnehmer' %}Quick Scan (nicht verfügbar für Teilnehmer){% else %}Quick Scan öffnen{% endif %}">
-                <div class="w-full h-20 overflow-hidden transition-all duration-300 flex items-center justify-center group
-                    {% if not current_user.is_authenticated or current_user.role == 'teilnehmer' %}opacity-50 cursor-not-allowed{% else %}hover:bg-[#3d4852] cursor-pointer{% endif %}">
-                    <img src="/static/images/scandy-logo.png" alt="Scandy Logo" class="w-12 h-12 object-contain transition-transform duration-300 group-hover:opacity-80 group-hover:brightness-110">
-                    <span class="ml-4 text-base font-semibold text-[#d2d3d3] group-hover:text-white transition-colors duration-300">Scan</span>
-                    <!-- Scanner Animation -->
-                    <div class="absolute w-full h-0.5 bg-primary/50 -top-1 left-0 animate-scanner after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-primary/30"></div>
-                </div>
-            </div>
-            
-            <!-- Trennlinie -->
-            <div class="sidebar-divider"></div>
-            
-            <!-- Navigation Items -->
-            {% if current_user.is_authenticated and current_user.role != 'teilnehmer' %}
-            <!-- Werkzeuge - nur für Nicht-Teilnehmer -->
-            <a href="{{ url_for('tools.index') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and 'tools' in request.endpoint %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="{{ app_labels['tools']['icon'] }} text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">{{ app_labels['tools']['name'] }}</span>
-            </a>
-            <!-- Verbrauchsgüter - nur für Nicht-Teilnehmer -->
-            <a href="{{ url_for('consumables.index') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and 'consumables' in request.endpoint %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="{{ app_labels['consumables']['icon'] }} text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">{{ app_labels['consumables']['name'] }}</span>
-            </a>
-            {% endif %}
-            
-            {# Mitarbeiter-Link: für alle außer Teilnehmer (Benutzer dürfen ihn sehen) #}
-            {% if current_user.is_authenticated and current_user.role != 'teilnehmer' %}
-            <a href="{{ url_for('workers.index') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and request.endpoint == 'workers.index' %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="fas fa-users text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Mitarbeiter</span>
-            </a>
-            {% endif %}
-            
-            {# Ticketsystem für alle eingeloggten Benutzer - nur wenn Feature aktiviert #}
-            {% if current_user.is_authenticated and features_enabled.get('ticket_system', True) %}
-            <a href="{{ url_for('tickets.create') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and 'tickets.create' in request.endpoint %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0 relative">
-                     <i class="{{ app_labels.tickets.icon }} text-xl"></i>
-                     {% if unread_tickets_count and unread_tickets_count > 0 %}
-                     <span class="badge badge-error badge-sm absolute top-0 right-0" style="transform: translate(50%,-50%);">{{ unread_tickets_count }}</span>
-                     {% endif %}
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">{{ app_labels.tickets.name }}</span>
-            </a>
-            {% endif %}
-
-            {# Wochenplan-Link für alle authentifizierten Benutzer - nur wenn Feature aktiviert #}
-            {% if current_user.is_authenticated and current_user.timesheet_enabled and features_enabled.get('weekly_reports', False) %}
-            <a href="{{ url_for('workers.timesheet_list') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and request.endpoint.startswith('workers.timesheet') %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0 relative">
-                     <i class="fas fa-clock text-xl"></i>
-                     {% if unfilled_timesheet_days is defined and unfilled_timesheet_days > 0 %}
-                     <span class="badge badge-error badge-sm absolute top-0 right-0" style="transform: translate(50%,-50%);">{{ unfilled_timesheet_days }}</span>
-                     {% endif %}
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Wochenberichte</span>
-            </a>
-            {% endif %}
-            
-            {# Auftragserstellung - für alle Benutzer - nur wenn Ticketsystem aktiviert #}
-            {% if current_user.is_authenticated and features_enabled.get('ticket_system', True) %}
-            <a href="{{ url_for('tickets.public_create_order') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and request.endpoint == 'tickets.public_create_order' %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="fas fa-file-alt text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Auftragserstellung</span>
-            </a>
-            {% endif %}
-            
-            {# Jobbörse - global sichtbar #}
-            <a href="{{ url_for('jobs.job_list') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and 'jobs' in request.endpoint %}active{% endif %}">
-              <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                  <i class="fas fa-briefcase text-xl"></i>
-              </div>
-              <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Jobbörse</span>
-            </a>
-
-            {# Kantinenplan - nur für berechtigte Benutzer wenn Feature aktiviert #}
-            {% if current_user.is_authenticated and features_enabled.get('canteen_plan', False) and current_user.canteen_plan_enabled %}
-            <a href="{{ url_for('canteen.index') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and 'canteen' in request.endpoint %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="fas fa-utensils text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Kantinenplan</span>
-            </a>
-            {% endif %}
-
-            <!-- Über Scandy (öffentlich) -->
-            <a href="{{ url_for('main.about') }}" 
-               class="flex items-center h-12 pl-2 mb-1 transition-all duration-300 sidebar-nav-item {% if request.endpoint and request.endpoint == 'main.about' %}active{% endif %}">
-                 <div class="w-12 h-12 flex items-center justify-center flex-shrink-0">
-                     <i class="fas fa-question-circle text-xl"></i>
-                 </div>
-                 <span class="nav-text ml-2 opacity-100 transition-opacity duration-300 whitespace-nowrap sidebar-text">Über Scandy</span>
-            </a>
-
-            <!-- Versionsnummer am unteren Rand -->
-            <div class="mt-auto text-xs text-gray-500 flex flex-col items-center pb-4">
-                <div class="version-display">
-                    <!-- Lokale Version -->
-                    <span class="version-local">{{ version_info.local_version }}</span>
-                    
-                    <!-- GitHub Version (falls verfügbar) -->
-                    {% if version_info.github_version %}
-                        <span class="version-github {% if version_info.is_up_to_date %}text-success{% elif version_info.update_available %}text-warning{% else %}text-gray-400{% endif %}">
-                            GitHub: {{ version_info.github_version }}
-                        </span>
-                    {% endif %}
-                    
-                    <!-- Status-Indikator -->
-                    {% if version_info.github_version %}
-                        {% if version_info.is_up_to_date %}
-                            <span class="version-status up-to-date">✓ Aktuell</span>
-                        {% elif version_info.update_available %}
-                            <span class="version-status update-available">⚠ Update</span>
-                        {% else %}
-                            <span class="version-status unknown">? Unbekannt</span>
-                        {% endif %}
-                    {% else %}
-                        <span class="version-status error">? Verbindung fehlgeschlagen</span>
-                    {% endif %}
+    <div class="drawer lg:drawer-open">
+        <input id="main-drawer" type="checkbox" class="drawer-toggle" />
+
+        <div class="drawer-content flex flex-col min-h-screen">
+            <!-- Top Navbar -->
+            <header class="navbar bg-base-100/80 backdrop-blur-xl border-b border-base-content/5 sticky top-0 z-30 px-4 h-16">
+                <div class="flex-none lg:hidden">
+                    <label for="main-drawer" class="btn btn-ghost btn-square">
+                        <i class="fas fa-bars"></i>
+                    </label>
                 </div>
-                
-                <span class="opacity-100 transition-opacity duration-300 whitespace-nowrap mt-2">
-                    {{ ''|author }}
-                </span>
-                <span class="opacity-100 transition-opacity duration-300 whitespace-nowrap">
-                    MIT License
-                </span>
-            </div>
-        </div>
 
-        <!-- Horizontale Navbar -->
-        <div class="navbar bg-white px-4 relative z-[100] flex items-center navbar-with-sidebar">
-            <!-- Linker Bereich -->
-            <div class="flex-1 flex items-center min-w-0 gap-4">
-                <h1 class="text-lg font-bold truncate ml-4">
+                <h1 class="text-lg font-bold text-base-content hidden sm:block">
                     {% if request.endpoint and 'tools' in request.endpoint %}{{ app_labels.tools.name }}
                     {% elif request.endpoint and 'workers' in request.endpoint %}Mitarbeiter
                     {% elif request.endpoint and 'consumables' in request.endpoint %}{{ app_labels.consumables.name }}
                     {% elif request.endpoint and 'tickets' in request.endpoint %}{{ app_labels.tickets.name }}
-                    {% elif request.endpoint and request.endpoint == 'main.about' %}Über Scandy
-                    {% else %}Dashboard{% endif %}
+                    {% elif request.endpoint == 'dashboard.index' %}Dashboard
+                    {% elif request.endpoint == 'main.about' %}Über Scandy
+                    {% else %}Übersicht{% endif %}
                 </h1>
-            </div>
 
-            <!-- Rechter Bereich -->
-            <div class="flex-none flex items-center justify-end gap-4 min-w-0 pr-4">
-                <!-- Logo -->
-                <a href="{{ url_for('main.index') }}" 
-                   class="hover:opacity-80 transition-all duration-300 flex items-center"
-                   title="Zurück zur Startseite">
+            <!-- Center Logo -->
+            <div class="absolute left-1/2 -translate-x-1/2 flex items-center">
+                <a href="{{ url_for('main.index') }}" class="flex items-center gap-2 px-3 py-1.5 rounded-xl hover:bg-base-200 transition-all">
                     {% if app_labels.custom_logo %}
-                    <img src="{{ url_for('static', filename=app_labels.custom_logo) }}" 
-                         alt="Benutzerdefiniertes Logo" 
-                         class="h-6 w-auto object-contain">
+                        <img src="{{ url_for('static', filename=app_labels.custom_logo) }}" class="h-8 w-auto object-contain">
                     {% else %}
-                    <img src="{{ url_for('static', filename='images/BTZ_logo.jpg') }}" 
-                         alt="BTZ Logo" 
-                         class="h-6 w-auto object-contain">
+                        <img src="{{ url_for('static', filename='images/BTZ_logo.jpg') }}" class="h-8 w-auto object-contain">
                     {% endif %}
                 </a>
+            </div>
+
+            <!-- Right Side Controls -->
+            <div class="flex items-center gap-3">
                 {% if current_user.is_authenticated %}
-                <div class="dropdown dropdown-end">
-                    <button type="button" tabindex="0" class="btn btn-ghost btn-sm">
-                        <i class="fas fa-building mr-2"></i>
-                        {{ departments_ctx.current or departments.current or 'Abteilung wählen' }}
-                    </button>
-                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-white rounded-box w-60">
-                        {% for dep in (departments_ctx.allowed or departments.allowed) %}
-                        <li>
-                            <a href="{{ url_for('admin.switch_department', department=dep) }}" class="{% if departments.current == dep %}active{% endif %}">
-                                <i class="fas fa-layer-group mr-2"></i>{{ dep }}
-                            </a>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                </div>
-                {% endif %}
-                {% if current_user.is_authenticated and current_user.is_mitarbeiter %}
-                <div class="dropdown dropdown-end">
-                    <button type="button" tabindex="0" class="btn btn-ghost btn-sm" aria-label="Hauptmenü">
-                        <i class="fas fa-bars"></i>
-                    </button>
-                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-white rounded-box w-52">
-                        <li>
-                            <a href="{{ url_for('admin.dashboard') }}" class="{% if request.endpoint and 'admin.dashboard' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{{ url_for('admin.system') }}" class="{% if request.endpoint and 'admin.system' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-cogs mr-2"></i>Systemverwaltung
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{{ url_for('admin.departments_manage_page') }}" class="{% if request.endpoint and 'departments_manage_page' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-building mr-2"></i>Abteilungen
-                            </a>
-                        </li>
-                        {% if feature_settings.get('software_management', False) %}
-                        <li>
-                            <a href="{{ url_for('admin.software_management') }}" class="{% if request.endpoint and 'admin.software_management' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-desktop mr-2"></i>Software & Nutzergruppen
-                            </a>
-                        </li>
-                        {% endif %}
-                        <li>
-                            <a href="{{ url_for('admin.feature_settings') }}" class="{% if request.endpoint and 'admin.feature_settings' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-toggle-on mr-2"></i>Feature-Einstellungen
-                            </a>
-                        </li>
-                        {# Entfernt: Department-Features Menüeintrag #}
-                        <li>
-                            <a href="{{ url_for('admin.manage_users') }}" class="{% if request.endpoint and 'admin.manage_users' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-users-cog mr-2"></i>Benutzerverwaltung
-                            </a>
-                        </li>
-                        {# E-Mail-Debug entfernt #}
-                        <li>
-                            <a href="{{ url_for('admin.email_settings') }}" class="{% if request.endpoint and 'admin.email_settings' in request.endpoint %}active{% endif %}">
-                                <i class="fas fa-envelope mr-2"></i>E-Mail-Einstellungen
-                            </a>
-                        </li>
-                        
-                        <li>
-                            <a href="{{ url_for('admin.manual_lending') }}" class="{% if request.endpoint and request.endpoint == 'admin.manual_lending' %}active{% endif %}">
-                                <i class="fas fa-hand-holding mr-2"></i>Manuelle Ausleihe
-                            </a>
-                        </li>
-                        {# Entfernt: Kantinenplan verwalten (Duplikat) #}
-                    </ul>
-                </div>
-                <a href="{{ url_for('admin.trash') }}" 
-                   class="btn btn-ghost btn-circle btn-sm text-error relative"
-                   aria-label="Papierkorb">
-                    <i class="fas fa-trash-alt"></i>
-                    {% if trash_count is defined and trash_count > 0 %}
-                    <span class="absolute -top-2 -right-2 bg-error text-white rounded-full w-5 h-5 
-                               flex items-center justify-center text-xs">
-                        {{ trash_count }}
-                    </span>
+                    <!-- Department Switcher -->
+                    <div class="dropdown dropdown-end">
+                        <button type="button" tabindex="0" class="btn btn-ghost btn-sm gap-2 normal-case font-semibold bg-base-200/50 hover:bg-base-200 border-none rounded-xl px-4 h-10">
+                            <i class="fas fa-building text-primary/70"></i>
+                            <span class="max-w-[120px] truncate">{{ departments_ctx.current or departments.current or 'Abteilung' }}</span>
+                            <i class="fas fa-chevron-down text-[10px] opacity-40"></i>
+                        </button>
+                        <ul tabindex="0" class="dropdown-content z-[101] menu p-3 shadow-2xl bg-base-100/95 backdrop-blur-xl rounded-2xl w-72 mt-3 border border-base-content/5">
+                            <li class="menu-title px-4 py-2 text-xs uppercase tracking-widest font-black opacity-40">Abteilung wechseln</li>
+                            {% for dep in (departments_ctx.allowed or departments.allowed) %}
+                            <li class="mt-1">
+                                <a href="{{ url_for('admin.switch_department', department=dep) }}" class="rounded-xl py-3 px-4 {% if (departments_ctx.current or departments.current) == dep %}active bg-primary text-primary-content font-bold{% endif %}">
+                                    <i class="fas fa-layer-group opacity-50"></i>
+                                    <span class="flex-1">{{ dep }}</span>
+                                    {% if (departments_ctx.current or departments.current) == dep %}
+                                        <i class="fas fa-check-circle text-xs"></i>
+                                    {% endif %}
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+
+                    {% if current_user.is_mitarbeiter %}
+                        <!-- Admin Quick Menu -->
+                        <div class="dropdown dropdown-end">
+                            <button type="button" tabindex="0" class="btn btn-ghost btn-sm btn-square bg-base-200/50 hover:bg-base-200 border-none rounded-xl h-10 w-10">
+                                <i class="fas fa-cog opacity-70"></i>
+                            </button>
+                            <ul tabindex="0" class="dropdown-content z-[101] menu p-3 shadow-2xl bg-base-100/95 backdrop-blur-xl rounded-2xl w-64 mt-3 border border-base-content/5">
+                                <li class="menu-title px-4 py-2 text-xs uppercase tracking-widest font-black text-primary">Verwaltung</li>
+                                <li class="mt-2"><a href="{{ url_for('admin.dashboard') }}" class="rounded-xl py-2.5"><i class="fas fa-chart-line w-5 opacity-70"></i> Dashboard</a></li>
+                                <li><a href="{{ url_for('admin.system') }}" class="rounded-xl py-2.5"><i class="fas fa-terminal w-5 opacity-70"></i> Systemverwaltung</a></li>
+                                <li><a href="{{ url_for('admin.departments_manage_page') }}" class="rounded-xl py-2.5"><i class="fas fa-building w-5 opacity-70"></i> Abteilungen</a></li>
+                                <li><a href="{{ url_for('admin.manage_users') }}" class="rounded-xl py-2.5"><i class="fas fa-user-gear w-5 opacity-70"></i> Benutzer</a></li>
+                                <div class="divider my-2 opacity-5"></div>
+                                <li><a href="{{ url_for('admin.trash') }}" class="text-error rounded-xl py-2.5 hover:bg-error/10"><i class="fas fa-trash-alt w-5"></i> Papierkorb</a></li>
+                            </ul>
+                        </div>
                     {% endif %}
-                </a>
-                {% endif %}
-                {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('auth.profile') }}" class="text-sm mr-2 hidden md:inline hover:text-primary transition-colors duration-200" title="Mein Profil bearbeiten">
-                        <i class="fas fa-user mr-1"></i>{{ current_user.username }}
-                    </a>
-                    <a href="{{ url_for('auth.logout') }}" class="btn btn-ghost btn-circle btn-sm" title="Logout" aria-label="Abmelden">
-                        <i class="fas fa-sign-out-alt"></i>
-                    </a>
+
+                    <!-- User Menu -->
+                    <div class="dropdown dropdown-end">
+                        <button type="button" tabindex="0" class="btn btn-ghost btn-sm bg-base-200/50 hover:bg-base-200 border-none rounded-xl h-10 px-3 gap-3 normal-case">
+                            <div class="avatar placeholder">
+                                <div class="bg-primary text-primary-content rounded-lg w-7 h-7">
+                                    <span class="text-xs font-black uppercase">{{ current_user.username[:1] }}</span>
+                                </div>
+                            </div>
+                            <span class="hidden md:inline font-bold text-sm">{{ current_user.username }}</span>
+                        </button>
+                        <ul tabindex="0" class="dropdown-content z-[101] menu p-3 shadow-2xl bg-base-100/95 backdrop-blur-xl rounded-2xl w-56 mt-3 border border-base-content/5">
+                            <li><a href="{{ url_for('auth.profile') }}" class="rounded-xl py-2.5"><i class="fas fa-user-circle w-5 opacity-70"></i> Profil</a></li>
+                            <div class="divider my-2 opacity-5"></div>
+                            <li><a href="{{ url_for('auth.logout') }}" class="text-error font-bold rounded-xl py-2.5 hover:bg-error/10"><i class="fas fa-sign-out-alt w-5"></i> Logout</a></li>
+                        </ul>
+                    </div>
                 {% else %}
-                <a href="{{ url_for('auth.login') }}" class="btn btn-ghost btn-sm ml-auto">
-                    <i class="fas fa-sign-in-alt mr-2"></i>Login
-                </a>
+                    <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-sm rounded-xl px-6">
+                        <i class="fas fa-sign-in-alt"></i> Login
+                    </a>
                 {% endif %}
             </div>
+        </header>
+
+            <!-- Main Content Section -->
+            <main class="p-6 flex-grow">
+                {% block content %}
+                <div class="max-w-7xl mx-auto space-y-6">
+                    <!-- Page Header / Flash Messages -->
+                    {% with messages = get_flashed_messages(with_categories=true) %}
+                      {% if messages %}
+                        {% for category, message in messages %}
+                          <div class="alert alert-{{ 'error' if category == 'error' else 'success' if category == 'success' else 'info' }} shadow-lg rounded-2xl border-0">
+                            <i class="fas fa-{{ 'circle-exclamation' if category == 'error' else 'circle-check' if category == 'success' else 'circle-info' }}"></i>
+                            <span>{{ message }}</span>
+                          </div>
+                        {% endfor %}
+                      {% endif %}
+                    {% endwith %}
+
+                    <!-- Main Content Slot -->
+                    {% block page_content %}{% endblock %}
+                </div>
+                {% endblock %}
+            </main>
         </div>
 
-        <!-- Main Content -->
-        <main id="main-content" class="relative z-0 ml-[226px] main-content-with-sidebar">
-            {% block content %}
-            <div class="container mx-auto">
-                <!-- Info-Karte (nur für QuickScan) -->
-                {% if request.endpoint and request.endpoint == 'quick_scan.index' %}
-                <div class="card bg-base-100 shadow-xl mb-6">
-                    <div class="card-body">
-                        <h2 class="card-title">
-                            <i class="fas fa-info-circle text-primary"></i>
-                            QuickScan
-                        </h2>
-                        <p>Scannen Sie einen Barcode oder wählen Sie eine Aktion:</p>
-                        <div class="flex flex-wrap gap-4 mt-4">
-                            <button class="btn btn-primary" onclick="showManualLendingModal()">
-                                <i class="fas fa-hand-holding mr-2"></i>Manuelle Ausleihe
-                            </button>
-                            <button class="btn btn-secondary" onclick="showReturnModal()">
-                                <i class="fas fa-undo-alt mr-2"></i>Rückgabe
-                            </button>
-                            <button class="btn btn-accent" onclick="showConsumableModal()">
-                                <i class="{{ app_labels.consumables.icon }} mr-2"></i>{{ app_labels.consumables.name }}
-                            </button>
+        <!-- Sidebar -->
+        <aside class="drawer-side z-40">
+            <label for="main-drawer" class="drawer-overlay"></label>
+            <div class="w-80 min-h-screen bg-base-100 border-r border-base-content/5 flex flex-col">
+                <!-- Logo & Brand Area -->
+                <div class="px-8 py-8">
+                    <a href="{{ url_for('main.index') }}" class="flex items-center gap-3 group">
+                        <div class="w-12 h-12 rounded-2xl bg-primary flex items-center justify-center shadow-2xl shadow-primary/40 group-hover:rotate-12 transition-transform duration-300">
+                            <i class="fas fa-microchip text-primary-content text-2xl"></i>
+                        </div>
+                        <div class="flex flex-col">
+                            <span class="text-2xl font-black tracking-tighter text-base-content uppercase leading-none">Scandy</span>
+                            <span class="text-[10px] font-bold tracking-[0.3em] text-primary uppercase">Management</span>
+                        </div>
+                    </a>
+                </div>
+
+                <!-- QuickScan Button in Sidebar -->
+                <div class="px-6 mb-4">
+                    <div id="quickScanTrigger"
+                         data-role="{{ current_user.role }}"
+                         class="w-full py-4 rounded-2xl bg-base-content text-base-100 flex items-center px-6 gap-4 cursor-pointer hover:scale-[1.02] active:scale-95 transition-all duration-300 shadow-xl shadow-base-content/10
+                                {% if not current_user.is_authenticated or current_user.role == 'teilnehmer' %}opacity-20 pointer-events-none grayscale{% endif %}"
+                         title="Quick Scan">
+                        <i class="fas fa-expand-alt text-xl"></i>
+                        <div class="flex flex-col">
+                            <span class="font-black text-xs tracking-widest uppercase">Quick Scan</span>
+                            <span class="text-[9px] opacity-60 font-bold uppercase">Bereit</span>
                         </div>
                     </div>
                 </div>
-                {% endif %}
 
-                <!-- Hauptinhalt -->
-                {% block page_content %}{% endblock %}
+                <!-- Navigation Items -->
+                <div class="flex-1 overflow-y-auto px-4 pb-8">
+                    <ul class="menu w-full gap-1 p-0">
+                        {% for group, items in plugin_manager.get_grouped_menu_items() %}
+                            {# Visible check #}
+                            {% set ns = namespace(group_visible=false) %}
+                            {% for item in items %}
+                                {% if (not item.feature_name or features_enabled.get(item.feature_name, True)) and
+                                      (not item.required_role or (current_user.is_authenticated and current_user.role == item.required_role)) %}
+                                    {% if current_user.is_authenticated %}
+                                        {% if current_user.role != 'teilnehmer' or group not in ['Inventar', 'Personal'] %}
+                                            {% set ns.group_visible = true %}
+                                        {% endif %}
+                                    {% else %}
+                                         {% if group == 'Allgemein' %}{% set ns.group_visible = true %}{% endif %}
+                                    {% endif %}
+                                {% endif %}
+                            {% endfor %}
+
+                            {% if ns.group_visible %}
+                                <li class="menu-title mt-8 first:mt-2 text-[10px] uppercase tracking-[0.25em] font-black text-base-content/25 px-4">
+                                    {{ group }}
+                                </li>
+                                {% for item in items %}
+                                    {% set item_visible = false %}
+                                    {% if (not item.feature_name or features_enabled.get(item.feature_name, True)) and
+                                          (not item.required_role or (current_user.is_authenticated and current_user.role == item.required_role)) %}
+                                        {% if current_user.is_authenticated %}
+                                            {% if current_user.role != 'teilnehmer' or group not in ['Inventar', 'Personal'] %}
+                                                {% set item_visible = true %}
+                                            {% endif %}
+                                        {% elif group == 'Allgemein' %}
+                                            {% set item_visible = true %}
+                                        {% endif %}
+                                    {% endif %}
+
+                                    {% if item_visible %}
+                                        <li>
+                                            <a href="{{ url_for(item.endpoint) }}"
+                                               class="flex items-center gap-4 py-3.5 px-4 rounded-xl transition-all duration-200 group mb-0.5
+                                                      {% if request.endpoint and item.endpoint in request.endpoint %}bg-primary text-primary-content font-bold shadow-lg shadow-primary/25{% else %}hover:bg-base-content/5 text-base-content/60 hover:text-base-content{% endif %}">
+                                                 <div class="w-5 flex items-center justify-center">
+                                                     <i class="{% if item.label_is_key %}{{ app_labels[item.label]['icon'] }}{% else %}{{ item.icon }}{% endif %} text-lg"></i>
+                                                 </div>
+                                                 <span class="text-sm">
+                                                     {% if item.label_is_key %}{{ app_labels[item.label]['name'] }}{% else %}{{ item.label }}{% endif %}
+                                                 </span>
+
+                                                 {% if item.badge_count_key %}
+                                                    {% set count = 0 %}
+                                                    {% if item.badge_count_key == 'unread_tickets_count' %}{% set count = unread_tickets_count %}{% endif %}
+                                                    {% if item.badge_count_key == 'unfilled_timesheet_days' %}{% set count = unfilled_timesheet_days %}{% endif %}
+                                                    {% if count and count > 0 %}
+                                                        <span class="ml-auto badge {% if request.endpoint and item.endpoint in request.endpoint %}badge-ghost{% else %}badge-error{% endif %} badge-sm font-bold">{{ count }}</span>
+                                                    {% endif %}
+                                                 {% endif %}
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                            {% endif %}
+                        {% endfor %}
+                    </ul>
+                </div>
+
+                <!-- Sidebar Footer -->
+                <div class="p-8 border-t border-base-content/5 mt-auto">
+                    <div class="flex flex-col gap-1.5 opacity-30 hover:opacity-100 transition-opacity duration-300">
+                        <div class="flex items-center gap-2">
+                            <span class="text-xs font-black tracking-widest text-primary">SCANDY</span>
+                            <span class="text-[9px] px-1.5 py-0.5 bg-base-content/10 rounded font-bold">V{{ version_info.local_version }}</span>
+                        </div>
+                        <div class="text-[9px] font-bold uppercase tracking-wider">© 2024 Andreas Klann</div>
+                    </div>
+                </div>
             </div>
-            {% endblock %}
-        </main>
+        </aside>
     </div>
 
-    <!-- QuickScan Modal -->
+    <!-- Modals & Overlays -->
     {% include 'components/quickscan_modal.html' %}
+    <div id="toast-container" class="fixed bottom-6 right-6 z-[9999] flex flex-col gap-3"></div>
 
-    <!-- Toast Container -->
-    <div id="toast-container" class="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2"></div>
-
-    <!-- Flash Messages -->
-    <div id="flash-data" data-flashes='{{ get_flashed_messages(with_categories=true)|tojson|safe }}'></div>
-    <script nonce="{{ csp_nonce }}">
-    document.addEventListener('DOMContentLoaded', function() {
-        var el = document.getElementById('flash-data');
-        if (!el) return;
-        var flashesStr = el.getAttribute('data-flashes') || '[]';
-        var flashes = [];
-        try { flashes = JSON.parse(flashesStr); } catch (e) { flashes = []; }
-        if (Array.isArray(flashes)) {
-            flashes.forEach(function(msg){
-                try { window.showToast(msg[0], msg[1]); } catch(e) {}
-            });
-        }
-        el.remove();
-    });
-    </script>
-
-    <!-- HTMX -->
+    <!-- Scripts -->
     <script nonce="{{ csp_nonce }}" src="https://unpkg.com/htmx.org@1.9.10"></script>
-
-    <!-- HTML5-QR-Code-Scanner -->
     <script nonce="{{ csp_nonce }}" src="https://unpkg.com/html5-qrcode"></script>
-
-    <!-- Eigene Scripts -->
     <script nonce="{{ csp_nonce }}" src="{{ url_for('static', filename='js/quickscan.js') }}?v=2"></script>
     <script nonce="{{ csp_nonce }}" src="{{ url_for('static', filename='js/lending-service.js') }}" defer></script>
     <script nonce="{{ csp_nonce }}" src="{{ url_for('static', filename='js/toast.js') }}"></script>
@@ -617,72 +382,8 @@ <h2 class="card-title">
 
     {% block scripts %}{% endblock %}
 
-    <!-- Styles für die Scanner-Animation -->
-    <style>
-        @keyframes scanner {
-            0% { transform: translateY(0); }
-            50% { transform: translateY(80px); }
-            100% { transform: translateY(0); }
-        }
-        .animate-scanner {
-            animation: scanner 2s linear infinite;
-        }
-
-        /* Tanz-Animation für Easter Egg */
-        @keyframes dance {
-            0% { transform: rotate(0deg) scale(1); }
-            25% { transform: rotate(-10deg) scale(1.3); }
-            50% { transform: rotate(0deg) scale(1); }
-            75% { transform: rotate(10deg) scale(1.3); }
-            100% { transform: rotate(0deg) scale(1); }
-        }
-        .dancing-zebra {
-            position: fixed;
-            width: 400px;
-            height: auto;
-            z-index: 9999999;
-            pointer-events: none;
-            filter: brightness(1.2) contrast(1.1);
-        }
-        .dancing-zebra.left {
-            top: 50%;
-            left: 5%;
-            transform: translateY(-50%);
-        }
-        .dancing-zebra.right {
-            top: 50%;
-            right: 5%;
-            transform: translateY(-50%) scaleX(-1);
-        }
-
-        /* Verbessertes Scandy Logo Styling - ohne @apply (Browser versteht das nicht) */
-        /* QuickScan-Trigger als rechteckiger Button */
-        #quickScanTrigger {
-            width: 100%; height: 4rem; border-radius: 0; overflow: hidden;
-            transition: background-color .2s, box-shadow .2s; display: flex; align-items: center; justify-content: center;
-            background: #2b333d;
-            cursor: pointer; position: relative;
-            margin-top: 0; z-index: 100; padding: 0 .5rem;
-        }
-        #quickScanTrigger:hover { background: #3d4852; }
-        
-        /* Deaktivierter QuickScan Button */
-        #quickScanTrigger.disabled { opacity: .5; cursor: not-allowed; }
-        
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .sidebar-permanent {
-                transform: translateX(-100%);
-            }
-            
-            .main-content-with-sidebar {
-                margin-left: 0;
-            }
-            
-            .navbar-with-sidebar {
-                margin-left: 0;
-            }
-        }
-    </style>
+    <script>
+        // Tooltip initialization or other global UI scripts
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/app/templates/components/quickscan_modal.html b/app/templates/components/quickscan_modal.html
index c624cab..edaed5d 100755
--- a/app/templates/components/quickscan_modal.html
+++ b/app/templates/components/quickscan_modal.html
@@ -2,37 +2,48 @@
 <dialog id="quickScanModal" class="modal">
     <div class="modal-box w-full max-w-4xl max-h-[95vh] flex flex-col p-4 relative overflow-y-auto">
         <button class="absolute top-2 right-2 btn btn-sm btn-circle btn-ghost text-xl" onclick="document.getElementById('quickScanModal').close()" aria-label="Schließen">&times;</button>
-        <h3 class="font-bold text-base mb-4 text-center">QuickScan</h3>
-        <div class="flex flex-col md:flex-row gap-6 mb-6 justify-center items-center">
+        <div class="text-center mb-8 mt-2">
+            <h3 class="text-3xl font-black tracking-tight mb-1">Quick<span class="text-primary">Scan</span></h3>
+            <p class="text-xs uppercase tracking-[0.2em] font-bold opacity-30">Transaktions-Terminal</p>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-8 mb-8 justify-center items-center">
             <!-- Karte: Werkzeug/Verbrauchsgut -->
-            <div id="itemCard" class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent" onclick="QuickScan.activateInput('item')">
-                <div class="card-body flex flex-col items-center justify-center h-full">
-                    <i class="fas fa-tools text-2xl text-primary mb-1"></i>
-                    <h2 class="card-title text-base mb-1">Werkzeug / Verbrauchsgut</h2>
-                    <div id="itemCardContent">
-                        <p class="text-sm opacity-50">Klicken &amp; Barcode scannen oder eingeben</p>
+            <div id="itemCard" class="card-modern card w-full md:w-80 bg-base-200/50 cursor-pointer group" onclick="QuickScan.activateInput('item')">
+                <div class="card-body items-center text-center py-10">
+                    <div class="w-20 h-20 rounded-3xl bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-500">
+                        <i class="fas fa-tools text-3xl text-primary"></i>
+                    </div>
+                    <h2 class="card-title text-lg font-black leading-tight mb-2">Inventar scannen</h2>
+                    <div id="itemCardContent" class="min-h-[40px] flex items-center justify-center">
+                        <p class="text-xs font-bold uppercase tracking-wider opacity-40">Bereit für Scan</p>
                     </div>
                 </div>
             </div>
             <!-- Karte: Mitarbeiter -->
-            <div id="workerCard" class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent" onclick="QuickScan.activateInput('worker')">
-                <div class="card-body flex flex-col items-center justify-center h-full">
-                    <i class="fas fa-id-badge text-2xl text-secondary mb-1"></i>
-                    <h2 class="card-title text-base mb-1">Mitarbeiter</h2>
-                    <div id="workerCardContent">
-                        <p class="text-sm opacity-50">Klicken &amp; Barcode scannen oder eingeben</p>
+            <div id="workerCard" class="card-modern card w-full md:w-80 bg-base-200/50 cursor-pointer group" onclick="QuickScan.activateInput('worker')">
+                <div class="card-body items-center text-center py-10">
+                    <div class="w-20 h-20 rounded-3xl bg-secondary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-500">
+                        <i class="fas fa-id-badge text-3xl text-secondary"></i>
+                    </div>
+                    <h2 class="card-title text-lg font-black leading-tight mb-2">Personal scannen</h2>
+                    <div id="workerCardContent" class="min-h-[40px] flex items-center justify-center">
+                        <p class="text-xs font-bold uppercase tracking-wider opacity-40">Bereit für Scan</p>
                     </div>
                 </div>
             </div>
         </div>
         <!-- Sichtbares Eingabefeld, das nur bei aktiver Karte angezeigt wird -->
-        <div class="flex flex-col items-center gap-2 mt-4">
-            <div id="quickScanActiveInputContainer" class="hidden w-full max-w-sm">
-                <input type="text" id="quickScanActiveInput" class="input input-bordered w-full" autocomplete="off" />
+        <div class="flex flex-col items-center gap-6 mt-4">
+            <div id="quickScanActiveInputContainer" class="hidden w-full max-w-sm animate-in fade-in slide-in-from-bottom-4 duration-500">
+                <div class="relative">
+                    <input type="text" id="quickScanActiveInput" class="input input-bordered w-full h-14 text-center text-xl font-bold tracking-widest rounded-2xl bg-base-200 focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all" placeholder="Barcode" autocomplete="off" />
+                    <div class="absolute inset-x-4 bottom-0 h-0.5 bg-primary origin-left animate-scan-line"></div>
+                </div>
             </div>
-            <div class="flex gap-2 mt-2">
-                <button class="btn btn-ghost hover:btn-warning active:scale-95 transition" type="button" onclick="QuickScan.reset()">Reset</button>
-                <button class="btn btn-primary hover:btn-success active:scale-95 transition" id="quickScanConfirmBtn" type="button" onclick="QuickScan.confirm()" disabled>Bestätigen</button>
+            <div class="flex gap-4 mt-2">
+                <button class="btn btn-ghost btn-lg rounded-2xl px-8 hover:bg-base-content/5 active:scale-95 transition-all uppercase tracking-widest text-xs font-black" type="button" onclick="QuickScan.reset()">Reset</button>
+                <button class="btn btn-primary btn-lg rounded-2xl px-12 shadow-xl shadow-primary/20 active:scale-95 transition-all uppercase tracking-widest text-xs font-black" id="quickScanConfirmBtn" type="button" onclick="QuickScan.confirm()" disabled>Bestätigen</button>
             </div>
         </div>
     </div>
diff --git a/app/templates/components/quickscan_step_final.html b/app/templates/components/quickscan_step_final.html
index 50e4236..5fc2682 100755
--- a/app/templates/components/quickscan_step_final.html
+++ b/app/templates/components/quickscan_step_final.html
@@ -1,24 +1,24 @@
-<div class="flex flex-col h-full">
-    <div class="text-lg font-medium mb-4">Vorgang abschließen</div>
-    
-    <div class="bg-base-100 rounded-lg p-6 flex-1">
-        <!-- Summary -->
-        <div class="alert alert-success shadow-lg mb-6">
-            <i class="fas fa-check-circle"></i>
-            <div class="flex flex-col">
-                <span class="font-medium">Bereit zum Abschließen</span>
-                <span class="text-sm" id="finalSummary"></span>
-            </div>
-        </div>
-        
-        <!-- Confirmation Barcode -->
-        <div class="flex flex-col items-center gap-4">
-            <div id="finalConfirmation" class="bg-white p-4 rounded-lg">
-                <!-- Barcode wird hier generiert -->
-            </div>
-            <p class="text-sm text-center opacity-75">
-                Scannen Sie den Barcode zum Abschließen des Vorgangs
-            </p>
-        </div>
-    </div>
+<div class="flex flex-col h-full">
+    <div class="text-lg font-medium mb-4">Vorgang abschließen</div>
+
+    <div class="bg-base-100 rounded-lg p-6 flex-1">
+        <!-- Summary -->
+        <div class="alert alert-success shadow-lg mb-6">
+            <i class="fas fa-check-circle"></i>
+            <div class="flex flex-col">
+                <span class="font-medium">Bereit zum Abschließen</span>
+                <span class="text-sm" id="finalSummary"></span>
+            </div>
+        </div>
+
+        <!-- Confirmation Barcode -->
+        <div class="flex flex-col items-center gap-4">
+            <div id="finalConfirmation" class="bg-base-100 p-4 rounded-lg">
+                <!-- Barcode wird hier generiert -->
+            </div>
+            <p class="text-sm text-center opacity-75">
+                Scannen Sie den Barcode zum Abschließen des Vorgangs
+            </p>
+        </div>
+    </div>
 </div> 
\ No newline at end of file
diff --git a/app/templates/consumables/details.html b/app/templates/consumables/details.html
index 3a74c6d..2a53ad7 100755
--- a/app/templates/consumables/details.html
+++ b/app/templates/consumables/details.html
@@ -200,7 +200,7 @@ <h3 class="font-bold text-lg mb-4">Bestand anpassen</h3>
                 <label class="label">
                     <span class="label-text-alt">Positive Zahl zum Hinzufügen, negative zum Abziehen</span>
                 </label>
-                <div class="text-sm text-gray-500 mt-2">
+                <div class="text-sm text-base-content/60 mt-2">
                     <p>Beispiele:</p>
                     <ul class="list-disc list-inside">
                         <li>+5: Fügt 5 Stück zum Bestand hinzu</li>
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index b54bbd0..a7d55ec 100755
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -1,132 +1,132 @@
-{% extends "base.html" %}
-
-{% block head %}
-    <!-- Lending Service -->
-    <script nonce="{{ csp_nonce }}" src="{{ url_for('static', filename='js/lending-service.js') }}" defer></script>
-{% endblock %}
-
-{% block content %}
-    <div class="card bg-white shadow-lg">
-        <div class="card-header bg-gradient-to-r from-blue-600 to-blue-700">
-            <h5 class="card-title text-white font-semibold">Synchronisation</h5>
-        </div>
-        <div class="card-body p-6">
-            {% if config.SERVER_MODE %}
-                <h6>Server-Modus aktiv</h6>
-                <p>Server-URL: http://{{ config.LOCAL_IP }}:5000</p>
-                
-                <h6>Letzte Synchronisationen</h6>
-                <div class="table-responsive">
-                    <table class="table table-striped">
-                        <thead>
-                            <tr>
-                                <th>Client</th>
-                                <th>Zeitpunkt</th>
-                                <th>Änderungen</th>
-                                <th>Details</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for log in sync_logs %}
-                            <tr>
-                                <td>{{ log.client_name }}</td>
-                                <td>{{ log.timestamp }}</td>
-                                <td>{{ log.changes_count }}</td>
-                                <td>{{ log.details }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            {% else %}
-                <h6>Client-Modus aktiv</h6>
-                <form method="post" action="{{ url_for('settings.update_settings') }}">
-    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                    <div class="mb-3">
-                        <label for="client_name" class="form-label">Client-Name</label>
-                        <input type="text" class="form-control" id="client_name" name="client_name" 
-                               value="{{ settings.get('client_name', '') }}" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="server_url" class="form-label">Server-URL</label>
-                        <input type="url" class="form-control" id="server_url" name="server_url" 
-                               value="{{ settings.get('server_url', '') }}" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="sync_status" class="form-label">Sync-Status</label>
-                        <div id="sync_status">
-                            Letzte Synchronisation: {{ last_sync }}
-                        </div>
-                    </div>
-                    <button type="submit" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">Einstellungen speichern</button>
-                    <button type="button" class="btn btn-secondary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200" onclick="syncNow()">Jetzt synchronisieren</button>
-                </form>
-            {% endif %}
-        </div>
-    </div>
-
-    <div class="card bg-white shadow-lg">
-        <div class="card-header bg-gradient-to-r from-blue-600 to-blue-700">
-            <h5 class="card-title text-white font-semibold">Aktuelle Ausleihen</h5>
-        </div>
-        <div class="card-body p-6">
-            <div class="table-responsive">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>Artikel</th>
-                            <th>Barcode</th>
-                            <th>Ausgeliehen an</th>
-                            <th>Datum</th>
-                            <th>Aktionen</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for lending in current_lendings %}
-                        <tr>
-                            <td>{{ lending.item_name }}</td>
-                            <td>{{ lending.item_barcode }}</td>
-                            <td>{{ lending.worker_name }}</td>
-                            <td>{{ lending.action_date }}</td>
-                            <td>
-                                {% if lending.category == 'Werkzeug' %}
-                                    <button class="btn btn-sm btn-danger hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-200"
-                                            data-barcode="{{ lending.item_barcode }}"
-                                            title="Werkzeug zurückgeben">
-                                        <i class="fas fa-undo-alt me-1"></i> Zurückgeben
-                                    </button>
-                                {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    {% if not config.SERVER_MODE %}
-    <script nonce="{{ csp_nonce }}">
-        function syncNow() {
-            fetch('/api/sync', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Synchronisation erfolgreich');
-                    location.reload();
-                } else {
-                    alert('Fehler bei der Synchronisation: ' + data.message);
-                }
-            })
-            .catch(error => {
-                alert('Fehler bei der Synchronisation: ' + error);
-            });
-        }
-    </script>
-    {% endif %} 
+{% extends "base.html" %}
+
+{% block head %}
+    <!-- Lending Service -->
+    <script nonce="{{ csp_nonce }}" src="{{ url_for('static', filename='js/lending-service.js') }}" defer></script>
+{% endblock %}
+
+{% block content %}
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-header bg-gradient-to-r from-blue-600 to-blue-700">
+            <h5 class="card-title text-white font-semibold">Synchronisation</h5>
+        </div>
+        <div class="card-body p-6">
+            {% if config.SERVER_MODE %}
+                <h6>Server-Modus aktiv</h6>
+                <p>Server-URL: http://{{ config.LOCAL_IP }}:5000</p>
+
+                <h6>Letzte Synchronisationen</h6>
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>Client</th>
+                                <th>Zeitpunkt</th>
+                                <th>Änderungen</th>
+                                <th>Details</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for log in sync_logs %}
+                            <tr>
+                                <td>{{ log.client_name }}</td>
+                                <td>{{ log.timestamp }}</td>
+                                <td>{{ log.changes_count }}</td>
+                                <td>{{ log.details }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% else %}
+                <h6>Client-Modus aktiv</h6>
+                <form method="post" action="{{ url_for('settings.update_settings') }}">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                    <div class="mb-3">
+                        <label for="client_name" class="form-label">Client-Name</label>
+                        <input type="text" class="form-control" id="client_name" name="client_name"
+                               value="{{ settings.get('client_name', '') }}" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="server_url" class="form-label">Server-URL</label>
+                        <input type="url" class="form-control" id="server_url" name="server_url"
+                               value="{{ settings.get('server_url', '') }}" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="sync_status" class="form-label">Sync-Status</label>
+                        <div id="sync_status">
+                            Letzte Synchronisation: {{ last_sync }}
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">Einstellungen speichern</button>
+                    <button type="button" class="btn btn-secondary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200" onclick="syncNow()">Jetzt synchronisieren</button>
+                </form>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-header bg-gradient-to-r from-blue-600 to-blue-700">
+            <h5 class="card-title text-white font-semibold">Aktuelle Ausleihen</h5>
+        </div>
+        <div class="card-body p-6">
+            <div class="table-responsive">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Artikel</th>
+                            <th>Barcode</th>
+                            <th>Ausgeliehen an</th>
+                            <th>Datum</th>
+                            <th>Aktionen</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for lending in current_lendings %}
+                        <tr>
+                            <td>{{ lending.item_name }}</td>
+                            <td>{{ lending.item_barcode }}</td>
+                            <td>{{ lending.worker_name }}</td>
+                            <td>{{ lending.action_date }}</td>
+                            <td>
+                                {% if lending.category == 'Werkzeug' %}
+                                    <button class="btn btn-sm btn-danger hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-200"
+                                            data-barcode="{{ lending.item_barcode }}"
+                                            title="Werkzeug zurückgeben">
+                                        <i class="fas fa-undo-alt me-1"></i> Zurückgeben
+                                    </button>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    {% if not config.SERVER_MODE %}
+    <script nonce="{{ csp_nonce }}">
+        function syncNow() {
+            fetch('/api/sync', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Synchronisation erfolgreich');
+                    location.reload();
+                } else {
+                    alert('Fehler bei der Synchronisation: ' + data.message);
+                }
+            })
+            .catch(error => {
+                alert('Fehler bei der Synchronisation: ' + error);
+            });
+        }
+    </script>
+    {% endif %}
 {% endblock %} 
\ No newline at end of file
diff --git a/app/templates/dashboard/index.html b/app/templates/dashboard/index.html
index b0b64fd..0ad6bd4 100755
--- a/app/templates/dashboard/index.html
+++ b/app/templates/dashboard/index.html
@@ -7,7 +7,7 @@
     <!-- Übersichtskarten -->
     <div class="grid-responsive">
         <!-- Werkzeuge -->
-        <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card card-modern bg-base-100 shadow-lg card-compact">
             <div class="card-body">
                 <div class="flex items-center justify-between">
                     <h2 class="card-title text-lg">
@@ -41,7 +41,7 @@ <h2 class="card-title text-lg">
         </div>
 
         <!-- Verbrauchsgüter -->
-        <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card card-modern bg-base-100 shadow-lg card-compact">
             <div class="card-body">
                 <div class="flex items-center justify-between">
                     <h2 class="card-title text-lg">
@@ -69,7 +69,7 @@ <h2 class="card-title text-lg">
 
         <!-- Mitarbeiter -->
         {% if current_user.is_authenticated and current_user.is_mitarbeiter %}
-        <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card card-modern bg-base-100 shadow-lg card-compact">
             <div class="card-body">
                 <div class="flex items-center justify-between">
                     <h2 class="card-title text-lg">
@@ -92,7 +92,7 @@ <h2 class="card-title text-lg">
 
         <!-- Tickets -->
         {% if current_user.is_authenticated %}
-        <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card card-modern bg-base-100 shadow-lg card-compact">
             <div class="card-body">
                 <div class="flex items-center justify-between">
                     <h2 class="card-title text-lg">
diff --git a/app/templates/errors/400.html b/app/templates/errors/400.html
index 36e0627..6e4bab6 100644
--- a/app/templates/errors/400.html
+++ b/app/templates/errors/400.html
@@ -8,7 +8,7 @@
         <div class="card-body text-center">
             <h1 class="text-4xl font-bold text-error mb-4">400</h1>
             <h2 class="text-2xl font-semibold mb-4">Bad Request</h2>
-            <p class="text-gray-600 mb-6">Die Anfrage konnte nicht verarbeitet werden.</p>
+            <p class="text-base-content/70 mb-6">Die Anfrage konnte nicht verarbeitet werden.</p>
             
             <div class="card-actions justify-center">
                 <a href="{{ url_for('main.index') }}" class="btn btn-primary">
diff --git a/app/templates/index_normal.html b/app/templates/index_normal.html
index 1ebdc16..9ecb6e1 100755
--- a/app/templates/index_normal.html
+++ b/app/templates/index_normal.html
@@ -15,13 +15,13 @@
     </div>
 
     <!-- Hero-Sektion -->
-    <div class="hero bg-base-100 rounded-box shadow-xl mb-8">
-        <div class="hero-content text-center">
+    <div class="hero glass-panel rounded-3xl mb-8 overflow-hidden border border-base-content/5">
+        <div class="hero-content text-center py-12">
             <div class="max-w-2xl">
-                <h1 class="text-4xl font-bold mb-4">Willkommen bei Scandy</h1>
-                <p class="text-xl mb-6">Ihr digitales System für {{ app_labels.tools.name }}, {{ app_labels.consumables.name }} und {{ app_labels.tickets.name }}</p>
+                <h1 class="text-5xl font-black mb-4 tracking-tight">Willkommen bei <span class="text-primary">Scandy</span></h1>
+                <p class="text-xl mb-8 opacity-70">Ihr modernes System für {{ app_labels.tools.name }}, {{ app_labels.consumables.name }} und {{ app_labels.tickets.name }}</p>
                 {% if not current_user.is_authenticated %}
-                <a href="{{ url_for('auth.login') }}" class="btn btn-primary">
+                <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg rounded-2xl px-8 shadow-xl shadow-primary/20">
                     <i class="fas fa-sign-in-alt mr-2"></i>Anmelden
                 </a>
                 {% endif %}
@@ -65,109 +65,86 @@ <h1 class="text-4xl font-bold mb-4">Willkommen bei Scandy</h1>
     <!-- Statistik-Karten -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <!-- Werkzeug-Statistiken -->
-        <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-                <div class="mb-4">
-                    <h2 class="card-title">
-                        <i class="{{ app_labels.tools.icon }} text-primary mr-2"></i>
-                        {{ app_labels.tools.name }}
-                    </h2>
-                    <div class="text-center mt-2">
-                        <span class="badge badge-primary badge-lg">{{ tool_stats.total }} Gesamt</span>
+        <div class="card-modern card bg-base-100">
+            <div class="card-body p-6">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
+                        <i class="{{ app_labels.tools.icon }} text-2xl"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-sm font-black uppercase tracking-widest opacity-40">{{ app_labels.tools.name }}</h2>
+                        <div class="text-2xl font-black">{{ tool_stats.total }}</div>
                     </div>
                 </div>
                 <div class="space-y-3">
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Verfügbar</span>
-                        <span class="badge badge-success gap-2">
-                            <i class="fas fa-check"></i>
-                            {{ tool_stats.available }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Verfügbar</span>
+                        <span class="text-sm font-black text-success">{{ tool_stats.available }}</span>
                     </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Ausgeliehen</span>
-                        <span class="badge badge-warning gap-2">
-                            <i class="fas fa-hand-holding"></i>
-                            {{ tool_stats.lent }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Ausgeliehen</span>
+                        <span class="text-sm font-black text-warning">{{ tool_stats.lent }}</span>
                     </div>
                     {% if overdue_loans and overdue_loans|length > 0 %}
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Überfällig</span>
-                        <span class="badge badge-error gap-2">
-                            <i class="fas fa-clock"></i>
-                            {{ overdue_loans|length }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-error/10 text-error">
+                        <span class="text-xs font-bold uppercase">Überfällig</span>
+                        <span class="text-sm font-black">{{ overdue_loans|length }}</span>
                     </div>
                     {% endif %}
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Defekt</span>
-                        <span class="badge badge-error gap-2">
-                            <i class="fas fa-times"></i>
-                            {{ tool_stats.defect }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Defekt</span>
+                        <span class="text-sm font-black text-error">{{ tool_stats.defect }}</span>
                     </div>
                 </div>
             </div>
         </div>
 
         <!-- Verbrauchsmaterial-Statistiken -->
-        <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-                <div class="mb-4">
-                    <h2 class="card-title">
-                        <i class="{{ app_labels.consumables.icon }} text-secondary mr-2"></i>
-                        {{ app_labels.consumables.name }}
-                    </h2>
-                    <div class="text-center mt-2">
-                        <span class="badge badge-secondary badge-lg">{{ consumable_stats.total }} Artikel</span>
+        <div class="card-modern card bg-base-100">
+            <div class="card-body p-6">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-12 h-12 rounded-2xl bg-secondary/10 flex items-center justify-center text-secondary">
+                        <i class="{{ app_labels.consumables.icon }} text-2xl"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-sm font-black uppercase tracking-widest opacity-40">{{ app_labels.consumables.name }}</h2>
+                        <div class="text-2xl font-black">{{ consumable_stats.total }}</div>
                     </div>
                 </div>
                 <div class="space-y-3">
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Ausreichend</span>
-                        <span class="badge badge-success gap-2">
-                            <i class="fas fa-check"></i>
-                            {{ consumable_stats.sufficient }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Ausreichend</span>
+                        <span class="text-sm font-black text-success">{{ consumable_stats.sufficient }}</span>
                     </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Nachbestellen</span>
-                        <span class="badge badge-warning gap-2">
-                            <i class="fas fa-exclamation"></i>
-                            {{ consumable_stats.warning }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Nachbestellen</span>
+                        <span class="text-sm font-black text-warning">{{ consumable_stats.warning }}</span>
                     </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Kritisch</span>
-                        <span class="badge badge-error gap-2">
-                            <i class="fas fa-exclamation-triangle"></i>
-                            {{ consumable_stats.critical }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50 text-error">
+                        <span class="text-xs font-bold uppercase opacity-60">Kritisch</span>
+                        <span class="text-sm font-black">{{ consumable_stats.critical }}</span>
                     </div>
                 </div>
             </div>
         </div>
 
         <!-- Mitarbeiter-Statistiken -->
-        <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-                <div class="mb-4">
-                    <h2 class="card-title">
-                        <i class="fas fa-users text-accent mr-2"></i>
-                        Mitarbeiter
-                    </h2>
-                    <div class="text-center mt-2">
-                        <span class="badge badge-accent badge-lg">{{ worker_stats.total }} Gesamt</span>
+        <div class="card-modern card bg-base-100">
+            <div class="card-body p-6">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-12 h-12 rounded-2xl bg-accent/10 flex items-center justify-center text-accent">
+                        <i class="fas fa-users text-2xl"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-sm font-black uppercase tracking-widest opacity-40">Personal</h2>
+                        <div class="text-2xl font-black">{{ worker_stats.total }}</div>
                     </div>
                 </div>
                 <div class="space-y-3">
-                    <!-- Abteilungsverteilung -->
-                    <div class="text-sm font-bold mb-2">Nach Abteilung:</div>
                     {% for dept in worker_stats.by_department %}
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">{{ dept.name }}</span>
-                        <span class="badge badge-ghost">{{ dept.count }}</span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">{{ dept.name }}</span>
+                        <span class="text-sm font-black">{{ dept.count }}</span>
                     </div>
                     {% endfor %}
                 </div>
@@ -175,38 +152,29 @@ <h2 class="card-title">
         </div>
 
         <!-- Ticket-Statistiken -->
-        <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-                <div class="mb-4">
-                    <h2 class="card-title">
-                        <i class="{{ app_labels.tickets.icon }} text-info mr-2"></i>
-                        {{ app_labels.tickets.name }}
-                    </h2>
-                    <div class="text-center mt-2">
-                        <span class="badge badge-info badge-lg">{{ ticket_stats.total if ticket_stats else 0 }} Gesamt</span>
+        <div class="card-modern card bg-base-100">
+            <div class="card-body p-6">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-12 h-12 rounded-2xl bg-info/10 flex items-center justify-center text-info">
+                        <i class="{{ app_labels.tickets.icon }} text-2xl"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-sm font-black uppercase tracking-widest opacity-40">{{ app_labels.tickets.name }}</h2>
+                        <div class="text-2xl font-black">{{ ticket_stats.total if ticket_stats else 0 }}</div>
                     </div>
                 </div>
                 <div class="space-y-3">
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Offen</span>
-                        <span class="badge badge-warning gap-2">
-                            <i class="fas fa-clock"></i>
-                            {{ ticket_stats.open if ticket_stats else 0 }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Offen</span>
+                        <span class="text-sm font-black text-warning">{{ ticket_stats.open if ticket_stats else 0 }}</span>
                     </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">In Bearbeitung</span>
-                        <span class="badge badge-info gap-2">
-                            <i class="fas fa-cogs"></i>
-                            {{ ticket_stats.in_progress if ticket_stats else 0 }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">In Arbeit</span>
+                        <span class="text-sm font-black text-info">{{ ticket_stats.in_progress if ticket_stats else 0 }}</span>
                     </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm">Geschlossen</span>
-                        <span class="badge badge-success gap-2">
-                            <i class="fas fa-check-circle"></i>
-                            {{ ticket_stats.closed if ticket_stats else 0 }}
-                        </span>
+                    <div class="flex justify-between items-center p-2 rounded-xl bg-base-200/50">
+                        <span class="text-xs font-bold uppercase opacity-60">Erledigt</span>
+                        <span class="text-sm font-black text-success">{{ ticket_stats.closed if ticket_stats else 0 }}</span>
                     </div>
                 </div>
             </div>
diff --git a/app/templates/jobs/debug.html b/app/templates/jobs/debug.html
index 2ac50ca..e0529fa 100755
--- a/app/templates/jobs/debug.html
+++ b/app/templates/jobs/debug.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="space-y-6">
-    <h1 class="text-3xl font-bold text-gray-900">Job Debug</h1>
+    <h1 class="text-3xl font-bold text-base-content">Job Debug</h1>
     
     <div class="card-compact shadow-lg">
         <div class="card-body">
diff --git a/app/templates/mobile/quickscan.html b/app/templates/mobile/quickscan.html
index dab4492..491769f 100644
--- a/app/templates/mobile/quickscan.html
+++ b/app/templates/mobile/quickscan.html
@@ -40,7 +40,7 @@
             <div class="p-4">
                 <div class="flex items-center justify-between mb-4">
                     <h1 class="text-lg font-semibold">QuickScan</h1>
-                    <span class="text-xs text-gray-500">mobil</span>
+                    <span class="text-xs text-base-content/60">mobil</span>
                 </div>
 
                 {% if not current_user.is_authenticated %}
diff --git a/app/templates/mobile/quickscan_panel.html b/app/templates/mobile/quickscan_panel.html
index 4716405..e170ed9 100644
--- a/app/templates/mobile/quickscan_panel.html
+++ b/app/templates/mobile/quickscan_panel.html
@@ -38,7 +38,7 @@
 
   <!-- Aktuelle Auswahl / Aktionen -->
   <div class="mt-4 space-y-3">
-    <div class="text-xs uppercase tracking-wide text-gray-500">Aktuelle Auswahl</div>
+    <div class="text-xs uppercase tracking-wide text-base-content/60">Aktuelle Auswahl</div>
     <div class="grid grid-cols-1 gap-2">
       <div class="flex items-center justify-between rounded-xl border border-base-300 bg-base-100 px-3 py-2">
         <div class="flex items-center gap-3">
diff --git a/app/templates/quick_scan.html b/app/templates/quick_scan.html
index b813058..f21a533 100755
--- a/app/templates/quick_scan.html
+++ b/app/templates/quick_scan.html
@@ -1,58 +1,58 @@
-{% extends "base.html" %}
-
-{% block title %}QuickScan{% endblock %}
-
-{% block head %}
-{{ super() }}
-<script src="{{ url_for('static', filename='js/quickscan.js') }}" defer></script>
-{% endblock %}
-
-{% block page_content %}
-<div class="container mx-auto px-4 py-8">
-    <h1 class="text-2xl font-bold mb-6">QuickScan</h1>
-    
-    <!-- Schritt 1: Artikel scannen -->
-    <div id="step1" class="mb-8">
-        <h2 class="text-xl font-semibold mb-4">
-            <i class="{{ app_labels.tools.icon }} text-primary mr-2"></i>
-            {{ app_labels.tools.name }} ausleihen
-        </h2>
-        <div class="bg-white p-6 rounded-lg shadow">
-            <input type="text" id="itemScanInput" class="w-full p-2 border rounded mb-4" placeholder="Barcode scannen...">
-            <div id="processedItemInput" class="text-gray-500 opacity-50 mb-4">Keine Eingabe</div>
-            <button id="confirmItemBtn" class="hidden bg-blue-500 text-white px-4 py-2 rounded">Bestätigen</button>
-        </div>
-    </div>
-
-    <!-- Schritt 2: Mitarbeiter scannen -->
-    <div id="step2" class="hidden mb-8">
-        <h2 class="text-xl font-semibold mb-4">
-            <i class="{{ app_labels.consumables.icon }} text-secondary mr-2"></i>
-            {{ app_labels.consumables.name }} ausgeben
-        </h2>
-        <div class="bg-white p-6 rounded-lg shadow">
-            <input type="text" id="workerScanInput" class="w-full p-2 border rounded mb-4" placeholder="Mitarbeiter-Barcode scannen...">
-            <div id="processedWorkerInput" class="text-gray-500 opacity-50 mb-4">Keine Eingabe</div>
-            <button id="confirmWorkerButton" class="hidden bg-blue-500 text-white px-4 py-2 rounded">Bestätigen</button>
-        </div>
-    </div>
-
-    <!-- Bestätigungsmodal -->
-    <div id="quickScanModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-        <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Bestätigung</h3>
-            <div id="confirmationMessage" class="mb-4"></div>
-            <div class="flex justify-end space-x-4">
-                <button id="confirmActionBtn" class="bg-green-500 text-white px-4 py-2 rounded">Bestätigen</button>
-                <button id="cancelActionBtn" class="bg-red-500 text-white px-4 py-2 rounded">Abbrechen</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script nonce="{{ csp_nonce }}">
-    document.addEventListener('DOMContentLoaded', () => {
-        QuickScan.init();
-    });
-</script>
+{% extends "base.html" %}
+
+{% block title %}QuickScan{% endblock %}
+
+{% block head %}
+{{ super() }}
+<script src="{{ url_for('static', filename='js/quickscan.js') }}" defer></script>
+{% endblock %}
+
+{% block page_content %}
+<div class="container mx-auto px-4 py-8">
+    <h1 class="text-2xl font-bold mb-6">QuickScan</h1>
+
+    <!-- Schritt 1: Artikel scannen -->
+    <div id="step1" class="mb-8">
+        <h2 class="text-xl font-semibold mb-4">
+            <i class="{{ app_labels.tools.icon }} text-primary mr-2"></i>
+            {{ app_labels.tools.name }} ausleihen
+        </h2>
+        <div class="bg-base-100 p-6 rounded-lg shadow">
+            <input type="text" id="itemScanInput" class="w-full p-2 border rounded mb-4" placeholder="Barcode scannen...">
+            <div id="processedItemInput" class="text-base-content/60 opacity-50 mb-4">Keine Eingabe</div>
+            <button id="confirmItemBtn" class="hidden bg-blue-500 text-white px-4 py-2 rounded">Bestätigen</button>
+        </div>
+    </div>
+
+    <!-- Schritt 2: Mitarbeiter scannen -->
+    <div id="step2" class="hidden mb-8">
+        <h2 class="text-xl font-semibold mb-4">
+            <i class="{{ app_labels.consumables.icon }} text-secondary mr-2"></i>
+            {{ app_labels.consumables.name }} ausgeben
+        </h2>
+        <div class="bg-base-100 p-6 rounded-lg shadow">
+            <input type="text" id="workerScanInput" class="w-full p-2 border rounded mb-4" placeholder="Mitarbeiter-Barcode scannen...">
+            <div id="processedWorkerInput" class="text-base-content/60 opacity-50 mb-4">Keine Eingabe</div>
+            <button id="confirmWorkerButton" class="hidden bg-blue-500 text-white px-4 py-2 rounded">Bestätigen</button>
+        </div>
+    </div>
+
+    <!-- Bestätigungsmodal -->
+    <div id="quickScanModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+        <div class="bg-base-100 p-6 rounded-lg shadow-lg max-w-md w-full">
+            <h3 class="text-xl font-semibold mb-4">Bestätigung</h3>
+            <div id="confirmationMessage" class="mb-4"></div>
+            <div class="flex justify-end space-x-4">
+                <button id="confirmActionBtn" class="bg-green-500 text-white px-4 py-2 rounded">Bestätigen</button>
+                <button id="cancelActionBtn" class="bg-red-500 text-white px-4 py-2 rounded">Abbrechen</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script nonce="{{ csp_nonce }}">
+    document.addEventListener('DOMContentLoaded', () => {
+        QuickScan.init();
+    });
+</script>
 {% endblock %} 
\ No newline at end of file
diff --git a/app/templates/setup.html b/app/templates/setup.html
index 8ee6cbe..ec1d910 100755
--- a/app/templates/setup.html
+++ b/app/templates/setup.html
@@ -104,7 +104,7 @@ <h2 class="card-title mb-4">System-Namen konfigurieren</h2>
         <div class="card bg-base-100 shadow-xl">
             <div class="card-body">
                 <h2 class="card-title mb-4">E-Mail-Konfiguration (optional)</h2>
-                <p class="text-sm text-gray-600 mb-4">Sie können die E-Mail-Konfiguration später im Admin-Bereich anpassen.</p>
+                <p class="text-sm text-base-content/70 mb-4">Sie können die E-Mail-Konfiguration später im Admin-Bereich anpassen.</p>
                 
                 <div class="form-control mb-4">
                     <label class="label">
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index 0bcb254..54ae39e 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -1,380 +1,251 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="space-y-4">
-    <!-- Suchleiste und Filter -->
-    <div class="card bg-base-100 shadow-lg card-compact">
-        <div class="card-body">
-            <!-- Suchleiste und Aktionen -->
-            <div class="flex flex-col md:flex-row gap-4 items-center">
-                <div class="form-control flex-1">
-                    <div class="input-group">
-                        <input type="text" 
-                               placeholder="Suchen..." 
-                               class="input input-bordered w-full" 
-                               id="searchInput">
-                        <button class="btn btn-square">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Aktionen -->
-                {% block actions %}{% endblock %}
-            </div>
-
-            <!-- Filter -->
-            <div class="flex flex-wrap gap-3 mt-4">
-                {% block filters %}{% endblock %}
-            </div>
-        </div>
-    </div>
-
-    <!-- Datentabelle -->
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body p-0">
-            <div class="table-container">
-                <table class="table table-zebra w-full">
-                    <thead>
-                        <tr>
-                            {% block table_headers %}{% endblock %}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% block table_rows %}{% endblock %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <!-- Kontext-Hilfe (optional) -->
-    {% if help_title or help_items %}
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body">
-            <h3 class="card-title text-lg">
-                <i class="fas fa-question-circle text-primary mr-2"></i>
-                {{ help_title or 'Hilfe' }}
-            </h3>
-            {% if help_text %}
-            <p class="text-sm opacity-75 mb-2">{{ help_text }}</p>
-            {% endif %}
-            {% if help_items %}
-            <ul class="list-disc list-inside text-sm space-y-1">
-                {% for item in help_items %}
-                <li>{{ item }}</li>
-                {% endfor %}
-            </ul>
-            {% endif %}
-        </div>
-    </div>
-    {% endif %}
-</div>
-
-<!-- Scripts -->
-<script nonce="{{ csp_nonce }}">
-// Basis-Suchfunktion
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchInput');
-    if (searchInput) {
-        searchInput.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            document.querySelectorAll('.data-row').forEach(row => {
-                const searchableContent = row.textContent.toLowerCase();
-                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
-            });
-        });
-    }
-
-    // Sortier-Funktionalität
-    let currentSort = { column: null, direction: 'asc' };
-
-    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
-    document.querySelectorAll('th').forEach(th => {
-        if (!th.classList.contains('no-sort')) {
-            const wrapper = document.createElement('div');
-            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none';
-            wrapper.innerHTML = `
-                ${th.innerHTML}
-                <span class="sort-icons opacity-50">
-                    <i class="fas fa-sort"></i>
-                </span>
-            `;
-            th.innerHTML = '';
-            th.appendChild(wrapper);
-
-            wrapper.addEventListener('click', () => {
-                const column = Array.from(th.parentElement.children).indexOf(th);
-                sortTable(column, th);
-            });
-        }
-    });
-
-    function sortTable(column, th) {
-        const table = th.closest('table');
-        const tbody = table.querySelector('tbody');
-        const rows = Array.from(tbody.querySelectorAll('tr'));
-        
-        // Update Sort-Direction
-        if (currentSort.column === column) {
-            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
-        } else {
-            currentSort.column = column;
-            currentSort.direction = 'asc';
-        }
-
-        // Update Sort-Icons
-        table.querySelectorAll('.sort-icons').forEach(icon => {
-            icon.innerHTML = '<i class="fas fa-sort"></i>';
-        });
-        
-        const currentIcon = th.querySelector('.sort-icons');
-        if (currentSort.direction === 'asc') {
-            currentIcon.innerHTML = '<i class="fas fa-sort-up"></i>';
-        } else {
-            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
-        }
-
-        // Sortiere die Zeilen
-        rows.sort((a, b) => {
-            const aValue = a.children[column]?.textContent || '';
-            const bValue = b.children[column]?.textContent || '';
-            
-            if (currentSort.direction === 'asc') {
-                return aValue.localeCompare(bValue);
-            } else {
-                return bValue.localeCompare(aValue);
-            }
-        });
-
-        // Entferne und füge sortierte Zeilen wieder hinzu
-        rows.forEach(row => tbody.appendChild(row));
-    }
-
-    // Tool-spezifische Funktionen
-    {% if request.endpoint == 'tools.index' %}
-    console.log('=== TOOLS PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const statusFilter = document.getElementById('statusFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const status = statusFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStatus = !status || row.dataset.status === status;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        statusFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Werkzeuge laden
-    function loadToolPreviews() {
-        console.log('=== LOADING TOOL PREVIEWS ===');
-        
-        const toolPreviews = document.querySelectorAll('.tool-media-preview');
-        console.log(`Found ${toolPreviews.length} tool previews`);
-        
-        toolPreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for tool ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/tools/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Werkzeug Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for tool ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Tools
-    console.log('Running tools page script immediately');
-    initializeFilters();
-    loadToolPreviews();
-    {% endif %}
-
-    // Verbrauchsgüter-spezifische Funktionen
-    {% if request.endpoint == 'consumables.index' %}
-    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const stockFilter = document.getElementById('stockFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const stock = stockFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStock = !stock || row.dataset.stock === stock;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        stockFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Verbrauchsgüter laden
-    function loadConsumablePreviews() {
-        console.log('=== LOADING CONSUMABLE PREVIEWS ===');
-        
-        const consumablePreviews = document.querySelectorAll('.consumable-media-preview');
-        console.log(`Found ${consumablePreviews.length} consumable previews`);
-        
-        consumablePreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for consumable ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/consumables/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Verbrauchsgut Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for consumable ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Verbrauchsgüter
-    console.log('Running consumables page script immediately');
-    initializeFilters();
-    loadConsumablePreviews();
-    {% endif %}
-});
-</script>
-
-<!-- Delete Script -->
-<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
-{% endblock %} 
\ No newline at end of file
+{% extends "base.html" %}
+
+{% block content %}
+<div class="space-y-6">
+    <!-- Suchleiste und Filter -->
+    <div class="card card-modern bg-base-100 shadow-xl overflow-visible">
+        <div class="card-body p-6">
+            <div class="flex flex-col lg:flex-row gap-6 items-end">
+                <!-- Suchleiste -->
+                <div class="form-control flex-1 w-full">
+                    <label class="label px-1">
+                        <span class="label-text font-bold uppercase tracking-widest text-[10px] opacity-50">Suchen</span>
+                    </label>
+                    <div class="relative group w-full">
+                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-base-content/30 group-focus-within:text-primary transition-colors"></i>
+                        <input type="text"
+                               placeholder="In dieser Liste suchen..."
+                               class="input input-bordered w-full pl-12 h-12 bg-base-200/50 border-none focus:bg-base-200 transition-all rounded-xl"
+                               id="searchInput">
+                    </div>
+                </div>
+
+                <!-- Filter Blocks -->
+                <div class="flex flex-wrap gap-3 items-end">
+                    {% block filters %}{% endblock %}
+                </div>
+
+                <!-- Aktionen -->
+                <div class="flex gap-2">
+                    {% block actions %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Datentabelle -->
+    <div class="card card-modern bg-base-100 shadow-xl overflow-hidden">
+        <div class="card-body p-0">
+            <div class="overflow-x-auto">
+                <table class="table table-zebra w-full">
+                    <thead class="bg-base-200/50">
+                        <tr class="border-b border-base-content/5">
+                            {% block table_headers %}{% endblock %}
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-base-content/5">
+                        {% block table_rows %}{% endblock %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- Kontext-Hilfe (optional) -->
+    {% if help_title or help_items %}
+    <div class="card bg-primary/5 border border-primary/10 shadow-sm">
+        <div class="card-body p-6">
+            <h3 class="card-title text-base font-black uppercase tracking-tight text-primary">
+                <i class="fas fa-lightbulb"></i>
+                {{ help_title or 'Hilfe & Tipps' }}
+            </h3>
+            {% if help_text %}
+            <p class="text-sm text-base-content/70 mb-3">{{ help_text }}</p>
+            {% endif %}
+            {% if help_items %}
+            <ul class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2">
+                {% for item in help_items %}
+                <li class="flex gap-3 items-start text-sm text-base-content/80">
+                    <i class="fas fa-check-circle text-primary/40 mt-0.5"></i>
+                    <span>{{ item }}</span>
+                </li>
+                {% endfor %}
+            </ul>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<!-- Scripts -->
+<script nonce="{{ csp_nonce }}">
+// Basis-Suchfunktion
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('searchInput');
+    if (searchInput) {
+        searchInput.addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            document.querySelectorAll('.data-row').forEach(row => {
+                const searchableContent = row.textContent.toLowerCase();
+                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
+            });
+        });
+    }
+
+    // Sortier-Funktionalität
+    let currentSort = { column: null, direction: 'asc' };
+
+    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
+    document.querySelectorAll('th').forEach(th => {
+        if (!th.classList.contains('no-sort')) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none py-2';
+            wrapper.innerHTML = `
+                ${th.innerHTML}
+                <span class="sort-icons opacity-30 group-hover:opacity-100 transition-opacity">
+                    <i class="fas fa-sort text-[10px]"></i>
+                </span>
+            `;
+            th.innerHTML = '';
+            th.classList.add('group');
+            th.appendChild(wrapper);
+
+            wrapper.addEventListener('click', () => {
+                const column = Array.from(th.parentElement.children).indexOf(th);
+                sortTable(column, th);
+            });
+        }
+    });
+
+    function sortTable(column, th) {
+        const table = th.closest('table');
+        const tbody = table.querySelector('tbody');
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+
+        if (currentSort.column === column) {
+            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+            currentSort.column = column;
+            currentSort.direction = 'asc';
+        }
+
+        table.querySelectorAll('.sort-icons').forEach(icon => {
+            icon.innerHTML = '<i class="fas fa-sort text-[10px]"></i>';
+            icon.classList.add('opacity-30');
+        });
+
+        const currentIcon = th.querySelector('.sort-icons');
+        currentIcon.classList.remove('opacity-30');
+        if (currentSort.direction === 'asc') {
+            currentIcon.innerHTML = '<i class="fas fa-sort-up text-[10px]"></i>';
+        } else {
+            currentIcon.innerHTML = '<i class="fas fa-sort-down text-[10px]"></i>';
+        }
+
+        rows.sort((a, b) => {
+            const aValue = a.children[column]?.textContent.trim() || '';
+            const bValue = b.children[column]?.textContent.trim() || '';
+            return currentSort.direction === 'asc'
+                ? aValue.localeCompare(bValue, undefined, {numeric: true, sensitivity: 'base'})
+                : bValue.localeCompare(aValue, undefined, {numeric: true, sensitivity: 'base'});
+        });
+
+        rows.forEach(row => tbody.appendChild(row));
+    }
+
+    // Tool-spezifische Funktionen
+    {% if request.endpoint == 'tools.index' %}
+    function initializeFilters() {
+        const categoryFilter = document.getElementById('categoryFilter');
+        const locationFilter = document.getElementById('locationFilter');
+        const statusFilter = document.getElementById('statusFilter');
+
+        function applyFilters() {
+            const category = categoryFilter.value;
+            const location = locationFilter.value;
+            const status = statusFilter.value;
+
+            document.querySelectorAll('.data-row').forEach(row => {
+                const matchesCategory = !category || row.dataset.category === category;
+                const matchesLocation = !location || row.dataset.location === location;
+                const matchesStatus = !status || row.dataset.status === status;
+                row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
+            });
+        }
+
+        if(categoryFilter) categoryFilter.addEventListener('change', applyFilters);
+        if(locationFilter) locationFilter.addEventListener('change', applyFilters);
+        if(statusFilter) statusFilter.addEventListener('change', applyFilters);
+    }
+
+    function loadToolPreviews() {
+        const toolPreviews = document.querySelectorAll('.tool-media-preview');
+        toolPreviews.forEach(preview => {
+            const barcode = preview.dataset.barcode;
+            const savedPreviewImage = preview.dataset.previewImage;
+            if (barcode) {
+                fetch(`/media/tools/${barcode}/list`)
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            let img = data.media_list[0];
+                            if (savedPreviewImage) {
+                                const saved = data.media_list.find(i => i.filename === savedPreviewImage);
+                                if (saved) img = saved;
+                            }
+                            preview.innerHTML = `<img src="${img.url}" class="w-12 h-12 object-cover rounded-xl shadow-sm">`;
+                        }
+                    });
+            }
+        });
+    }
+    initializeFilters();
+    loadToolPreviews();
+    {% endif %}
+
+    {% if request.endpoint == 'consumables.index' %}
+    function initializeFilters() {
+        const categoryFilter = document.getElementById('categoryFilter');
+        const locationFilter = document.getElementById('locationFilter');
+        const stockFilter = document.getElementById('stockFilter');
+
+        function applyFilters() {
+            const category = categoryFilter.value;
+            const location = locationFilter.value;
+            const stock = stockFilter.value;
+
+            document.querySelectorAll('.data-row').forEach(row => {
+                const matchesCategory = !category || row.dataset.category === category;
+                const matchesLocation = !location || row.dataset.location === location;
+                const matchesStock = !stock || row.dataset.stock === stock;
+                row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
+            });
+        }
+        if(categoryFilter) categoryFilter.addEventListener('change', applyFilters);
+        if(locationFilter) locationFilter.addEventListener('change', applyFilters);
+        if(stockFilter) stockFilter.addEventListener('change', applyFilters);
+    }
+    function loadConsumablePreviews() {
+        const previews = document.querySelectorAll('.consumable-media-preview');
+        previews.forEach(p => {
+            const barcode = p.dataset.barcode;
+            if (barcode) {
+                fetch(`/media/consumables/${barcode}/list`)
+                    .then(r => r.json())
+                    .then(data => {
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            p.innerHTML = `<img src="${data.media_list[0].url}" class="w-12 h-12 object-cover rounded-xl shadow-sm">`;
+                        }
+                    });
+            }
+        });
+    }
+    initializeFilters();
+    loadConsumablePreviews();
+    {% endif %}
+});
+</script>
+
+<!-- Delete Script -->
+<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
+{% endblock %}
diff --git a/app/templates/tickets/view.html b/app/templates/tickets/view.html
index 512cf13..7f069a2 100755
--- a/app/templates/tickets/view.html
+++ b/app/templates/tickets/view.html
@@ -126,7 +126,7 @@
     
     if (messages.length === 0) {
         container.innerHTML = `
-            <div class="text-center py-8 text-gray-500">
+            <div class="text-center py-8 text-base-content/60">
                 <i class="fas fa-comments text-2xl mb-2"></i>
                 <p>Keine Nachrichten vorhanden</p>
             </div>
@@ -409,13 +409,13 @@
 
 <div class="container mx-auto px-4 py-8">
     <!-- Ticket Header -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6">
         <div class="flex justify-between items-start mb-4">
             <div>
-                <h1 class="text-2xl font-bold text-gray-900">
+                <h1 class="text-2xl font-bold text-base-content">
                     Auftrag #{{ ticket.ticket_number or ticket.id }}: {{ ticket.title }}
                 </h1>
-                <p class="text-gray-600 mt-2">{{ ticket.description }}</p>
+                <p class="text-base-content/70 mt-2">{{ ticket.description }}</p>
             </div>
             <div class="text-right">
                 <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
@@ -427,7 +427,7 @@ <h1 class="text-2xl font-bold text-gray-900">
                     {{ ticket.status|title }}
                 </span>
                 {% if ticket.responsible %}
-                <div class="mt-2 text-sm text-gray-700">
+                <div class="mt-2 text-sm text-base-content/90">
                     Verantwortlich: <strong>{{ ticket.responsible }}</strong>
                 </div>
                 {% endif %}
@@ -463,13 +463,13 @@ <h1 class="text-2xl font-bold text-gray-900">
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Linke Spalte: Ticket-Aktionen -->
         <div class="lg:col-span-1">
-            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+            <div class="bg-base-100 rounded-lg shadow-md p-6 mb-6">
                 <h3 class="text-lg font-semibold mb-4">Ticket-Aktionen</h3>
                 
                 <!-- Status ändern -->
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Status ändern</label>
-                    <select onchange="updateTicketStatus(this.value)" class="w-full border border-gray-300 rounded-md px-3 py-2" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Status ändern</label>
+                    <select onchange="updateTicketStatus(this.value)" class="w-full border border-base-content/20 rounded-md px-3 py-2" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
                         <option value="offen" {% if ticket.status == 'offen' %}selected{% endif %}>Offen</option>
                         <option value="in_arbeit" {% if ticket.status == 'in_arbeit' %}selected{% endif %}>In Arbeit</option>
                         <option value="wartend" {% if ticket.status == 'wartend' %}selected{% endif %}>Wartend</option>
@@ -480,13 +480,13 @@ <h3 class="text-lg font-semibold mb-4">Ticket-Aktionen</h3>
 
                 <!-- Zuweisung ändern -->
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Zuweisung</label>
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Zuweisung</label>
                     <div class="space-y-2 max-h-48 overflow-y-auto border rounded-lg p-2">
                         {% for user in workers %}
                         <label class="flex items-center">
                             <input type="checkbox" name="assigned_users" value="{{ user.username }}"
                                    {% if user.username in assigned_users %}checked{% endif %}
-                                   class="rounded border-gray-300 text-blue-600" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
+                                   class="rounded border-base-content/20 text-blue-600" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
                             <span class="ml-2 text-sm">{{ user.firstname }} {{ user.lastname }} ({{ user.username }})</span>
                         </label>
                         {% endfor %}
@@ -498,9 +498,9 @@ <h3 class="text-lg font-semibold mb-4">Ticket-Aktionen</h3>
 
                 <!-- Verantwortliche Person -->
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Verantwortliche Person</label>
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Verantwortliche Person</label>
                     <div class="flex gap-2">
-                        <select id="responsibleSelect" class="w-full border border-gray-300 rounded-md px-3 py-2" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
+                        <select id="responsibleSelect" class="w-full border border-base-content/20 rounded-md px-3 py-2" {% if not (current_user.role == 'admin' or ticket.responsible == current_user.username) %}disabled{% endif %}>
                             <option value="">Nicht gesetzt</option>
                             {% for user in workers %}
                                 <option value="{{ user.username }}" {% if ticket.responsible == user.username %}selected{% endif %}>{{ user.firstname or '' }} {{ user.lastname or '' }} ({{ user.username }})</option>
@@ -512,8 +512,8 @@ <h3 class="text-lg font-semibold mb-4">Ticket-Aktionen</h3>
 
                 <!-- Ticket-Details bearbeiten -->
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Kategorie</label>
-                    <select id="categoryInput" class="w-full border border-gray-300 rounded-md px-3 py-2">
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Kategorie</label>
+                    <select id="categoryInput" class="w-full border border-base-content/20 rounded-md px-3 py-2">
                         {% for category in categories %}
                             <option value="{{ category }}" {% if ticket.category == category %}selected{% endif %}>{{ category }}</option>
                         {% endfor %}
@@ -521,17 +521,17 @@ <h3 class="text-lg font-semibold mb-4">Ticket-Aktionen</h3>
                 </div>
 
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Geschätzte Zeit (Minuten)</label>
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Geschätzte Zeit (Minuten)</label>
                     <input type="number" id="estimatedTimeInput" step="1" min="0" 
                            value="{{ ticket.estimated_time or 0 }}" 
-                           class="w-full border border-gray-300 rounded-md px-3 py-2">
+                           class="w-full border border-base-content/20 rounded-md px-3 py-2">
                 </div>
 
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Fälligkeitsdatum</label>
+                    <label class="block text-sm font-medium text-base-content/90 mb-2">Fälligkeitsdatum</label>
                     <input type="datetime-local" id="dueDateInput" 
                            value="{% if ticket.due_date %}{{ ticket.due_date.strftime('%Y-%m-%dT%H:%M') }}{% endif %}"
-                           class="w-full border border-gray-300 rounded-md px-3 py-2">
+                           class="w-full border border-base-content/20 rounded-md px-3 py-2">
                 </div>
 
                 <button onclick="saveTicketChanges()" class="w-full px-4 py-2 rounded-md mb-6 font-medium bg-blue-600 text-white hover:bg-blue-700">
@@ -573,7 +573,7 @@ <h4 class="text-md font-semibold mb-3">
                         <!-- Medien werden hier dynamisch geladen -->
                     </div>
                     
-                    <div id="no-media-message" class="text-gray-500 text-center py-4 text-sm" style="display: none;">
+                    <div id="no-media-message" class="text-base-content/60 text-center py-4 text-sm" style="display: none;">
                         Keine Medien vorhanden
                     </div>
                     
@@ -590,7 +590,7 @@ <h4 class="text-md font-semibold mb-3">
         <!-- Rechte Spalte: Nachrichten und Historie -->
         <div class="lg:col-span-2 space-y-6">
             <!-- Nachrichten-Sektion -->
-            <div class="bg-white rounded-lg shadow-md p-6">
+            <div class="bg-base-100 rounded-lg shadow-md p-6">
                 <h3 class="text-lg font-semibold mb-4">
                     <i class="fas fa-comments mr-2"></i>
                     Nachrichten
@@ -614,7 +614,7 @@ <h3 class="text-lg font-semibold mb-4">
                 </div>
                 
                 <!-- Nachrichten Container -->
-                <div id="public-messages-container" class="space-y-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-gray-50">
+                <div id="public-messages-container" class="space-y-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-base-200">
                     <div class="flex justify-center items-center py-8">
                         <div class="loading loading-spinner loading-md"></div>
                         <span class="ml-2">Lade Nachrichten...</span>
@@ -623,14 +623,14 @@ <h3 class="text-lg font-semibold mb-4">
             </div>
 
             <!-- Ticket-Historie -->
-            <div class="bg-white rounded-lg shadow-md p-6">
+            <div class="bg-base-100 rounded-lg shadow-md p-6">
                 <h3 class="text-lg font-semibold mb-4">
                     <i class="fas fa-history mr-2"></i>
                     Änderungshistorie
                 </h3>
                 
                 <!-- History-Container -->
-                <div id="historyContainer" class="space-y-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-gray-50">
+                <div id="historyContainer" class="space-y-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-base-200">
                     <div class="flex justify-center items-center py-8">
                         <div class="loading loading-spinner loading-md"></div>
                         <span class="ml-2">Lade Historie...</span>
diff --git a/app/templates/tools/index.html b/app/templates/tools/index.html
index f8a7d03..d2264c4 100755
--- a/app/templates/tools/index.html
+++ b/app/templates/tools/index.html
@@ -165,7 +165,7 @@
                 <i class="fas fa-trash"></i>
             </button>
             {% else %}
-            <span class="text-sm text-gray-500">Kein Barcode</span>
+            <span class="text-sm text-base-content/60">Kein Barcode</span>
             {% endif %}
         </div>
     </td>
diff --git a/app/templates/trash.html b/app/templates/trash.html
index e9a8f4a..7ef2410 100755
--- a/app/templates/trash.html
+++ b/app/templates/trash.html
@@ -3,16 +3,20 @@
 {% block title %}Papierkorb{% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-            <h2 class="card-title">
-                <i class="fas fa-trash text-primary mr-2"></i>
-                Papierkorb
-            </h2>
-            
-            <!-- Tabs -->
-            <div class="tabs tabs-boxed mb-4">
+<div class="max-w-7xl mx-auto px-4 py-8">
+    <div class="card-modern card bg-base-100">
+        <div class="card-body p-8">
+            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+                <div>
+                    <h2 class="text-3xl font-black tracking-tight mb-1">
+                        <i class="fas fa-trash text-primary mr-2"></i>
+                        Papierkorb
+                    </h2>
+                    <p class="text-sm opacity-50 font-medium">Gelöschte Elemente verwalten oder wiederherstellen</p>
+                </div>
+
+                <!-- Tabs -->
+                <div class="tabs tabs-boxed p-1 bg-base-200 rounded-2xl">
                 <a class="tab {% if active_tab == 'tools' %}tab-active{% endif %}" 
                    href="{{ url_for('trash.index', tab='tools') }}">
                     <i class="{{ app_labels.tools.icon }} mr-2"></i>
@@ -27,37 +31,37 @@ <h2 class="card-title">
 
             <!-- Inhalt -->
             <div class="overflow-x-auto">
-                <table class="table table-zebra w-full">
+                <table class="table w-full">
                     <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Kategorie</th>
-                            <th>Standort</th>
-                            <th>Gelöscht am</th>
-                            <th>Aktionen</th>
+                        <tr class="border-b border-base-content/5">
+                            <th class="bg-transparent text-xs uppercase tracking-widest font-black opacity-40">Name</th>
+                            <th class="bg-transparent text-xs uppercase tracking-widest font-black opacity-40">Kategorie</th>
+                            <th class="bg-transparent text-xs uppercase tracking-widest font-black opacity-40">Standort</th>
+                            <th class="bg-transparent text-xs uppercase tracking-widest font-black opacity-40">Gelöscht am</th>
+                            <th class="bg-transparent text-xs uppercase tracking-widest font-black opacity-40 text-right">Aktionen</th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="divide-y divide-base-content/5">
                         {% for item in items %}
-                        <tr>
-                            <td>{{ item.name }}</td>
-                            <td>{{ item.category }}</td>
-                            <td>{{ item.location }}</td>
-                            <td>{{ item.deleted_at | datetime }}</td>
-                            <td>
-                                <div class="flex gap-2">
+                        <tr class="group hover:bg-base-200/50 transition-colors">
+                            <td class="font-bold">{{ item.name }}</td>
+                            <td><span class="badge badge-outline opacity-70">{{ item.category }}</span></td>
+                            <td><span class="badge badge-outline opacity-70">{{ item.location }}</span></td>
+                            <td class="text-sm opacity-60">{{ item.deleted_at | datetime }}</td>
+                            <td class="text-right">
+                                <div class="flex justify-end gap-2">
                                     <form method="POST" action="{{ url_for('trash.restore', item_type=active_tab, item_id=item.id) }}" class="inline">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                                        <button type="submit" class="btn btn-sm btn-success">
-                                            <i class="fas fa-undo mr-1"></i>
-                                            Wiederherstellen
+                                        <button type="submit" class="btn btn-sm btn-ghost hover:btn-success rounded-xl group-hover:scale-105 transition-all">
+                                            <i class="fas fa-undo"></i>
+                                            <span class="hidden sm:inline ml-1">Wiederherstellen</span>
                                         </button>
                                     </form>
                                     <form method="POST" action="{{ url_for('trash.delete_permanent', item_type=active_tab, item_id=item.id) }}" class="inline">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                                        <button type="submit" class="btn btn-sm btn-error" onclick="return confirm('Möchten Sie dieses Element wirklich endgültig löschen?')">
-                                            <i class="fas fa-trash-alt mr-1"></i>
-                                            Endgültig löschen
+                                        <button type="submit" class="btn btn-sm btn-ghost hover:btn-error rounded-xl group-hover:scale-105 transition-all" onclick="return confirm('Möchten Sie dieses Element wirklich endgültig löschen?')">
+                                            <i class="fas fa-trash-alt"></i>
+                                            <span class="hidden sm:inline ml-1">Endgültig löschen</span>
                                         </button>
                                     </form>
                                 </div>
@@ -65,10 +69,12 @@ <h2 class="card-title">
                         </tr>
                         {% else %}
                         <tr>
-                            <td colspan="5" class="text-center py-4">
-                                <div class="text-gray-500">
-                                    <i class="fas fa-trash-alt text-4xl mb-2"></i>
-                                    <p>Der Papierkorb ist leer</p>
+                            <td colspan="5" class="text-center py-20">
+                                <div class="flex flex-col items-center gap-4 opacity-20">
+                                    <div class="w-20 h-20 rounded-full border-4 border-current flex items-center justify-center">
+                                        <i class="fas fa-trash-alt text-4xl"></i>
+                                    </div>
+                                    <p class="text-xl font-black uppercase tracking-widest">Papierkorb leer</p>
                                 </div>
                             </td>
                         </tr>
diff --git a/app/templates/workers/card.html b/app/templates/workers/card.html
index f5f1379..4f4e076 100644
--- a/app/templates/workers/card.html
+++ b/app/templates/workers/card.html
@@ -16,14 +16,14 @@
   </div>
 
   <div class="flex justify-center">
-    <div id="card-container" class="card bg-white shadow-xl" style="width: 85.6mm; height: 54mm;">
+    <div id="card-container" class="card bg-base-100 shadow-xl" style="width: 85.6mm; height: 54mm;">
       <div class="card-body p-3 flex flex-col justify-between">
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
             <img src="{{ url_for('static', filename='images/scandy-logo.png') }}" alt="Logo" style="height: 12mm;">
             <span class="text-sm font-bold tracking-wide">Scandy</span>
           </div>
-          <span class="dept text-xs text-gray-500">{{ worker.department or '' }}</span>
+          <span class="dept text-xs text-base-content/60">{{ worker.department or '' }}</span>
         </div>
         <div>
           <div class="text-sm font-bold leading-tight">{{ worker.firstname }} {{ worker.lastname }}</div>
diff --git a/app/templates/workers/index.html b/app/templates/workers/index.html
index 162e18b..f2c736e 100755
--- a/app/templates/workers/index.html
+++ b/app/templates/workers/index.html
@@ -1,129 +1,129 @@
-{% extends "shared/list_base.html" %}
-{% set help_title = 'Mitarbeiter – Hilfe' %}
-{% set help_text = 'Mitarbeiterdaten und Ausleihen überblicken.' %}
-{% set help_items = [
-    'Mit dem Abteilungsfilter die Anzeige einschränken.',
-    'Klick auf den Namen öffnet Details mit aktiven Ausleihen und Historie.',
-    'Rückgaben sind direkt in den Mitarbeiter-Details möglich.'
-] %}
-
-{% block actions %}
-<div class="flex gap-2">
-    <a href="{{ url_for('workers.add') }}" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
-        <i class="fas fa-plus me-2"></i> Neuer Mitarbeiter
-    </a>
-</div>
-{% endblock %}
-
-{% block filters %}
-<select class="select select-bordered w-full max-w-xs focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200" id="departmentFilter">
-    <option value="">Alle Abteilungen</option>
-    {% for department in departments %}
-    <option value="{{ department }}">{{ department }}</option>
-    {% endfor %}
-</select>
-{% endblock %}
-
-{% block table_headers %}
-<th>Name</th>
-<th>Barcode</th>
-<th>Abteilung</th>
-<th>E-Mail</th>
-<th>Benutzer</th>
-<th>Status</th>
-<th class="text-right">Aktionen</th>
-{% endblock %}
-
-{% block table_rows %}
-{% for worker in workers %}
-<tr class="hover data-row" data-department="{{ worker.department or '' }}">
-    <td>
-        <div class="flex items-center space-x-3">
-            <div>
-                <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="link link-hover font-medium">
-                    {{ worker.firstname }} {{ worker.lastname }}
-                </a>
-            </div>
-        </div>
-    </td>
-    <td>
-        <div class="badge badge-outline">{{ worker.barcode }}</div>
-    </td>
-    <td>
-        {% if worker.department %}
-            <div class="badge badge-primary badge-outline">{{ worker.department }}</div>
-        {% else %}
-            <div class="badge badge-ghost">Keine Abteilung</div>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.email %}
-            <a href="mailto:{{ worker.email }}" class="link link-hover text-primary">
-                {{ worker.email }}
-            </a>
-        {% else %}
-            <span class="text-gray-400">-</span>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.username %}
-            <div class="badge badge-info gap-1">
-                <i class="fas fa-user"></i>
-                {{ worker.username }}
-            </div>
-            {% if worker.role %}
-                <div class="badge badge-outline text-xs mt-1">{{ worker.role }}</div>
-            {% endif %}
-        {% else %}
-            <span class="text-gray-400">-</span>
-        {% endif %}
-    </td>
-    <td>
-        {% if worker.active_lendings %}
-            <div class="badge badge-warning gap-1">
-                <i class="fas fa-tools"></i>
-                {{ worker.active_lendings }} Ausleihen aktiv
-            </div>
-        {% else %}
-            <div class="badge badge-success gap-1">
-                <i class="fas fa-check"></i>
-                Keine Ausleihen
-            </div>
-        {% endif %}
-    </td>
-    <td class="text-right">
-        <div class="btn-group">
-            <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost">
-                <i class="fas fa-edit"></i>
-            </a>
-            <button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')">
-                <i class="fas fa-trash"></i>
-            </button>
-        </div>
-    </td>
-</tr>
-{% endfor %}
-{% endblock %}
-
-{% block scripts %}
-{{ super() }}
-<script nonce="{{ csp_nonce }}">
-document.addEventListener('DOMContentLoaded', function() {
-    // Filter-Funktionalität
-    function applyFilters() {
-        const department = document.getElementById('departmentFilter').value;
-        
-        document.querySelectorAll('.data-row').forEach(row => {
-            const matchesDepartment = !department || row.dataset.department === department;
-            row.style.display = matchesDepartment ? '' : 'none';
-        });
-    }
-
-    // Filter-Event-Listener
-    const departmentFilter = document.getElementById('departmentFilter');
-    if (departmentFilter) {
-        departmentFilter.addEventListener('change', applyFilters);
-    }
-});
-</script>
+{% extends "shared/list_base.html" %}
+{% set help_title = 'Mitarbeiter – Hilfe' %}
+{% set help_text = 'Mitarbeiterdaten und Ausleihen überblicken.' %}
+{% set help_items = [
+    'Mit dem Abteilungsfilter die Anzeige einschränken.',
+    'Klick auf den Namen öffnet Details mit aktiven Ausleihen und Historie.',
+    'Rückgaben sind direkt in den Mitarbeiter-Details möglich.'
+] %}
+
+{% block actions %}
+<div class="flex gap-2">
+    <a href="{{ url_for('workers.add') }}" class="btn btn-primary hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
+        <i class="fas fa-plus me-2"></i> Neuer Mitarbeiter
+    </a>
+</div>
+{% endblock %}
+
+{% block filters %}
+<select class="select select-bordered w-full max-w-xs focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200" id="departmentFilter">
+    <option value="">Alle Abteilungen</option>
+    {% for department in departments %}
+    <option value="{{ department }}">{{ department }}</option>
+    {% endfor %}
+</select>
+{% endblock %}
+
+{% block table_headers %}
+<th>Name</th>
+<th>Barcode</th>
+<th>Abteilung</th>
+<th>E-Mail</th>
+<th>Benutzer</th>
+<th>Status</th>
+<th class="text-right">Aktionen</th>
+{% endblock %}
+
+{% block table_rows %}
+{% for worker in workers %}
+<tr class="hover data-row" data-department="{{ worker.department or '' }}">
+    <td>
+        <div class="flex items-center space-x-3">
+            <div>
+                <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="link link-hover font-medium">
+                    {{ worker.firstname }} {{ worker.lastname }}
+                </a>
+            </div>
+        </div>
+    </td>
+    <td>
+        <div class="badge badge-outline">{{ worker.barcode }}</div>
+    </td>
+    <td>
+        {% if worker.department %}
+            <div class="badge badge-primary badge-outline">{{ worker.department }}</div>
+        {% else %}
+            <div class="badge badge-ghost">Keine Abteilung</div>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.email %}
+            <a href="mailto:{{ worker.email }}" class="link link-hover text-primary">
+                {{ worker.email }}
+            </a>
+        {% else %}
+            <span class="text-base-content/40">-</span>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.username %}
+            <div class="badge badge-info gap-1">
+                <i class="fas fa-user"></i>
+                {{ worker.username }}
+            </div>
+            {% if worker.role %}
+                <div class="badge badge-outline text-xs mt-1">{{ worker.role }}</div>
+            {% endif %}
+        {% else %}
+            <span class="text-base-content/40">-</span>
+        {% endif %}
+    </td>
+    <td>
+        {% if worker.active_lendings %}
+            <div class="badge badge-warning gap-1">
+                <i class="fas fa-tools"></i>
+                {{ worker.active_lendings }} Ausleihen aktiv
+            </div>
+        {% else %}
+            <div class="badge badge-success gap-1">
+                <i class="fas fa-check"></i>
+                Keine Ausleihen
+            </div>
+        {% endif %}
+    </td>
+    <td class="text-right">
+        <div class="btn-group">
+            <a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost">
+                <i class="fas fa-edit"></i>
+            </a>
+            <button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')">
+                <i class="fas fa-trash"></i>
+            </button>
+        </div>
+    </td>
+</tr>
+{% endfor %}
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script nonce="{{ csp_nonce }}">
+document.addEventListener('DOMContentLoaded', function() {
+    // Filter-Funktionalität
+    function applyFilters() {
+        const department = document.getElementById('departmentFilter').value;
+
+        document.querySelectorAll('.data-row').forEach(row => {
+            const matchesDepartment = !department || row.dataset.department === department;
+            row.style.display = matchesDepartment ? '' : 'none';
+        });
+    }
+
+    // Filter-Event-Listener
+    const departmentFilter = document.getElementById('departmentFilter');
+    if (departmentFilter) {
+        departmentFilter.addEventListener('change', applyFilters);
+    }
+});
+</script>
 {% endblock %} 
\ No newline at end of file
diff --git a/app/templates/workers/timesheet_list.html b/app/templates/workers/timesheet_list.html
index 9051311..d8e4ec9 100755
--- a/app/templates/workers/timesheet_list.html
+++ b/app/templates/workers/timesheet_list.html
@@ -77,8 +77,8 @@ <h1 class="text-2xl font-bold mb-6">Wochenberichte</h1>
                             {% set badge_class = 'badge-success' if has_times and has_tasks else 'badge-error' if is_past_day else 'badge-outline' %}
                             <span class="badge {{ badge_class }} text-xs" title="{{ day_date.strftime('%A, %d.%m.%Y') }}">{{ day[0]|upper }}{% if has_times and has_tasks %}✔{% elif has_times or has_tasks %}!{% else %}–{% endif %}</span>
                         {% endfor %}
-                        <span class="text-xs text-gray-500 ml-2">({{ ts.filled_days }}/5)</span>
-                        <div class="text-[10px] text-gray-500 mt-1">
+                        <span class="text-xs text-base-content/60 ml-2">({{ ts.filled_days }}/5)</span>
+                        <div class="text-[10px] text-base-content/60 mt-1">
                             {% for i in range(5) %}
                                 {{ (week_start.dt + timedelta(days=i)).strftime('%d.%m.') }}{% if not loop.last %} · {% endif %}
                             {% endfor %}
diff --git a/app/utils/context_processors.py b/app/utils/context_processors.py
index 002df79..7cbbaa8 100755
--- a/app/utils/context_processors.py
+++ b/app/utils/context_processors.py
@@ -260,8 +260,14 @@ def inject_custom_fields():
             'custom_fields_consumables': []
         }
 
+def inject_plugin_manager():
+    """Injiziert den PluginManager in alle Templates"""
+    from app.core.plugins import plugin_manager
+    return {'plugin_manager': plugin_manager}
+
 def register_context_processors(app):
     """Registriert alle Context Processors"""
+    app.context_processor(inject_plugin_manager)
     app.context_processor(inject_colors)
     app.context_processor(inject_routes)
     app.context_processor(inject_version)