Replace all emoji icons with minimalist SVG line-art icons

- Add Icons.tsx with 17 SVG components (strokeWidth=1.5, 24x24 viewBox)
- Replace emoji in IconCard, content grid, bonus section (page.tsx)
- Replace clipboard emoji in WeekTimeline vorlagen line
- Change IconCard prop type from string to React.ReactNode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/Icons.tsx

@@ -0,0 +1,138 @@
+type P = { className?: string };
+
+const s = {
+  fill: "none" as const,
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+
+export function CalendarIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+    </svg>
+  );
+}
+
+export function GradCapIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M4.26 10.147a60.438 60.438 0 00-.491 6.347A48.63 48.63 0 0112 20.904a48.63 48.63 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.636 50.636 0 00-2.658-.813A59.906 59.906 0 0112 3.493a59.903 59.903 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
+    </svg>
+  );
+}
+
+export function UsersIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+    </svg>
+  );
+}
+
+export function ClipboardIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
+    </svg>
+  );
+}
+
+export function TargetIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </svg>
+  );
+}
+
+export function LightbulbIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+    </svg>
+  );
+}
+
+export function DocumentIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+    </svg>
+  );
+}
+
+export function PhoneIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+    </svg>
+  );
+}
+
+export function VideoCameraIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
+    </svg>
+  );
+}
+
+export function HandshakeIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803a7.5 7.5 0 0010.607 0z" />
+    </svg>
+  );
+}
+
+export function MapPinIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+      <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
+    </svg>
+  );
+}
+
+export function MapIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
+    </svg>
+  );
+}
+
+export function RocketIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
+    </svg>
+  );
+}
+
+export function PackageIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+    </svg>
+  );
+}
+
+export function ChatIcon({ className = "w-6 h-6" }: P) {
+  return (
+    <svg className={className} {...s} viewBox="0 0 24 24">
+      <path d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+    </svg>
+  );
+}

src/app/components/WeekTimeline.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { ClipboardIcon } from "./Icons";
 
 interface Week {
   week: string;
@@ -144,8 +145,9 @@ function WeekCard({ week, isLeft }: { week: Week; isLeft: boolean }) {
         {/* Body */}
         <p className="text-slate-500 text-sm leading-relaxed">{week.body}</p>
         {/* Vorlagen */}
-        <p className="text-xs text-indigo-600 italic border-t border-slate-100 pt-3">
+        <p className="text-xs text-indigo-600 italic border-t border-slate-100 pt-3 flex items-start gap-1.5">
-          📋 {week.vorlagen}
+          <ClipboardIcon className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+          {week.vorlagen}
         </p>
         {/* Result */}
         <p className="text-sm font-semibold text-emerald-600">✓ {week.result}</p>

src/app/page.tsx

@@ -1,6 +1,12 @@
 import Image from "next/image";
 import WeekTimeline from "./components/WeekTimeline";
 import FlipCards from "./components/FlipCards";
+import {
+  CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon,
+  TargetIcon, LightbulbIcon, DocumentIcon, PhoneIcon,
+  VideoCameraIcon, HandshakeIcon, SearchIcon, MapPinIcon,
+  MapIcon, RocketIcon, PackageIcon, ChatIcon,
+} from "./components/Icons";
 
 const CTA_HREF = "#platz-sichern";
 
@@ -25,10 +31,10 @@ function Pill({ children }: { children: React.ReactNode }) {
   );
 }
 
-function IconCard({ icon, title, sub }: { icon: string; title: string; sub: string }) {
+function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) {
   return (
     <div className="mc-card p-6 flex flex-col items-center text-center gap-3" style={{ borderTop: "3px solid", borderImageSlice: 1, borderImageSource: "linear-gradient(90deg,#6366f1,#8b5cf6)" }}>
-      <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-2xl shadow-lg">
+      <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg">
         {icon}
       </div>
       <p className="font-bold text-slate-900 text-sm leading-snug">{title}</p>
@@ -126,10 +132,10 @@ export default function Home() {
             <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was dich erwartet</h2>
           </div>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            <IconCard icon="📅" title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" />
+            <IconCard icon={<CalendarIcon className="w-7 h-7 text-white" />} title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" />
-            <IconCard icon="🎓" title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" />
+            <IconCard icon={<GradCapIcon className="w-7 h-7 text-white" />} title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" />
-            <IconCard icon="👥" title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" />
+            <IconCard icon={<UsersIcon className="w-7 h-7 text-white" />} title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" />
-            <IconCard icon="📋" title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
+            <IconCard icon={<ClipboardIcon className="w-7 h-7 text-white" />} title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
           </div>
           <div className="mt-8 mc-card p-5 text-center text-slate-600 text-sm">
             <strong className="text-slate-900">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar
@@ -180,14 +186,14 @@ export default function Home() {
             <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Nach 8 Wochen nimmst du mit:</h2>
           </div>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
-            <IconCard icon="🎯" title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" />
+            <IconCard icon={<TargetIcon className="w-7 h-7 text-white" />} title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" />
-            <IconCard icon="💡" title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" />
+            <IconCard icon={<LightbulbIcon className="w-7 h-7 text-white" />} title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" />
-            <IconCard icon="📄" title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" />
+            <IconCard icon={<DocumentIcon className="w-7 h-7 text-white" />} title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" />
-            <IconCard icon="🗓️" title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" />
+            <IconCard icon={<CalendarIcon className="w-7 h-7 text-white" />} title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" />
-            <IconCard icon="📲" title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" />
+            <IconCard icon={<PhoneIcon className="w-7 h-7 text-white" />} title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" />
-            <IconCard icon="🎬" title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" />
+            <IconCard icon={<VideoCameraIcon className="w-7 h-7 text-white" />} title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" />
-            <IconCard icon="🤝" title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" />
+            <IconCard icon={<HandshakeIcon className="w-7 h-7 text-white" />} title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" />
-            <IconCard icon="🔍" title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
+            <IconCard icon={<SearchIcon className="w-7 h-7 text-white" />} title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
           </div>
         </div>
       </section>
@@ -202,21 +208,23 @@ export default function Home() {
             <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2>
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[
+            {(
-              { icon: "🎯", text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" },
+              [
-              { icon: "💡", text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" },
+                { icon: <TargetIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" },
-              { icon: "📌", text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" },
+                { icon: <LightbulbIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" },
-              { icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" },
+                { icon: <MapPinIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" },
-              { icon: "🗺️", text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" },
+                { icon: <DocumentIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" },
-              { icon: "🗓️", text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" },
+                { icon: <MapIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" },
-              { icon: "📲", text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — für alle Plattformen" },
+                { icon: <CalendarIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" },
-              { icon: "🚀", text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" },
+                { icon: <PhoneIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst — für alle Plattformen" },
-              { icon: "🎬", text: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
+                { icon: <RocketIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" },
-              { icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
+                { icon: <VideoCameraIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
-              { icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
+                { icon: <HandshakeIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
-            ].map(({ icon, text }, i) => (
+                { icon: <SearchIcon className="w-5 h-5 text-indigo-500 flex-shrink-0 mt-0.5" />, text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
+              ] as { icon: React.ReactNode; text: string }[]
+            ).map(({ icon, text }, i) => (
               <div key={i} className="mc-card p-4 flex items-start gap-3">
-                <span className="text-lg flex-shrink-0 mt-0.5">{icon}</span>
+                {icon}
                 <p className="text-slate-600 text-sm leading-relaxed">{text}</p>
               </div>
             ))}
@@ -330,16 +338,16 @@ export default function Home() {
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
             {[
-              { n: 1, icon: "📦", title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
+              { n: 1, icon: <PackageIcon className="w-6 h-6 text-indigo-500" />, title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
-              { n: 2, icon: "📱", title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
+              { n: 2, icon: <PhoneIcon className="w-6 h-6 text-indigo-500" />, title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
-              { n: 3, icon: "🎬", title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten.", val: "197 €" },
+              { n: 3, icon: <VideoCameraIcon className="w-6 h-6 text-indigo-500" />, title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten.", val: "197 €" },
-              { n: 4, icon: "🗺️", title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
+              { n: 4, icon: <MapIcon className="w-6 h-6 text-indigo-500" />, title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
-              { n: 5, icon: "💬", title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
+              { n: 5, icon: <ChatIcon className="w-6 h-6 text-indigo-500" />, title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
-              { n: 6, icon: "🤝", title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
+              { n: 6, icon: <HandshakeIcon className="w-6 h-6 text-indigo-500" />, title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
             ].map(({ n, icon, title, desc, val }) => (
               <div key={n} className="mc-card p-5 space-y-2">
                 <div className="flex items-center justify-between">
-                  <span className="text-xl">{icon}</span>
+                  <span>{icon}</span>
                   <span className="text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">Wert: {val}</span>
                 </div>
                 <p className="text-xs font-bold text-indigo-600 uppercase tracking-wide">Bonus {n}</p>