form

src/components/ContactForm/steps/AssetsStep.tsx

@@ -63,8 +63,8 @@ export function AssetsStep({ state, updateState, toggleItem }: AssetsStepProps)
                     onChange={() => updateState({ assets: toggleItem(state.assets, opt.id) })}
                   />
                   {['logo', 'styleguide', 'content_concept'].includes(opt.id) && (
-                    <div className="absolute top-4 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">
-                      Wichtig
+                    <div className="absolute top-4 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
+                      Empfohlen
                     </div>
                   )}
                 </div>

src/components/ContactForm/steps/BaseStep.tsx

@@ -38,8 +38,8 @@ export function BaseStep({ state, updateState, toggleItem }: BaseStepProps) {
             value={state.websiteTopic}
             onChange={(e) => updateState({ websiteTopic: e.target.value })}
           />
-          <div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">
-            Wichtig
+          <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
+            Essenziell
           </div>
         </div>
       </motion.div>
@@ -53,11 +53,11 @@ export function BaseStep({ state, updateState, toggleItem }: BaseStepProps) {
             <div>
               <div className="flex items-center gap-3">
                 <h4 className="text-2xl font-bold text-slate-900">Die Seiten</h4>
-                <span className="px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span>
+                <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Planungsbasis</span>
               </div>
               <div className="flex items-center gap-2 text-slate-400 mt-1">
-                <HelpCircle size={14} />
-                <span className="text-sm">Warum ist das wichtig? Die Anzahl der Seiten bestimmt maßgeblich den Design- und Umsetzungsaufwand.</span>
+                <HelpCircle size={14} className="shrink-0" />
+                <span className="text-sm">Die Seitenstruktur hilft uns, den Umfang und die Komplexität Ihres Projekts präzise einzuschätzen.</span>
               </div>
             </div>
           </div>

src/components/ContactForm/steps/CompanyStep.tsx

@@ -23,7 +23,7 @@ export function CompanyStep({ state, updateState }: CompanyStepProps) {
               <Building2 size={24} />
             </div>
             <h4 className="text-2xl font-bold text-slate-900">Unternehmen</h4>
-            <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span>
+            <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Erforderlich</span>
           </div>
           <Input
             label="Name des Unternehmens"

src/components/ContactForm/steps/ContactStep.tsx

@@ -36,8 +36,8 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
               value={state.name}
               onChange={(e) => updateState({ name: e.target.value })}
             />
-            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">
-              Wichtig
+            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
+              Erforderlich
             </div>
           </div>
         </Reveal>
@@ -53,8 +53,8 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
               value={state.email}
               onChange={(e) => updateState({ email: e.target.value })}
             />
-            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">
-              Wichtig
+            <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
+              Erforderlich
             </div>
           </div>
         </Reveal>

src/components/ContactForm/steps/TimelineStep.tsx

@@ -75,7 +75,7 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
           <div className="space-y-2">
             <p className="text-amber-900 text-xl font-bold">Mögliche Verzögerungen</p>
             <p className="text-amber-800 text-base leading-relaxed">
-              Da noch wichtige Informationen (z.B. {isMissingAssets ? 'Logo/Inhaltskonzept' : ''} {isMissingAssets && isMissingPages ? 'und' : ''} {isMissingPages ? 'Seitenstruktur' : ''}) fehlen, kann sich der Projektstart verzögern, bis diese vorliegen.
+              Für einen reibungslosen Projektstart benötigen wir noch einige Details (z.B. {isMissingAssets ? 'Logo/Inhaltskonzept' : ''} {isMissingAssets && isMissingPages ? 'und' : ''} {isMissingPages ? 'Seitenstruktur' : ''}). Ohne diese kann sich der Beginn verzögern.
             </p>
           </div>
         </div>

src/components/ContactForm/steps/TypeStep.tsx

@@ -31,7 +31,7 @@ export function TypeStep({ state, updateState }: TypeStepProps) {
             <div className={`transition-transform duration-500 group-hover:scale-110 ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.illustration}</div>
             <div className="flex items-center gap-4 mb-4">
               <h4 className={`text-4xl font-bold ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.label}</h4>
-              <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider ${state.projectType === type.id ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500'}`}>Wichtig</span>
+              <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider ${state.projectType === type.id ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500'}`}>Grundlage</span>
             </div>
             <p className={`text-xl leading-relaxed ${state.projectType === type.id ? 'text-slate-200' : 'text-slate-500'}`}>{type.desc}</p>
             

src/components/ContactForm/steps/WebAppStep.tsx

@@ -26,7 +26,7 @@ export function WebAppStep({ state, updateState }: WebAppStepProps) {
           <h4 className="text-2xl font-bold text-slate-900 flex items-center gap-3">
             <Users size={24} className="text-black" /> Zielgruppe
           </h4>
-          <span className="px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span>
+          <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Fokus</span>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {[