diff --git a/src/static/css/style.css b/src/static/css/style.css
index 0c55026..ff90f9c 100644
--- a/src/static/css/style.css
+++ b/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 {
diff --git a/src/static/js/pipeline.js b/src/static/js/pipeline.js
index 2b997ec..0f3551b 100644
--- a/src/static/js/pipeline.js
+++ b/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'
- ? '