Mobile Ansicht angepasst, um die Textgröße zu reduzieren und Überlauf mit Ellipsen zu verhindern.

EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@@ -38,7 +38,7 @@
                     <div class="col p-0 m-0">
                         <div class="card-body p-0 m-0">
                             <h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
-                            <p class="card-text p-0 m-0">@($"Sie müssen {(pages.Count())} Vorgang zu unterzeichen. Bitte prüfen Sie die Seite {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
+                            <p class="card-text p-0 m-0">@($"Sie müssen {(pages.Count())} Vorgang unterzeichen. Bitte prüfen Sie die Seite {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
                             <p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
                         </div>
                     </div>

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -190,3 +190,68 @@ footer#page-footer a:focus {
 #langDropdownMenuButton{
     min-width: 4vw;
 }
+
+/* Additional styles for better mobile responsiveness */
+@media (max-width: 767px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .navbar-toggler {
+        margin: 0 0 0.5rem 0;
+    }
+
+    .navbar-brand {
+        font-size: 0.5rem;
+        text-align: center;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .collapse .card-text , .collapsing .card-text {
+        font-size: 0.7rem; /* Font size reduced */
+        padding-left:2rem;
+    }
+
+    .collapse.show {
+        height: 100%;
+    }
+
+    .sender-card .card-body {
+        padding: 0.5rem;
+    }
+
+    .btn_group {
+        position: fixed;
+        flex-direction: row;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        margin: 0;
+        margin-right: 1rem;
+    }
+
+    .btn_complete, .btn_refresh {
+        padding: 0.5rem;
+        font-size: 0.9rem;
+        height: 100%; /* Adjust height for better fit */
+        width: 10rem; /* Full width for better touch area */
+        margin-bottom: 0.5rem; /* Space between buttons */
+    }
+
+    .img {
+        width: 1.2rem;
+        height: 100%;
+    }
+
+    .page {
+        margin-top: 1rem;
+        max-width: 90%;
+        padding: 0.5rem;
+    }
+
+    .page section {
+        max-width: 90%;
+    }
+}