Fix marquee behavior and unify marquee settings

components/layout/site-footer.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 
 import { Container } from "@/components/layout/container";
-import { RetroLedMarquee } from "@/components/layout/retro-led-marquee";
 import { getLocalizedPath } from "@/lib/locale";
 
 const navItems = [
@@ -21,7 +20,6 @@ export function SiteFooter({ isAdmin = false }: SiteFooterProps) {
   const locale = useLocale();
   const tNav = useTranslations("navigation");
   const tFooter = useTranslations("footer");
-  const ledText = "MADE IN GERMANY BY MOH";
 
   return (
     <footer className="border-t border-border bg-background">
@@ -46,7 +44,6 @@ export function SiteFooter({ isAdmin = false }: SiteFooterProps) {
           <p className="text-xs text-muted-foreground/80">
             {tFooter("copyright", { year: new Date().getFullYear() })}
           </p>
-          <RetroLedMarquee text={ledText} />
         </div>
       </Container>
     </footer>

components/layout/stacked-marquee-section.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
+import { useLayoutEffect, useRef, useState } from "react";
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion } from "framer-motion";
 
 import { cn } from "@/lib/utils";
 
@@ -86,33 +87,80 @@ const DEFAULT_ROWS: MarqueeRow[] = [
 
 function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
   const shouldReduceMotion = useReducedMotion();
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const segmentRef = useRef<HTMLDivElement>(null);
+  const [segmentWidth, setSegmentWidth] = useState(0);
+  const [copyCount, setCopyCount] = useState(3);
+  const x = useMotionValue(0);
+  const isReady = shouldReduceMotion || segmentWidth > 0;
+
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    const segment = segmentRef.current;
+
+    if (!viewport || !segment) {
+      return;
+    }
+
+    const measure = () => {
+      const nextSegmentWidth = segment.scrollWidth;
+      const viewportWidth = viewport.clientWidth;
+
+      if (!nextSegmentWidth || !viewportWidth) {
+        return;
+      }
+
+      setSegmentWidth(nextSegmentWidth);
+      setCopyCount(Math.max(3, Math.ceil(viewportWidth / nextSegmentWidth) + 2));
+      x.set(direction === "right" ? -nextSegmentWidth : 0);
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+
+    observer.observe(viewport);
+    observer.observe(segment);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [direction, items, x]);
+
+  useAnimationFrame((_, delta) => {
+    if (shouldReduceMotion || segmentWidth === 0) {
+      return;
+    }
+
+    const distancePerMs = segmentWidth / (duration * 1000);
+    const offset = distancePerMs * delta;
+    const current = x.get();
+
+    if (direction === "right") {
+      const next = current + offset;
+      x.set(next >= 0 ? next - segmentWidth : next);
+      return;
+    }
+
+    const next = current - offset;
+    x.set(next <= -segmentWidth ? next + segmentWidth : next);
+  });
 
   return (
-    <div className="overflow-hidden leading-[0.92]">
+    <div ref={viewportRef} className="overflow-hidden leading-[0.92]">
       <motion.div
-        className="flex w-max min-w-full flex-nowrap"
-        animate={
-          shouldReduceMotion
-            ? { x: 0 }
-            : {
-                x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
-              }
-        }
-        transition={
-          shouldReduceMotion
-            ? undefined
-            : {
-                duration,
-                ease: "linear",
-                repeat: Number.POSITIVE_INFINITY,
-              }
-        }
+        dir="ltr"
+        className={cn("flex w-max flex-nowrap", !isReady && "opacity-0")}
+        style={{ x }}
       >
-        {Array.from({ length: 2 }).map((_, copyIndex) => (
+        {Array.from({ length: copyCount }).map((_, copyIndex) => (
           <div
             key={`${direction}-${copyIndex}`}
+            ref={copyIndex === 0 ? segmentRef : undefined}
             className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5"
-            aria-hidden={copyIndex === 1}
+            aria-hidden={copyIndex > 0}
           >
             {items.map((item, itemIndex) => (
               <div
@@ -156,7 +204,7 @@ export function StackedMarqueeSection({
     >
       <div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
         {rows.map((row, index) => (
-          <div key={`${row.direction}-${index}`} className={index === 0 ? "" : "-mt-0.5 sm:-mt-1"}>
+          <div key={`${row.direction}-${index}`}>
             <MarqueeRowTrack
               items={row.items}
               direction={row.direction}

components/root/marquee-settings-form.tsx

@@ -9,12 +9,6 @@ type MarqueeSettingsFormProps = {
   initialSettings: MarqueeSettings;
 };
 
-const localeMeta = [
-  { key: "de", label: "Deutsch" },
-  { key: "en", label: "English" },
-  { key: "ar", label: "Arabic" },
-] as const;
-
 const rowMeta = [
   { key: "row1", label: "Row 1" },
   { key: "row2", label: "Row 2" },
@@ -31,31 +25,29 @@ export function MarqueeSettingsForm({
       <AppCard>
         <CardHeader>
           <CardTitle>Marquee Rows</CardTitle>
-          <CardDescription>Ein Feld pro Zeile. Ein Begriff pro Zeile oder mit Komma getrennt.</CardDescription>
+          <CardDescription>Nur Deutsch bearbeiten. Die Werte werden fuer alle Sprachen uebernommen.</CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 xl:grid-cols-3">
-          {localeMeta.map((locale) => (
-            <div key={locale.key} className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
-              <div>
-                <h3 className="text-sm font-semibold text-foreground">{locale.label}</h3>
-                <p className="text-xs text-muted-foreground">Vier Marquee Zeilen fuer diese Sprache.</p>
-              </div>
-
-              <div className="space-y-4">
-                {rowMeta.map((row) => (
-                  <div key={`${locale.key}-${row.key}`} className="space-y-2">
-                    <Label htmlFor={`${row.key}-${locale.key}`}>{row.label}</Label>
-                    <Textarea
-                      id={`${row.key}-${locale.key}`}
-                      name={`${row.key}-${locale.key}`}
-                      defaultValue={initialSettings.locales[locale.key][row.key]}
-                      className="min-h-[180px] resize-y"
-                    />
-                  </div>
-                ))}
-              </div>
+        <CardContent>
+          <div className="space-y-4 rounded-nested border border-border/70 bg-background/70 p-4">
+            <div>
+              <h3 className="text-sm font-semibold text-foreground">Deutsch</h3>
+              <p className="text-xs text-muted-foreground">Vier Marquee Zeilen. Diese Werte gelten fuer alle Sprachen.</p>
             </div>
-          ))}
+
+            <div className="space-y-4">
+              {rowMeta.map((row) => (
+                <div key={`de-${row.key}`} className="space-y-2">
+                  <Label htmlFor={`${row.key}-de`}>{row.label}</Label>
+                  <Textarea
+                    id={`${row.key}-de`}
+                    name={`${row.key}-de`}
+                    defaultValue={initialSettings.locales.de[row.key]}
+                    className="min-h-[180px] resize-y"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
         </CardContent>
       </AppCard>
     </form>