Take-away: Befunde aus der Prüfung behoben

- Restaurant-Karte sitzt rechts über dem Pin (Zentrierung wurde vom Reveal überschrieben), Spitze zeigt auf den Pin, Überschrift bleibt frei
- Liefer-Karte rechts neben dem Zuhause-Symbol, der Weg kommt von oben aufs Haus statt hinter der Karte durch; keine Überschneidung mit dem Einleitungstext
- Karte blendet an allen Kanten weich aus (keine geraden Schnittkanten mehr), Straßenname Merkurstraße östlich vom Pin, damit der Weg ihn nicht überdeckt
- Weißer Weg-Schimmer wird mit aufgedeckt, Hahn kippt nicht mehr um und blendet am Anfang/Ende weich aus
- OpenStreetMap-Hinweis sichtbar in der Bühne, dunkler, nach den Karten in der Lesereihenfolge
- Untereinander-Ansicht schon bis 1000 px, Kartenausschnitt volle Breite; Neuaufbau nach Größenänderung verzögert

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/js/main.js

@@ -404,11 +404,14 @@
     if (!map || window.getComputedStyle(map).display === 'none') return null;
     var mx = map.offsetLeft, my = map.offsetTop, mw = map.offsetWidth, mh = map.offsetHeight;
     var pts = STREET.map(function (p) { return [mx + p[0] / 100 * mw, my + p[1] / 100 * mh]; });
-    var end = [home.offsetLeft, home.offsetTop], last = pts[pts.length - 1];
+    // Ziel: Oberkante des Zuhause-Symbols; die Liefer-Karte sitzt rechts daneben, der Weg kommt von oben
+    var end = [home.offsetLeft, home.offsetTop - 46], last = pts[pts.length - 1];
     var d = 'M' + pts.map(function (p) { return p[0].toFixed(1) + ' ' + p[1].toFixed(1); }).join(' L');
-    // Bogen nach unten-links, unter der Liefer-Karte hindurch, und von rechts zum Zuhause
-    d += ' C' + (last[0] - 40).toFixed(1) + ' ' + (last[1] + 160).toFixed(1) + ' ' +
-      (end[0] + 220).toFixed(1) + ' ' + (end[1] + 10).toFixed(1) + ' ' + end[0].toFixed(1) + ' ' + end[1].toFixed(1);
+    // Bogen nach links über der Liefer-Karte, dann von oben auf das Zuhause
+    var card = $('.tcard', home), cardTop = home.offsetTop + card.offsetTop;
+    var c1y = Math.min(last[1] + 20, cardTop - 60);
+    d += ' C' + (last[0] - (last[0] - end[0]) * .5).toFixed(1) + ' ' + c1y.toFixed(1) + ' ' +
+      end[0].toFixed(1) + ' ' + Math.min(c1y, end[1] - 120).toFixed(1) + ' ' + end[0].toFixed(1) + ' ' + end[1].toFixed(1);
     $$('path', svg).forEach(function (p) { p.setAttribute('d', d); });
     var line = $('.troute__line', svg), reveal = $('.troute__reveal', svg);
     var len = line.getTotalLength();
@@ -422,17 +425,20 @@
     var pt = routeState.path.getPointAtLength(routeState.len * at);
     var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * at + 4));
     var angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
+    if (angle < 0) angle += 360;                      // nach links = 180°, ohne Sprung bei ±180°
+    var tilt = Math.max(-25, Math.min(25, (angle - 180) * -.25));
     var w = routeState.rider.offsetWidth, h = routeState.rider.offsetHeight;
-    // Hahn schaut in Fahrtrichtung (nach links), leicht geneigt
-    routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h * .85) + 'px) scaleX(-1) rotate(' + ((angle - 180) * -.2) + 'deg)';
+    // Hahn schaut in Fahrtrichtung (nach links), am Start und kurz vor dem Ziel blendet er weich ein und aus
+    routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h * .85) + 'px) scaleX(-1) rotate(' + tilt + 'deg)';
+    routeState.rider.style.opacity = Math.max(0, Math.min(1, (progress - .03) / .06, (.94 - progress) / .06));
+    routeState.rider.style.visibility = 'visible';
   }
 
   /* ---------- Ohne GSAP: fertig ---------- */
   if (!hasGsap) {
-    routeState = buildRoute();
-    placeRider(1);
-    if (routeState) routeState.rider.style.visibility = 'hidden';
-    window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
+    var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
+    rebuildStatic();
+    var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
     return;
   }
 
@@ -467,10 +473,9 @@
   }
 
   if (reduce) {
-    routeState = buildRoute();
-    placeRider(1);
-    if (routeState) routeState.rider.style.visibility = 'hidden';
-    window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
+    var rebuildStatic = function () { routeState = buildRoute(); placeRider(1); if (routeState) routeState.rider.style.visibility = 'hidden'; };
+    rebuildStatic();
+    var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(rebuildStatic, 250); });
     return;
   }