From 774bc9cf006f8023f2ecede1ac4f62cfdfd630a5 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 26 Sep 2026 02:11:29 +0200
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 src/app/unternehmen/page.tsx             | 19 -------------
 src/components/business-inquiry-form.tsx | 35 ++++++++++++++++--------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/app/unternehmen/page.tsx b/src/app/unternehmen/page.tsx
index b93bd24..480279f 100644
--- a/src/app/unternehmen/page.tsx
+++ b/src/app/unternehmen/page.tsx
@@ -46,25 +46,6 @@ export default async function UnternehmenPage() {
           />
         </ScrollReveal>
 
-        <div className="mt-14 grid sm:grid-cols-3 gap-6">
-          {t.unternehmenPage.packages.map((pkg, i) => (
-            <ScrollReveal key={pkg.key} delay={i * 0.08}>
-              <div className="group relative h-full overflow-hidden border border-ink/10 bg-background p-8 transition-[transform,border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-1 hover:border-honey/60 hover:shadow-[0_22px_40px_-24px_rgba(184,138,68,0.45)]">
-                {/* Grosses Sechseck als Wasserzeichen, das beim Hover einrueckt. */}
-                <svg
-                  viewBox="0 0 24 26"
-                  aria-hidden="true"
-                  className="absolute -right-6 -top-6 h-28 w-28 text-honey/15 transition-transform duration-700 ease-[var(--ease-arrive)] group-hover:-translate-x-2 group-hover:translate-y-2 group-hover:rotate-12"
-                >
-                  <polygon points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7" fill="currentColor" />
-                </svg>
-                <h3 className="relative text-2xl text-forest">{pkg.title}</h3>
-                <p className="relative mt-3 text-sm text-ink/70 leading-relaxed">{pkg.text}</p>
-              </div>
-            </ScrollReveal>
-          ))}
-        </div>
-
         {/* Geteilt: die Ueberschrift laeuft neben dem langen Formular mit. */}
         <div className="mt-24 grid gap-10 lg:grid-cols-12 lg:gap-16">
           <ScrollReveal className="lg:col-span-4">
diff --git a/src/components/business-inquiry-form.tsx b/src/components/business-inquiry-form.tsx
index f4e827c..80e0b7f 100644
--- a/src/components/business-inquiry-form.tsx
+++ b/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>