web app form

src/components/ContactForm/steps/FeaturesStep.tsx

@@ -2,9 +2,9 @@
 
 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 { FEATURE_OPTIONS } from '../constants';
 
 interface FeaturesStepProps {
   state: FormState;
@@ -14,8 +14,8 @@ interface FeaturesStepProps {
 
 export function FeaturesStep({ state, updateState, toggleItem }: FeaturesStepProps) {
   return (
-    <div className="space-y-8">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div className="space-y-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {FEATURE_OPTIONS.map(opt => (
           <Checkbox 
             key={opt.id} label={opt.label} desc={opt.desc} 
@@ -24,13 +24,13 @@ export function FeaturesStep({ state, updateState, toggleItem }: FeaturesStepPro
           />
         ))}
       </div>
-      <div className="space-y-4">
-        <p className="text-sm font-bold text-slate-900">Weitere inhaltliche Bereiche?</p>
-        <RepeatableList 
-          items={state.otherFeatures} 
+      <div className="space-y-6">
+        <p className="text-lg font-bold text-slate-900">Weitere inhaltliche Module?</p>
+        <RepeatableList
+          items={state.otherFeatures}
           onAdd={(v) => updateState({ otherFeatures: [...state.otherFeatures, v] })}
           onRemove={(i) => updateState({ otherFeatures: state.otherFeatures.filter((_, idx) => idx !== i) })}
-          placeholder="z.B. Partner-Portal, Download-Center..."
+          placeholder="z.B. Glossar, Download-Center, Partner-Bereich..."
         />
       </div>
     </div>