Bucket-Karten neu gestaltet: Feuer statt Karomuster

- Rot-weißes Karo am unteren Rand durch animierte Flammen mit dunkelrotem Sockel ersetzt
- Strahlenkranz mit Glühen hinter dem Bucket-Foto
- Gewichtsklasse als rote Banderole, Preis als goldenes Schild
- Rahmen rundum gleichmäßig (kein dickerer Sockel-Schatten unten)

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

assets/css/style.css

@@ -692,22 +692,37 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
   border-radius: calc(var(--radius) + 4px);
   padding: clamp(1.4rem, 3vw, 2.4rem);
   overflow: hidden;
-  box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 14px 0 9px #5a0604, 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25);
+  box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--red), 0 40px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 80, 20, .25);
 }
-.fight-card::before {
+.fight-card > :not(.flames):not(.fight-card__rays) { position: relative; z-index: 2; }
-  content: ""; position: absolute; inset: auto 0 0 0; height: 64px;
+/* Gewichtsklasse als Banderole */
-  background-color: #fff;
+.fight-card__class {
-  background-image: linear-gradient(90deg, rgba(229, 19, 11, .8) 50%, transparent 50%), linear-gradient(rgba(229, 19, 11, .8) 50%, transparent 50%);
+  display: inline-block; font-family: var(--f-sticker); text-transform: uppercase; font-size: .9rem; letter-spacing: .1em; line-height: 1;
-  background-size: 32px 32px;
+  color: var(--yellow); background: linear-gradient(var(--red), var(--red-deep));
-  opacity: .9;
+  padding: .5em 1.6em .5em .9em; margin-left: calc(-1 * clamp(1.4rem, 3vw, 2.4rem));
+  clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%);
+  box-shadow: 0 4px 0 var(--oxblood);
 }
-.fight-card__class { font-family: var(--f-sticker); text-transform: uppercase; color: var(--red-deep); font-size: 1rem; letter-spacing: .08em; }
+/* Strahlenkranz hinter dem Essen */
+.fight-card__rays {
+  position: absolute; z-index: 0; right: -18%; bottom: -30%; width: 85%; aspect-ratio: 1; pointer-events: none;
+  background: repeating-conic-gradient(rgba(229, 19, 11, .16) 0 7deg, transparent 7deg 16deg);
+  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent);
+}
+.fight-card__rays::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 70, .55), transparent); }
+/* Feuer am unteren Rand statt Karomuster */
+.flames--card { top: auto; bottom: 0; transform: none; z-index: 1; height: clamp(90px, 9vw, 140px); --fw: 520px; }
+.flames--card i { left: 0; right: 0; }
+.flames--card i:nth-child(1) { --fw: 560px; }
+.flames--card i:nth-child(2) { --fw: 460px; }
+.flames--card i:nth-child(3) { --fw: 620px; background: linear-gradient(var(--red), var(--red-deep)); }
+.flames--card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--red-deep); }
 .fight-card h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; margin: .15em 0 .3em; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); line-height: .86; 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), 5px 5px 0 var(--ext), 8px 10px 14px rgba(0, 0, 0, .2); }
 .fight-card ul { list-style: none; margin: 0 0 1.2rem; padding: 0 clamp(0px, 9vw, 150px) 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
 .fight-card li { background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: .25em .7em; font-weight: 700; font-size: .92rem; }
-.fight-card__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: 38px; }
+.fight-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: clamp(28px, 3vw, 44px); }
-.fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
+.fight-card__foot .price { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); background: linear-gradient(var(--yellow-hot), var(--yellow)); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 22px rgba(0, 0, 0, .35); }
-.fight-card__foot img { position: relative; z-index: 2; width: clamp(150px, 18vw, 280px); margin: -7rem -1.5rem -2.6rem 0; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .35)); transition: transform .6s var(--ease-pop); }
+.fight-card__foot img { position: relative; z-index: 2; width: clamp(170px, 21vw, 320px); margin: -8rem -1rem -2.4rem 0; filter: drop-shadow(0 16px 14px rgba(60, 0, 0, .45)); transition: transform .6s var(--ease-pop); }
 .fight-card:hover .fight-card__foot img { transform: scale(1.08) rotate(-5deg); }
 .buckets__note { margin-top: 2.5rem; text-align: center; opacity: .8; font-size: .95rem; }
 

index.html

@@ -274,6 +274,8 @@
 
         <div class="fight-card-row">
           <article class="fight-card paper" data-reveal data-tilt>
+            <span class="fight-card__rays" aria-hidden="true"></span>
+            <div class="flames flames--card" aria-hidden="true"><i></i><i></i><i></i></div>
             <span class="fight-card__class">Mittelgewicht</span>
             <h3>Bucket</h3>
             <ul>
@@ -286,6 +288,8 @@
           </article>
           <span class="vs" aria-hidden="true" data-sticker>VS</span>
           <article class="fight-card paper" data-reveal data-tilt>
+            <span class="fight-card__rays" aria-hidden="true"></span>
+            <div class="flames flames--card" aria-hidden="true"><i></i><i></i><i></i></div>
             <span class="fight-card__class">Schwergewicht</span>
             <h3>Party Bucket</h3>
             <ul>