feat(ui): Pakete fuer Firmenkunden als Auswahl-Karten im Formular

Die drei Pakete standen doppelt: als Deko-Kacheln (mit grossem
Waben-Wasserzeichen) ueber dem Formular und darin noch einmal als
Auswahlliste. Jetzt waehlt man sie direkt im Formular als Karten mit
sichtbarem Auswahl- und Fokuszustand; die Kacheln entfallen. Feldname
und Werte (package = KLASSIK/GESCHENK/INDIVIDUELL) sind unveraendert.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/components/business-inquiry-form.tsx

@@ -86,19 +86,30 @@ export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: s
         <TextField name="desiredDeliveryDate" label={t.businessInquiryForm.deliveryDateLabel} type="date" />
       </div>
 
-      <label className="block text-sm">
-        <span className="text-ink/70">{t.businessInquiryForm.packageLabel}</span>
-        <select
-          name="package"
-          className="mt-1 w-full border border-ink/20 bg-background px-4 py-3"
-        >
-          {t.unternehmenPage.packages.map((p) => (
-            <option key={p.key} value={p.key}>
-              {p.title} — {p.text}
-            </option>
+      {/* Die Pakete als waehlbare Karten direkt im Formular — frueher standen
+          sie als Deko-Kacheln ueber dem Formular und darin noch einmal als
+          Auswahlliste. Gleicher Feldname und dieselben Werte wie zuvor. */}
+      <fieldset className="text-sm">
+        <legend className="text-ink/70">{t.businessInquiryForm.packageLabel}</legend>
+        <div className="mt-2 grid gap-3 sm:grid-cols-3">
+          {t.unternehmenPage.packages.map((p, i) => (
+            <label
+              key={p.key}
+              className="group relative flex cursor-pointer flex-col border border-ink/20 bg-background p-4 transition-colors duration-300 hover:border-ink/40 has-[:checked]:border-forest has-[:checked]:bg-forest/[0.04] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-honey-dark"
+            >
+              <input type="radio" name="package" value={p.key} defaultChecked={i === 0} className="sr-only" />
+              <span className="flex items-center justify-between gap-3">
+                <span className="font-serif text-xl text-forest">{p.title}</span>
+                <span
+                  aria-hidden="true"
+                  className="h-3.5 w-3.5 flex-shrink-0 rounded-full border border-ink/30 transition-[border-width,border-color] duration-200 group-has-[:checked]:border-[4.5px] group-has-[:checked]:border-forest"
+                />
+              </span>
+              <span className="mt-2 text-ink/70 leading-relaxed">{p.text}</span>
+            </label>
           ))}
-        </select>
-      </label>
+        </div>
+      </fieldset>
 
       <label className="block text-sm">
         <span className="text-ink/70">{t.businessInquiryForm.messageLabel}</span>