chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/src/components/ContactForm/steps/FeaturesStep.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import { FormState } from '../types';
+import { FEATURE_OPTIONS } from '../constants';
+import { Checkbox } from '../components/Checkbox';
+import { RepeatableList } from '../components/RepeatableList';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Minus, Plus, LayoutGrid, ListPlus, HelpCircle } from 'lucide-react';
+
+interface FeaturesStepProps {
+  state: FormState;
+  updateState: (updates: Partial<FormState>) => void;
+  toggleItem: (list: string[], id: string) => string[];
+}
+
+export function FeaturesStep({ state, updateState, toggleItem }: FeaturesStepProps) {
+  const toggleDontKnow = (id: string) => {
+    const current = state.dontKnows || [];
+    if (current.includes(id)) {
+      updateState({ dontKnows: current.filter(i => i !== id) });
+    } else {
+      updateState({ dontKnows: [...current, id] });
+    }
+  };
+
+  return (
+    <div className="space-y-16">
+      <div className="space-y-8">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-black">
+              <LayoutGrid size={24} />
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h4 className="text-2xl font-bold text-slate-900">System-Module</h4>
+                <span className="px-2 py-1 bg-slate-50 text-slate-400 text-[10px] font-bold uppercase tracking-wider rounded">Optional</span>
+              </div>
+              <div className="flex items-center gap-2 text-slate-400 mt-1">
+                <HelpCircle size={14} />
+                <span className="text-sm">Module sind funktionale Einheiten, die über einfache Textseiten hinausgehen.</span>
+              </div>
+            </div>
+          </div>
+          <motion.button 
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            type="button"
+            onClick={() => toggleDontKnow('features')}
+            className={`px-6 py-3 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
+              state.dontKnows?.includes('features') ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
+            }`}
+          >
+            Ich weiß es nicht
+          </motion.button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {FEATURE_OPTIONS.map((opt, index) => (
+            <motion.div
+              key={opt.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+            >
+              <Checkbox 
+                label={opt.label} desc={opt.desc} 
+                checked={state.features.includes(opt.id)} 
+                onChange={() => updateState({ features: toggleItem(state.features, opt.id) })} 
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-12">
+        <div className="space-y-8">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-black">
+              <ListPlus size={24} />
+            </div>
+            <h4 className="text-2xl font-bold text-slate-900">Weitere inhaltliche Module?</h4>
+          </div>
+          <RepeatableList
+            items={state.otherFeatures}
+            onAdd={(v) => updateState({ otherFeatures: [...state.otherFeatures, v] })}
+            onRemove={(i) => updateState({ otherFeatures: state.otherFeatures.filter((_, idx) => idx !== i) })}
+            placeholder="z.B. Glossar, Download-Center, Partner-Bereich..."
+          />
+        </div>
+
+      </div>
+    </div>
+  );
+}