Fliegende Zutaten natürlich gestreut statt im Kreis

- Feste Positionen durch eine Streuung mit festem Seed ersetzt: dicht am Essen, nach außen immer weniger, unregelmäßige Winkel, Größe nimmt mit dem Abstand ab, keine Überlappung untereinander
- Gilt für alle Stellen (Hero, Champion-Karten, Wings, Tenders, Komm vorbei, Speisekarte); Explosion beim Scrollen unverändert
- Grenzen je Stelle, damit Zutaten nicht über Text liegen (Tenders links, Komm vorbei oben)

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

assets/js/main.js

@@ -197,42 +197,76 @@
      Jede Zutat: [Datei, x %, y % (relativ zur Essens-Box), Größe % der Box, Drehung, Ebene, auch mobil, gespiegelt]
      Ebenen: b = hinter dem Essen (leicht unscharf), f = davor */
   var BITS = 'assets/img/bits/';
-  var PRESETS = {
-    burger: [
-      ['lettuce-2', 114, 30, 20, 40, 'b', 0], ['tomato', -10, 40, 16, -12, 'b', 1], ['onion-2', 106, 88, 14, 0, 'b', 0],
-      ['jalapeno-1', 8, -8, 11, 30, 'b', 1], ['bacon', 24, -16, 20, -30, 'b', 0, 1], ['sesame-2', 64, -14, 4, 40, 'b', 0],
-      ['lettuce-1', -14, 70, 24, -25, 'f', 1], ['tomato', 110, 60, 20, 18, 'f', 1, 1], ['bacon', 100, 8, 24, 22, 'f', 1],
-      ['onion-1', -12, 12, 18, -16, 'f', 1], ['pickle', 22, 104, 13, 8, 'f', 0], ['jalapeno-2', 82, 106, 12, -24, 'f', 1],
-      ['sesame-1', 36, -8, 3.5, 0, 'f', 0], ['sesame-1', 50, -20, 3, 80, 'f', 0, 1]
-    ],
-    'burger-sm': [
-      ['onion-2', 6, 10, 15, -14, 'b', 1], ['bacon', 94, 6, 20, 24, 'b', 1],
-      ['lettuce-1', -4, 70, 20, -20, 'f', 1], ['tomato', 102, 64, 17, 18, 'f', 1], ['sesame-1', 30, -4, 3, 0, 'f', 0]
-    ],
-    'chicken-sm': [
-      ['bacon', 98, 10, 20, 24, 'b', 1, 1], ['crumb-1', 6, 4, 10, 0, 'b', 0], ['crumb-2', 88, -4, 9, 30, 'b', 0],
-      ['lettuce-2', -6, 70, 20, -24, 'f', 1], ['tomato', 104, 64, 15, 18, 'f', 1]
-    ],
-    'wrap-sm': [
-      ['jalapeno-2', 6, 6, 11, -20, 'b', 1], ['onion-2', 96, 6, 13, 20, 'b', 1],
-      ['lettuce-3', -8, 70, 20, -18, 'f', 1], ['tomato', 104, 64, 15, 22, 'f', 1]
-    ],
-    tenders: [
-      ['crumb-6', 2, 20, 11, 0, 'b', 1], ['crumb-7', 98, 14, 10, 40, 'b', 0], ['chili', 104, 78, 20, 20, 'b', 1],
-      ['crumb-1', 14, -6, 12, 10, 'f', 1], ['crumb-3', 64, -14, 11, 90, 'f', 1], ['crumb-4', 90, 8, 11, 120, 'f', 0],
-      ['crumb-8', -4, 84, 12, 70, 'f', 1], ['jalapeno-1', 40, 108, 11, -10, 'f', 0], ['crumb-5', 78, 106, 10, 30, 'f', 0]
-    ],
-    wings: [
-      ['crumb-6', 2, 34, 11, 0, 'b', 0], ['crumb-7', 98, 22, 10, 40, 'b', 1], ['chili', 102, 74, 20, 20, 'b', 0], ['jalapeno-1', -6, 66, 12, -30, 'b', 1],
-      ['crumb-1', 14, 10, 12, 10, 'f', 1], ['crumb-3', 60, 8, 11, 90, 'f', 1], ['crumb-4', 88, 12, 11, 120, 'f', 1],
-      ['crumb-5', 104, 46, 10, 0, 'f', 0], ['crumb-8', -2, 92, 11, 70, 'f', 0], ['jalapeno-2', 86, 104, 12, -10, 'f', 1], ['crumb-2', 48, 106, 9, 30, 'f', 0, 1]
-    ]
+  /* Statt fester Positionen: natürliche Streuung. Nah am Essen dicht, nach außen immer weniger,
+     unregelmäßige Winkel, kein Kreis. Fester Seed, damit es bei jedem Laden gleich aussieht.
+     items: [Datei, Grundgröße in % der Essensbreite, auch mobil]
+     edge = Rand des Essens (0,5 = Bildrand), reach = weitester Abstand, top/bottom = erlaubter Bereich in % der Höhe,
+     behind = Anteil der nahen Teile hinter dem Essen, hw = Höhe/Breite der Essens-Box */
+  var SCATTER = {
+    burger: { seed: 11, edge: .4, reach: 1, top: -34, bottom: 112, behind: .5, hw: .72, items: [
+      ['lettuce-2', 20, 1], ['tomato', 16, 1], ['bacon', 22, 1], ['onion-1', 15, 1], ['jalapeno-1', 11, 1], ['lettuce-1', 22, 1],
+      ['pickle', 11, 1], ['tomato', 13, 0], ['onion-2', 12, 0], ['jalapeno-2', 10, 0], ['bacon', 17, 0], ['lettuce-3', 17, 0],
+      ['sesame-1', 3.6, 1], ['sesame-2', 4, 0], ['sesame-1', 3, 0], ['sesame-1', 2.6, 0]
+    ] },
+    'burger-visit': { seed: 11, edge: .4, reach: .95, top: -6, bottom: 112, left: -14, behind: .5, hw: .63, items: [
+      ['lettuce-2', 20, 1], ['tomato', 16, 1], ['bacon', 22, 1], ['onion-1', 15, 1], ['jalapeno-1', 11, 1], ['lettuce-1', 22, 1],
+      ['pickle', 11, 0], ['tomato', 13, 0], ['jalapeno-2', 10, 0], ['sesame-1', 3.6, 0], ['sesame-2', 4, 0]
+    ] },
+    'burger-sm': { seed: 5, edge: .42, reach: .72, top: -14, bottom: 88, behind: .5, hw: .72, items: [
+      ['lettuce-1', 18, 1], ['tomato', 14, 1], ['bacon', 18, 1], ['onion-2', 12, 1], ['pickle', 9, 0], ['sesame-1', 3, 0]
+    ] },
+    'chicken-sm': { seed: 7, edge: .42, reach: .72, top: -14, bottom: 88, behind: .5, hw: .72, items: [
+      ['bacon', 18, 1], ['lettuce-2', 18, 1], ['tomato', 13, 1], ['crumb-1', 9, 1], ['crumb-2', 7, 0], ['crumb-3', 6, 0]
+    ] },
+    'wrap-sm': { seed: 3, edge: .42, reach: .72, top: -14, bottom: 88, behind: .5, hw: .67, items: [
+      ['lettuce-3', 18, 1], ['tomato', 13, 1], ['jalapeno-2', 10, 1], ['onion-2', 12, 1], ['jalapeno-1', 8, 0]
+    ] },
+    wings: { seed: 21, edge: .4, reach: .95, top: 4, bottom: 114, behind: .45, hw: .71, items: [
+      ['crumb-1', 11, 1], ['chili', 18, 1], ['crumb-3', 10, 1], ['jalapeno-1', 11, 1], ['crumb-6', 10, 1], ['crumb-8', 10, 1],
+      ['crumb-4', 9, 0], ['jalapeno-2', 10, 0], ['crumb-7', 8, 0], ['crumb-2', 7, 0], ['crumb-5', 7, 0], ['crumb-2', 5, 0]
+    ] },
+    tenders: { seed: 9, edge: .4, reach: .92, top: -20, bottom: 116, left: 2, behind: .45, hw: .59, items: [
+      ['crumb-6', 10, 1], ['chili', 17, 1], ['crumb-1', 10, 1], ['jalapeno-1', 10, 1], ['crumb-3', 9, 1],
+      ['crumb-8', 9, 0], ['crumb-4', 8, 0], ['crumb-7', 7, 0], ['crumb-5', 6, 0]
+    ] }
   };
+  function seeded(a) {
+    return function () {
+      a = a + 0x6D2B79F5 | 0;
+      var t = Math.imul(a ^ a >>> 15, 1 | a);
+      t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+      return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+  }
+  function scatter(spec) {
+    var r = seeded(spec.seed), placed = [], out = [];
+    spec.items.forEach(function (it) {
+      for (var k = 0; k < 80; k++) {
+        var a = r() * Math.PI * 2;
+        var d = spec.edge + Math.pow(r(), 2.4) * (spec.reach - spec.edge) + (r() - .5) * .06;
+        var x = 50 + Math.cos(a) * d * 100, y = 50 + Math.sin(a) * d * 100;
+        if (y < spec.top || y > spec.bottom || x < (spec.left != null ? spec.left : -60) || x > (spec.right != null ? spec.right : 160)) continue;
+        var size = it[1] * 1.35 * (.8 + r() * .4) * (1 - Math.max(0, d - spec.edge) * .45);
+        var free = placed.every(function (p) {
+          var dx = p.x - x, dy = (p.y - y) * spec.hw;
+          return Math.sqrt(dx * dx + dy * dy) > (p.s + size) * .42;
+        });
+        if (!free) continue;
+        var p = { x: x, y: y, s: size };
+        placed.push(p);
+        var near = d < spec.edge + .08;
+        out.push([it[0], +x.toFixed(1), +y.toFixed(1), +size.toFixed(1), Math.round((r() - .5) * 140), near && r() < spec.behind ? 'b' : 'f', it[2], r() < .5 ? 1 : 0]);
+        return;
+      }
+    });
+    return out;
+  }
   var mobileBits = window.matchMedia('(max-width: 820px)').matches;
   var bitScale = mobileBits ? 1.35 : 1;
   var blasts = $$('[data-blast]').map(function (box) {
-    var set = PRESETS[box.getAttribute('data-blast')];
-    if (!set) return null;
+    var spec = SCATTER[box.getAttribute('data-blast')];
+    if (!spec) return null;
+    var set = scatter(spec);
     var lazy = box.getAttribute('data-blast-mode') !== 'hero';
     var holder = document.createElement('span');
     holder.className = 'blast__bits';

index.html

@@ -364,7 +364,7 @@
               <div class="rating__meta">aus 1.620 Bewertungen auf <a href="https://www.lieferando.de/speisekarte/chickago-boys" target="_blank" rel="noopener">Lieferando</a><br><small>Stand: 30.09.2026 · Bewertungen erhebt und prüft Lieferando.</small></div>
             </div>
           </div>
-          <div class="visit__deco blast" data-reveal data-blast="burger">
+          <div class="visit__deco blast" data-reveal data-blast="burger-visit">
             <img class="blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" loading="lazy" alt="Steakhouse Burger mit Pepper-Jack-Käse, Bacon und karamellisierten Zwiebeln">
             <span class="sticker sticker--ink" data-sticker>Bar &amp;<br>Restaurant</span>
           </div>