diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
index accdda48..300e6b89 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
@@ -10,6 +10,7 @@
 @implements IAsyncDisposable
 
 <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="css/envelope-viewer.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
 <script src="js/pdf-viewer.js"></script>
 
@@ -65,7 +66,7 @@
             <div class="d-flex justify-content-center align-items-center h-100">
                 <div class="text-center">
                     <div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
-                        <span class="visually-hidden">Lädt...</span>
+                        <span class="visually-hidden">L�dt...</span>
                     </div>
                     <p class="text-white fw-semibold">Dokument wird geladen...</p>
                 </div>
@@ -106,180 +107,6 @@
     </div>
 </div>
 
-<style>
-    .envelope-viewer-layout {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        overflow: hidden;
-        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
-    }
-
-    .envelope-action-bar {
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(20px);
-        border-bottom: 3px solid rgba(126, 34, 206, 0.3);
-        padding: 1.25rem 2rem;
-        flex-shrink: 0;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    }
-
-    .envelope-action-bar__inner {
-        max-width: 1600px;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        gap: 2rem;
-    }
-
-    .envelope-logo svg {
-        filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
-        color: #7e22ce;
-    }
-
-    .envelope-title {
-        font-size: 1.125rem;
-        font-weight: 700;
-        color: #1e293b;
-        letter-spacing: -0.025em;
-    }
-
-    .envelope-key {
-        font-size: 0.8125rem;
-        color: #64748b;
-        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-        font-weight: 500;
-        margin-top: 0.25rem;
-    }
-
-    .pdf-controls, .pdf-navigation {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-    }
-
-    .zoom-level, .page-info {
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: #475569;
-        min-width: 60px;
-        text-align: center;
-    }
-
-    .envelope-content {
-        flex: 1;
-        min-height: 0;
-        padding: 1.5rem;
-        position: relative;
-        overflow: auto;
-    }
-
-    .pdf-viewer-container {
-        height: 100%;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding: 0;
-    }
-
-    .pdf-frame {
-        background: white;
-        border-radius: 16px;
-        box-shadow: 
-            0 25px 50px -12px rgba(0, 0, 0, 0.25),
-            0 0 0 1px rgba(255, 255, 255, 0.1);
-        overflow: auto;
-        position: relative;
-        padding: 2rem;
-        max-height: 100%;
-        width: auto;
-    }
-
-    .pdf-frame::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
-        z-index: 1;
-    }
-
-    .pdf-canvas {
-        display: block;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        margin: 0 auto;
-    }
-
-    .error-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 2rem;
-    }
-
-    .alert {
-        border-radius: 12px;
-        border: none;
-        padding: 2rem;
-        max-width: 600px;
-    }
-
-    .alert-danger {
-        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
-        color: #be123c;
-        border-left: 4px solid #e11d48;
-    }
-
-    .alert-warning {
-        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
-        color: #92400e;
-        border-left: 4px solid #f59e0b;
-    }
-
-    .spinner-border {
-        border-width: 0.35rem;
-    }
-
-    @@media (max-width: 768px) {
-        .envelope-content {
-            padding: 0.75rem;
-        }
-
-        .pdf-frame {
-            border-radius: 12px;
-            padding: 1rem;
-        }
-
-        .envelope-action-bar {
-            padding: 1rem 1.25rem;
-        }
-
-        .envelope-action-bar__inner {
-            flex-wrap: wrap;
-        }
-
-        .envelope-title {
-            font-size: 1rem;
-        }
-
-        .envelope-key {
-            font-size: 0.75rem;
-        }
-
-        .envelope-logo svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        .alert {
-            padding: 1.5rem;
-        }
-    }
-</style>
-
 @code {
     [Parameter] public string? EnvelopeKey { get; set; }
 
@@ -293,7 +120,7 @@
 
     protected override async Task OnInitializedAsync() {
         if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
-            _errorMessage = "Envelope-Schlüssel fehlt.";
+            _errorMessage = "Envelope-Schlüssel fehlt.";
             _isLoading = false;
             return;
         }
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
new file mode 100644
index 00000000..08023802
--- /dev/null
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
@@ -0,0 +1,171 @@
+.envelope-viewer-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+}
+
+.envelope-action-bar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 3px solid rgba(126, 34, 206, 0.3);
+    padding: 1.25rem 2rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.envelope-action-bar__inner {
+    max-width: 1600px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.envelope-logo svg {
+    filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
+    color: #7e22ce;
+}
+
+.envelope-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1e293b;
+    letter-spacing: -0.025em;
+}
+
+.envelope-key {
+    font-size: 0.8125rem;
+    color: #64748b;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+.pdf-controls, .pdf-navigation {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.zoom-level, .page-info {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #475569;
+    min-width: 60px;
+    text-align: center;
+}
+
+.envelope-content {
+    flex: 1;
+    min-height: 0;
+    padding: 1.5rem;
+    position: relative;
+    overflow: auto;
+}
+
+.pdf-viewer-container {
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0;
+}
+
+.pdf-frame {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 
+        0 25px 50px -12px rgba(0, 0, 0, 0.25),
+        0 0 0 1px rgba(255, 255, 255, 0.1);
+    overflow: auto;
+    position: relative;
+    padding: 2rem;
+    max-height: 100%;
+    width: auto;
+}
+
+.pdf-frame::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
+    z-index: 1;
+}
+
+.pdf-canvas {
+    display: block;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
+}
+
+.error-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+}
+
+.alert {
+    border-radius: 12px;
+    border: none;
+    padding: 2rem;
+    max-width: 600px;
+}
+
+.alert-danger {
+    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
+    color: #be123c;
+    border-left: 4px solid #e11d48;
+}
+
+.alert-warning {
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    color: #92400e;
+    border-left: 4px solid #f59e0b;
+}
+
+.spinner-border {
+    border-width: 0.35rem;
+}
+
+@media (max-width: 768px) {
+    .envelope-content {
+        padding: 0.75rem;
+    }
+
+    .pdf-frame {
+        border-radius: 12px;
+        padding: 1rem;
+    }
+
+    .envelope-action-bar {
+        padding: 1rem 1.25rem;
+    }
+
+    .envelope-action-bar__inner {
+        flex-wrap: wrap;
+    }
+
+    .envelope-title {
+        font-size: 1rem;
+    }
+
+    .envelope-key {
+        font-size: 0.75rem;
+    }
+
+    .envelope-logo svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .alert {
+        padding: 1.5rem;
+    }
+}