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/css/style.css

@@ -724,39 +724,92 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
 .buckets__note { margin-top: 2.5rem; text-align: center; opacity: .8; font-size: .95rem; }
 
 /* ============ Take away (route) ============ */
-.takeaway { overflow-x: clip; background: var(--yellow); color: var(--ink); --spot: rgba(255, 255, 220, .5); --spot-x: 25%; --spot-y: 25%; --dot: rgba(229, 19, 11, .85); --dots-o: .16; --dots-mask: linear-gradient(200deg, #000, transparent 50%); --mottle-o: .06; --grain-o: .1; }
-.takeaway .torn { color: var(--yellow); }
-.takeaway__burst { right: -12%; top: -8%; width: min(900px, 70vw); aspect-ratio: 1; background: repeating-conic-gradient(rgba(229, 19, 11, .14) 0 6deg, transparent 6deg 15deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent); }
-.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .04em; --ext: var(--ink); max-width: 13ch; }
+.takeaway { overflow: clip; background: var(--yellow); color: var(--ink); --spot: rgba(255, 255, 220, .5); --spot-x: 25%; --spot-y: 25%; --dot: rgba(229, 19, 11, .85); --dots-o: .16; --dots-mask: linear-gradient(200deg, #000, transparent 50%); --mottle-o: .06; --grain-o: .1; }
+.takeaway .h2 { color: var(--white); --stroke-c: var(--ink); --sw: .04em; --ext: var(--ink); max-width: 13ch; position: relative; z-index: 3; }
+.takeaway .kicker, .takeaway__lead { position: relative; z-index: 3; }
 .takeaway__lead { max-width: 40ch; margin-top: 1.4rem; font-weight: 500; }
-.route { position: relative; margin-top: clamp(6rem, 10vw, 9rem); }
-.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
-.route__svg path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; opacity: .55; }
-.route__rider { position: absolute; left: 0; top: 0; width: clamp(64px, 7vw, 100px); z-index: 3; will-change: transform; pointer-events: none; }
-.stops { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: start; }
-.stop {
-  border: 3px solid var(--ink); border-radius: var(--radius);
-  padding: clamp(1.3rem, 2.4vw, 2rem);
-  box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
-  transition: transform .45s var(--ease-pop), box-shadow .3s;
+
+/* Bühne: Karte rechts (läuft aus dem Bild), roter Pin am Restaurant, Weg nach links zum Zuhause */
+.tstage {
+  --mw: clamp(1050px, 88vw, 1650px);  /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
+  --pin-x: 70%; --pin-y: 50%;          /* Restaurant auf der Bühne */
+  --home-x: 8%; --home-y: 92%;
+  /* Bühne zieht sich rechts neben die Überschrift hoch, links bleibt der Text frei */
+  position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, -21vw, -200px);
 }
-.stop:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
-.stop:nth-child(3) { margin-top: clamp(4rem, 12vw, 12rem); }
-.stop:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--red), 20px 30px 40px rgba(90, 50, 0, .3); }
-.stop__num { font-family: var(--f-display); font-size: 3.6rem; line-height: .8; color: var(--red); --ext: var(--oxblood); text-shadow: 1px 1px 0 var(--ext), 2px 2px 0 var(--ext), 3px 3px 0 var(--ext), 4px 4px 0 var(--ext); }
-.stop h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; margin: .5rem 0 .6rem; }
-.stop p { font-size: 1rem; }
-.stop__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
-.stop__links a {
+.tmap {
+  position: absolute; z-index: 0; pointer-events: none;
+  width: var(--mw); aspect-ratio: 1400 / 1080;
+  left: calc(var(--pin-x) - .4 * var(--mw)); top: calc(var(--pin-y) - .4783 * var(--mw));
+}
+.tmap__img {
+  width: 100%; height: 100%;
+  -webkit-mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
+  mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
+}
+.troute { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
+.troute path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.troute__glow { stroke: rgba(255, 255, 255, .55); stroke-width: 14; }
+.troute__line { stroke: var(--red); stroke-width: 6; stroke-dasharray: .1 14; }
+.troute__reveal { stroke: #fff; stroke-width: 30; }
+.troute__rider { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
+
+.tspot { position: absolute; z-index: 2; width: 0; height: 0; }
+.tspot--shop { left: var(--pin-x); top: var(--pin-y); }
+.tspot--home { left: var(--home-x); top: var(--home-y); }
+.tspot__minimap { display: none; }
+
+/* Pin: Tropfen mit Hahn, darunter ein pulsierender Punkt */
+.tpin { position: absolute; left: 0; top: 0; }
+.tpin__dot { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 4px solid #fff; box-shadow: 0 3px 8px rgba(80, 0, 0, .4); }
+.tpin__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(229, 19, 11, .45); animation: pin-pulse 2s ease-out infinite; z-index: -1; }
+@keyframes pin-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
+.tpin__head {
+  position: absolute; left: -32px; top: -86px; width: 64px; height: 64px;
+  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
+  background: linear-gradient(135deg, var(--red-hot), var(--red-deep));
+  border: 4px solid #fff; box-shadow: -6px 10px 18px rgba(80, 0, 0, .4);
+  display: grid; place-items: center;
+}
+.tpin__head img { width: 64%; height: auto; transform: rotate(45deg) translateY(-1px); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
+
+/* App-Symbol "Zuhause" */
+.tapp { position: absolute; left: -40px; top: -40px; width: 80px; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
+.tapp__icon {
+  width: 80px; height: 80px; border-radius: 24px; display: grid; place-items: center; color: #fff;
+  background: linear-gradient(160deg, #ff4b26, var(--red) 45%, var(--red-deep));
+  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 14px 26px rgba(120, 40, 0, .35), 0 0 0 4px #fff;
+}
+.tapp__icon svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
+.tapp__label { font-weight: 700; font-size: .85rem; color: var(--ink); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .1em .6em; }
+
+/* Info-Karten über Pin und Zuhause */
+.tcard {
+  position: absolute; bottom: 106px; width: min(360px, 30vw);
+  border: 3px solid var(--ink); border-radius: var(--radius);
+  padding: clamp(1.1rem, 2vw, 1.6rem);
+  box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
+}
+.tspot--shop .tcard { left: 0; translate: -50% 0; }
+.tspot--home .tcard { left: -44px; bottom: 74px; }
+.tcard::after { content: ""; position: absolute; bottom: -14px; width: 22px; height: 22px; background: inherit; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); background-color: #fdf4e3; }
+.tspot--shop .tcard::after { left: calc(50% - 11px); }
+.tspot--home .tcard::after { left: 33px; }
+.tcard__kicker { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red-deep); }
+.tcard__kicker svg { width: 1.1em; height: 1.1em; }
+.tcard h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1; margin: .45rem 0 .5rem; }
+.tcard p { font-size: .95rem; }
+.tcard__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
+.tcard__links a {
   display: inline-flex; align-items: center; gap: .4em;
   font-weight: 800; font-size: .95rem; text-decoration: none;
   padding: .55em .95em; border-radius: 999px; border: 2px solid var(--ink);
   transition: background-color .2s, color .2s;
 }
-.stop__links a:hover { background: var(--ink); color: var(--yellow); }
-.stop__links a.is-primary { background: var(--red); border-color: var(--red); color: var(--white); }
-.stop__links a.is-primary:hover { background: var(--ink); border-color: var(--ink); }
-.stop__links svg { width: 1em; height: 1em; }
+.tcard__links a:hover { background: var(--ink); color: var(--yellow); }
+.tcard__links a.is-primary { background: var(--red); border-color: var(--red); color: var(--white); }
+.tcard__links a.is-primary:hover { background: var(--ink); border-color: var(--ink); }
+.tcard__links svg { width: 1em; height: 1em; }
 
 /* ============ Visit ============ */
 .visit { --mottle-o: .12; --grain-o: .16; }
@@ -1173,9 +1226,22 @@ html.js.anim .juggle { visibility: hidden; }
   .classic-wings__prices { justify-content: flex-start; }
   .fight-card-row { grid-template-columns: 1fr; }
   .vs { justify-self: center; margin: -.5rem 0; }
-  .stops { grid-template-columns: 1fr; }
-  .stop:nth-child(2), .stop:nth-child(3) { margin-top: 0; }
-  .route__svg, .route__rider { display: none; }
+  .tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
+  .tmap, .troute, .troute__rider { display: none; }
+  .tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
+  .tspot__minimap {
+    display: block; position: relative; height: 300px; margin: 0 calc(-1 * var(--gutter)); overflow: hidden;
+    -webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
+  }
+  .tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
+  .tspot--shop .tpin { left: 50%; top: 150px; }
+  .tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
+  .tspot--shop .tcard { margin-top: -2.2rem; }
+  .tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
+  .tspot--home { display: flex; flex-direction: column; align-items: center; }
+  .tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
+  .tapp { position: relative; left: auto; top: auto; }
+  .tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; }
   .orderbar { display: flex; }
   .cta__rooster { width: 46vw; margin-top: -.5rem; }
   .footer { padding-bottom: 5.5rem; }

assets/img/map-kaiserslautern.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1080" fill="none" stroke-linecap="round" stroke-linejoin="round"><defs><path id="s0" d="M141 745L499 674 533 666 555 658 576 646 595 632 737 496 746 491"/><path id="s2" d="M1119 892L1162 987 1167 991 1175 991 1241 980 1297 965"/><path id="s5" d="M832 928L900 916 909 924 928 926 1109 896 1119 892"/></defs><path fill="#ffd654" stroke="none" d="M118 167L112 168 102 182 107 190 141 191 177 149 142 122 118 167Z M737 787L759 839 730 852 763 923 768 922 769 925 745 928 635 910 585 905 574 901 565 894 505 893 505 901 377 892 327 891 327 887 260 886 261 880 307 870 307 859 424 847 550 830 605 808 731 765 741 783 737 787Z M371 466L334 509 338 527 384 518 382 508 543 476 535 449 442 436 405 449 371 466Z M1406 486L1485 446 1516 501 1433 545 1406 486Z M932 185L876 218 868 226 932 225 932 185Z M1026 254L933 252 934 184 1011 141 1011 171 1015 171 1029 171 1026 254Z M1423 635L1394 643 1391 650 1407 701 1414 705 1445 695 1448 686 1430 639 1423 635Z M1214 91L1177 118 1190 139 1226 106 1214 91Z M782 1162L787 1164 785 1171 741 1178 719 1179 703 1182 690 1187 506 1215 505 1210 522 1208 537 1202 782 1162Z M803 1169L881 1156 922 1144 1030 1124 1054 1114 1007 1104 1003 1114 994 1118 935 1129 905 1123 885 1136 858 1141 845 1149 815 1155 798 1153 797 1159 803 1169Z M492 1212L493 1218 283 1250 282 1245 492 1212Z M1046 1133L1104 1108 1118 1105 1136 1105 1146 1108 1096 1123 1046 1133Z M821 1154L824 1130 856 1125 857 1112 905 1123 885 1136 858 1141 845 1149 821 1154Z M940 709L994 684 1031 762 977 787 940 709Z M992 797L1043 774 1082 861 1031 884 992 797Z M940 773L985 867 931 893 886 798 940 773Z M385 1214L395 1201 401 1204 403 1216 385 1219 385 1214Z M734 1059L768 1054 771 1069 737 1075 734 1072 732 1063 734 1059Z M776 1106L780 1132 791 1130 796 1091 759 1097 761 1107 776 1106Z M476 1187L403 1199 400 1176 471 1083 529 1034 571 1002 581 1014 568 1025 579 1042 559 1054 562 1057 557 1060 564 1076 562 1076 567 1085 565 1086 567 1090 557 1095 507 1134 468 1141 476 1187Z M709 1035L746 1027 774 1024 758 991 770 988 761 974 754 969 717 963 686 964 683 967 690 1006 643 1021 636 965 593 985 602 1001 590 1007 603 1036 584 1045 577 1055 577 1068 583 1084 629 1059 709 1035Z M1069 1099L1064 1070 1062 1069 995 1079 998 1069 983 1064 982 1066 973 1063 974 1061 934 1049 931 1058 915 1054 917 1049 900 1045 900 1047 837 1034 841 1007 871 1014 879 982 921 994 1040 1035 1149 1083 1069 1099Z M857 1112L935 1129 943 1105 922 1100 920 1109 886 1101 889 1091 861 1085 857 1112Z M279 1219L298 1194 400 1176 471 1083 529 1034 571 1002 581 1014 584 1010 602 1001 593 985 636 965 636 945 577 959 579 982 528 1018 482 1059 435 1105 410 1138 388 1159 365 1168 340 1173 335 1157 272 1169 279 1219Z M649 1003L645 989 674 979 679 993 649 1003Z M636 965L643 1021 690 1006 683 967 636 965Z M1048 1010L1113 1001 1113 995 1133 995 1130 1030 1156 1032 1176 1076 1049 1019 1048 1010Z M852 951L892 945 891 940 923 935 927 957 954 953 956 962 1018 951 1016 941 1087 929 1093 968 1100 967 1102 983 1112 982 1113 1001 1048 1010 1049 1019 974 989 917 969 852 951Z M1052 1011L1100 1005 1100 1029 1052 1016 1052 1011Z M1321 964L1326 978 1380 958 1377 951 1418 935 1428 926 1321 964Z M793 349L781 349 781 353 779 353 778 381 758 387 729 387 731 376 744 358 864 228 886 228 886 242 873 242 873 247 871 247 871 274 851 280 838 280 838 287 836 287 838 311 836 311 835 350 793 349Z M1097 119L1073 101 1106 72 1117 74 1111 103 1116 117 1157 125 1168 117 1175 75 1199 79 1204 53 1198 52 1206 8 1224 11 1221 27 1263 35 1251 92 1226 106 1190 139 1172 158 1096 157 1097 119Z M1306 115L1327 128 1338 119 1348 108 1350 114 1348 125 1341 134 1331 141 1302 119 1306 115Z M1296 279L1284 271 1269 287 1250 302 1261 315 1296 279Z M1340 508L1375 493 1380 508 1362 507 1342 511 1340 508Z M1085 634L1023 663 1020 668 1043 717 1110 683 1085 634Z M833 908L840 906 843 916 836 918 833 908Z M879 918L833 925 814 907 813 886 804 876 782 826 788 824 773 788 804 775 836 754 853 786 805 810 808 823 804 825 820 876 834 873 839 886 835 887 839 905 843 903 847 918 864 914 861 906 871 903 879 918Z M798 1084L727 1095 717 1087 714 1077 652 1095 613 1114 576 1137 534 1170 522 1190 544 1186 544 1175 615 1164 612 1125 631 1121 639 1165 659 1161 653 1118 671 1115 679 1163 700 1159 693 1111 713 1109 720 1159 732 1157 732 1151 740 1149 733 1104 750 1101 761 1158 790 1154 798 1084Z M808 1074L861 1082 926 1100 924 1119 852 1103 847 1096 807 1105 808 1074Z M912 929L899 919 832 931 819 916 801 917 793 922 773 926 850 948 889 943 889 939 913 935 912 929Z M924 922L905 910 885 912 915 904 924 922Z M698 945L787 963 798 984 785 999 763 969 703 953 698 945Z M773 1067L779 1067 782 1063 783 1049 770 1049 729 1055 730 1059 771 1053 773 1067Z M1152 642L1172 684 1188 676 1170 635 1152 642Z M-963 3113L-1005 3135 -921 3127 -846 3117 -797 3107 -750 3090 -635 3032 -446 2928 -361 2899 -282 2882 -246 2867 -225 2856 53 2582 131 2511 227 2461 416 2384 557 2320 591 2301 642 2265 664 2246 788 2102 830 2066 892 2027 991 Line truncated

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;
   }
 

index.html

@@ -301,44 +301,46 @@
         </div>
         <p class="buckets__note" data-reveal>Lieber einzeln? Tenders gibt’s ab 5 Stück, Menüs mit Pommes und Coleslaw – <a href="speisekarte.html#chicken">alles auf der Karte</a>.</p>
       </div>
+      <div class="torn torn--in" aria-hidden="true" style="color: var(--yellow)"></div>
     </section>
 
     <!-- ============ TAKE AWAY ============ -->
     <section class="section bg-yellow takeaway" id="bestellen" aria-labelledby="takeaway-title">
-      <div class="torn" aria-hidden="true"></div>
-      <div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="takeaway__burst"></div><div class="fx__dots"></div><div class="fx__mottle"></div><div class="fx__grain"></div></div>
+      <div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__dots"></div><div class="fx__mottle"></div><div class="fx__grain"></div></div>
       <div class="wrap">
         <span class="kicker kicker--ink" data-reveal>Take away</span>
-        <h2 class="display h2 stroke x3d" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
-        <p class="takeaway__lead lead" data-reveal>Drei Wege zu deinem Chicken – alle starten in der Merkurstraße 13.</p>
+        <h2 class="display h2 h2--sm stroke x3d" id="takeaway-title" data-pop>Hol’s dir. Oder lass kommen.</h2>
+        <p class="takeaway__lead lead" data-reveal>Zwei Wege zu deinem Chicken: vorbeikommen in der Merkurstraße 13 – oder liefern lassen, direkt bis vor deine Tür.</p>
 
-        <div class="route" data-route>
-          <svg class="route__svg" aria-hidden="true" preserveAspectRatio="none"><path d=""/></svg>
-          <img class="route__rider die-cut" src="assets/img/rooster.svg" alt="" width="179" height="264">
-          <div class="stops">
-            <article class="stop paper" data-reveal>
-              <div class="stop__num">01</div>
-              <h3>Vor Ort essen</h3>
-              <p>Restaurant &amp; Bar mit Plätzen drinnen und draußen. Einfach vorbeikommen – mit größerer Gruppe am besten vorher anrufen.</p>
-              <div class="stop__links">
+        <div class="tstage" data-delivery>
+          <div class="tmap" aria-hidden="true">
+            <img class="tmap__img" src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async">
+          </div>
+          <svg class="troute" aria-hidden="true"><defs><mask id="troute-mask" maskUnits="userSpaceOnUse"><path class="troute__reveal"/></mask></defs><path class="troute__glow"/><path class="troute__line" mask="url(#troute-mask)"/></svg>
+          <img class="troute__rider die-cut" src="assets/img/rooster.svg" alt="" aria-hidden="true" width="179" height="264">
+          <div class="tspot tspot--shop">
+            <div class="tspot__minimap" aria-hidden="true"><img src="assets/img/map-kaiserslautern.svg" width="1400" height="1080" alt="" loading="lazy" decoding="async"></div>
+            <span class="tpin" aria-hidden="true" data-route-start><span class="tpin__head"><img src="assets/img/rooster.svg" alt="" width="179" height="264"></span><span class="tpin__dot"></span></span>
+            <article class="tcard paper" data-reveal>
+              <span class="tcard__kicker"><svg aria-hidden="true"><use href="#i-pin"/></svg>Merkurstraße 13 · 12–22 Uhr</span>
+              <h3>Vor Ort essen oder abholen</h3>
+              <p>Restaurant &amp; Bar mit Plätzen drinnen und draußen. Oder telefonisch bestellen und heiß mitnehmen.</p>
+              <div class="tcard__links">
                 <a class="is-primary" href="https://www.google.com/maps/dir/?api=1&amp;destination=Merkurstra%C3%9Fe+13%2C+67663+Kaiserslautern" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-pin"/></svg>Route planen</a>
                 <a href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>Anrufen</a>
               </div>
             </article>
-            <article class="stop paper" data-reveal>
-              <div class="stop__num">02</div>
-              <h3>Abholen</h3>
-              <p>Telefonisch bestellen oder bei Lieferando „Abholung“ wählen – und heiß mitnehmen.</p>
-              <div class="stop__links">
-                <a class="is-primary" href="tel:+496313107985"><svg aria-hidden="true"><use href="#i-phone"/></svg>0631 3107985</a>
-                <a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a>
-              </div>
-            </article>
-            <article class="stop paper" data-reveal>
-              <div class="stop__num">03</div>
-              <h3>Liefern lassen</h3>
-              <p>Keine Lust rauszugehen? Bestell bequem über Lieferando oder Uber Eats und lass es dir bringen.</p>
-              <div class="stop__links">
+          </div>
+          <div class="tspot tspot--home">
+            <span class="tapp" aria-hidden="true" data-route-end>
+              <span class="tapp__icon"><svg viewBox="0 0 24 24"><path d="M3.5 11.2 12 4l8.5 7.2V20a1 1 0 0 1-1 1h-5v-6h-5v6h-5a1 1 0 0 1-1-1v-8.8Z" fill="currentColor"/></svg></span>
+              <span class="tapp__label">Zuhause</span>
+            </span>
+            <article class="tcard paper" data-reveal>
+              <span class="tcard__kicker"><svg aria-hidden="true"><use href="#i-bag"/></svg>Lass kommen</span>
+              <h3>Nach Hause liefern</h3>
+              <p>Keine Lust rauszugehen? Bestell bequem über Lieferando oder Uber Eats.</p>
+              <div class="tcard__links">
                 <a class="is-primary" href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener"><svg aria-hidden="true"><use href="#i-bag"/></svg>Lieferando</a>
                 <a href="https://www.ubereats.com/de/store/chickago-boys-kaiserslautern/5Yb4dNqDVJOuStkhhdC4qw" target="_blank" rel="noopener">Uber Eats</a>
               </div>