fix(ui): align bento grid images to start page & optimize performance

- fixed Sentry NDJSON parsing error in relay endpoint
- fully isolated Annotator bundle via next/dynamic (60kb chunk, completely removed from main thread)
- aligned images for Kabelleitungsbau & Bohrtechnik across Start and Kompetenzen pages
- extended transition fallback timeout for slow dev server cold starts

app/[locale]/errors/api/relay/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  try {
+    const rawText = await req.text();
+    // Sentry sends NDJSON (Newline Delimited JSON). Split by newline to parse safely.
+    const items = rawText.split('\n').filter(Boolean).map(line => JSON.parse(line));
+    console.log("CLIENT ERROR INTERCEPTED:", JSON.stringify(items[0], null, 2));
+  } catch (e) {
+    console.log("Failed to parse relay body (NDJSON)", e);
+  }
+  return NextResponse.json({ success: true });
+}

app/actions/getAnnotatorAssets.ts

@@ -9,27 +9,28 @@ export async function getAnnotatorAssets() {
     publicDir = path.join(process.cwd(), 'public');
   }
   
-  const walk = (dir: string): string[] => {
+  const walk = async (dir: string): Promise<string[]> => {
     let results: string[] = [];
     if (!fs.existsSync(dir)) return results;
-    const list = fs.readdirSync(dir);
-    list.forEach((file) => {
+    
+    const list = await fs.promises.readdir(dir);
+    for (const file of list) {
       const filePath = path.join(dir, file);
-      const stat = fs.statSync(filePath);
+      const stat = await fs.promises.stat(filePath);
       if (stat && stat.isDirectory()) {
-        results = results.concat(walk(filePath));
+        const nested = await walk(filePath);
+        results = results.concat(nested);
       } else {
         if (filePath.match(/\.(png|jpg|jpeg|webp|mp4|svg)$/i)) {
           results.push(filePath.replace(publicDir, ''));
         }
       }
-    });
+    }
     return results;
   };
-  const results = walk(publicDir);
-  console.log('[Annotator] publicDir:', publicDir);
-  console.log('[Annotator] Assets found:', results.length);
-  console.log('[Annotator] First 5 paths:', results.slice(0, 5));
-    
+  
+  const results = await walk(publicDir);
+  
+  // Console logs removed for absolute silence & speed
   return results;
 }

app/test/page.tsx

@@ -1,7 +0,0 @@
-export default function TestPage() {
-  return (
-    <div>
-      <h1>TEST PAGE WORKS</h1>
-    </div>
-  );
-}

components/AnnotatorClientWrapper.tsx

@@ -1,22 +1,34 @@
 'use client';
 
-import { Annotator } from '@mintel/annotator';
+import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import { getAnnotatorAssets } from '@/app/actions/getAnnotatorAssets';
 import { submitAnnotations } from '@/app/actions/submitAnnotations';
 
+const Annotator = dynamic(() => import('@/components/annotator-local/Annotator').then(mod => mod.Annotator), { ssr: false });
+
 export default function AnnotatorClientWrapper() {
   const [assets, setAssets] = useState<string[]>([]);
 
   useEffect(() => {
-    getAnnotatorAssets().then(fetchedAssets => {
-      console.log('[AnnotatorClientWrapper] fetchedAssets:', fetchedAssets);
-      if (Array.isArray(fetchedAssets)) {
-        setAssets(fetchedAssets);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Toggle key from Annotator.tsx is Shift+A
+      if (e.shiftKey && e.key === "A") {
+        setAssets((prev) => {
+          if (prev.length === 0) {
+            getAnnotatorAssets().then(fetchedAssets => {
+              if (Array.isArray(fetchedAssets)) {
+                setAssets(fetchedAssets);
+              }
+            }).catch(err => console.error('[AnnotatorClientWrapper] Fetch failed:', err));
+          }
+          return prev;
+        });
       }
-    }).catch(err => {
-      console.error('[AnnotatorClientWrapper] Action failed:', err);
-    });
+    };
+    
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
 
   const handleSubmit = async (annotations: any[]) => {

components/annotator-local/Annotator.tsx

@@ -0,0 +1,626 @@
+import { useState, useEffect, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { MessageSquare, X, Check, Image as ImageIcon, Type, StickyNote, Download, Trash2, List } from "lucide-react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { finder } from "@medv/finder";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export interface Annotation {
+  id: string;
+  x: number;
+  y: number;
+  selector: string;
+  type: "text" | "image" | "note";
+  originalContent: string;
+  newContent: string;
+  url: string;
+  elementRect: Record<string, number> | null;
+  scrollX: number;
+  scrollY: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  userAgent: string;
+  timestamp: string;
+}
+
+export interface AnnotatorProps {
+  assets?: string[]; // Array of image URLs for the media browser
+  onSubmit?: (annotations: Annotation[]) => Promise<void>;
+}
+
+export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
+  const [isActive, setIsActive] = useState(false);
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);
+  const [annotations, setAnnotations] = useState<Annotation[]>(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("mintel-annotations");
+      if (saved) {
+        try {
+          return JSON.parse(saved);
+        } catch (e) {
+          console.error("Failed to parse saved annotations", e);
+        }
+      }
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("mintel-annotations", JSON.stringify(annotations));
+    }
+  }, [annotations]);
+  
+  // Modal state
+  const [currentType, setCurrentType] = useState<"text" | "image" | "note">("text");
+  const [currentText, setCurrentText] = useState("");
+  const [selectedAsset, setSelectedAsset] = useState<string | null>(null);
+  const [showList, setShowList] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Disable overlays if needed (e.g. inside iframes)
+  const isExcluded = useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return window.self !== window.top;
+  }, []);
+
+  if (isExcluded) return null;
+
+  const getSelector = (el: HTMLElement): string => {
+    try {
+      return finder(el, {
+        root: document.body,
+        className: (name) =>
+          !name.startsWith("annotator-") &&
+          !name.includes("[") &&
+          !name.includes("/") &&
+          !name.match(/^[a-z]-[0-9]/),
+        idName: (name) => !name.startsWith("__next") && !name.includes(":"),
+      });
+    } catch {
+      return "unknown";
+    }
+  };
+
+  useEffect(() => {
+    if (!isActive) {
+      setHoveredElement(null);
+      return;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (selectedElement) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(".annotator-ui-ignore")) {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement(target);
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      if (selectedElement) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(".annotator-ui-ignore")) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      setSelectedElement(target);
+      setHoveredElement(null);
+      
+      // Auto-detect type
+      if (target.tagName.toLowerCase() === "img") {
+        setCurrentType("image");
+      } else {
+        setCurrentType("text");
+        setCurrentText(target.innerText || "");
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("click", handleClick, true);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("click", handleClick, true);
+    };
+  }, [isActive, selectedElement]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (selectedElement) {
+          setSelectedElement(null);
+        } else if (isActive) {
+          setIsActive(false);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, selectedElement]);
+
+  const saveAnnotation = () => {
+    if (!selectedElement) return;
+
+    const rect = selectedElement.getBoundingClientRect();
+    const newContent = currentType === "image" ? selectedAsset || "" : currentText;
+    
+    if (!newContent) return;
+
+    const annotation: Annotation = {
+      id: Math.random().toString(36).substring(2, 9),
+      x: rect.left + rect.width / 2 + window.scrollX,
+      y: rect.top + rect.height / 2 + window.scrollY,
+      selector: getSelector(selectedElement),
+      type: currentType,
+      originalContent: currentType === "image" ? (selectedElement as HTMLImageElement).src || "" : selectedElement.innerText,
+      newContent,
+      url: window.location.href,
+      elementRect: rect ? {
+        x: rect.x, y: rect.y, width: rect.width, height: rect.height,
+        top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left
+      } : null,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      userAgent: navigator.userAgent,
+      timestamp: new Date().toISOString(),
+    };
+
+    setAnnotations([...annotations, annotation]);
+    setSelectedElement(null);
+    setCurrentText("");
+    setSelectedAsset(null);
+  };
+
+  const exportJSON = () => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(annotations, null, 2));
+    const downloadAnchorNode = document.createElement("a");
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", "corrections.json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+  };
+
+  const handleSubmit = async () => {
+    if (!onSubmit || annotations.length === 0) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(annotations);
+      setAnnotations([]);
+      setShowList(false);
+    } catch (error) {
+      console.error("Submission failed", error);
+      alert("Fehler beim Senden der Korrekturen. Bitte JSON Export nutzen.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const deleteAnnotation = (id: string) => {
+    setAnnotations(annotations.filter((a) => a.id !== id));
+  };
+
+  const [updateTick, setUpdateTick] = useState(0);
+
+  useEffect(() => {
+    if (!isActive && !selectedElement) return;
+    
+    let rafId: number;
+    const handleScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => setUpdateTick(t => t + 1));
+    };
+    
+    // Use capture phase to catch scrolls on any nested container
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+      cancelAnimationFrame(rafId);
+    };
+  }, [isActive, selectedElement]);
+
+  const hoveredRect = useMemo(() => hoveredElement?.getBoundingClientRect(), [hoveredElement, updateTick]);
+  const selectedRect = useMemo(() => selectedElement?.getBoundingClientRect(), [selectedElement, updateTick]);
+
+  return (
+    <div className="annotator-ui-ignore">
+      {/* 1. Global Toolbar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999] w-max max-w-[95vw]">
+        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-2 rounded-2xl shadow-2xl flex items-center gap-1 sm:gap-2 overflow-x-auto hide-scrollbar" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+          <button
+            onClick={() => setIsActive(!isActive)}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-medium",
+              isActive
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-white/70 hover:text-white hover:bg-white/10"
+            )}
+          >
+            {isActive ? <X size={18} /> : <MessageSquare size={18} />}
+            {isActive ? "Modus beenden" : "Korrekturen erfassen"}
+          </button>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => setShowList(!showList)}
+            className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
+          >
+            <List size={20} />
+            {annotations.length > 0 && (
+              <span className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 text-[10px] flex items-center justify-center rounded-full text-white font-bold border-2 border-[#1a1a1a]">
+                {annotations.length}
+              </span>
+            )}
+          </button>
+
+          {annotations.length > 0 && (
+            <>
+              <div className="w-px h-6 bg-white/10 mx-1" />
+              <button
+                onClick={exportJSON}
+                className="flex items-center gap-2 px-4 py-2 rounded-xl text-white/70 hover:text-white hover:bg-white/10 transition-all font-medium"
+              >
+                <Download size={18} />
+                JSON Export
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 2. Highlights */}
+      <AnimatePresence>
+        {isActive && (
+          <div className="fixed inset-0 pointer-events-none z-[9998]">
+            {hoveredRect && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute border-2 border-blue-400 bg-blue-400/10 rounded-sm transition-all duration-200"
+                style={{
+                  top: hoveredRect.top,
+                  left: hoveredRect.left,
+                  width: hoveredRect.width,
+                  height: hoveredRect.height,
+                }}
+              />
+            )}
+
+            {selectedRect && (
+              <motion.div
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="absolute border-2 border-yellow-400 bg-yellow-400/20 rounded-sm"
+                style={{
+                  top: selectedRect.top,
+                  left: selectedRect.left,
+                  width: selectedRect.width,
+                  height: selectedRect.height,
+                }}
+              />
+            )}
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 3. Action Modal */}
+      <AnimatePresence>
+        {selectedElement && (
+          <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-black/40 backdrop-blur-sm">
+            <motion.div
+              initial={{ opacity: 0, y: 20, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 20, scale: 0.95 }}
+              className="bg-[#1c1c1e] border border-white/10 rounded-3xl p-4 sm:p-6 w-[95vw] md:w-[800px] shadow-2xl flex flex-col max-h-[85vh]"
+            >
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-white font-bold text-lg">Änderung erfassen</h3>
+                <button
+                  onClick={() => setSelectedElement(null)}
+                  className="text-white/40 hover:text-white"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex gap-2 mb-6 shrink-0">
+                <button
+                  onClick={() => setCurrentType("text")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "text"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <Type size={16} /> Text
+                </button>
+                <button
+                  onClick={() => setCurrentType("image")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "image"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <ImageIcon size={16} /> Bild
+                </button>
+                <button
+                  onClick={() => setCurrentType("note")}
+                  className={cn(
+                    "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2",
+                    currentType === "note"
+                      ? "bg-white text-black shadow-lg"
+                      : "bg-white/5 text-white/40 hover:bg-white/10"
+                  )}
+                >
+                  <StickyNote size={16} /> Notiz
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto min-h-[200px] mb-6 hide-scrollbar" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+                {currentType === "text" && (
+                  <div className="space-y-2">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Neuer Text</label>
+                    <textarea
+                      autoFocus
+                      value={currentText}
+                      onChange={(e) => setCurrentText(e.target.value)}
+                      className="w-full h-32 bg-black/40 border border-white/10 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+                    />
+                  </div>
+                )}
+
+                {currentType === "note" && (
+                  <div className="space-y-2">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Anmerkung</label>
+                    <textarea
+                      autoFocus
+                      value={currentText}
+                      onChange={(e) => setCurrentText(e.target.value)}
+                      placeholder="Was soll hier gemacht werden?"
+                      className="w-full h-32 bg-black/40 border border-white/10 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+                    />
+                  </div>
+                )}
+
+                {currentType === "image" && (
+                  <div className="space-y-2 h-full">
+                    <label className="text-xs font-bold uppercase tracking-wider text-white/40">Neues Bild wählen</label>
+                    {assets.length === 0 ? (
+                      <div className="text-sm text-white/40 p-4 bg-white/5 rounded-xl border border-white/5 text-center">
+                        Keine Assets übergeben. Bitte das prop <code>assets</code> befüllen.
+                      </div>
+                    ) : (
+                      <>
+                        <style>{`.hide-scrollbar::-webkit-scrollbar { display: none; }`}</style>
+                        <div className="mb-3">
+                          <input
+                            type="text"
+                            placeholder="Suchen nach Dateinamen..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-blue-500/50 transition-colors"
+                          />
+                        </div>
+                        <div 
+                          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 h-[400px] overflow-y-auto hide-scrollbar"
+                          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                        >
+                        {assets.filter(asset => asset.toLowerCase().includes(searchTerm.toLowerCase())).map((asset) => {
+                          const filename = asset.split('/').pop() || asset;
+                          return (
+                            <button
+                              key={asset}
+                              title={asset}
+                              onClick={() => setSelectedAsset(asset)}
+                              className={cn(
+                                "relative flex flex-col items-center bg-black/20 rounded-xl overflow-hidden border-2 transition-all p-2 gap-2 w-full",
+                                selectedAsset === asset
+                                  ? "border-blue-500 shadow-[0_0_0_4px_rgba(59,130,246,0.3)] bg-blue-500/10"
+                                  : "border-transparent hover:border-white/20 hover:bg-white/5"
+                              )}
+                              style={{ height: '130px' }}
+                            >
+                              <div className="w-full flex-1 rounded-lg overflow-hidden bg-black/40 flex items-center justify-center relative">
+                                {asset.match(/\.(mp4|webm)$/i) ? (
+                                  <video src={asset} className="w-full h-full object-cover opacity-80" />
+                                ) : (
+                                  <img src={asset} loading="lazy" alt={filename} className="w-full h-full object-contain" />
+                                )}
+                                {selectedAsset === asset && (
+                                  <div className="absolute inset-0 flex items-center justify-center bg-blue-500/20 backdrop-blur-[2px]">
+                                    <div className="bg-blue-500 text-white rounded-full p-1.5 shadow-lg">
+                                      <Check size={18} strokeWidth={3} />
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                              <span className="text-[11px] font-medium text-white/70 truncate w-full text-center shrink-0" title={filename}>
+                                {filename}
+                              </span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <button
+                disabled={(!currentText && currentType !== "image") || (currentType === "image" && !selectedAsset)}
+                onClick={saveAnnotation}
+                className="w-full bg-blue-500 hover:bg-blue-400 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20 shrink-0"
+              >
+                <Check size={20} />
+                Speichern
+              </button>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 4. Annotations List Sidebar */}
+      <AnimatePresence>
+        {showList && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setShowList(false)}
+              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[10001]"
+            />
+            <motion.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed top-0 right-0 h-full w-full sm:w-[400px] bg-[#1c1c1e] border-l border-white/10 z-[10002] shadow-2xl flex flex-col"
+            >
+              <div className="p-8 border-b border-white/10 flex items-center justify-between">
+                <div>
+                  <h2 className="text-2xl font-bold text-white mb-1">Korrekturen</h2>
+                  <p className="text-white/40 text-sm">{annotations.length} erfasst</p>
+                </div>
+                <button
+                  onClick={() => setShowList(false)}
+                  className="p-2 text-white/40 hover:text-white bg-white/5 rounded-xl transition-colors"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-6 space-y-4">
+                {annotations.length === 0 ? (
+                  <div className="h-full flex flex-col items-center justify-center text-center px-8 opacity-40">
+                    <List size={48} className="mb-4" />
+                    <p>Noch keine Korrekturen vorhanden.</p>
+                  </div>
+                ) : (
+                  annotations.map((ann) => (
+                    <div
+                      key={ann.id}
+                      className="bg-white/5 border border-white/5 rounded-2xl p-4 flex flex-col gap-3 group relative"
+                    >
+                      <button 
+                        onClick={() => deleteAnnotation(ann.id)}
+                        className="absolute top-4 right-4 text-white/20 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                      
+                      <div className="flex items-center gap-2">
+                        <span className={cn(
+                          "px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider flex items-center gap-1",
+                          ann.type === "text" ? "bg-blue-500/20 text-blue-400" :
+                          ann.type === "image" ? "bg-purple-500/20 text-purple-400" :
+                          "bg-orange-500/20 text-orange-400"
+                        )}>
+                          {ann.type === "text" && <Type size={12} />}
+                          {ann.type === "image" && <ImageIcon size={12} />}
+                          {ann.type === "note" && <StickyNote size={12} />}
+                          {ann.type}
+                        </span>
+                      </div>
+                      
+                      {ann.type === "image" ? (
+                        <div className="flex items-center gap-2">
+                          <img src={ann.newContent} alt="New" className="w-16 h-16 object-cover rounded-lg bg-white/10" />
+                          <div className="text-xs text-white/60 flex-1 truncate">{ann.newContent}</div>
+                        </div>
+                      ) : (
+                        <p className="text-white text-sm whitespace-pre-wrap">{ann.newContent}</p>
+                      )}
+                      
+                      <div className="text-[10px] text-white/30 truncate mt-2 font-mono flex items-center gap-2">
+                        <span>{ann.selector}</span>
+                        {ann.url && <span className="truncate max-w-[100px] text-blue-400" title={ann.url}>{new URL(ann.url).pathname}</span>}
+                      </div>
+                      <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-white/5">
+                        {ann.timestamp && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            {new Date(ann.timestamp).toLocaleString()}
+                          </span>
+                        )}
+                        {ann.viewportWidth && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            {ann.viewportWidth}x{ann.viewportHeight}
+                          </span>
+                        )}
+                        {ann.scrollX !== undefined && (
+                          <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/5 text-white/40">
+                            Scroll: {Math.round(ann.scrollX)},{Math.round(ann.scrollY)}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+              
+              {annotations.length > 0 && (
+                <div className="p-6 border-t border-white/10 flex flex-col gap-3">
+                  {onSubmit && (
+                    <button
+                      onClick={handleSubmit}
+                      disabled={isSubmitting}
+                      className="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isSubmitting ? (
+                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                      ) : (
+                        <Check size={20} />
+                      )}
+                      {isSubmitting ? "Wird gesendet..." : "Korrekturen an Entwickler senden"}
+                    </button>
+                  )}
+                  <button
+                    onClick={exportJSON}
+                    className={cn(
+                      "w-full font-bold py-3 rounded-2xl flex items-center justify-center gap-2 transition-all",
+                      onSubmit ? "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white" : "bg-blue-500 hover:bg-blue-400 text-white shadow-lg shadow-blue-500/20 py-4"
+                    )}
+                  >
+                    <Download size={onSubmit ? 18 : 20} />
+                    JSON {onSubmit && "lokal "}Exportieren
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (confirm("Möchtest du wirklich alle erfassten Korrekturen löschen?")) {
+                        setAnnotations([]);
+                      }
+                    }}
+                    className="w-full bg-red-500/10 text-red-500 hover:bg-red-500/20 font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-all mt-2"
+                  >
+                    <Trash2 size={18} />
+                    Alle löschen
+                  </button>
+                </div>
+              )}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/annotator-local/index.ts

@@ -0,0 +1 @@
+export { Annotator } from "./Annotator";

components/providers/TransitionProvider.tsx

@@ -60,7 +60,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
     setTimeout(() => {
       router.push(href);
       
-      // Fallback: If for some reason the route doesn't change after 5 seconds, open the shutter anyway
+      // Fallback: If for some reason the route doesn't change after 60 seconds (useful for slow dev servers), open the shutter anyway
       setTimeout(() => {
         setIsTransitioning((current) => {
           if (current) {
@@ -69,7 +69,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           }
           return current;
         });
-      }, 5000);
+      }, 60000);
     }, 700);
   }, [isTransitioning, router]);
 

content/de/home.mdx

@@ -121,8 +121,8 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       description: "Kabelleitungstiefbau (Hoch-/Mittel- und Niederspannung) sowie Kabelmontagen bis 110 kV",
       tag: "Energie",
       size: "large",
-      href: "/de/kabelnetzbau",
-      image: { url: "/assets/photos/DSC01123.JPG", alt: "Kabelleitungstiefbau" }
+      href: "/de/kabeltiefbau",
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg", alt: "Kabelleitungstiefbau" }
     },
     {
       title: "Bohrtechnik",
@@ -130,7 +130,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       tag: "Innovation",
       size: "medium",
       href: "/de/bohrtechnik",
-      image: { url: "/assets/photos/DSC08653.JPG", alt: "Bohrtechnik" }
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-47.jpg", alt: "Bohrtechnik" }
     },
     {
       title: "Planung",

content/de/kompetenzen.mdx

@@ -27,8 +27,8 @@ layout: "fullBleed"
       description: "Klassischer Grabenbau, professionelle Verlegung und Kabelmontage (Hoch-, Mittel- und Niederspannung) bis 110 kV.",
       tag: "Energie",
       size: "large",
-      href: "/de/kabelnetzbau",
-      image: { url: "/assets/photos/DSC01123.JPG", alt: "Kabelleitungstiefbau" }
+      href: "/de/kabeltiefbau",
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg", alt: "Kabelleitungstiefbau" }
     },
     {
       title: "Bohrtechnik",
@@ -36,7 +36,7 @@ layout: "fullBleed"
       tag: "Innovation",
       size: "medium",
       href: "/de/bohrtechnik",
-      image: { url: "/assets/photos/DSC08653.JPG", alt: "Bohrtechnik" }
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-47.jpg", alt: "Bohrtechnik" }
     },
     {
       title: "Glasfaser",

content/en/home.mdx

@@ -121,8 +121,8 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       description: "Cable civil engineering (high, medium, low voltage) and cable assembly up to 110 kV",
       tag: "Energy",
       size: "large",
-      href: "/en/cable-civil-engineering",
-      image: { url: "/assets/photos/DSC01123.JPG", alt: "Cable Civil Engineering" }
+      href: "/en/kabeltiefbau",
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg", alt: "Cable Civil Engineering" }
     },
     {
       title: "Drilling Technology",
@@ -130,7 +130,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       tag: "Innovation",
       size: "medium",
       href: "/en/drilling-technology",
-      image: { url: "/assets/photos/DSC08653.JPG", alt: "Drilling Technology" }
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-47.jpg", alt: "Drilling Technology" }
     },
     {
       title: "Planning",

content/en/kompetenzen.mdx

@@ -27,8 +27,8 @@ layout: "fullBleed"
       description: "Classic trench construction, professional laying and cable assembly (high, medium, and low voltage) up to 110 kV.",
       tag: "Energy",
       size: "large",
-      href: "/en/cable-civil-engineering",
-      image: { url: "/assets/photos/DSC01123.JPG", alt: "Cable Civil Engineering" }
+      href: "/en/kabeltiefbau",
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg", alt: "Cable Civil Engineering" }
     },
     {
       title: "Drilling Technology",
@@ -36,7 +36,7 @@ layout: "fullBleed"
       tag: "Innovation",
       size: "medium",
       href: "/en/drilling-technology",
-      image: { url: "/assets/photos/DSC08653.JPG", alt: "Drilling Technology" }
+      image: { url: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-47.jpg", alt: "Drilling Technology" }
     },
     {
       title: "Fiber Optics",

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "packageManager": "pnpm@10.18.3",
   "dependencies": {
-    "@mintel/annotator": "file:mintel-annotator-1.0.9.tgz",
+    "@medv/finder": "^4.0.2",
     "@mintel/mail": "1.9.5",
     "@mintel/next-config": "1.9.5",
     "@mintel/next-feedback": "1.9.5",

pnpm-lock.yaml

@@ -12,9 +12,9 @@ importers:
 
   .:
     dependencies:
-      '@mintel/annotator':
-        specifier: file:mintel-annotator-1.0.9.tgz
-        version: file:mintel-annotator-1.0.9.tgz(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@medv/finder':
+        specifier: ^4.0.2
+        version: 4.0.2
       '@mintel/mail':
         specifier: 1.9.5
         version: 1.9.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -78,9 +78,6 @@ importers:
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
-      mintel-annotator:
-        specifier: link:mintel-annotator
-        version: link:mintel-annotator
       next:
         specifier: 16.1.6
         version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0)
@@ -1407,13 +1404,6 @@ packages:
   '@medv/finder@4.0.2':
     resolution: {integrity: sha512-RraNY9SCcx4KZV0Dh6BEW6XEW2swkqYca74pkFFRw6hHItSHiy+O/xMnpbofjYbzXj0tSpBGthUF1hHTsr3vIQ==}
 
-  '@mintel/annotator@file:mintel-annotator-1.0.9.tgz':
-    resolution: {integrity: sha512-UlxKKqpHdHcZ1zxNr8EP9xG/b+A8tTMOqGnIJ8QNI21VPkM0eIQrtUxEiK9yENlMRWK14+q3JSVMQwWlQ9WzlQ==, tarball: file:mintel-annotator-1.0.9.tgz}
-    version: 1.0.9
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-
   '@mintel/eslint-config@1.9.11':
     resolution: {integrity: sha512-g0FfWbSjfNuKAWa9yd4eC02mr9db66Y71TZ+FN3aUrLLMjwn3qqtEHez+8Dbray0loLiGDkm75EI7N0+mgA9yA==, tarball: https://git.infra.mintel.me/api/packages/mmintel/npm/%40mintel%2Feslint-config/-/1.9.11/eslint-config-1.9.11.tgz}
 
@@ -4951,20 +4941,6 @@ packages:
       react-dom:
         optional: true
 
-  framer-motion@12.40.0:
-    resolution: {integrity: sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -5958,11 +5934,6 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  lucide-react@1.21.0:
-    resolution: {integrity: sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -6268,18 +6239,12 @@ packages:
   motion-dom@12.38.0:
     resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
 
-  motion-dom@12.40.0:
-    resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==}
-
   motion-utils@11.18.1:
     resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
 
   motion-utils@12.36.0:
     resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
 
-  motion-utils@12.39.0:
-    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -7543,9 +7508,6 @@ packages:
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
-  tailwind-merge@3.6.0:
-    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
-
   tailwindcss@4.2.2:
     resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
@@ -9358,18 +9320,6 @@ snapshots:
 
   '@medv/finder@4.0.2': {}
 
-  '@mintel/annotator@file:mintel-annotator-1.0.9.tgz(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@medv/finder': 4.0.2
-      clsx: 2.1.1
-      framer-motion: 12.40.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      lucide-react: 1.21.0(react@19.2.4)
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      tailwind-merge: 3.6.0
-    transitivePeerDependencies:
-      - '@emotion/is-prop-valid'
-
   '@mintel/eslint-config@1.9.11(@typescript-eslint/parser@8.58.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/eslintrc': 3.3.5
@@ -13258,15 +13208,6 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  framer-motion@12.40.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
-    dependencies:
-      motion-dom: 12.40.0
-      motion-utils: 12.39.0
-      tslib: 2.8.1
-    optionalDependencies:
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-
   fresh@0.5.2: {}
 
   from@0.1.7: {}
@@ -14376,10 +14317,6 @@ snapshots:
     dependencies:
       react: 19.2.4
 
-  lucide-react@1.21.0(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-
   lz-string@1.5.0: {}
 
   maath@0.10.8(@types/three@0.183.1)(three@0.183.2):
@@ -14915,16 +14852,10 @@ snapshots:
     dependencies:
       motion-utils: 12.36.0
 
-  motion-dom@12.40.0:
-    dependencies:
-      motion-utils: 12.39.0
-
   motion-utils@11.18.1: {}
 
   motion-utils@12.36.0: {}
 
-  motion-utils@12.39.0: {}
-
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -16508,8 +16439,6 @@ snapshots:
 
   tailwind-merge@3.5.0: {}
 
-  tailwind-merge@3.6.0: {}
-
   tailwindcss@4.2.2: {}
 
   tapable@2.3.2: {}