diff --git a/resources/[tools]/nordi_dj/html/style.css b/resources/[tools]/nordi_dj/html/style.css
index 361085036..8553a285c 100644
--- a/resources/[tools]/nordi_dj/html/style.css
+++ b/resources/[tools]/nordi_dj/html/style.css
@@ -22,18 +22,25 @@ body {
 
 /* DJ Interface Container */
 #dj-interface {
-    width: 100vw;
-    height: 100vh;
+    width: 1000px; /* Standard-Breite */
+    height: 700px; /* Standard-Höhe */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
     background: -webkit-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
     background: -moz-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
-    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    transition: opacity 0.3s ease;
+    min-width: 800px;
+    min-height: 600px;
+    max-width: 100vw;
+    max-height: 100vh;
 }
 
 /* Header */
@@ -47,16 +54,12 @@ body {
     -webkit-animation: gradientShift 3s ease infinite;
     -moz-animation: gradientShift 3s ease infinite;
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: space-between;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     padding: 0 20px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    cursor: move;
+    user-select: none;
 }
 
 @keyframes gradientShift {
@@ -79,11 +82,7 @@ body {
 
 .logo {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 10px;
     font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif;
     font-weight: 900;
@@ -93,18 +92,12 @@ body {
 
 .status-bar {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     gap: 20px;
 }
 
 .status-item {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 5px;
     font-weight: 600;
 }
@@ -115,14 +108,8 @@ body {
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
     cursor: pointer;
     transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
@@ -139,21 +126,16 @@ body {
 /* Main DJ Console */
 .dj-console {
     flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     padding: 20px;
     gap: 20px;
     min-height: 0;
+    overflow: auto;
 }
 
 /* Decks */
 .deck {
     flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
     background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e);
     background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
@@ -164,18 +146,14 @@ body {
         inset -5px -5px 15px rgba(255, 255, 255, 0.1),
         0 10px 30px rgba(0, 0, 0, 0.3);
     border: 2px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
 }
 
 .deck-header {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     justify-content: space-between;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 2px solid rgba(255, 255, 255, 0.1);
@@ -190,8 +168,6 @@ body {
 
 .deck-controls {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     gap: 10px;
 }
 
@@ -234,6 +210,7 @@ body {
 /* Vinyl Plattenspieler */
 .turntable {
     margin-bottom: 20px;
+    flex-shrink: 0;
 }
 
 .vinyl-container {
@@ -294,14 +271,8 @@ body {
     background: -webkit-linear-gradient(145deg, #ff6b6b, #4ecdc4);
     background: -moz-linear-gradient(145deg, #ff6b6b, #4ecdc4);
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
     box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
 }
 
@@ -318,14 +289,8 @@ body {
     width: 70px;
     height: 70px;
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
     text-align: center;
     font-size: 10px;
     font-weight: 600;
@@ -412,14 +377,8 @@ body {
 /* Turntable Controls */
 .turntable-controls {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: space-between;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     gap: 15px;
 }
 
@@ -484,14 +443,8 @@ body {
 
 .pitch-slider {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 5px;
 }
 
@@ -572,6 +525,7 @@ body {
 /* Track Info */
 .track-info {
     text-align: center;
+    margin-bottom: 10px;
 }
 
 .track-title {
@@ -597,6 +551,7 @@ body {
 /* Mixer */
 .mixer {
     width: 400px;
+    min-width: 300px;
     background: linear-gradient(145deg, #2a2a3e, #1e1e2e);
     background: -webkit-linear-gradient(145deg, #2a2a3e, #1e1e2e);
     background: -moz-linear-gradient(145deg, #2a2a3e, #1e1e2e);
@@ -607,6 +562,8 @@ body {
         inset -5px -5px 15px rgba(255, 255, 255, 0.1),
         0 10px 30px rgba(0, 0, 0, 0.3);
     border: 2px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
 }
 
 .mixer-header {
@@ -630,11 +587,7 @@ body {
 
 .crossfader-container {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 15px;
     margin-bottom: 10px;
 }
@@ -648,8 +601,6 @@ body {
 
 #crossfader {
     flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     height: 8px;
     background: linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
     background: -webkit-linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
@@ -691,12 +642,8 @@ body {
 
 .crossfader-curve {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     gap: 5px;
     justify-content: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
 }
 
 .curve-btn {
@@ -725,16 +672,12 @@ body {
 /* Channel Controls */
 .channel-controls {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     gap: 20px;
     margin-bottom: 30px;
 }
 
 .channel {
     flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     background: linear-gradient(145deg, #1a1a2e, #0f0f23);
     background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23);
     background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23);
@@ -764,25 +707,15 @@ body {
 /* EQ Section */
 .eq-section {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     gap: 15px;
     margin-bottom: 20px;
 }
 
 .eq-knob {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 5px;
 }
 
@@ -841,14 +774,8 @@ body {
 /* Volume Faders */
 .volume-fader, .master-volume {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 10px;
     margin-bottom: 15px;
 }
@@ -1016,14 +943,8 @@ body {
 
 .effect-knob {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     gap: 5px;
 }
 
@@ -1035,8 +956,6 @@ body {
     background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
     border-top: 2px solid rgba(255, 255, 255, 0.1);
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     padding: 15px;
     gap: 20px;
 }
@@ -1044,26 +963,20 @@ body {
 /* Playlist Browser */
 .playlist-browser {
     flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
     background: linear-gradient(145deg, #0f0f23, #1a1a2e);
     background: -webkit-linear-gradient(145deg, #0f0f23, #1a1a2e);
     background: -moz-linear-gradient(145deg, #0f0f23, #1a1a2e);
     border-radius: 15px;
     padding: 15px;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
 }
 
 .browser-header {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     justify-content: space-between;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -1078,11 +991,7 @@ body {
 .search-box {
     position: relative;
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
 }
 
 .search-box i {
@@ -1107,7 +1016,7 @@ body {
 }
 
 .track-list {
-    height: 120px;
+    flex: 1;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: #4ecdc4 transparent;
@@ -1235,14 +1144,8 @@ body {
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     justify-content: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
     z-index: 1000;
 }
 
@@ -1260,14 +1163,8 @@ body {
 
 .modal-header {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     justify-content: space-between;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     align-items: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 2px solid rgba(255, 255, 255, 0.1);
@@ -1336,12 +1233,8 @@ body {
 
 .modal-actions {
     display: flex;
-    display: -webkit-flex;
-    display: -ms-flexbox;
     gap: 15px;
     justify-content: flex-end;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
     margin-top: 30px;
 }
 
@@ -1384,12 +1277,72 @@ body {
     box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4);
 }
 
+/* Notification */
+.notification {
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 10px;
+    color: white;
+    font-weight: 600;
+    z-index: 10000;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+}
+
+.notification-success {
+    background: #4ecdc4;
+}
+
+.notification-error {
+    background: #ff6b6b;
+}
+
+.notification-warning {
+    background: #feca57;
+}
+
+.notification-info {
+    background: #45b7d1;
+}
+
+/* Resize Handle */
+.resize-handle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    cursor: nwse-resize;
+    color: rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    transition: color 0.3s ease;
+}
+
+.resize-handle:hover {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Animation für Ein- und Ausblenden */
+#dj-interface.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+#dj-interface:not(.hidden) {
+    opacity: 1;
+    pointer-events: auto;
+}
+
 /* Responsive Design */
 @media (max-width: 1200px) {
     .dj-console {
         flex-direction: column;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
         gap: 15px;
     }
     
@@ -1410,6 +1363,61 @@ body {
         width: 150px;
         height: 150px;
     }
+    
+    .bottom-panel {
+        flex-direction: column;
+        height: auto;
+    }
+    
+    .recording-section {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    #dj-interface {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+    
+    .dj-header {
+        height: 50px;
+    }
+    
+    .logo {
+        font-size: 18px;
+    }
+    
+    .turntable-controls {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .channel-controls {
+        flex-direction: column;
+    }
+    
+    .master-section {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+    
+    .master-volume {
+        flex-direction: row;
+    }
+    
+.master-volume input[type="range"]::-moz-range-thumb {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: #ffffff;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+    border: none;
+}
 }
 
 /* Animations */
@@ -1446,3 +1454,4 @@ body {
 .p-10 { padding: 10px; }
 .p-15 { padding: 15px; }
 .p-20 { padding: 20px; }
+