src/static/css/style.css

@@ -5827,25 +5827,29 @@ body.tutorial-active .tutorial-cursor {
     to   { background-position: 0 0; }
 }
 
-/* U-Turn-Pfeil zwischen Snake-Reihen */
+/* Reihenwechsel-Pfeil (kompakter ↓ direkt unter dem letzten Block) */
 .pipeline-uturn {
-    height: 36px;
+    display: flex;
+    gap: var(--sp-md);
+    align-items: stretch;
+    height: 32px;
     width: 100%;
     margin: var(--sp-xs) 0;
     pointer-events: none;
-    overflow: visible;
 }
-.pipeline-uturn svg {
-    width: 100%;
+.uturn-spacer { flex: 0 0 168px; }
+.uturn-arrow {
+    flex: 0 0 168px;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+}
+.uturn-arrow svg {
+    width: 24px;
     height: 100%;
     overflow: visible;
 }
-.pipeline-uturn-path {
-    fill: none;
-    stroke: var(--border);
-    stroke-width: 2;
-    stroke-linecap: round;
-}
+.pipeline-uturn-path,
 .pipeline-uturn-head {
     fill: none;
     stroke: var(--border);
@@ -5855,12 +5859,12 @@ body.tutorial-active .tutorial-cursor {
 }
 .pipeline-uturn.is-flowing .pipeline-uturn-path {
     stroke: var(--accent);
-    stroke-dasharray: 8 6;
-    animation: pipelineUturnDash 0.9s linear infinite;
+    stroke-dasharray: 6 4;
+    animation: pipelineUturnDash 0.7s linear infinite;
 }
 .pipeline-uturn.is-flowing .pipeline-uturn-head { stroke: var(--accent); }
 @keyframes pipelineUturnDash {
-    to { stroke-dashoffset: -28; }
+    to { stroke-dashoffset: -20; }
 }
 
 .pipeline-loop {

src/static/js/pipeline.js

@@ -246,22 +246,20 @@ const Pipeline = {
         `;
     },
 
-    /** U-Turn-Pfeil zwischen zwei Reihen (Snake-Übergang). */
+    /** Kompakter Reihenwechsel-Pfeil: kurzer ↓ direkt unter dem letzten Block der oberen Reihe. */
     _renderUturn(side, fromKey) {
-        // SVG-Bogen + Pfeilkopf, side="right" startet rechts oben, "left" startet links oben.
-        // viewBox: 100 wide, 44 high
-        const path = side === 'right'
-            ? 'M 92 0 L 92 18 A 14 14 0 0 1 78 32 L 8 32'
-            : 'M 8 0 L 8 18 A 14 14 0 0 0 22 32 L 92 32';
-        const head = side === 'right'
-            ? '<polyline points="14,26 8,32 14,38"/>'
-            : '<polyline points="86,26 92,32 86,38"/>';
+        const arrowSvg = `
+            <div class="uturn-arrow">
+                <svg viewBox="0 0 24 32" preserveAspectRatio="xMidYMid meet">
+                    <path d="M 12 2 L 12 24" class="pipeline-uturn-path"/>
+                    <polyline points="6,18 12,24 18,18" class="pipeline-uturn-head"/>
+                </svg>
+            </div>`;
+        const spacers = '<span class="uturn-spacer"></span><span class="uturn-spacer"></span>';
+        const inner = side === 'right' ? (spacers + arrowSvg) : (arrowSvg + spacers);
         return `
             <div class="pipeline-uturn" data-side="${side}" data-from="${fromKey}" data-arrow-type="uturn" aria-hidden="true">
-                <svg viewBox="0 0 100 44" preserveAspectRatio="none">
-                    <path d="${path}" class="pipeline-uturn-path"/>
-                    <g class="pipeline-uturn-head">${head}</g>
-                </svg>
+                ${inner}
             </div>
         `;
     },