fix(slider): restore layout to match main and fix drag by disabling native link drag

components/blocks/ReferencesSlider.test.tsx

@@ -51,15 +51,14 @@ describe('ReferencesSlider TDD', () => {
     expect(screen.getByText('Referenz Projekt Zwei')).toBeTruthy();
   });
 
-  it('renders each tile as a link to the reference detail page', () => {
+  it('renders each tile as a static block and NOT wrapped in a link', () => {
     render(<ReferencesSlider references={mockReferences} />);
+    
+    const links = screen.queryAllByTestId('reference-tile-link');
+    expect(links).toHaveLength(0);
 
     const tiles = screen.getAllByTestId('reference-tile');
     expect(tiles).toHaveLength(2);
-    
-    // Check if they have href attributes
-    expect(tiles[0].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-eins');
-    expect(tiles[1].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-zwei');
   });
 });
 

components/blocks/ReferencesSlider.tsx

@@ -40,6 +40,12 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
   const { data } = props;
   const references = props.references || [];
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const dragDistanceRef = React.useRef(0);
+  const startXRef = React.useRef(0);
+  const scrollLeftRef = React.useRef(0);
+  const isDraggingRef = React.useRef(false);
+  const [isDragging, setIsDragging] = React.useState(false);
   
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
@@ -57,6 +63,36 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
     '/assets/photos/DSC00010.JPG',
   ];
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (!containerRef.current) return;
+    setIsDragging(true);
+    isDraggingRef.current = true;
+    const startXVal = e.clientX - (containerRef.current.offsetLeft || 0);
+    startXRef.current = startXVal;
+    scrollLeftRef.current = containerRef.current.scrollLeft || 0;
+    dragDistanceRef.current = 0;
+  };
+
+  const onMouseLeave = () => {
+    setIsDragging(false);
+    isDraggingRef.current = false;
+  };
+
+  const onMouseUp = () => {
+    setIsDragging(false);
+    isDraggingRef.current = false;
+  };
+
+  const onMouseMove = (e: React.MouseEvent) => {
+    if (!isDraggingRef.current || !containerRef.current) return;
+    e.preventDefault();
+    const x = e.clientX - (containerRef.current.offsetLeft || 0);
+    const walk = (x - startXRef.current) * 2; // Scroll-fast
+    containerRef.current.scrollLeft = scrollLeftRef.current - walk;
+    dragDistanceRef.current = Math.abs(x - startXRef.current);
+  };
+
+
   return (
     <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
@@ -66,13 +102,24 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <div className="text-left max-w-3xl mx-auto md:mx-0 md:mb-16">
+        <div className="text-left max-w-3xl mx-auto md:mx-0 mb-8 md:mb-16">
           {description}
         </div>
       </div>
 
-      <div className="container relative z-10 w-full">
+      <div className="container relative z-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 justify-center items-stretch">
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
+        
+        {/* Carousel: stays inside container for left alignment, breaks right to viewport edge */}
+        <div 
+          ref={containerRef}
+          onMouseDown={onMouseDown}
+          onMouseLeave={onMouseLeave}
+          onMouseUp={onMouseUp}
+          onMouseMove={onMouseMove}
+          style={{ marginRight: 'calc(-50vw + 50%)' }}
+          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+        >
           {references.map((ref, i) => {
             const imgSrc = ref.image 
               ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
@@ -81,47 +128,54 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
             return (
               <LazyMotion key={ref.id} features={domAnimation}>
                 <m.div
-                  initial={{ opacity: 0, y: 20 }}
+                  initial={{ opacity: 0, x: 20 }}
-                  whileInView={{ opacity: 1, y: 0 }}
+                  whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
-                  transition={{ delay: i * 0.1, duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
-                  className="w-full h-full group"
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
                 >
                   <Link
-                    href={`/${locale}/referenzen#${ref.slug}`}
+                  href={`/${locale}/referenzen#${ref.slug}`}
-                    data-testid="reference-tile"
+                  onClick={(e) => {
-                    className="block relative h-[250px] md:h-[300px] w-full rounded-2xl overflow-hidden shadow-xl shadow-black/20"
+                    if (dragDistanceRef.current > 5) {
-                  >
+                      e.preventDefault();
-                    <Image
+                      e.stopPropagation();
-                      src={imgSrc}
+                    }
-                      alt={ref.title}
+                  }}
-                      fill
+                  onDragStart={(e) => e.preventDefault()}
-                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  draggable={false}
-                      className="object-cover object-center group-hover:scale-105 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
+                  data-testid="reference-tile"
-                      priority={i < 3}
+                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
-                    />
+                >
-                    
+                  <Image
-                    <div className="absolute inset-0 bg-gradient-to-t from-[#050B14]/90 via-[#050B14]/20 to-transparent pointer-events-none" />
+                    draggable={false}
-                    
+                    src={imgSrc}
-                    <HoverShineOverlay />
+                    alt={ref.title}
-
+                    fill
-                    <div className="absolute bottom-0 left-0 p-6 md:p-8 right-0 transform transition-transform duration-500 ease-out group-hover:-translate-y-2">
+                    sizes="(max-width: 768px) 320px, 480px"
-                      <div className="bg-primary/20 backdrop-blur-md border border-primary/30 text-white text-[10px] md:text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full mb-3 inline-block shadow-[0_0_15px_rgba(14,122,92,0.3)]">
+                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
-                        {ref.category}
+                  />
-                      </div>
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
-                      <h4 className="text-xl md:text-2xl font-bold font-heading leading-tight drop-shadow-md text-white group-hover:text-primary-light transition-colors duration-300">
+                  
-                        {ref.title}
+                  <HoverShineOverlay />
-                      </h4>
+                  
-                    </div>
+                  <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
-                  </Link>
+                    <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
+                      {ref.category}
+                    </span>
+                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
+                  </div>
+                </Link>
                 </m.div>
               </LazyMotion>
             );
           })}
+          {/* Right padding spacer so last card doesn't clip at viewport edge */}
+          <div className="flex-shrink-0 w-6" aria-hidden="true" />
         </div>
       </div>
 
-      <div className="container relative z-10 flex justify-center mt-12 md:mt-20 pb-4">
+      <div className="container relative z-10 mt-4 flex justify-center">
         <Link 
           href={ctaHref} 
           className="px-8 py-4 rounded-xl bg-white/5 border border-white/20 hover:bg-white hover:text-neutral-dark hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] transition-all font-bold flex items-center gap-3 backdrop-blur-sm"