From d53ce33baba168ec43a40b8cdbcc010e1ab6c8f8 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Sat, 31 May 2025 23:01:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Refactor:=20Cleaned=20up=20files?=
 =?UTF-8?q?=20and=20templates,=20improved=20documentation=20structure.=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Removed=20legacy=20installer=20scripts.?=
 =?UTF-8?q?=20=F0=9F=93=9A=20Updated=20database=20schema=20in=20'myp.db'?=
 =?UTF-8?q?=20and=20'myp.db-wal'.=20=F0=9F=96=A5=EF=B8=8F=20Refactored=20f?=
 =?UTF-8?q?rontend=20Docker=20images.=20=F0=9F=94=8D=20Fixed=20common=20er?=
 =?UTF-8?q?rors=20in=20documentation.=20=F0=9F=92=84=20No=20changes=20to?=
 =?UTF-8?q?=20README=20or=20IHK=20documentation=20for=20now.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/database/myp.db              | Bin 110592 -> 110592 bytes
 backend/database/myp.db-wal          | Bin 8272 -> 4152 bytes
 backend/templates/base.html          | 448 ++++++++++-----
 backend/templates/dashboard.html     | 779 +++++++--------------------
 backend/templates/guest_request.html |  46 +-
 backend/templates/index.html         |  35 +-
 6 files changed, 516 insertions(+), 792 deletions(-)

diff --git a/backend/database/myp.db b/backend/database/myp.db
index 6bdcc0fdd6dc327e062c294c3e53c721b30e8a3f..9424b636970ad78bbf0d3e828154a15bb1beb550 100644
GIT binary patch
delta 132
zcmZp8z}E19ZGtqT+C&*=Ry78_HqDJGZ}m*e4ayR;id+jK4Dw73O%1X`3|%6fOMR1l
z%ls=0y#vhk+(O*)jlB{L98Ci%EHWZ|j7kjsC%5UFYZ@6@nVMLcn(CRG7?>Cu8W|Xw
b>Kd5p8XGDg$ru_~m^44r-~LRWQK|s|gBB)F

delta 132
zcmZp8z}E19ZGtqT>O>i5R#gVQv{xHb-s+h;ySj%(mZhe9g@gs``FI&*XI8jXraC(1
zRT{aLq=y^$1QunvN9KkZM@G72n?)Jsd+0@kPj1sU*EF=SGBCF?HPACQF*PzbFfuSQ
k)ip5HH8xZ*GPE)=v@$i;Gc_}`v@maeroa7}KBH6v01l%k;{X5v

diff --git a/backend/database/myp.db-wal b/backend/database/myp.db-wal
index c013c4506eb46af713c483401551b2be61a86242..06984613e5765b2af900e7e282d147c08859b87a 100644
GIT binary patch
literal 4152
zcmXr7XKP~6eI&uaAiw|wj3LRki#|*5*RN1XOHVi*`5!382gK4a@d@Ym)|kip&gTUR
zvh)3A;J?Mcj=zt;kl&MEneQ*(N4~3kTlr@274bO%6^w$>5Eu=C(GVC7fzc2c4S~@R
z7!85Z5Eu=C(GVC7fzc3P(Boy%v=>e<O)V~oFG?*0(Z!i574fJd@x>*HC8fn?3PvhC
zETZPpS@}s|RUjHF7hjT@n_6tDV60%IU?k1WBC0ElqN=nwwJ1I_#Z<vmj*CUq7*(>M
zC^N4FDsL>s$s($aDi5(9Xt)Xoi@2>Y$gJXG6?O!>FekGlH9oPlBtJ7RCAA_RtRmjf
zP{B}zjgTrMpei+1pek{&E|Bjb+CgMqVs2`DYHng?4p5bXp)?DNxHiOoggThC95ai!
vA-W{Y5TIr)CKg#|VW?k=i_zT-lZZDo13H_LMb=mxCIqqz#)ij*nSvPrL2R<W

literal 8272
zcmeHM-EY%Y6pw)>ZGf>&LLNg%mMBn5w2R$Fflf%6;?hE!KnNRXnk>h@O%0B1e4T#m
zVT=|5+RI+{I!$}ozcB6J*rx4iFMHn0p3$V8du_+Q&Ig^?+icZ!e9k?`_x#SMliHKw
zUSal+_X>r#3*=}SSH4rUU}tN3qx1b2->d_PgY$Gu|MItAzW(vaTQBb3S+fEpY`A_`
z4}^J;K6I#XRS;n9d9ohP_#mH;L^r44O7xK<zJ_<~|MP{p=i&rebmA4^yno`=(I1ZQ
zmH(XlwzN`Qo~UtW3%{}=|Ha*{V@3YlIqs7{Z`%kzw!uUV2YMi-KfkrqRF#%0w3KUW
zs*vW)1a14GW$s)gGUCg3j+S^)<i7fps_XO+4m2M<CRfbf9cNUsJYl9hWtqZiy`|nz
zn?k+O66*KX)-DR=DM#-j;UlHFw4yX;q)J6(xTvdJcEXk`B9ZZtj$KD+srOst*6jIu
zV7ZRgwVe1FS$Z!(IL$LaM}SNX9Df~vXsxcRM1&aK!~F+F&+~lC36QTPCXlsm;Aw_y
zvb!gYhi*HwRPP0wF35X*&DGEnqN9fg_pxEwNMoRpt5s?{<#>9qnNk(%GF;DMjr4ri
zK$xg+@1~7U=o#~M4_I5etvN2iD+bs{50OC;&LH3O%wZ^oY6h(e^$gPc>)CDgm$PJo
z8QSqIAK|R~bd0Tz0}mMPvD?knb*1@0xTQW2W-OE9x!h=~t2gR|Hj_w+LQ`E<n`(VY
zy(>gyJX9uhHnSc`!`CLbw|5x{2myb%ND7(*N~BObpu`Z=7)i$dvbcAwT;eZW;PyYJ
zH334!+OQ0ofta~D##97`HKrgCEK=#il!IW`OVSNeh+%sAuI=h(KWay$IE1h%Tx&Ge
zRHaU`^>slJ?T0}m@mE=V`edra&(3oD5`}{<_mJPUAQoK*XYY?Ppk%oO7fMS?4P&FB
zJEWNVfkuNYWrl;03HcBuaN0m36NS-$6k~k!;DNM=>FJyxv@l{JAX<|p{_I)qnH%<;
zT^yjUX1g7XlaFP_?i6E8C<Im)`i$Q7`ZbyX!$w;uX%2EG96%K7og`eKw`5niX3u68
zP}4K`lNhl)O*c&_I7w@W3OHR1k8y&5ddy%uq}sd=)@L_MCH~||?&UUxl{lQ7Qw)${
ztvOhCm9qet2phiTk;*=>`wR*U@JXGFy9&b&12ofGkTcM1btC9OuOS@b>AsT*;=>#9
zh?EYyRXjvg!Azn8hC1Y1@BlEy6qeT-3Y`{4H&A!mVM-5ClAbNnGX!Jsn|Yc%=1sd$
zy!FvlYNc4>d7j&gauntqOfbfiOgK@}xQqmGJM6BZ&!Ulz*bq=22}l@=x}J?-zKY``
z;g9f&t;1j$jT1~DWU(!a`zuFE{FyV{bA#qZ+@0cUkufNyj<Jauvj!&6E=+hyks)ki
zi|vLDub(zCV|1nH>c+4l!UU3M_d1y=aga|kbNrsE8V}m~w(FbB78z~Ba}2W5+CoeN
z89pmhml>PLcm#e<57Akd5y0-%SMS_Yg_#rzVp;rPqR20u;R=>xqMhh11ZHKI-p4~6
z)}+{rrG1;DVf>=jZ??3<;=_#B2}IDHMwZ3F*9r!h10WoMt8MBynZzae5<8NNca!g?
zx{n+N*1tm^dMv#1q_H0{kz*7DmeWZ_dJ}mtMRe1BD-L1L#TL^N`ixE2N!n%90Na)u
zO<Xh{=>Dx>m)X>~fS|6RITeRUj6TGNc(}-4;YY;>^|B_@%Y=C7^-CqXG<uIeJqd5y
zhv7`V7x?|>pZ@;5`qyzFawkp|;4eRN1abs&1abs&1abs&1abs&1abs&1abs&1pa>r
zJT<v@3m@`NCob?)ilR^e6y1cMU9WbLZy@+SdA5z5&*tF!KT4jK+tZRfy<OSTANs0y
zzv5J-YUNQ&y8d9Pw{EO&HFl(1w`+6Dtz~!qre0C1w|6dW-d~dgsi6?P77pOIUDv1D
z<ceIKtyE{_%Yt-iaiO|6FV8L1F4q=nF=t*PoJwu6TA7<)sLHiUiX+QFUR<cmNfLY$
J-scQz`v)0&-M;_;

diff --git a/backend/templates/base.html b/backend/templates/base.html
index 76dab1cbd..01bcda44f 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -2,13 +2,16 @@
 <html lang="de" class="scroll-smooth">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes">
     <meta name="description" content="MYP Platform - Mercedes-Benz 3D Druck Management System">
     <meta name="robots" content="noindex, nofollow">
-    <!-- Dynamic theme-color meta tags for browser UI -->
+    <!-- Enhanced mobile browser UI -->
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
     <meta name="theme-color" id="metaThemeColor" content="#000000">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="format-detection" content="telephone=no">
     <!-- CSRF-Token für Formulare -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
     
@@ -93,19 +96,26 @@
         });
     </script>
     
-    <!-- Disable Transitions Styling -->
+    <!-- Enhanced Responsive Styles -->
     <style>
         .disable-transitions,
         .disable-transitions * {
             transition: none !important;
         }
         
-        /* ===== ULTRA-DEZENTE SCROLLBALKEN ===== */
+        /* ===== RESPONSIVE SCROLLBARS ===== */
         
-        /* Webkit-Browser (Chrome, Safari, Edge) */
+        /* Webkit-Browser - Responsive */
         ::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
+            width: 4px;
+            height: 4px;
+        }
+        
+        @media (min-width: 768px) {
+            ::-webkit-scrollbar {
+                width: 6px;
+                height: 6px;
+            }
         }
         
         ::-webkit-scrollbar-track {
@@ -151,37 +161,66 @@
             scrollbar-color: rgba(255, 255, 255, 0.03) transparent;
         }
         
-        /* Spezielle Container die scrollbar brauchen */
-        .modal-content::-webkit-scrollbar,
-        .dropdown-menu::-webkit-scrollbar {
-            width: 4px;
+        /* ===== RESPONSIVE SAFE AREAS ===== */
+        
+        /* iOS Safe Area Support */
+        .safe-area-top {
+            padding-top: env(safe-area-inset-top);
         }
         
-        .modal-content::-webkit-scrollbar-thumb,
-        .dropdown-menu::-webkit-scrollbar-thumb {
-            background: rgba(0, 0, 0, 0.1);
+        .safe-area-bottom {
+            padding-bottom: env(safe-area-inset-bottom);
         }
         
-        .dark .modal-content::-webkit-scrollbar-thumb,
-        .dark .dropdown-menu::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
+        .safe-area-left {
+            padding-left: env(safe-area-inset-left);
+        }
+        
+        .safe-area-right {
+            padding-right: env(safe-area-inset-right);
+        }
+        
+        /* ===== TOUCH OPTIMIZATIONS ===== */
+        
+        /* Touch-friendly targets */
+        .touch-target {
+            min-height: 44px;
+            min-width: 44px;
+        }
+        
+        @media (pointer: coarse) {
+            .touch-target {
+                min-height: 48px;
+                min-width: 48px;
+            }
+        }
+        
+        /* Reduce motion for accessibility */
+        @media (prefers-reduced-motion: reduce) {
+            *,
+            *::before,
+            *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
         }
     </style>
     
     {% block head %}{% endblock %}
 </head>
 
-<body class="min-h-screen flex flex-col bg-white text-slate-900 dark:bg-black dark:text-white transition-colors duration-300 text-base mercedes-background">
+<body class="min-h-screen flex flex-col bg-white text-slate-900 dark:bg-black dark:text-white transition-colors duration-300 text-responsive mercedes-background safe-area-top safe-area-bottom">
     
-    <!-- Navigation -->
+    <!-- Navigation - Responsive Enhanced -->
     <nav class="navbar">
-        <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
-            <div class="flex items-center justify-between h-16 sm:h-18 lg:h-20">
-                <!-- Brand Section -->
+        <div class="responsive-container">
+            <div class="flex items-center justify-between h-14 sm:h-16 md:h-18 lg:h-20">
+                <!-- Brand Section - Responsive -->
                 <div class="flex-shrink-0">
                     <a href="{{ url_for('dashboard') }}" class="navbar-brand group" aria-label="Zur Startseite">
-                        <!-- Mercedes-Benz Logo -->
-                        <div class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 transition-all duration-300 group-hover:rotate-180">
+                        <!-- Mercedes-Benz Logo - Responsive sizes -->
+                        <div class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-7 lg:h-7 transition-all duration-300 group-hover:rotate-180">
                             <svg class="w-full h-full text-slate-900 dark:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 80 80" aria-hidden="true">
                                 <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                                 C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
@@ -191,101 +230,101 @@
                                 c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
                             </svg>
                         </div>
-                        <!-- Brand Text -->
-                        <div class="flex flex-col ml-3">
-                            <span class="text-sm lg:text-base font-bold text-slate-900 dark:text-white transition-colors duration-300 tracking-tight">Mercedes-Benz</span>
-                            <span class="text-xs font-medium text-slate-600 dark:text-slate-400 transition-colors duration-300">MYP 3D-Druck Platform  -</span>
+                        <!-- Brand Text - Responsive -->
+                        <div class="flex flex-col ml-2 sm:ml-3">
+                            <span class="text-xs sm:text-sm lg:text-base font-bold text-slate-900 dark:text-white transition-colors duration-300 tracking-tight">Mercedes-Benz</span>
+                            <span class="text-xs font-medium text-slate-600 dark:text-slate-400 transition-colors duration-300 hidden sm:inline">MYP 3D-Druck Platform</span>
                         </div>
                     </a>
                 </div>
 
-                <!-- Desktop Navigation Menu - überarbeitetes Design -->
+                <!-- Desktop Navigation Menu - Responsive -->
                 <div class="hidden lg:flex flex-1 justify-center">
                     <nav class="navbar-menu-new" role="navigation" aria-label="Hauptnavigation">
                         <a href="{{ url_for('dashboard') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
                             </svg>
-                            <span>Dashboard</span>
+                            <span class="hidden xl:inline">Dashboard</span>
                         </a>
                         
                         <a href="{{ url_for('printers_page') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'printers_page' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                             </svg>
-                            <span>3D-Drucker</span>
+                            <span class="hidden xl:inline">3D-Drucker</span>
                         </a>
                         
                         <a href="{{ url_for('jobs_page') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'jobs_page' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                             </svg>
-                            <span>Druckaufträge</span>
+                            <span class="hidden xl:inline">Druckaufträge</span>
                         </a>
                         
                         <a href="{{ url_for('stats_page') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'stats_page' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                             </svg>
-                            <span>Statistiken</span>
+                            <span class="hidden xl:inline">Statistiken</span>
                         </a>
                         
                         <a href="{{ url_for('calendar.calendar_view') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'calendar.calendar_view' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                             </svg>
-                            <span>Schichtplan</span>
+                            <span class="hidden xl:inline">Schichtplan</span>
                         </a>
                         
                         <a href="{{ url_for('guest.guest_request_form') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'guest.guest_request_form' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                             </svg>
-                            <span>Gastanfrage</span>
+                            <span class="hidden xl:inline">Gastanfrage</span>
                         </a>
                         
                         <a href="{{ url_for('guest.guest_requests_overview') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'guest.guest_requests_overview' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                             </svg>
-                            <span>Anträge Übersicht</span>
+                            <span class="hidden xl:inline">Anträge Übersicht</span>
                         </a>
                         
                         {% if current_user.is_authenticated and current_user.is_admin %}
                         <a href="{{ url_for('admin_page') }}" 
                            class="nav-item {{ 'active' if request.endpoint == 'admin_page' else '' }}">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                             </svg>
-                            <span>Administration</span>
+                            <span class="hidden xl:inline">Administration</span>
                         </a>
                         {% endif %}
                     </nav>
                 </div>
 
-                <!-- Rechte Seite der Navbar -->
-                <div class="flex items-center space-x-2 sm:space-x-3">
-                    <!-- Mobile Menu Toggle (neu) -->
+                <!-- Rechte Seite der Navbar - Responsive -->
+                <div class="flex items-center space-x-1 sm:space-x-2 md:space-x-3">
+                    <!-- Mobile Menu Toggle -->
                     <button 
                         id="mobileMenuToggle" 
-                        class="lg:hidden p-2 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50"
+                        class="lg:hidden touch-target rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-300"
                         aria-label="Menü öffnen"
                         aria-expanded="false"
                     >
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                         </svg>
                     </button>
                     
-                    <!-- Dark Mode Toggle - Moderner, schöner Design -->
+                    <!-- Dark Mode Toggle - Enhanced Responsive -->
                     <div class="relative">
                         <button 
                             id="darkModeToggle" 
@@ -297,19 +336,19 @@
                             <!-- Hintergrund-Ring für besseren visuellen Effekt -->
                             <div class="absolute inset-0 rounded-full bg-gradient-to-r from-amber-300 to-orange-400 dark:from-blue-400 dark:to-purple-500 opacity-0 group-hover:opacity-100 blur-sm transition-all duration-500"></div>
                             
-                            <!-- Haupt-Container -->
-                            <div class="relative flex items-center justify-center w-11 h-11 rounded-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border border-slate-200/50 dark:border-slate-600/50 shadow-lg dark:shadow-slate-900/20 transition-all duration-300 group-hover:scale-105 group-active:scale-95">
+                            <!-- Haupt-Container - Responsive -->
+                            <div class="relative flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 md:w-11 md:h-11 rounded-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-md border border-slate-200/50 dark:border-slate-600/50 shadow-lg dark:shadow-slate-900/20 transition-all duration-300 group-hover:scale-105 group-active:scale-95">
                                 
                                 <!-- Sonnen-Icon (Light Mode) -->
                                 <div class="sun-icon absolute inset-0 flex items-center justify-center transition-all duration-500 ease-in-out opacity-100 dark:opacity-0 scale-100 dark:scale-75 rotate-0 dark:rotate-90">
-                                    <svg class="w-5 h-5 text-amber-500 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
+                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-amber-500 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
                                         <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
                                     </svg>
                                 </div>
                                 
                                 <!-- Mond-Icon (Dark Mode) -->
                                 <div class="moon-icon absolute inset-0 flex items-center justify-center transition-all duration-500 ease-in-out opacity-0 dark:opacity-100 scale-75 dark:scale-100 rotate-90 dark:rotate-0">
-                                    <svg class="w-5 h-5 text-blue-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
+                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-400 drop-shadow-sm" fill="currentColor" viewBox="0 0 24 24" style="margin: auto;">
                                         <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/>
                                     </svg>
                                 </div>
@@ -324,37 +363,37 @@
                             </div>
                         </button>
                         
-                        <!-- Tooltip -->
-                        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 dark:bg-slate-700 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
+                        <!-- Tooltip - Responsive -->
+                        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 dark:bg-slate-700 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50 hidden sm:block">
                             <span class="dark:hidden">Dark Mode aktivieren</span>
                             <span class="hidden dark:inline">Light Mode aktivieren</span>
                             <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-900 dark:border-t-slate-700"></div>
                         </div>
                     </div>
                     {% if current_user.is_authenticated %}
-                    <!-- Benachrichtigungen - kompakteres Design -->
+                    <!-- Benachrichtigungen - Responsive -->
                     <div class="relative">
                         <button 
                             id="notificationToggle" 
-                            class="relative p-1.5 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
+                            class="touch-target rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
                             aria-label="Benachrichtigungen anzeigen"
                             title="Benachrichtigungen"
                         >
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                             </svg>
                             <!-- Badge für ungelesene Benachrichtigungen -->
-                            <span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium hidden">
+                            <span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-3 w-3 sm:h-4 sm:w-4 flex items-center justify-center font-medium hidden">
                                 0
                             </span>
                         </button>
                         
-                        <!-- Benachrichtigungs-Dropdown -->
-                        <div id="notificationDropdown" class="absolute right-0 mt-2 w-72 sm:w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
+                        <!-- Benachrichtigungs-Dropdown - Responsive -->
+                        <div id="notificationDropdown" class="absolute right-0 mt-2 w-64 sm:w-72 md:w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
                             <div class="p-3 border-b border-slate-200 dark:border-slate-600">
-                                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
+                                <h3 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
                             </div>
-                            <div id="notificationList" class="max-h-80 overflow-y-auto">
+                            <div id="notificationList" class="max-h-64 sm:max-h-80 overflow-y-auto">
                                 <div class="p-3 text-center text-slate-500 dark:text-slate-400 text-sm">
                                     Keine neuen Benachrichtigungen
                                 </div>
@@ -367,17 +406,17 @@
                         </div>
                     </div>
                     
-                    <!-- User Profile Dropdown - kompakteres Design -->
+                    <!-- User Profile Dropdown - Responsive -->
                     <div class="relative" id="user-menu-container">
                         <button 
                             id="user-menu-button" 
-                            class="flex items-center space-x-1 rounded-full p-1 text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
+                            class="flex items-center space-x-1 rounded-full p-1 text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200 touch-target"
                             aria-expanded="false"
                             aria-haspopup="true"
                             aria-label="Benutzermenu öffnen"
                         >
-                            <!-- Profile Avatar -->
-                            <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">
+                            <!-- Profile Avatar - Responsive -->
+                            <div class="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">
                                 {{ current_user.email[0].upper() if current_user.email else 'U' }}
                             </div>
                             <!-- User Info (nur auf größeren Geräten) -->
@@ -386,16 +425,16 @@
                             </div>
                         </button>
                         
-                        <!-- User Menu Dropdown -->
-                        <div id="user-dropdown" class="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden origin-top-right">
+                        <!-- User Menu Dropdown - Responsive -->
+                        <div id="user-dropdown" class="absolute right-0 mt-2 w-56 sm:w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden origin-top-right">
                             <!-- User Info Header -->
-                            <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-600">
+                            <div class="px-3 sm:px-4 py-3 border-b border-slate-200 dark:border-slate-600">
                                 <div class="flex items-center space-x-3">
-                                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
+                                    <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
                                         {{ current_user.email[0].upper() if current_user.email else 'U' }}
                                     </div>
                                     <div class="flex-1 min-w-0">
-                                        <p class="text-sm font-medium text-slate-900 dark:text-white truncate">
+                                        <p class="text-xs sm:text-sm font-medium text-slate-900 dark:text-white truncate">
                                             {{ current_user.full_name if current_user.full_name else current_user.email.split('@')[0] if current_user.email else 'Benutzer' }}
                                         </p>
                                         <p class="text-xs text-slate-500 dark:text-slate-400 truncate">
@@ -410,19 +449,19 @@
                                 </div>
                             </div>
                             
-                            <!-- Menu Items -->
+                            <!-- Menu Items - Responsive -->
                             <div class="py-1">
                                 <a href="{{ url_for('user_profile') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                     </svg>
                                     Mein Profil
                                 </a>
                                 
                                 <a href="{{ url_for('user_settings') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                     </svg>
@@ -430,16 +469,16 @@
                                 </a>
                                 
                                 <a href="{{ url_for('jobs_page') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                     </svg>
                                     Neuer Auftrag
                                 </a>
                                 
                                 <a href="{{ url_for('stats_page') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                     </svg>
                                     Analytik
@@ -448,24 +487,24 @@
                             
                             <div class="border-t border-slate-200 dark:border-slate-600">
                                 <a href="{{ url_for('privacy') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                     </svg>
                                     Datenschutz
                                 </a>
                                 
                                 <a href="{{ url_for('terms') }}" 
-                                   class="flex items-center px-4 py-2 text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                   class="flex items-center px-3 sm:px-4 py-2 text-xs sm:text-sm text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                     </svg>
                                     Nutzungsbedingungen
                                 </a>
                                 
                                 <button onclick="handleLogout()" 
-                                        class="flex items-center w-full px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors duration-200">
-                                    <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                        class="flex items-center w-full px-3 sm:px-4 py-2 text-xs sm:text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors duration-200">
+                                    <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                     </svg>
                                     Abmelden
@@ -474,10 +513,10 @@
                         </div>
                     </div>
                     {% else %}
-                    <!-- Login Button - kompakteres Design -->
+                    <!-- Login Button - Responsive -->
                     <a href="{{ url_for('login') }}" 
-                       class="flex items-center space-x-1 py-1 px-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-xs transition-colors duration-200">
-                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                       class="flex items-center space-x-1 py-1.5 sm:py-2 px-2 sm:px-3 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm transition-colors duration-200 touch-target">
+                        <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                         </svg>
                         <span class="hidden sm:inline">Anmelden</span>
@@ -488,8 +527,8 @@
         </div>
     </nav>
     
-    <!-- Mobile Menu (neu) -->
-    <div id="mobileMenu" class="mobile-menu-new hidden lg:hidden">
+    <!-- Mobile Menu - Enhanced Responsive -->
+    <div id="mobileMenu" class="mobile-menu-new hidden lg:hidden animate-slide-down">
         <nav class="flex flex-col space-y-1 px-3 py-4" role="navigation" aria-label="Mobile Navigation">
             <a href="{{ url_for('dashboard') }}" 
                class="mobile-nav-item {{ 'active' if request.endpoint == 'dashboard' else '' }}">
@@ -560,35 +599,33 @@
         </nav>
     </div>
 
-    <!-- Main Content -->
-    <main id="main-content" class="flex-grow max-w-7xl w-full mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8">
-        <div class="container mx-auto px-4 py-8">
-            <!-- Flash Messages -->
-            {% with messages = get_flashed_messages(with_categories=true) %}
-                {% if messages %}
-                    <div class="flash-messages mb-4">
-                        {% for category, message in messages %}
-                            <div class="alert alert-{{ category }} mb-2">
-                                {{ message }}
-                            </div>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-            {% endwith %}
-            
-            {% block content %}{% endblock %}
-        </div>
+    <!-- Main Content - Enhanced Responsive -->
+    <main id="main-content" class="flex-grow responsive-container py-4 sm:py-6 md:py-8">
+        <!-- Flash Messages - Responsive -->
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                <div class="flash-messages mb-4 space-y-2 sm:space-y-3">
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ category }}">
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+        
+        {% block content %}{% endblock %}
     </main>
 
-    <!-- Mercedes-Benz Footer -->
+    <!-- Mercedes-Benz Footer - Enhanced Responsive -->
     <footer class="bg-white dark:bg-black border-t border-gray-200 dark:border-slate-700 mt-auto transition-colors duration-300">
-        <div class="max-w-screen-xl w-full mx-auto px-3 sm:px-6 lg:px-8">
-            <div class="py-4 sm:py-8 border-t border-gray-200 dark:border-slate-700 mt-8 sm:mt-12 pt-4 sm:pt-8">
-                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8">
-                    <!-- Brand Section - Stack on mobile -->
-                    <div class="flex flex-col space-y-4">
-                        <div class="flex items-center gap-3">
-                            <div class="w-6 h-6">
+        <div class="responsive-container">
+            <div class="py-4 sm:py-6 md:py-8 border-t border-gray-200 dark:border-slate-700 mt-6 sm:mt-8 md:mt-12 pt-4 sm:pt-6 md:pt-8">
+                <div class="responsive-grid-3">
+                    <!-- Brand Section - Responsive -->
+                    <div class="flex flex-col space-y-3 sm:space-y-4">
+                        <div class="flex items-center gap-2 sm:gap-3">
+                            <div class="w-5 h-5 sm:w-6 sm:h-6">
                                 <svg class="w-full h-full text-slate-900 dark:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 80 80">
                                     <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                                     C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
@@ -599,19 +636,19 @@
                                 </svg>
                             </div>
                             <div>
-                                <div class="text-base font-bold text-slate-900 dark:text-white transition-colors duration-300">Mercedes-Benz</div>
+                                <div class="text-sm sm:text-base font-bold text-slate-900 dark:text-white transition-colors duration-300">Mercedes-Benz</div>
                                 <div class="text-xs text-slate-600 dark:text-slate-400 transition-colors duration-300">MYP Platform</div>
                             </div>
                         </div>
-                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
+                        <p class="text-xs leading-relaxed text-slate-600 dark:text-slate-400 transition-colors duration-300">
                             Das Beste oder nichts - Professionelles 3D-Druck Management für Mercedes-Benz.
                         </p>
                     </div>
                     
-                    <!-- System Info -->
-                    <div class="flex flex-col space-y-4">
-                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">System</h3>
-                        <div class="space-y-2 text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
+                    <!-- System Info - Responsive -->
+                    <div class="flex flex-col space-y-3 sm:space-y-4">
+                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">System</h3>
+                        <div class="space-y-2 text-xs leading-relaxed text-slate-600 dark:text-slate-400 transition-colors duration-300">
                             <div class="flex justify-between">
                                 <span>Version:</span>
                                 <span class="text-slate-900 dark:text-white font-medium transition-colors duration-300">3.0.0</span>
@@ -626,10 +663,10 @@
                         </div>
                     </div>
                     
-                    <!-- Copyright -->
-                    <div class="flex flex-col space-y-4">
-                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">Rechtliches</h3>
-                        <div class="space-y-2 text-xs text-slate-600 dark:text-slate-400 leading-relaxed transition-colors duration-300">
+                    <!-- Copyright - Responsive -->
+                    <div class="flex flex-col space-y-3 sm:space-y-4">
+                        <h3 class="text-base sm:text-lg font-semibold text-slate-900 dark:text-white transition-colors duration-300">Rechtliches</h3>
+                        <div class="space-y-2 text-xs leading-relaxed text-slate-600 dark:text-slate-400 transition-colors duration-300">
                             <p>© 2024 Mercedes-Benz Group AG</p>
                             <p>Alle Rechte vorbehalten.</p>
                             <p class="text-xs text-slate-500 dark:text-slate-500 transition-colors duration-300">
@@ -658,8 +695,134 @@
     <script src="{{ url_for('static', filename='js/auto-logout.js') }}"></script>
     {% endif %}
     
-    <!-- Additional JavaScript Functions -->
+    <!-- Enhanced JavaScript Functions - Responsive -->
     <script>
+        /**
+         * Enhanced Responsive JavaScript Functions
+         */
+        
+        // Viewport Detection
+        function getViewportSize() {
+            return {
+                width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+                height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+            };
+        }
+        
+        function isMobile() {
+            return getViewportSize().width < 768;
+        }
+        
+        function isTablet() {
+            const width = getViewportSize().width;
+            return width >= 768 && width < 1024;
+        }
+        
+        function isDesktop() {
+            return getViewportSize().width >= 1024;
+        }
+        
+        // Touch Device Detection
+        function isTouchDevice() {
+            return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        }
+        
+        // Mobile Menu Enhanced Functionality
+        function initializeMobileMenu() {
+            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            const mobileMenu = document.getElementById('mobileMenu');
+            
+            if (mobileMenuToggle && mobileMenu) {
+                mobileMenuToggle.addEventListener('click', function() {
+                    const isVisible = !mobileMenu.classList.contains('hidden');
+                    
+                    if (isVisible) {
+                        mobileMenu.classList.add('hidden');
+                        mobileMenuToggle.setAttribute('aria-expanded', 'false');
+                        mobileMenuToggle.innerHTML = `
+                            <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                            </svg>
+                        `;
+                    } else {
+                        mobileMenu.classList.remove('hidden');
+                        mobileMenuToggle.setAttribute('aria-expanded', 'true');
+                        mobileMenuToggle.innerHTML = `
+                            <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                            </svg>
+                        `;
+                    }
+                });
+                
+                // Close mobile menu when clicking outside
+                document.addEventListener('click', function(event) {
+                    if (!mobileMenu.contains(event.target) && !mobileMenuToggle.contains(event.target)) {
+                        if (!mobileMenu.classList.contains('hidden')) {
+                            mobileMenu.classList.add('hidden');
+                            mobileMenuToggle.setAttribute('aria-expanded', 'false');
+                            mobileMenuToggle.focus();
+                        }
+                    }
+                });
+                
+                // Close mobile menu on escape key
+                document.addEventListener('keydown', function(event) {
+                    if (event.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                        mobileMenuToggle.setAttribute('aria-expanded', 'false');
+                        mobileMenuToggle.focus();
+                    }
+                });
+            }
+        }
+        
+        // Responsive Image Loading
+        function optimizeImages() {
+            const images = document.querySelectorAll('img[data-src]');
+            const imageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        img.src = img.dataset.src;
+                        img.classList.remove('loading');
+                        imageObserver.unobserve(img);
+                    }
+                });
+            });
+            
+            images.forEach(img => imageObserver.observe(img));
+        }
+        
+        // Responsive Table Enhancement
+        function enhanceResponsiveTables() {
+            const tables = document.querySelectorAll('.table-container');
+            tables.forEach(table => {
+                if (isMobile()) {
+                    table.style.fontSize = '0.75rem';
+                } else if (isTablet()) {
+                    table.style.fontSize = '0.875rem';
+                } else {
+                    table.style.fontSize = '1rem';
+                }
+            });
+        }
+        
+        // Viewport Resize Handler
+        function handleViewportResize() {
+            enhanceResponsiveTables();
+            
+            // Update mobile menu visibility on resize
+            const mobileMenu = document.getElementById('mobileMenu');
+            if (mobileMenu && isDesktop()) {
+                mobileMenu.classList.add('hidden');
+                const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+                if (mobileMenuToggle) {
+                    mobileMenuToggle.setAttribute('aria-expanded', 'false');
+                }
+            }
+        }
+        
         /**
          * Logout-Handler für sicheres Abmelden
          */
@@ -695,15 +858,32 @@
         }
         
         /**
-         * Initialisierung aller UI-Komponenten nach DOM-Load
+         * Enhanced Initialization
          */
         document.addEventListener('DOMContentLoaded', function() {
-            // MYP App für Offline-Funktionalität initialisieren
+            // Initialize responsive features
+            initializeMobileMenu();
+            optimizeImages();
+            enhanceResponsiveTables();
+            
+            // Add viewport resize listener
+            let resizeTimeout;
+            window.addEventListener('resize', function() {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(handleViewportResize, 250);
+            });
+            
+            // Initialize MYP App für Offline-Funktionalität
             if (typeof MYPApp !== 'undefined') {
                 window.mypApp = new MYPApp();
             }
             
-            console.log('🚀 MYP Platform UI erfolgreich initialisiert');
+            // Add touch device optimizations
+            if (isTouchDevice()) {
+                document.body.classList.add('touch-device');
+            }
+            
+            console.log('🚀 MYP Platform UI erfolgreich initialisiert (Responsive Enhanced)');
         });
     </script>
     
diff --git a/backend/templates/dashboard.html b/backend/templates/dashboard.html
index 02170a0b1..689b66c18 100644
--- a/backend/templates/dashboard.html
+++ b/backend/templates/dashboard.html
@@ -4,11 +4,11 @@
 
 {% block extra_css %}
 <style>
-    /* Professional Mercedes-Benz Dashboard Styles */
+    /* Professional Mercedes-Benz Dashboard Styles - Responsive Enhanced */
     .mb-dashboard-card {
         background: white;
         border: 1px solid #e5e7eb;
-        border-radius: 16px;
+        border-radius: clamp(0.75rem, 2vw, 1rem);
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
@@ -16,17 +16,30 @@
     }
     
     .dark .mb-dashboard-card {
-        background: var(--mb-black, #000000); /* Schwarzer Hintergrund im Dark Mode */
+        background: var(--mb-black, #000000);
         border-color: var(--border-primary, #334155);
     }
     
     .mb-dashboard-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+    }
+    
+    @media (min-width: 768px) {
+        .mb-dashboard-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
     }
     
     .dark .mb-dashboard-card:hover {
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    }
+    
+    @media (min-width: 768px) {
+        .dark .mb-dashboard-card:hover {
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+        }
     }
     
     .mb-stat-card {
@@ -38,7 +51,7 @@
     }
     
     .dark .mb-stat-card {
-        background: linear-gradient(135deg, #000000 0%, #111827 100%); /* Mercedes Schwarz */
+        background: linear-gradient(135deg, #000000 0%, #111827 100%);
         color: var(--text-primary, #f8fafc);
     }
     
@@ -54,7 +67,7 @@
     }
     
     .dark .mb-stat-card::before {
-        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); /* Subtle glow for dark */
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
     }
     
     @keyframes pulse-glow {
@@ -63,10 +76,10 @@
     }
     
     .mb-stat-icon {
-        background: rgba(0, 0, 0, 0.1); /* Schwarz statt Blau */
+        background: rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(10px);
-        border-radius: 16px;
-        padding: 16px;
+        border-radius: clamp(0.75rem, 2vw, 1rem);
+        padding: clamp(0.75rem, 2vw, 1rem);
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -76,12 +89,12 @@
     }
     
     .dark .mb-stat-icon {
-        background: rgba(255, 255, 255, 0.1); /* Lighter icon background for contrast */
+        background: rgba(255, 255, 255, 0.1);
     }
     
     .mb-stat-card:hover .mb-stat-icon {
         transform: scale(1.1);
-        background: rgba(0, 0, 0, 0.2); /* Schwarz statt Blau */
+        background: rgba(0, 0, 0, 0.2);
     }
     
     .dark .mb-stat-card:hover .mb-stat-icon {
@@ -89,8 +102,8 @@
     }
     
     .mb-status-indicator {
-        width: 12px;
-        height: 12px;
+        width: clamp(0.75rem, 2vw, 0.875rem);
+        height: clamp(0.75rem, 2vw, 0.875rem);
         border-radius: 50%;
         position: relative;
         display: inline-block;
@@ -147,8 +160,8 @@
     
     .mb-progress-container {
         background: #f3f4f6;
-        height: 8px;
-        border-radius: 4px;
+        height: clamp(0.5rem, 1.5vw, 0.625rem);
+        border-radius: clamp(0.25rem, 1vw, 0.375rem);
         overflow: hidden;
         position: relative;
     }
@@ -158,9 +171,9 @@
     }
     
     .mb-progress-bar {
-        background: linear-gradient(90deg, #000000 0%, #333333 100%); /* Schwarz statt Blau */
+        background: linear-gradient(90deg, #000000 0%, #333333 100%);
         height: 100%;
-        border-radius: 4px;
+        border-radius: clamp(0.25rem, 1vw, 0.375rem);
         transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
@@ -187,10 +200,10 @@
     }
     
     .mb-activity-item {
-        border-left: 4px solid #000000; /* Schwarz statt Blau */
-        background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 100%); /* Schwarz statt Blau */
+        border-left: clamp(2px, 0.5vw, 4px) solid #000000;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 100%);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        border-radius: 0 8px 8px 0;
+        border-radius: 0 clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.5rem, 1.5vw, 0.75rem) 0;
     }
     
     .dark .mb-activity-item {
@@ -198,28 +211,12 @@
         background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
     }
     
-    /* Light/Dark Mode compatible cards */
-    .glass-card-light {
-        background: rgba(255, 255, 255, 0.7);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border: 1px solid rgba(229, 231, 235, 0.8);
-        border-radius: 12px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-        transition: all 0.3s ease;
-    }
-
-    .dark .glass-card-light {
-        background: rgba(0, 0, 0, 0.8);
-        border-color: rgba(100, 116, 139, 0.3);
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-    }
-    
+    /* Responsive Text Sizes */
     .section-title {
         color: #1e293b;
-        font-size: 1.25rem;
+        font-size: clamp(1rem, 3vw, 1.25rem);
         font-weight: 600;
-        margin-bottom: 1rem;
+        margin-bottom: clamp(0.75rem, 2vw, 1rem);
     }
     
     .dark .section-title {
@@ -229,7 +226,7 @@
     .stat-value {
         color: #0f172a;
         font-weight: 700;
-        font-size: 1.5rem;
+        font-size: clamp(1.25rem, 4vw, 1.5rem);
     }
     
     .dark .stat-value {
@@ -238,22 +235,75 @@
     
     .stat-label {
         color: #64748b;
-        font-size: 0.875rem;
+        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
     }
     
     .dark .stat-label {
         color: #94a3b8;
     }
+    
+    /* Mobile Optimizations */
+    @media (max-width: 767px) {
+        .mb-dashboard-card {
+            margin: 0.5rem;
+            padding: 1rem;
+        }
+        
+        .mb-stat-icon {
+            padding: 0.75rem;
+        }
+        
+        .mb-progress-container {
+            height: 0.5rem;
+        }
+        
+        .mb-activity-item {
+            border-left-width: 2px;
+            border-radius: 0 0.5rem 0.5rem 0;
+        }
+    }
+    
+    /* Tablet Optimizations */
+    @media (min-width: 768px) and (max-width: 1023px) {
+        .mb-dashboard-card {
+            margin: 0.75rem;
+            padding: 1.25rem;
+        }
+        
+        .mb-stat-icon {
+            padding: 0.875rem;
+        }
+        
+        .mb-progress-container {
+            height: 0.625rem;
+        }
+    }
+    
+    /* Desktop Optimizations */
+    @media (min-width: 1024px) {
+        .mb-dashboard-card {
+            margin: 1rem;
+            padding: 1.5rem;
+        }
+        
+        .mb-stat-icon {
+            padding: 1rem;
+        }
+        
+        .mb-progress-container {
+            height: 0.75rem;
+        }
+    }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="space-y-8">
-    <!-- Dashboard Header Card -->
-    <div class="dashboard-card p-6">
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-            <div class="flex items-center gap-6">
-                <div class="w-16 h-16 flex-shrink-0">
+<div class="responsive-container space-y-6 sm:space-y-8">
+    <!-- Dashboard Header Card - Responsive -->
+    <div class="dashboard-card">
+        <div class="flex flex-col gap-4 sm:gap-6 md:flex-row md:items-center md:justify-between">
+            <div class="flex items-center gap-4 sm:gap-6">
+                <div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 flex-shrink-0">
                     <svg class="w-full h-full text-slate-900 dark:text-white" fill="currentColor" viewBox="0 0 80 80" aria-hidden="true">
                         <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                         C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
@@ -264,47 +314,49 @@
                     </svg>
                 </div>
                 <div>
-                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Dashboard</h1>
-                    <p class="text-slate-500 dark:text-slate-400 mt-1">Übersicht über Ihre 3D-Druck Aktivitäten</p>
+                    <h1 class="text-responsive-xl font-bold text-slate-900 dark:text-white tracking-tight">Dashboard</h1>
+                    <p class="text-slate-500 dark:text-slate-400 mt-1 text-responsive">Übersicht über Ihre 3D-Druck Aktivitäten</p>
                 </div>
             </div>
-            <div class="flex flex-wrap gap-3">
+            <div class="flex flex-wrap gap-2 sm:gap-3">
                 <button id="refreshDashboard" 
-                        class="btn-secondary flex items-center gap-2">
-                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        class="btn-secondary flex items-center gap-2 touch-target">
+                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                     </svg>
-                    <span>Aktualisieren</span>
+                    <span class="hidden sm:inline">Aktualisieren</span>
                 </button>
                 <a href="{{ url_for('jobs_page') }}" 
-                   class="btn-primary flex items-center gap-2">
-                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                   class="btn-primary flex items-center gap-2 touch-target">
+                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                     </svg>
-                    <span>Neuer Auftrag</span>
+                    <span class="hidden sm:inline">Neuer Auftrag</span>
+                    <span class="sm:hidden">Neu</span>
                 </a>
                 <a href="{{ url_for('guest.guest_requests_overview') }}" 
-                   class="btn-secondary flex items-center gap-2">
-                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                   class="btn-secondary flex items-center gap-2 touch-target">
+                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                     </svg>
-                    <span>Anträge Übersicht</span>
+                    <span class="hidden sm:inline">Anträge Übersicht</span>
+                    <span class="sm:hidden">Anträge</span>
                 </a>
             </div>
         </div>
     </div>
 
-    <!-- Stats Overview Cards -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <!-- Stats Overview Cards - Responsive Grid -->
+    <div class="responsive-grid-4">
         <!-- Active Jobs Card -->
-        <div class="dashboard-card p-6">
-            <div class="flex justify-between">
+        <div class="dashboard-card">
+            <div class="flex justify-between items-start">
                 <div>
                     <h3 class="stat-label">Aktive Aufträge</h3>
                     <div class="stat-value">{{ active_jobs_count }}</div>
                 </div>
                 <div class="mb-stat-icon text-slate-900 dark:text-white">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                     </svg>
                 </div>
@@ -312,14 +364,14 @@
         </div>
 
         <!-- Available Printers Card -->
-        <div class="dashboard-card p-6">
-            <div class="flex justify-between">
+        <div class="dashboard-card">
+            <div class="flex justify-between items-start">
                 <div>
                     <h3 class="stat-label">Verfügbare Drucker</h3>
                     <div class="stat-value">{{ available_printers_count }}</div>
                 </div>
                 <div class="mb-stat-icon text-green-600 dark:text-green-400">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                     </svg>
                 </div>
@@ -327,14 +379,14 @@
         </div>
 
         <!-- Total Jobs Card -->
-        <div class="dashboard-card p-6">
-            <div class="flex justify-between">
+        <div class="dashboard-card">
+            <div class="flex justify-between items-start">
                 <div>
                     <h3 class="stat-label">Aufträge (gesamt)</h3>
                     <div class="stat-value">{{ total_jobs_count }}</div>
                 </div>
                 <div class="mb-stat-icon text-purple-600 dark:text-purple-400">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                 </div>
@@ -342,14 +394,14 @@
         </div>
 
         <!-- Success Rate Card -->
-        <div class="dashboard-card p-6">
-            <div class="flex justify-between">
+        <div class="dashboard-card">
+            <div class="flex justify-between items-start">
                 <div>
                     <h3 class="stat-label">Erfolgsrate</h3>
                     <div class="stat-value">{{ success_rate }}%</div>
                 </div>
                 <div class="mb-stat-icon text-amber-600 dark:text-amber-400">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                     </svg>
                 </div>
@@ -357,63 +409,67 @@
         </div>
     </div>
 
-    <!-- Active Jobs Section -->
-    <div class="dashboard-card p-6">
+    <!-- Active Jobs Section - Responsive -->
+    <div class="dashboard-card">
         <h2 class="section-title">Aktuelle Druckaufträge</h2>
-        <div class="overflow-hidden">
-            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+        <div class="table-container">
+            <table class="table-styled">
                 <thead>
                     <tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
-                        <th class="px-6 py-3">Status</th>
-                        <th class="px-6 py-3">Auftrag</th>
-                        <th class="px-6 py-3">Drucker</th>
-                        <th class="px-6 py-3">Startzeit</th>
-                        <th class="px-6 py-3">Fortschritt</th>
-                        <th class="px-6 py-3">Aktionen</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3">Status</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3">Auftrag</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3 hidden sm:table-cell">Drucker</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3 hidden md:table-cell">Startzeit</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3">Fortschritt</th>
+                        <th class="px-3 sm:px-6 py-2 sm:py-3">Aktionen</th>
                     </tr>
                 </thead>
                 <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                     {% if active_jobs and active_jobs|length > 0 %}
                         {% for job in active_jobs %}
                         <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
-                            <td class="px-6 py-4 whitespace-nowrap">
+                            <td class="px-3 sm:px-6 py-2 sm:py-4 whitespace-nowrap">
                                 <div class="flex items-center">
                                     <div class="mb-status-indicator {{ job.status_class }}"></div>
-                                    <span class="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">
-                                        {{ job.status_text }}
+                                    <span class="ml-2 text-xs sm:text-sm font-medium text-slate-700 dark:text-slate-300">
+                                        <span class="hidden sm:inline">{{ job.status_text }}</span>
+                                        <span class="sm:hidden">{{ job.status_text[:3] }}</span>
                                     </span>
                                 </div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <div class="text-sm font-medium text-slate-900 dark:text-white">{{ job.name }}</div>
-                                <div class="text-xs text-slate-500 dark:text-slate-400">{{ job.file_name }}</div>
+                            <td class="px-3 sm:px-6 py-2 sm:py-4">
+                                <div class="text-xs sm:text-sm font-medium text-slate-900 dark:text-white truncate max-w-32 sm:max-w-none">{{ job.name }}</div>
+                                <div class="text-xs text-slate-500 dark:text-slate-400 truncate max-w-32 sm:max-w-none hidden sm:block">{{ job.file_name }}</div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <div class="text-sm text-slate-700 dark:text-slate-300">{{ job.printer }}</div>
+                            <td class="px-3 sm:px-6 py-2 sm:py-4 whitespace-nowrap hidden sm:table-cell">
+                                <div class="text-xs sm:text-sm text-slate-700 dark:text-slate-300">{{ job.printer }}</div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                                <div class="text-sm text-slate-700 dark:text-slate-300">{{ job.start_time }}</div>
+                            <td class="px-3 sm:px-6 py-2 sm:py-4 whitespace-nowrap hidden md:table-cell">
+                                <div class="text-xs sm:text-sm text-slate-700 dark:text-slate-300">{{ job.start_time }}</div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
+                            <td class="px-3 sm:px-6 py-2 sm:py-4 whitespace-nowrap">
                                 <div class="mb-progress-container">
                                     <div class="mb-progress-bar" style="width: {{ job.progress }}%"></div>
                                 </div>
                                 <div class="text-xs text-right mt-1 text-slate-500 dark:text-slate-400">{{ job.progress }}%</div>
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-right">
-                                <a href="{{ url_for('job_detail', job_id=job.id) }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</a>
+                            <td class="px-3 sm:px-6 py-2 sm:py-4 whitespace-nowrap text-right">
+                                <a href="{{ url_for('job_detail', job_id=job.id) }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium text-xs sm:text-sm">
+                                    <span class="hidden sm:inline">Details</span>
+                                    <span class="sm:hidden">→</span>
+                                </a>
                             </td>
                         </tr>
                         {% endfor %}
                     {% else %}
                         <tr>
-                            <td colspan="6" class="px-6 py-8 text-center">
+                            <td colspan="6" class="px-3 sm:px-6 py-6 sm:py-8 text-center">
                                 <div class="text-slate-500 dark:text-slate-400">
-                                    <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <svg class="w-8 h-8 sm:w-12 sm:h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                     </svg>
-                                    <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine aktiven Druckaufträge</p>
-                                    <p class="text-slate-500 dark:text-slate-400 text-sm">Starten Sie einen neuen Druckauftrag, um ihn hier zu sehen.</p>
+                                    <p class="text-slate-700 dark:text-slate-300 font-medium mb-1 text-sm sm:text-base">Keine aktiven Druckaufträge</p>
+                                    <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm">Starten Sie einen neuen Druckauftrag, um ihn hier zu sehen.</p>
                                 </div>
                             </td>
                         </tr>
@@ -422,531 +478,82 @@
             </table>
         </div>
         <div class="mt-4 text-right">
-            <a href="{{ url_for('jobs_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-sm font-medium">
-                Alle Druckaufträge anzeigen →
+            <a href="{{ url_for('jobs_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-xs sm:text-sm font-medium">
+                <span class="hidden sm:inline">Alle Druckaufträge anzeigen →</span>
+                <span class="sm:hidden">Alle anzeigen →</span>
             </a>
         </div>
     </div>
 
-    <!-- Last Row: Printer Status and Recent Activity -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <!-- Last Row: Printer Status and Recent Activity - Responsive Grid -->
+    <div class="responsive-grid-2">
         <!-- Available Printers -->
-        <div class="dashboard-card p-6">
+        <div class="dashboard-card">
             <h2 class="section-title">Druckerstatus</h2>
-            <div class="space-y-4">
+            <div class="space-y-3 sm:space-y-4">
                 {% if printers and printers|length > 0 %}
                     {% for printer in printers %}
-                    <div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-slate-700/30">
-                        <div class="flex items-center">
-                            <div class="mb-status-indicator {{ printer.status_class }} mr-3"></div>
-                            <div>
-                                <div class="text-sm font-medium text-slate-900 dark:text-white">{{ printer.name }}</div>
-                                <div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.model }}</div>
+                    <div class="flex items-center justify-between p-3 sm:p-4 rounded-lg sm:rounded-xl bg-gray-50 dark:bg-slate-700/30">
+                        <div class="flex items-center min-w-0 flex-1">
+                            <div class="mb-status-indicator {{ printer.status_class }} mr-2 sm:mr-3 flex-shrink-0"></div>
+                            <div class="min-w-0 flex-1">
+                                <div class="text-xs sm:text-sm font-medium text-slate-900 dark:text-white truncate">{{ printer.name }}</div>
+                                <div class="text-xs text-slate-500 dark:text-slate-400 truncate hidden sm:block">{{ printer.model }}</div>
                             </div>
                         </div>
-                        <div class="text-right">
-                            <div class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ printer.status_text }}</div>
-                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.location }}</div>
+                        <div class="text-right flex-shrink-0 ml-2">
+                            <div class="text-xs sm:text-sm font-medium text-slate-700 dark:text-slate-300">
+                                <span class="hidden sm:inline">{{ printer.status_text }}</span>
+                                <span class="sm:hidden">{{ printer.status_text[:3] }}</span>
+                            </div>
+                            <div class="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">{{ printer.location }}</div>
                         </div>
                     </div>
                     {% endfor %}
                 {% else %}
-                    <div class="text-center py-8">
-                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="text-center py-6 sm:py-8">
+                        <svg class="w-8 h-8 sm:w-12 sm:h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                         </svg>
-                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine Drucker gefunden</p>
-                        <p class="text-slate-500 dark:text-slate-400 text-sm">Prüfen Sie die Verbindung oder fügen Sie Drucker hinzu.</p>
+                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1 text-sm sm:text-base">Keine Drucker gefunden</p>
+                        <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm">Prüfen Sie die Verbindung oder fügen Sie Drucker hinzu.</p>
                     </div>
                 {% endif %}
             </div>
             <div class="mt-4 text-right">
-                <a href="{{ url_for('printers_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-sm font-medium">
-                    Alle Drucker anzeigen →
+                <a href="{{ url_for('printers_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-xs sm:text-sm font-medium">
+                    <span class="hidden sm:inline">Alle Drucker anzeigen →</span>
+                    <span class="sm:hidden">Alle anzeigen →</span>
                 </a>
             </div>
         </div>
 
         <!-- Recent Activity -->
-        <div class="dashboard-card p-6">
+        <div class="dashboard-card">
             <h2 class="section-title">Letzte Aktivitäten</h2>
-            <div class="space-y-3">
+            <div class="space-y-2 sm:space-y-3">
                 {% if activities and activities|length > 0 %}
                     {% for activity in activities %}
-                    <div class="mb-activity-item pl-4 py-3">
+                    <div class="mb-activity-item pl-3 sm:pl-4 py-2 sm:py-3">
                         <div class="flex items-center justify-between">
-                            <div class="flex-1">
-                                <p class="text-sm text-slate-700 dark:text-slate-300">{{ activity.description }}</p>
+                            <div class="flex-1 min-w-0">
+                                <p class="text-xs sm:text-sm text-slate-700 dark:text-slate-300 truncate">{{ activity.description }}</p>
                                 <p class="text-xs text-slate-500 dark:text-slate-400">{{ activity.time }}</p>
                             </div>
                         </div>
                     </div>
                     {% endfor %}
                 {% else %}
-                    <div class="text-center py-8">
-                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div class="text-center py-6 sm:py-8">
+                        <svg class="w-8 h-8 sm:w-12 sm:h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
-                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine Aktivitäten</p>
-                        <p class="text-slate-500 dark:text-slate-400 text-sm">Ihre Aktivitäten werden hier angezeigt.</p>
+                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1 text-sm sm:text-base">Keine Aktivitäten</p>
+                        <p class="text-slate-500 dark:text-slate-400 text-xs sm:text-sm">Ihre Aktivitäten werden hier angezeigt.</p>
                     </div>
                 {% endif %}
             </div>
         </div>
     </div>
 </div>
-{% endblock %}
-
-{% block extra_js %}
-<script>
-    class DashboardManager {
-        constructor() {
-            this.updateInterval = 30000; // 30 Sekunden
-            this.autoUpdateTimer = null;
-            this.isUpdating = false;
-            this.wsConnection = null;
-            
-            this.init();
-        }
-        
-        init() {
-            this.setupEventListeners();
-            this.setupAutoUpdate();
-            this.setupWebSocket();
-            this.animateCounters();
-            console.log('🚀 Dashboard Manager initialisiert');
-        }
-        
-        setupEventListeners() {
-        // Refresh Button
-        const refreshBtn = document.getElementById('refreshDashboard');
-        if (refreshBtn) {
-                refreshBtn.addEventListener('click', () => {
-                    this.refreshDashboard();
-                });
-            }
-            
-            // Job-Zeilen klickbar machen für Details
-            this.setupJobRowClicks();
-            
-            // Drucker-Karten klickbar machen
-            this.setupPrinterClicks();
-            
-            // Dark Mode Updates
-            window.addEventListener('darkModeChanged', (e) => {
-                this.updateThemeElements(e.detail.isDark);
-            });
-            
-            // Visibility Change Detection für intelligente Updates
-            document.addEventListener('visibilitychange', () => {
-                if (document.hidden) {
-                    this.pauseAutoUpdate();
-                } else {
-                    this.resumeAutoUpdate();
-                    this.refreshDashboard(); // Einmalige Aktualisierung bei Rückkehr
-                }
-            });
-        }
-        
-        setupJobRowClicks() {
-            const jobRows = document.querySelectorAll('tbody tr[data-job-id]');
-            jobRows.forEach(row => {
-                row.style.cursor = 'pointer';
-                row.addEventListener('click', () => {
-                    const jobId = row.dataset.jobId;
-                    if (jobId) {
-                        window.location.href = `/jobs/${jobId}`;
-                    }
-                });
-                
-                // Hover-Effekt verstärken
-                row.addEventListener('mouseenter', () => {
-                    row.style.transform = 'scale(1.01)';
-                    row.style.transition = 'transform 0.2s ease';
-                });
-                
-                row.addEventListener('mouseleave', () => {
-                    row.style.transform = 'scale(1)';
-                });
-            });
-        }
-        
-        setupPrinterClicks() {
-            const printerCards = document.querySelectorAll('[data-printer-id]');
-            printerCards.forEach(card => {
-                card.style.cursor = 'pointer';
-                card.addEventListener('click', () => {
-                    const printerId = card.dataset.printerId;
-                    if (printerId) {
-                        window.location.href = `/printers/${printerId}`;
-                    }
-                });
-            });
-        }
-        
-        setupAutoUpdate() {
-            this.autoUpdateTimer = setInterval(() => {
-                if (!document.hidden && !this.isUpdating) {
-                    this.updateDashboardData();
-                }
-            }, this.updateInterval);
-        }
-        
-        pauseAutoUpdate() {
-            if (this.autoUpdateTimer) {
-                clearInterval(this.autoUpdateTimer);
-                this.autoUpdateTimer = null;
-            }
-        }
-        
-        resumeAutoUpdate() {
-            if (!this.autoUpdateTimer) {
-                this.setupAutoUpdate();
-            }
-        }
-        
-        setupWebSocket() {
-            // WebSocket für Real-time Updates
-            try {
-                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                const wsUrl = `${protocol}//${window.location.host}/ws/dashboard`;
-                
-                this.wsConnection = new WebSocket(wsUrl);
-                
-                this.wsConnection.onopen = () => {
-                    console.log('📡 WebSocket Verbindung zu Dashboard hergestellt');
-                };
-                
-                this.wsConnection.onmessage = (event) => {
-                    try {
-                        const data = JSON.parse(event.data);
-                        this.handleWebSocketUpdate(data);
-                    } catch (error) {
-                        console.error('Fehler beim Verarbeiten der WebSocket-Nachricht:', error);
-                    }
-                };
-                
-                this.wsConnection.onclose = () => {
-                    console.log('📡 WebSocket Verbindung geschlossen - versuche Wiederverbindung in 5s');
-                    setTimeout(() => {
-                        this.setupWebSocket();
-                    }, 5000);
-                };
-                
-                this.wsConnection.onerror = (error) => {
-                    console.error('WebSocket Fehler:', error);
-                };
-                
-            } catch (error) {
-                console.log('WebSocket nicht verfügbar, verwende Polling-Updates');
-            }
-        }
-        
-        handleWebSocketUpdate(data) {
-            console.log('📡 Erhaltenes WebSocket-Update:', data);
-            
-            switch (data.type) {
-                case 'job_status_update':
-                    this.updateJobStatus(data.job_id, data.status, data.progress);
-                    break;
-                case 'printer_status_update':
-                    this.updatePrinterStatus(data.printer_id, data.status);
-                    break;
-                case 'new_activity':
-                    this.addNewActivity(data.activity);
-                    break;
-                case 'stats_update':
-                    this.updateStats(data.stats);
-                    break;
-                default:
-                    console.log('Unbekannter WebSocket-Update-Typ:', data.type);
-            }
-        }
-        
-        async refreshDashboard() {
-            if (this.isUpdating) return;
-            
-            this.isUpdating = true;
-            const refreshBtn = document.getElementById('refreshDashboard');
-            
-            try {
-                // Button-Status aktualisieren
-                if (refreshBtn) {
-                    refreshBtn.disabled = true;
-                    refreshBtn.innerHTML = `
-                        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        <span>Aktualisiert...</span>
-                    `;
-                }
-                
-                // Vollständige Seitenaktualisierung
-                window.location.reload();
-                
-            } catch (error) {
-                console.error('Fehler beim Aktualisieren:', error);
-                this.showToast('Fehler beim Aktualisieren des Dashboards', 'error');
-            } finally {
-                this.isUpdating = false;
-                
-                // Button zurücksetzen
-                if (refreshBtn) {
-                    refreshBtn.disabled = false;
-                    refreshBtn.innerHTML = `
-                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                        </svg>
-                        <span>Aktualisieren</span>
-                    `;
-                }
-            }
-        }
-        
-        async updateDashboardData() {
-            if (this.isUpdating) return;
-            
-            this.isUpdating = true;
-            
-            try {
-                // Stille Hintergrund-Updates ohne vollständige Neuladen
-                const responses = await Promise.all([
-                    fetch('/api/dashboard/stats'),
-                    fetch('/api/dashboard/active-jobs'),
-                    fetch('/api/dashboard/printers'),
-                    fetch('/api/dashboard/activities')
-                ]);
-                
-                const [statsData, jobsData, printersData, activitiesData] = await Promise.all(
-                    responses.map(r => r.json())
-                );
-                
-                // UI-Updates
-                this.updateStats(statsData);
-                this.updateActiveJobs(jobsData);
-                this.updatePrinters(printersData);
-                this.updateActivities(activitiesData);
-                
-                console.log('🔄 Dashboard-Daten erfolgreich aktualisiert');
-                
-            } catch (error) {
-                console.error('Fehler beim Laden der Dashboard-Daten:', error);
-                // Fehlschlag stumm - verwende WebSocket oder warte auf nächste Aktualisierung
-            } finally {
-                this.isUpdating = false;
-            }
-        }
-        
-        updateJobStatus(jobId, status, progress) {
-            const jobRow = document.querySelector(`tr[data-job-id="${jobId}"]`);
-            if (jobRow) {
-                // Status-Indikator aktualisieren
-                const statusIndicator = jobRow.querySelector('.mb-status-indicator');
-                const statusText = jobRow.querySelector('.text-sm.font-medium');
-                const progressBar = jobRow.querySelector('.mb-progress-bar');
-                const progressText = jobRow.querySelector('.text-xs.text-right');
-                
-                if (statusIndicator) {
-                    statusIndicator.className = `mb-status-indicator ${this.getStatusClass(status)}`;
-                }
-                
-                if (statusText) {
-                    statusText.textContent = this.getStatusText(status);
-                }
-                
-                if (progressBar && progress !== undefined) {
-                    progressBar.style.width = `${progress}%`;
-                }
-                
-                if (progressText && progress !== undefined) {
-                    progressText.textContent = `${progress}%`;
-                }
-                
-                // Animation für Updates
-                jobRow.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
-                setTimeout(() => {
-                    jobRow.style.backgroundColor = '';
-                }, 1000);
-            }
-        }
-        
-        updatePrinterStatus(printerId, status) {
-            const printerCard = document.querySelector(`[data-printer-id="${printerId}"]`);
-            if (printerCard) {
-                const statusIndicator = printerCard.querySelector('.mb-status-indicator');
-                const statusText = printerCard.querySelector('.text-sm.font-medium:last-child');
-                
-                if (statusIndicator) {
-                    statusIndicator.className = `mb-status-indicator ${this.getStatusClass(status)}`;
-                }
-                
-                if (statusText) {
-                    statusText.textContent = this.getStatusText(status);
-                }
-                
-                // Animation für Updates
-                printerCard.style.transform = 'scale(1.02)';
-                setTimeout(() => {
-                    printerCard.style.transform = 'scale(1)';
-                }, 300);
-            }
-        }
-        
-        addNewActivity(activity) {
-            const activitiesContainer = document.querySelector('.space-y-3');
-            if (activitiesContainer) {
-                const newActivity = document.createElement('div');
-                newActivity.className = 'mb-activity-item pl-4 py-3 opacity-0';
-                newActivity.innerHTML = `
-                    <div class="flex items-center justify-between">
-                        <div class="flex-1">
-                            <p class="text-sm text-slate-700 dark:text-slate-300">${activity.description}</p>
-                            <p class="text-xs text-slate-500 dark:text-slate-400">${activity.time}</p>
-                        </div>
-                    </div>
-                `;
-                
-                // Am Anfang einfügen
-                activitiesContainer.insertBefore(newActivity, activitiesContainer.firstChild);
-                
-                // Animation
-                setTimeout(() => {
-                    newActivity.style.opacity = '1';
-                    newActivity.style.transition = 'opacity 0.5s ease';
-                }, 100);
-                
-                // Alte Aktivitäten entfernen (max 10)
-                const activities = activitiesContainer.querySelectorAll('.mb-activity-item');
-                if (activities.length > 10) {
-                    activities[activities.length - 1].remove();
-                }
-            }
-        }
-        
-        updateStats(stats) {
-            // Statistik-Karten aktualisieren mit Animation
-            const statValues = document.querySelectorAll('.stat-value');
-            
-            const statsMapping = [
-                { element: statValues[0], value: stats.active_jobs_count },
-                { element: statValues[1], value: stats.available_printers_count },
-                { element: statValues[2], value: stats.total_jobs_count },
-                { element: statValues[3], value: `${stats.success_rate}%` }
-            ];
-            
-            statsMapping.forEach(({ element, value }) => {
-                if (element && element.textContent !== value.toString()) {
-                    this.animateValueChange(element, value);
-                }
-            });
-        }
-        
-        animateValueChange(element, newValue) {
-            element.style.transform = 'scale(1.1)';
-            element.style.transition = 'transform 0.3s ease';
-            
-            setTimeout(() => {
-                element.textContent = newValue;
-                element.style.transform = 'scale(1)';
-            }, 150);
-        }
-        
-        animateCounters() {
-            // Initialanimation für Counter
-            const counters = document.querySelectorAll('.stat-value');
-            counters.forEach((counter, index) => {
-                const finalValue = parseInt(counter.textContent) || 0;
-                if (finalValue > 0) {
-                    let currentValue = 0;
-                    const increment = finalValue / 30; // 30 Schritte
-                    
-                    const timer = setInterval(() => {
-                        currentValue += increment;
-                        if (currentValue >= finalValue) {
-                            counter.textContent = finalValue + (counter.textContent.includes('%') ? '%' : '');
-                            clearInterval(timer);
-                        } else {
-                            counter.textContent = Math.floor(currentValue) + (counter.textContent.includes('%') ? '%' : '');
-                        }
-                    }, 50 + (index * 100)); // Verzögerung zwischen Countern
-                }
-            });
-        }
-        
-        getStatusClass(status) {
-            const statusClasses = {
-                'running': 'mb-status-busy',
-                'completed': 'mb-status-online',
-                'failed': 'mb-status-offline',
-                'paused': 'mb-status-idle',
-                'queued': 'mb-status-idle',
-                'online': 'mb-status-online',
-                'offline': 'mb-status-offline',
-                'busy': 'mb-status-busy',
-                'idle': 'mb-status-idle'
-            };
-            return statusClasses[status] || 'mb-status-idle';
-        }
-        
-        getStatusText(status) {
-            const statusTexts = {
-                'running': 'Druckt',
-                'completed': 'Abgeschlossen',
-                'failed': 'Fehlgeschlagen',
-                'paused': 'Pausiert',
-                'queued': 'Warteschlange',
-                'online': 'Online',
-                'offline': 'Offline',
-                'busy': 'Beschäftigt',
-                'idle': 'Bereit'
-            };
-            return statusTexts[status] || 'Unbekannt';
-        }
-        
-        updateThemeElements(isDark) {
-            // Theme-spezifische Updates
-            console.log(`🎨 Dashboard Theme aktualisiert: ${isDark ? 'Dark' : 'Light'} Mode`);
-            
-            // Spezielle Animationen für Theme-Wechsel
-            const cards = document.querySelectorAll('.dashboard-card');
-            cards.forEach(card => {
-                card.style.transition = 'all 0.3s ease';
-            });
-        }
-        
-        showToast(message, type = 'info') {
-            // Toast-Benachrichtigung anzeigen
-            if (window.MYP && window.MYP.UI && window.MYP.UI.ToastManager) {
-                const toast = new window.MYP.UI.ToastManager();
-                toast.show(message, type, 5000);
-            } else {
-                console.log(`Toast: ${message}`);
-            }
-        }
-        
-        // Cleanup beim Verlassen der Seite
-        cleanup() {
-            if (this.autoUpdateTimer) {
-                clearInterval(this.autoUpdateTimer);
-            }
-            
-            if (this.wsConnection) {
-                this.wsConnection.close();
-            }
-        }
-    }
-    
-    // Dashboard Manager initialisieren
-    document.addEventListener('DOMContentLoaded', function() {
-        window.dashboardManager = new DashboardManager();
-        
-        // Cleanup beim Verlassen
-        window.addEventListener('beforeunload', () => {
-            if (window.dashboardManager) {
-                window.dashboardManager.cleanup();
-            }
-        });
-    });
-</script>
 {% endblock %} 
\ No newline at end of file
diff --git a/backend/templates/guest_request.html b/backend/templates/guest_request.html
index 4cd68942a..b0b3993b4 100644
--- a/backend/templates/guest_request.html
+++ b/backend/templates/guest_request.html
@@ -304,12 +304,12 @@
                 </div>
                 <div>
                     <h1 class="text-4xl font-bold text-mercedes-black dark:text-white tracking-tight">Gastanfrage</h1>
-                    <p class="text-mercedes-gray dark:text-slate-400 mt-1 text-lg">Stellen Sie Ihre 3D-Druckauftrag Anfrage mit Mercedes-Benz Qualitätsstandards</p>
+                    <p class="text-mercedes-gray dark:text-slate-400 mt-1 text-lg">3D-Druckauftrag Anfrage stellen</p>
                     <div class="flex items-center mt-2 text-sm text-mercedes-blue">
                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                         </svg>
-                        <span>Bearbeitungszeit: 24-48 Stunden</span>
+                        <span>Anträge werden manuell genehmigt</span>
                     </div>
                 </div>
             </div>
@@ -357,48 +357,6 @@
         </div>
     </div>
 
-    <!-- Enhanced Info Banner -->
-    <div class="dashboard-card p-6">
-        <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-blue-500 text-white rounded-xl flex items-center justify-center flex-shrink-0">
-                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
-                </svg>
-            </div>
-            <div class="flex-1">
-                <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">
-                    Mercedes-Benz Qualitätsstandards
-                </h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800 dark:text-blue-200">
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                        </svg>
-                        <span>Sorgfältige Qualitätsprüfung aller Anträge</span>
-                    </div>
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                        </svg>
-                        <span>Bearbeitungszeit: 24-48 Stunden</span>
-                    </div>
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                        </svg>
-                        <span>Professionelle 3D-Druck-Qualität</span>
-                    </div>
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-                        </svg>
-                        <span>Kostenlose Beratung inklusive</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <!-- Enhanced Form Container -->
     <div class="dashboard-card p-8">
         <div class="mb-8">
diff --git a/backend/templates/index.html b/backend/templates/index.html
index 7e86875b6..4be8db204 100644
--- a/backend/templates/index.html
+++ b/backend/templates/index.html
@@ -387,7 +387,7 @@
                     </span>
                 </h1>
                 <p class="text-xl md:text-2xl text-blue-100 max-w-4xl mx-auto leading-relaxed mb-4">
-                    <strong>Das Beste oder nichts</strong> - Professionelles 3D-Druck Management für Mercedes-Benz
+                    <strong>Das Beste oder nichts</strong> - Professionelles 3D-Druck Management für die Mercedes-Benz Ausbildungsstätte Werk Berlin
                 </p>
                 <p class="text-lg md:text-xl text-blue-200 max-w-3xl mx-auto leading-relaxed mb-12">
                     Präzision in jeder Schicht. Innovation in jedem Detail. Mercedes-Benz Qualität in der additiven Fertigung.
@@ -421,27 +421,6 @@
                     </a>
                 </div>
                 
-                <!-- Trust Indicators -->
-                <div class="flex flex-wrap justify-center items-center gap-8 text-blue-200 text-sm">
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.99-2a9 9 0 11-2.83-3.5"/>
-                        </svg>
-                        99.9% Verfügbarkeit
-                    </div>
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-                        </svg>
-                        ISO 27001 zertifiziert
-                    </div>
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-                        </svg>
-                        24/7 Überwachung
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -453,8 +432,8 @@
                 Mercedes-Benz Qualität in der 3D-Produktion
             </h2>
             <p class="text-xl text-mercedes-gray dark:text-slate-400 max-w-4xl mx-auto leading-relaxed">
-                Unsere MYP Platform vereint höchste Präzision mit intelligenter Steuerung für professionelle Fertigungsprozesse. 
-                Erleben Sie, was <strong>Mercedes-Benz Standards</strong> in der additiven Fertigung bedeuten.
+                Unsere "Manage-Your-Printer" (MYP) Platform vereint höchste Präzision mit intelligenter Steuerung für die Fertigungsprozesse in der Ausbildungsstätte. 
+                Für kontinuierliche <strong>Mercedes-Benz Standards</strong> in der Fertigung.
             </p>
         </div>
 
@@ -468,7 +447,7 @@
                 </div>
                 <h3 class="text-2xl font-bold text-mercedes-black dark:text-white mb-4">Intelligente Druckersteuerung</h3>
                 <p class="text-mercedes-gray dark:text-slate-400 leading-relaxed">
-                    Vollautomatische Verwaltung und Überwachung aller 3D-Drucker mit Echtzeit-Status 
+                    Automatisch Verwaltung und Überwachung aller 3D-Drucker mit Echtzeit-Status 
                     und optimierter Ressourcenverteilung für maximale Effizienz und Qualität.
                 </p>
                 <div class="mt-6 flex justify-center">
@@ -490,8 +469,8 @@
                 </div>
                 <h3 class="text-2xl font-bold text-mercedes-black dark:text-white mb-4">Präzise Auftragsplanung</h3>
                 <p class="text-mercedes-gray dark:text-slate-400 leading-relaxed">
-                    Strukturierte Produktionsplanung mit Mercedes-Benz Standards für termingerechte und qualitätsorientierte Fertigung. 
-                    Effiziente Ressourcenplanung und Druckerwarteschlangen-Management.
+                    Strukturierte Produktionsplanung mit Mercedes-Benz Standards für termingerechte und qualitätsorientierte Fertigung - 
+                    Effizientes Druckerwarteschlangen-Management.
                 </p>
                 <div class="mt-6 flex justify-center">
                     <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
@@ -512,7 +491,7 @@
                 </div>
                 <h3 class="text-2xl font-bold text-mercedes-black dark:text-white mb-4">Umfassende Analytik</h3>
                 <p class="text-mercedes-gray dark:text-slate-400 leading-relaxed">
-                    Detaillierte Produktionsstatistiken und Leistungsanalysen für kontinuierliche Optimierung und Qualitätssicherung. 
+                    Detaillierte Produktionsstatistiken und Leistungsanalysen zur Qualitätssicherung. 
                     Lokale Datenauswertung für fundierte Entscheidungen.
                 </p>
                 <div class="mt-6 flex justify-center">