diff --git a/Website/templates/appointments.html b/Website/templates/appointments.html
index 8550cfe..29a7e76 100644
--- a/Website/templates/appointments.html
+++ b/Website/templates/appointments.html
@@ -204,21 +204,64 @@
         margin-top: 0.4rem;
     }
 
+    /* Highlight für Premium/Schulträger Angebot */
+    .package-card--highlight {
+        border: 2px solid #1a748c;
+        background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
+        box-shadow: 0 20px 48px rgba(26, 116, 140, 0.12);
+        transform: scale(1.01);
+    }
+
+    .package-card--highlight:hover {
+        border-color: #135567;
+        box-shadow: 0 24px 54px rgba(26, 116, 140, 0.18);
+        transform: translateY(-3px) scale(1.01);
+    }
+
+    .package-card--highlight .package-card__tag {
+        background: #1a748c;
+        color: #ffffff;
+    }
+
     @media (max-width: 760px) {
         .booking-hero {
-            padding: 1.6rem;
+            padding: 1.5rem 1.2rem;
+            border-radius: 18px;
+        }
+
+        .booking-hero h1 {
+            font-size: 1.8rem;
+        }
+
+        .packages-grid {
+            grid-template-columns: 1fr;
+            gap: 1.2rem;
         }
 
         .package-card {
-            padding: 1.4rem;
+            padding: 1.4rem 1.2rem;
+            border-radius: 18px;
+            gap: 1rem;
         }
 
         .package-card__header {
-            align-items: stretch;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.6rem;
         }
 
         .package-card__price {
             justify-content: flex-start;
+            margin-top: 0.2rem;
+        }
+
+        .package-card__price span {
+            font-size: 2.2rem;
+        }
+
+        .btn {
+            padding: 1rem 1.2rem;
+            font-size: 1.05rem;
         }
     }
 </style>
@@ -291,7 +334,7 @@
         </div>
     </article>
 
-    <article class="package-card">
+    <article class="package-card package-card--highlight">
         <div class="package-card__header">
             <div>
                 <span class="package-card__tag">Premium</span>
diff --git a/Website/templates/base.html b/Website/templates/base.html
index b6f62d1..d835c02 100644
--- a/Website/templates/base.html
+++ b/Website/templates/base.html
@@ -3,7 +3,7 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -45,10 +45,19 @@
         }
         * { box-sizing: border-box; }
 
+        /* Verhinderung von iOS Auto-Zoom bei Inputs */
+        input, textarea, select, button {
+            font-family: inherit;
+            font-size: 16px;
+        }
+
         html,
         body {
             margin: 0;
             padding: 0;
+            padding-bottom: env(safe-area-inset-bottom);
+            padding-left: env(safe-area-inset-left);
+            padding-right: env(safe-area-inset-right);
             min-height: 100%;
             font-family: "Public Sans", system-ui, sans-serif;
             color: var(--text-main);
diff --git a/Website/templates/chat.html b/Website/templates/chat.html
index b67f732..ca683f5 100644
--- a/Website/templates/chat.html
+++ b/Website/templates/chat.html
@@ -28,16 +28,23 @@
 
 <style>
 .panel { margin-bottom: 1rem; }
-.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
-.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 440px; overflow-y: auto; padding: 1rem 0; }
-.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
+.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; }
+.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 50vh; overflow-y: auto; padding: 1rem 0; -webkit-overflow-scrolling: touch; }
+.message { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
 .message.admin { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
 .message.user { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
 .message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
 .message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
 .message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
 .composer { display: flex; gap: 0.6rem; align-items: flex-end; }
-textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; }
+textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; font-size: 16px; }
 button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
+
+@media (max-width: 600px) {
+    .composer { flex-direction: column; align-items: stretch; }
+    textarea { width: 100%; border-radius: 16px; }
+    button { width: 100%; padding: 0.8rem; }
+    .chat-box { padding: 0.8rem; border-radius: 12px; }
+}
 </style>
 {% endblock %}
