diff --git a/coolify_deploy b/coolify_deploy
new file mode 100644
index 0000000..a02d649
--- /dev/null
+++ b/coolify_deploy
@@ -0,0 +1,7 @@
+-----BEGIN OPENSSH PRIVATE KEY-----
+b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
+QyNTUxOQAAACC6CkgrJEZUHTAki21f2ma4666irzQ6IgRf6Qy2M+4eUwAAAJA8rGK+PKxi
+vgAAAAtzc2gtZWQyNTUxOQAAACC6CkgrJEZUHTAki21f2ma4666irzQ6IgRf6Qy2M+4eUw
+AAAEBcTWANGTbHIif5mzTMIzLYidn61a+T5MuSS5NQ95Iz+LoKSCskRlQdMCSLbV/aZrjr
+rqKvNDoiBF/pDLYz7h5TAAAAB2Nvb2xpZnkBAgMEBQY=
+-----END OPENSSH PRIVATE KEY-----
diff --git a/coolify_deploy.pub b/coolify_deploy.pub
new file mode 100644
index 0000000..091e562
--- /dev/null
+++ b/coolify_deploy.pub
@@ -0,0 +1 @@
+ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILoKSCskRlQdMCSLbV/aZrjrrqKvNDoiBF/pDLYz7h5T coolify
diff --git a/public/apps/comic.html b/public/apps/comic.html
index e77f05a..190165b 100644
--- a/public/apps/comic.html
+++ b/public/apps/comic.html
@@ -1,54 +1,29 @@
-<!DOCTYPE html>
-<html lang="de">
 <head>
     <meta charset="UTF-8">
     <title>Comic Studio</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <script src="../js/tailwind.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script> <style>
-        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        
-        html {
-            width: 100%; height: 100%;
-            background-color: #facc15;
-        }
 
-        body {
-            /* Fixiertes Layout für maximale Stabilität */
-            position: fixed; 
-            top: 0; left: 0; right: 0; bottom: 0;
-            margin: 0;
-            
-            background-color: #facc15;
-            color: black;
-            overflow: hidden !important;
+    <style>
+        /* CSS Inhalt bleibt gleich ... */
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        body { 
+            background-color: #facc15; 
+            overflow: hidden; 
             user-select: none; 
-            touch-action: none;
-            font-family: sans-serif;
+            touch-action: none; 
+            transition: background-color 0.5s;
             animation: fadeIn 0.4s ease-out;
-            transition: background-color 0.3s ease;
-            
-            box-sizing: border-box;
-            
-            /* OPTIMIERUNG: Näher an den Rand rutschen */
-            /* Oben: Notch + 10px (statt vorher 60px pauschal) */
-            padding-top: calc(10px + env(safe-area-inset-top));
-            
-            /* Unten: Home-Balken + 20px */
-            padding-bottom: max(20px, env(safe-area-inset-bottom));
         }
         
         .font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
         .no-scrollbar::-webkit-scrollbar { display: none; }
 
-        /* Sprechblasen */
         .bubble-container { position: absolute; z-index: 20; display: flex; flex-direction: column; align-items: center; left: 50%; bottom: 25%; transform: translateX(-50%); }
         .bubble-handle { background-color: #3b82f6; color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: move; box-shadow: 0 4px 6px rgba(0,0,0,0.3); margin-bottom: -15px; z-index: 30; font-size: 24px; touch-action: none; border: 2px solid white; }
         .bubble-text { background: white; border: 4px solid black; border-radius: 2rem; padding: 1rem 1.5rem; min-width: 160px; max-width: 280px; text-align: center; font-family: 'Comic Sans MS', sans-serif; font-size: 1.5rem; line-height: 1.2; box-shadow: 8px 8px 0px rgba(0,0,0,0.2); outline: none; cursor: text; }
 
-        button:active { transform: scale(0.95); transition: transform 0.1s; }
-
         @media print {
             @page { size: landscape; margin: 0mm; }
             body * { visibility: hidden; }
diff --git a/public/index.html b/public/index.html
index 07e8511..d57db1d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,48 +3,40 @@
 <head>
     <meta charset="UTF-8">
     <title>MedienStation Hub</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="mobile-web-app-capable" content="yes">
     
     <script src="js/tailwind.js"></script>
+    
+    <script>
+        // Tailwind Konfiguration
+        tailwind.config = { theme: { extend: { colors: { 'zone-audio': '#f43f5e', 'zone-video': '#0ea5e9', 'zone-story': '#eab308', 'zone-tech': '#10b981' } } } } 
+    </script>
+
     <style>
-        /* Globaler Reset */
-        html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
-        
         body { 
             background-color: #0f172a; 
             color: white; 
-            font-family: sans-serif;
+            overflow: hidden; 
             user-select: none; 
             -webkit-user-select: none; 
             touch-action: manipulation;
+            animation: fadeIn 0.5s ease-out; 
         }
         
         .font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
-        .app-card { cursor: pointer; transition: transform 0.1s; }
-        .app-card:active { transform: scale(0.95); filter: brightness(1.2); }
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-        
-        /* Animationen */
         .fade-in { animation: fadeIn 0.5s ease-out; }
         @keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
+        
+        .app-card { cursor: pointer; }
+        .app-card:active { transform: scale(0.95); filter: brightness(1.2); transition: transform 0.1s; }
+        
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        
+        /* Hilfsklasse für absolute Zentrierung */
+        .center-absolute { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
 
-        /* Grid & Ghost Mode für QR Modal */
-        #qr-modal {
-            display: grid !important; 
-            place-items: center; 
-            position: fixed;
-            top: 0; left: 0; width: 100vw; height: 100vh;
-            z-index: 99999;
-            background-color: rgba(0,0,0,0.85);
-            backdrop-filter: blur(5px);
-            opacity: 0;
-            pointer-events: none; 
-            transition: opacity 0.3s ease-in-out;
-        }
-        #qr-modal.modal-visible {
-            opacity: 1;
-            pointer-events: auto;
-        }
+        @media print { body * { visibility: hidden; } #print-test, #print-test * { visibility: visible; } #print-test { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex !important; justify-content: center; align-items: center; background: white; color: black; z-index: 99999; } }
     </style>
 </head>
 <body class="p-4 pt-8 box-border fade-in relative" onpointerdown="resetHubTimer()" ontouchstart="resetHubTimer()">
