diff --git a/src/spa/components/WegZurAuszeichnungSection.tsx b/src/spa/components/WegZurAuszeichnungSection.tsx
index c348967..f37296d 100644
--- a/src/spa/components/WegZurAuszeichnungSection.tsx
+++ b/src/spa/components/WegZurAuszeichnungSection.tsx
@@ -14,7 +14,6 @@ const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
 const NAVY = '#111D55';
 const GOLD = '#EFBF04';
-const CARD_BACKGROUND = '#FFF8E1';
 
 type ProcessContent = Partial<typeof participationContent.process>;
 
@@ -44,14 +43,14 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
   // ── MOBILE: stacked vertical list (no scroll-jack, no horizontal overflow) ──
   if (isMobile) {
     return (
-      <section id="schritte" style={{ background: GOLD, padding: '56px 22px' }}>
+      <section id="schritte" style={{ background: NAVY, padding: '56px 22px' }}>
         {/* Section header */}
         <div style={{ marginBottom: 36 }}>
-          <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.72)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
-          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
+          <span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
+          <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
             <Lines text={fallbackText(section.heading, participationContent.process.heading)} />
           </h2>
-          <p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
+          <p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0 }}>
             {fallbackText(section.description, participationContent.process.description)}
           </p>
         </div>
@@ -61,29 +60,29 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
           {steps.map((item, index) => {
             const Icon = ICONS[item.icon as keyof typeof ICONS] || FileText;
             return (
-              <div key={`${item.step}-${index}`} style={{ border: '1px solid rgba(17,29,85,0.16)', background: CARD_BACKGROUND, padding: '24px 22px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
-                  <div style={{ width: 44, height: 44, border: '1px solid rgba(17,29,85,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <Icon size={18} style={{ color: NAVY }} strokeWidth={1.5} />
+              <div key={`${item.step}-${index}`} style={{ border: '1px solid rgba(239,191,4,0.25)', background: NAVY, padding: '18px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
+                  <div style={{ width: 44, height: 44, border: '1px solid rgba(239,191,4,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                    <Icon size={18} style={{ color: GOLD }} strokeWidth={1.5} />
                   </div>
                   <div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
-                      <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(17,29,85,0.78)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{stepPrefix} {fallbackText(item.step, '')}</span>
-                      <span style={{ width: 1, height: 11, background: 'rgba(17,29,85,0.18)' }} />
-                      <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
+                      <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{stepPrefix} {fallbackText(item.step, '')}</span>
+                      <span style={{ width: 1, height: 11, background: 'rgba(255,255,255,0.2)' }} />
+                      <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
                     </div>
-                    <h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
+                    <h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
                       {fallbackText(item.title, '')}
                     </h3>
                   </div>
                 </div>
-                <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
+                <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
                   {fallbackText(item.desc, '')}
                 </p>
                 {/* Step progress indicator */}
-                <div style={{ display: 'flex', gap: 4, marginTop: 20 }}>
+                <div style={{ display: 'flex', gap: 4, marginTop: 16 }}>
                   {steps.map((_, i) => (
-                    <div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(17,29,85,0.12)' }} />
+                    <div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(255,255,255,0.1)' }} />
                   ))}
                 </div>
               </div>
@@ -95,18 +94,18 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
   }
 
   return (
-    <ContainerScroll id="schritte" className="h-[380vh]" style={{ background: GOLD }}>
+    <ContainerScroll id="schritte" className="h-[300vh]" style={{ background: NAVY }}>
       <ContainerSticky className="top-0 h-screen flex flex-col">
 
         {/* Section header */}
-        <div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(17,29,85,0.14)', flexShrink: 0 }}>
+        <div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)', flexShrink: 0 }}>
           <div>
-            <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.72)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
-            <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
+            <span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
+            <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
               <Lines text={fallbackText(section.heading, participationContent.process.heading)} />
             </h2>
           </div>
-          <p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(16,24,40,0.68)', lineHeight: 1.8, margin: 0 }}>
+          <p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 }}>
             {fallbackText(section.description, participationContent.process.description)}
           </p>
         </div>
@@ -121,18 +120,18 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
                 width="12" height="7" viewBox="0 0 12 7" fill="none"
                 style={{ opacity: 1 - i * 0.3, animation: `scrollBounce 1.6s ease-in-out ${i * 0.18}s infinite` }}
               >
-                <polyline points="1,1 6,6 11,1" stroke={NAVY} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                <polyline points="1,1 6,6 11,1" stroke={GOLD} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             ))}
           </div>
-          <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(17,29,85,0.68)' }}>
+          <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>
             {fallbackText(section.scrollHint, participationContent.process.scrollHint)}
           </span>
           {/* Progress bar */}
-          <div style={{ flex: 1, height: 1, background: 'rgba(17,29,85,0.14)', position: 'relative', overflow: 'hidden', maxWidth: 200 }}>
-            <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '25%', background: NAVY, opacity: 0.6 }} />
+          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.07)', position: 'relative', overflow: 'hidden', maxWidth: 200 }}>
+            <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '25%', background: GOLD, opacity: 0.6 }} />
           </div>
-          <span style={{ fontFamily: FF, fontSize: 9, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.1em' }}>{fallbackText(section.progressLabel, participationContent.process.progressLabel)}</span>
+          <span style={{ fontFamily: FF, fontSize: 9, color: 'rgba(255,255,255,0.50)', letterSpacing: '0.1em' }}>{fallbackText(section.progressLabel, participationContent.process.progressLabel)}</span>
         </div>
 
         {/* Cards strip */}
@@ -145,40 +144,40 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
                 itemsLength={steps.length}
                 index={index}
                 variant="bmp"
-                className="min-w-[70%] max-w-[70%] flex-shrink-0 bg-[#FFF8E1] text-[#101828] border-[rgba(17,29,85,0.16)]"
+                className="h-[300px] self-start min-w-[70%] max-w-[70%] flex-shrink-0"
               >
                 {/* Left accent strip with step number */}
-                <ProcessCardTitle className="border-r border-[rgba(17,29,85,0.16)] flex flex-col items-center justify-between py-8 px-5 min-w-[80px]">
-                  <div style={{ width: 40, height: 40, border: '1px solid rgba(17,29,85,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                    <Icon size={16} style={{ color: NAVY }} strokeWidth={1.5} />
+                <ProcessCardTitle className="border-r border-[rgba(239,191,4,0.2)] flex flex-col items-center justify-between py-6 px-4 min-w-[64px]">
+                  <div style={{ width: 40, height: 40, border: '1px solid rgba(239,191,4,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <Icon size={16} style={{ color: GOLD }} strokeWidth={1.5} />
                   </div>
-                  <span style={{ fontFamily: FF, fontSize: 11, fontWeight: 900, color: 'rgba(17,29,85,0.38)', letterSpacing: '0.1em', writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
+                  <span style={{ fontFamily: FF, fontSize: 11, fontWeight: 900, color: 'rgba(239,191,4,0.4)', letterSpacing: '0.1em', writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
                     {fallbackText(item.step, '')}
                   </span>
                 </ProcessCardTitle>
 
                 {/* Card body */}
-                <ProcessCardBody className="flex flex-col justify-between py-10 px-10 gap-6">
+                <ProcessCardBody className="flex flex-col justify-between py-6 px-7 gap-4">
                   <div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
-                      <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(17,29,85,0.78)', letterSpacing: '0.22em', textTransform: 'uppercase' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
+                      <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
                         {stepPrefix} {fallbackText(item.step, '')}
                       </span>
-                      <span style={{ width: 1, height: 12, background: 'rgba(17,29,85,0.18)' }} />
-                      <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
+                      <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.2)' }} />
+                      <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
                     </div>
-                    <div style={{ width: 32, height: 1, background: GOLD, marginBottom: 20, opacity: 0.5 }} />
-                    <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
+                    <div style={{ width: 32, height: 1, background: GOLD, marginBottom: 16, opacity: 0.5 }} />
+                    <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
                       {fallbackText(item.title, '')}
                     </h3>
                   </div>
-                  <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
+                  <p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
                     {fallbackText(item.desc, '')}
                   </p>
                   {/* Step progress indicator */}
                   <div style={{ display: 'flex', gap: 4 }}>
                     {steps.map((_, i) => (
-                      <div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(17,29,85,0.12)', transition: 'flex 0.3s' }} />
+                      <div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(255,255,255,0.1)', transition: 'flex 0.3s' }} />
                     ))}
                   </div>
                 </ProcessCardBody>
diff --git a/src/spa/components/ui/process-timeline.tsx b/src/spa/components/ui/process-timeline.tsx
index bf31315..f8637ca 100644
--- a/src/spa/components/ui/process-timeline.tsx
+++ b/src/spa/components/ui/process-timeline.tsx
@@ -86,6 +86,7 @@ export const ContainerScroll = ({
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll({
     target: scrollRef,
+    offset: ["start start", "end end"],
   })
   return (
     <ContainerScrollContext.Provider value={{ scrollYProgress }}>