feat: Enhance package card styling and improve chat responsiveness

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>