Speisekarte mobil: alle Kategorien auf einen Blick, beim Scrollen angeheftet; weiße Karten zu zweit

- Kategorie-Chips umbrechend sichtbar, beim Scrollen kompakte, fixierte Leiste unter der Navigation (Platzhalter hält die Höhe)
- Handy: weiße Karten zweispaltig, rote Specials und Bucket-Promo weiter über volle Breite
- Chicken-Wings-Classic-Kasten: Körnung als Überblendung statt Hintergrund-Ebene (iOS zeigte graue Fläche), Schrift wieder hell
- Speisekarte-Kopf mobil: Burger tiefer, damit Zutaten nicht über dem Text liegen

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

assets/css/style.css

@@ -588,7 +588,9 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
 }
 .wings__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "kick kick" "big big" "info hero"; align-items: start; }
 .wings__stage .kicker { grid-area: kick; justify-self: start; }
-.wings .classic-wings, .wings .sauce { color: var(--ink); }
+.wings .sauce { color: var(--ink); }
+.wings .classic-wings { color: var(--cream); }
+.classic-wings::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 240px; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
 .wings__big {
   grid-area: big; position: relative; z-index: 1;
   font-size: clamp(4.6rem, 15vw, 15.5rem); color: var(--cream); margin: 0;
@@ -639,7 +641,8 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
 .classic-wings {
   margin-top: clamp(2.5rem, 5vw, 4rem);
   display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center;
-  background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--grain) 0 0 / 240px, var(--ink); background-blend-mode: normal, soft-light, normal; color: var(--cream);
+  position: relative; isolation: isolate; overflow: hidden;
+  background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--ink); color: var(--cream);
   border: 3px solid var(--yellow); border-radius: calc(var(--radius) + 6px);
   box-shadow: 0 8px 0 #000, 0 30px 50px -10px rgba(60, 10, 0, .6);
   padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.6rem);
@@ -846,15 +849,21 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
 .page-hero__st { position: absolute; right: 32%; top: 28%; z-index: 5; --r: -10deg; }
 .page-hero .flames { z-index: 4; --fh: clamp(60px, 8vw, 130px); }
 
-.cat-nav {
+/* Kategorien: in Ruhe alle sichtbar (umbrechend), beim Scrollen als kompakte Leiste oben angeheftet.
-  position: sticky; top: 0; z-index: 800;
+   .cat-nav hält dabei ihre Höhe (per JS), damit der Inhalt nicht springt. */
-  background: rgba(247, 235, 217, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+.cat-nav { position: relative; z-index: 800; background: var(--cream); border-bottom: 2px solid rgba(21, 13, 12, .1); }
-  border-bottom: 2px solid rgba(21, 13, 12, .1);
+.cat-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .9rem var(--gutter); }
+.cat-nav.is-stuck ul {
+  position: fixed; left: 0; right: 0; top: 0; z-index: 800;
+  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: .6rem;
+  background: rgba(251, 238, 214, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  border-bottom: 2px solid rgba(21, 13, 12, .1); box-shadow: 0 8px 20px rgba(21, 13, 12, .1);
   transition: top .35s cubic-bezier(.2, .8, .2, 1);
+  animation: bar-in .3s cubic-bezier(.2, .8, .2, 1);
 }
-body.nav-visible .cat-nav { top: var(--nav-h); }
+body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); }
-.cat-nav ul { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0; padding: .75rem var(--gutter); scrollbar-width: none; }
 .cat-nav ul::-webkit-scrollbar { display: none; }
+@keyframes bar-in { from { transform: translateY(-100%); } }
 .cat-nav a {
   display: inline-block; white-space: nowrap;
   padding: .5em 1em; border-radius: 999px; border: 2px solid var(--ink);
@@ -1135,7 +1144,7 @@ html.js.anim .juggle { visibility: hidden; }
   .dish-list { grid-template-columns: 1fr; }
   .cat-split { grid-template-columns: 1fr; }
   .only-here { grid-template-columns: 1fr; }
-  .page-hero__img { position: relative; right: auto; bottom: auto; width: 80vw; margin: 1.5rem auto -3rem; }
+  .page-hero__img { position: relative; right: auto; bottom: auto; width: 76vw; margin: 4.5rem auto -3rem; }
   .page-hero__st { right: 8%; top: auto; bottom: 30%; }
 }
 
@@ -1145,8 +1154,18 @@ html.js.anim .juggle { visibility: hidden; }
   .sauce p { display: none; }
   .sauce h3 { font-size: 1.45rem; overflow-wrap: anywhere; }
   .sauce .price { font-size: .74rem; padding: .5em .6em; }
-  .dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: 1fr; }
+  .dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
-  .dish--promo { grid-column: auto; }
+  .dish--special, .dish--promo { grid-column: 1 / -1; }
+  .dish:not(.dish--special) { --sq: 8px; --pad-x: .65rem; --media-h: clamp(110px, 34vw, 170px); padding-top: calc(var(--sq) * 2 + .9rem); padding-bottom: calc(var(--sq) * 2 + .9rem); }
+  .dish:not(.dish--special) .dish__name { font-size: clamp(.82rem, 10.5cqi, 1.3rem); }
+  .dish:not(.dish--special) .dish__media { margin-block: .2rem 0; }
+  .dish:not(.dish--special) .dish__body { gap: .5rem; }
+  .dish:not(.dish--special) p { font-size: .8rem; line-height: 1.35; }
+  .dish:not(.dish--special) .variants span { font-size: .68rem; padding: .2em .5em; }
+  .dish:not(.dish--special) .price { font-size: .8rem; }
+  .dish:not(.dish--special) .dish__badge { font-size: .65rem; border-width: 2px; top: 6%; }
+  .cat-nav ul { gap: .4rem; }
+  .cat-nav a { font-size: .78rem; padding: .45em .8em; }
   .footer__grid { grid-template-columns: 1fr; }
   .btn { font-size: 1rem; padding: .95em 1.4em 1em; }
   .hero__cta .btn { flex: 1 1 auto; }

assets/js/main.js

@@ -145,8 +145,29 @@
     }, { threshold: 0 }).observe(heroEl);
   }
 
-  /* ---------- Speisekarte: aktive Kategorie ---------- */
+  /* ---------- Speisekarte: Kategorien anheften ---------- */
   var catNav = $('.cat-nav');
+  if (catNav) {
+    var stuck = false;
+    var checkStuck = function () {
+      var navH = document.body.classList.contains('nav-visible') ? ((nav && nav.offsetHeight) || 0) : 0;
+      var top = catNav.getBoundingClientRect().top;
+      var shouldStick = top < navH;
+      if (shouldStick === stuck) return;
+      stuck = shouldStick;
+      if (stuck) catNav.style.height = catNav.offsetHeight + 'px';
+      else catNav.style.height = '';
+      catNav.classList.toggle('is-stuck', stuck);
+    };
+    window.addEventListener('scroll', checkStuck, { passive: true });
+    window.addEventListener('resize', function () {
+      if (stuck) { stuck = false; catNav.classList.remove('is-stuck'); catNav.style.height = ''; }
+      checkStuck();
+    });
+    checkStuck();
+  }
+
+  /* ---------- Speisekarte: aktive Kategorie ---------- */
   if (catNav && 'IntersectionObserver' in window) {
     var links = $$('a', catNav);
     var list = $('ul', catNav);