Take-away neu: Karte der Umgebung, Pin am Restaurant, Lieferweg zum Zuhause

- Eigene Karten-Grafik (assets/img/map-kaiserslautern.svg) aus OpenStreetMap-Daten rund um die Merkurstraße 13, in Gelbtönen, blendet weich in den Hintergrund und läuft rechts aus dem Bild
- Roter Pin mit Hahn am Restaurant, Karte 'Vor Ort essen oder abholen' mit Route planen und Anrufen
- Gepunkteter Weg die Merkurstraße entlang bis zum App-Symbol 'Zuhause', Karte 'Nach Hause liefern' mit Lieferando und Uber Eats; Weg zeichnet sich beim Scrollen, der Hahn fährt mit
- Handy: Kartenausschnitt mit Pin, darunter die beiden Karten mit Punktlinie
- Gelbe Papierkante jetzt am Ende des Bucket-Abschnitts (Take-away schneidet die Karte ab)

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

assets/js/main.js

@@ -392,43 +392,47 @@
     });
   }
 
-  /* ---------- Route (Take away) ---------- */
-  var route = $('[data-route]');
+  /* ---------- Lieferweg (Take away): vom Pin die Merkurstraße entlang, dann zum Zuhause ---------- */
+  // Merkurstraße ab dem Restaurant nach Westen, in % der Karte (aus OpenStreetMap, siehe map-kaiserslautern.svg)
+  var STREET = [[40, 62.04], [39.64, 60.93], [35.86, 62.41], [32.14, 63.33], [24.29, 65.37], [18.79, 66.85], [10.07, 68.98]];
+  var route = $('[data-delivery]');
   var routeState = null;
   function buildRoute() {
     if (!route) return null;
-    var svg = $('.route__svg', route), path = $('path', svg), stops = $$('.stop', route);
-    if (!stops.length || window.getComputedStyle(svg).display === 'none') return null;
-    var box = route.getBoundingClientRect();
-    var pts = stops.map(function (s) {
-      var r = s.getBoundingClientRect();
-      return { x: r.left - box.left + r.width * .5, y: r.top - box.top - 34 };
-    });
-    var start = { x: Math.max(40, pts[0].x - box.width * .2), y: pts[0].y + 6 };
-    var d = 'M' + start.x + ' ' + start.y;
-    var prev = start;
-    pts.forEach(function (p, i) {
-      var dx = p.x - prev.x;
-      var lift = i % 2 ? 90 : -70;
-      d += ' C' + (prev.x + dx * .45) + ' ' + (prev.y + lift) + ' ' + (p.x - dx * .45) + ' ' + (p.y - lift) + ' ' + p.x + ' ' + p.y;
-      prev = p;
-    });
-    path.setAttribute('d', d);
-    return { path: path, len: path.getTotalLength(), rider: $('.route__rider', route) };
+    var map = $('.tmap', route), svg = $('.troute', route);
+    var home = $('.tspot--home', route);
+    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];
+    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);
+    $$('path', svg).forEach(function (p) { p.setAttribute('d', d); });
+    var line = $('.troute__line', svg), reveal = $('.troute__reveal', svg);
+    var len = line.getTotalLength();
+    reveal.style.strokeDasharray = len + ' ' + len;
+    return { path: line, reveal: reveal, len: len, rider: $('.troute__rider', route) };
   }
   function placeRider(progress) {
     if (!routeState) return;
-    var pt = routeState.path.getPointAtLength(routeState.len * progress);
-    var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * progress + 4));
+    routeState.reveal.style.strokeDashoffset = routeState.len * (1 - progress);
+    var at = Math.max(.02, Math.min(.98, progress));
+    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;
     var w = routeState.rider.offsetWidth, h = routeState.rider.offsetHeight;
-    routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h / 2) + 'px) rotate(' + (angle * .25) + 'deg)';
+    // 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)';
   }
 
   /* ---------- Ohne GSAP: fertig ---------- */
   if (!hasGsap) {
     routeState = buildRoute();
     placeRider(1);
+    if (routeState) routeState.rider.style.visibility = 'hidden';
+    window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
     return;
   }
 
@@ -465,6 +469,8 @@
   if (reduce) {
     routeState = buildRoute();
     placeRider(1);
+    if (routeState) routeState.rider.style.visibility = 'hidden';
+    window.addEventListener('resize', function () { routeState = buildRoute(); placeRider(1); });
     return;
   }