Redesign: kräftige Farben, Feuer-Formen, Texturen, 3D-Schrift und explodierende Zutaten

- Hero, Speisekarte-Kopf und Hunger-Abschnitt auf rotem Feuerwirbel mit Spotlight, Rasterpunkten und Körnung - Flammen-Übergänge (animiert), gerissene Papierkanten, Papier-Textur für Karten - 3D-Extrusion für Headlines, Buttons/Sticker mit Tiefe und Glanz, 3D-Neigung der Karten - Champions als Plakat-Karten, Wings im Crunch-Time-Stil, Buckets mit Glut und Funken - Zutaten (Wikimedia Commons, freigestellt) fliegen um Burger/Wings und explodieren beim Scrollen - Bildnachweise der Zutaten im Impressum Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 00:30:02 +00:00
1 parent da134cd0bb
commit 12d8f41fd8
@@ -74,14 +74,16 @@
  </nav>

  <main id="main">
-    <section class="page-hero bg-ink on-dark" data-nav-dark aria-labelledby="page-title">
+    <section class="page-hero bg-red on-red" data-nav-dark aria-labelledby="page-title">
+      <div class="fx" aria-hidden="true"><div class="fx__spot"></div><div class="fx__swirl" data-swirl></div><div class="fx__dots"></div><div class="fx__vignette"></div><div class="fx__grain"></div></div>
      <div class="wrap">
        <span class="kicker kicker--yellow">Speisekarte</span>
-        <h1 class="display stroke" id="page-title" data-hero-big>Die Karte</h1>
+        <h1 class="display x3d" id="page-title" data-hero-big>Die Karte</h1>
        <p class="lead">Wings, Tenders, Burger, Wraps und Sides – alles mild oder scharf, zum Mitnehmen, geliefert oder direkt bei uns.</p>
      </div>
-      <div class="page-hero__img"><img class="shot" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
-      <span class="sticker sticker--red page-hero__st" data-sticker>Mild oder<br>scharf?</span>
+      <div class="page-hero__img blast" data-blast="burger" data-blast-mode="hero"><span class="hero__glow" aria-hidden="true"></span><img class="shot blast__food" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" alt="Steakhouse Burger mit Pepper-Jack-Käse und Bacon"></div>
+      <span class="sticker sticker--ink page-hero__st" data-sticker>Mild oder<br>scharf?</span>
+      <div class="flames flames--in" aria-hidden="true" style="--flame-front: var(--cream)"><i></i><i></i><i></i></div>
    </section>

    <nav class="cat-nav" aria-label="Kategorien der Speisekarte">
@@ -103,36 +105,36 @@
      <!-- CHICKEN -->
      <section class="menu-cat" id="chicken" aria-labelledby="h-chicken">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-chicken" data-pop>Chicken</h2>
+          <h2 class="display x3d" id="h-chicken" data-pop>Chicken</h2>
          <p>Alle Chicken-Gerichte bekommst du im Schärfegrad deiner Wahl: <strong>mild oder scharf</strong> – ohne Aufpreis.</p>
        </div>
        <div class="dish-grid dish-grid--4">
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Chicken Wings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/chicken-wings.webp" width="916" height="366" loading="lazy" alt="Zehn knusprige Chicken Wings"></div>
            <div class="dish__body"><p>Knusprig, mit Sauce nach Wahl.</p><div class="variants"><span>6 Stück · 8,50 €</span><span>10 Stück · 11,00 €</span><span>20 Stück · 22,00 €</span></div></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Buffalo Red Hot Wings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/buffalo-red-hot-wings.webp" width="916" height="535" loading="lazy" alt="Buffalo Red Hot Wings in der Steingutschale"></div>
            <div class="dish__body"><p>10 Stück, in Buffalo-Red-Hot-Sauce.</p><span class="price">14,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Chipotle Honey BBQ Wings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/chipotle-honey-bbq-wings.webp" width="916" height="491" loading="lazy" alt="Chipotle Honey BBQ Wings in der Steingutschale"></div>
            <div class="dish__body"><p>10 Stück, in Chipotle-Honey-BBQ-Sauce.</p><span class="price">14,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Teriyaki Wings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/teriyaki-wings.webp" width="916" height="591" loading="lazy" alt="Teriyaki Wings in der Steingutschale"></div>
            <div class="dish__body"><p>10 Stück, in Teriyaki-Sauce.</p><span class="price">14,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Sweet Chili Wings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/sweet-chili-wings.webp" width="916" height="528" loading="lazy" alt="Sweet Chili Wings in der Steingutschale"></div>
            <div class="dish__body"><p>10 Stück, in Sweet-Chili-Sauce.</p><span class="price">14,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Crispy-Chicken Tenders</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/crispy-chicken-tenders-5-stueck.webp" width="911" height="378" loading="lazy" alt="Fünf knusprig panierte Crispy-Chicken Tenders"></div>
            <div class="dish__body"><p>Knusprig panierte Hähnchenfilets.</p><div class="variants"><span>5 Stück · 9,50 €</span><span>10 Stück · 17,00 €</span></div></div>
@@ -154,11 +156,11 @@
      <!-- CHICKEN BURGER -->
      <section class="menu-cat" id="chicken-burger" aria-labelledby="h-cburger">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-cburger" data-pop>Chicken Burger</h2>
+          <h2 class="display x3d" id="h-cburger" data-pop>Chicken Burger</h2>
          <p>Alle Chicken Burger mit Hähnchen-Patty, Cheddar, Tomaten und Salat – im Schärfegrad deiner Wahl.</p>
        </div>
        <div class="cat-split">
-          <article class="dish dish--special" data-reveal>
+          <article class="dish dish--special" data-reveal data-tilt>
            <h3 class="dish__name"><span class="dish__script dish__script--long">Chicken Home Style</span> Honey Mustard Bacon</h3>
            <div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-home-style-honey-mustard-bacon.webp" width="874" height="637" loading="lazy" alt="Chicken Burger Home Style mit Honey Mustard und Bacon"></div>
            <div class="dish__body"><p>Cheddar, Bacon, Tomaten, Zwiebeln, Salat, Honey-Mustard-Soße.</p><span class="price">12,50 €</span></div>
@@ -177,26 +179,26 @@
      <!-- BEEF BURGER -->
      <section class="menu-cat" id="beef-burger" aria-labelledby="h-bburger">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-bburger" data-pop>Beef Burger</h2>
+          <h2 class="display x3d" id="h-bburger" data-pop>Beef Burger</h2>
          <p>Alle Burger mit Rindfleisch-Patty, Cheddar, Tomaten, Salat, sauren Gurken und Zwiebeln.</p>
        </div>
        <div class="dish-grid dish-grid--4">
-          <article class="dish dish--special" data-reveal>
+          <article class="dish dish--special" data-reveal data-tilt>
            <h3 class="dish__name"><span class="dish__script dish__script--the" aria-hidden="true">The</span> US Burger</h3>
            <div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/us-burger.webp" width="853" height="616" loading="lazy" alt="US Burger mit Ei und Bacon"></div>
            <div class="dish__body"><p>Cheddar, Ei, Bacon, karamellisierte Zwiebeln, BBQ-Soße.</p><span class="price">13,50 €</span></div>
          </article>
-          <article class="dish dish--special" data-reveal>
+          <article class="dish dish--special" data-reveal data-tilt>
            <h3 class="dish__name"><span class="dish__script">Steakhouse</span> Burger</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/steakhouse-burger.webp" width="834" height="526" loading="lazy" alt="Steakhouse Burger"></div>
            <div class="dish__body"><p>Pepper-Jack-Käse, Bacon, karamellisierte Zwiebeln, Steakhouse-Soße.</p><span class="price">13,50 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Cheese Burger</h3>
            <div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img src="assets/img/cut-cheese-burger.webp" width="900" height="656" loading="lazy" alt="Cheese Burger"></div>
            <div class="dish__body"><p>Cheddar, karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">12,50 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Hamburger</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/hamburger.webp" width="824" height="499" loading="lazy" alt="Hamburger"></div>
            <div class="dish__body"><p>Karamellisierte Zwiebeln, Ketchup, Mayonnaise.</p><span class="price">11,50 €</span></div>
@@ -215,7 +217,7 @@
      <!-- MENÜS -->
      <section class="menu-cat" id="menues" aria-labelledby="h-menues">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-menues" data-pop>Menüs</h2>
+          <h2 class="display x3d" id="h-menues" data-pop>Menüs</h2>
          <p>Mit Pommes und Coleslaw – mild oder scharf.</p>
        </div>
        <div class="dish-list">
@@ -229,11 +231,11 @@
      <!-- WRAPS -->
      <section class="menu-cat" id="wraps" aria-labelledby="h-wraps">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-wraps" data-pop>Wraps</h2>
+          <h2 class="display x3d" id="h-wraps" data-pop>Wraps</h2>
          <p>In der Weizen-Tortilla, mit knusprigem Crispy-Filet.</p>
        </div>
        <div class="cat-split">
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Chicken Wrap Chickago-Boys</h3>
            <div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/chicken-wrap-chickago-boys.webp" width="812" height="546" loading="lazy" alt="Chicken Wrap Chickago-Boys, aufgeschnitten"></div>
            <div class="dish__body"><p>2 knusprige Crispy-Filets, Cheddar, Tomaten, Salat, hausgemachte Sauce.</p><span class="price">9,50 €</span></div>
@@ -247,7 +249,7 @@
      <!-- SALATE -->
      <section class="menu-cat" id="salate" aria-labelledby="h-salate">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-salate" data-pop>Salate</h2>
+          <h2 class="display x3d" id="h-salate" data-pop>Salate</h2>
          <p>Alle Salate mit Tomaten, Gurken und Croutons. Dressing: Caesar, Balsamico oder ohne.</p>
        </div>
        <div class="dish-list">
@@ -260,41 +262,41 @@
      <!-- BEILAGEN -->
      <section class="menu-cat" id="beilagen" aria-labelledby="h-beilagen">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-beilagen" data-pop>Beilagen</h2>
+          <h2 class="display x3d" id="h-beilagen" data-pop>Beilagen</h2>
          <p>Der perfekte Sidekick für Wings und Burger.</p>
        </div>
        <div class="dish-grid dish-grid--4">
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Jalapeños Chili Cheese Fries</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/jalapenos-chili-cheese-fries.webp" width="916" height="839" loading="lazy" alt="Jalapeños Chili Cheese Fries"></div>
            <div class="dish__body"><p>Pommes mit Chili-Käse-Sauce und Jalapeños.</p><span class="price">7,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Cheesy Bacon Fries</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/cheesy-bacon-fries.webp" width="916" height="609" loading="lazy" alt="Cheesy Bacon Fries"></div>
            <div class="dish__body"><p>Pommes mit Käse und Bacon.</p><span class="price">7,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Pommes frites</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/pommes-frites.webp" width="916" height="578" loading="lazy" alt="Pommes frites in der Steingutschale"></div>
            <div class="dish__body"><span class="price">4,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Süßkartoffel-Pommes</h3>
            <div class="dish__media"><span class="sticker dish__badge">Beliebt</span><img class="shot" src="assets/img/menu/suesskartoffel-pommes.webp" width="916" height="516" loading="lazy" alt="Süßkartoffel-Pommes in der Steingutschale"></div>
            <div class="dish__body"><span class="price">5,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Onion Rings</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/onion-rings.webp" width="916" height="410" loading="lazy" alt="Knusprige Onion Rings"></div>
            <div class="dish__body"><span class="price">6,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Mozzarella Sticks</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/mozzarella-sticks.webp" width="850" height="419" loading="lazy" alt="Knusprige Mozzarella Sticks"></div>
            <div class="dish__body"><span class="price">7,00 €</span></div>
          </article>
-          <article class="dish" data-reveal>
+          <article class="dish" data-reveal data-tilt>
            <h3 class="dish__name">Krautsalat</h3>
            <div class="dish__media"><img class="shot" src="assets/img/menu/krautsalat.webp" width="820" height="569" loading="lazy" alt="Krautsalat aus Weiß- und Rotkohl im Schälchen"></div>
            <div class="dish__body"><p>Weißkohl, Rotkohl.</p><span class="price">4,00 €</span></div>
@@ -305,7 +307,7 @@
      <!-- SAUCEN -->
      <section class="menu-cat" id="saucen" aria-labelledby="h-saucen">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-saucen" data-pop>Saucen &amp; Dips</h2>
+          <h2 class="display x3d" id="h-saucen" data-pop>Saucen &amp; Dips</h2>
          <p>Zum Dippen, Tunken und Nachlegen.</p>
        </div>
        <div class="sauce-chips" data-reveal>
@@ -316,7 +318,7 @@
      <!-- GETRÄNKE -->
      <section class="menu-cat" id="getraenke" aria-labelledby="h-getraenke">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-getraenke" data-pop>Getränke</h2>
+          <h2 class="display x3d" id="h-getraenke" data-pop>Getränke</h2>
          <p>Kalt, groß und zum Teilen. Bier, Wein und Cocktails gibt’s bei uns an der Bar.</p>
        </div>
        <div class="dish-list">
@@ -334,7 +336,7 @@
      <!-- DESSERT -->
      <section class="menu-cat" id="dessert" aria-labelledby="h-dessert">
        <div class="menu-cat__head">
-          <h2 class="display stroke" id="h-dessert" data-pop>Dessert</h2>
+          <h2 class="display x3d" id="h-dessert" data-pop>Dessert</h2>
          <p>Für den süßen Knockout zum Schluss.</p>
        </div>
        <div class="dish-list">
@@ -343,6 +345,7 @@
      </section>

      <aside class="only-here" data-reveal>
+        <div class="fx" aria-hidden="true"><div class="fx__embers"></div><div class="fx__grain"></div></div>
        <img class="die-cut" src="assets/img/rooster.svg" width="179" height="264" alt="">
        <div>
          <h2>Mehr im Restaurant</h2>
@@ -351,7 +354,7 @@
        </div>
      </aside>

-      <div class="legal-note" data-reveal>
+      <div class="legal-note paper" data-reveal>
        <h2>Allergene &amp; Zusatzstoffe</h2>
        <p>Informationen zu Allergenen und kennzeichnungspflichtigen Zusatzstoffen bekommst du jederzeit bei uns im Restaurant oder telefonisch unter <a href="tel:+496313107985">0631 3107985</a>. Alle Preise in Euro inklusive gesetzlicher Mehrwertsteuer. Stand: 09/2026.</p>
      </div>
@@ -359,6 +362,7 @@
  </main>

  <footer class="footer on-dark" data-nav-dark>
+    <div class="fx" aria-hidden="true"><div class="fx__grain"></div></div>
    <div class="wrap">
      <div class="footer__grid">
        <div class="footer__brand">