Add an explanatory tier legend row below the package cards

Matches the reference mockups' bottom legend: one entry per category
(Einstieg/Upgrade/.../Referenz) with an icon, a label colored to match
that tier's accent, and a short description of what the category means.
Colors are sampled from the same material-theme system driving the cards
above, so it stays in sync with whichever card theme is selected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

hifi-src/src/i18n/de.js

@@ -156,6 +156,15 @@ export default {
     requestContact: 'Kontakt anfragen',
     featuredBadge: 'Empfohlen',
     tierLabels: ['Einstieg', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Referenz'],
+    tierDescriptions: [
+      'Solider Sound und spürbare Verbesserung für jeden Tag.',
+      'Mehr Klarheit und Dynamik für ein intensiveres Hörerlebnis.',
+      'Spürbar mehr Leistung und Kontrolle für echte Fahrfreude.',
+      'Premium-Komponenten perfekt abgestimmt für höchste Ansprüche.',
+      'High-End Performance und individuelle Abstimmung auf höchstem Niveau.',
+      'Maßgeschneiderte Lösungen und einzigartige Integration für Kenner.',
+      'Außergewöhnliche Projekte. Grenzenlos in Technik und Design.',
+    ],
     tiersHeading: (count) => `${count} Stufen. Ein Ziel: perfekter Klang.`,
     tiersSubheading: 'Von der soliden Basis bis zum kompromisslosen Meisterwerk – finde dein Paket.',
   },

hifi-src/src/i18n/en.js

@@ -156,6 +156,15 @@ export default {
     requestContact: 'Request contact',
     featuredBadge: 'Recommended',
     tierLabels: ['Entry', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Reference'],
+    tierDescriptions: [
+      'Solid sound and a noticeable improvement for every day.',
+      'More clarity and dynamics for a richer listening experience.',
+      'Noticeably more power and control for real driving enjoyment.',
+      'Premium components perfectly tuned for the highest demands.',
+      'High-end performance and individual tuning at the highest level.',
+      'Tailored solutions and unique integration for connoisseurs.',
+      'Exceptional projects. Limitless in technology and design.',
+    ],
     tiersHeading: (count) => `${count} tiers. One goal: perfect sound.`,
     tiersSubheading: 'From a solid foundation to an uncompromising masterpiece – find your package.',
   },

hifi-src/src/pages/public/ModelPage.jsx

@@ -48,6 +48,10 @@ const PACKAGE_THEMES = {
   ],
 };
 
+// Ein Icon je Kategorie-Stufe (nicht pro Paket - siehe tierLabels), fuer die erklaerende
+// Legende unter der Kachel-Reihe. Reihenfolge muss zu modelPage.tierLabels passen.
+const TIER_ICONS = ['route', 'activity', 'gauge', 'shield-check', 'gem', 'crown', 'star'];
+
 const hslToRgb = (h, s, l) => {
   s /= 100;
   l /= 100;
@@ -126,6 +130,15 @@ export default function ModelPage() {
   // oben. Das braucht keine zusaetzliche Admin-Einstellung und passt sich automatisch
   // an jede Paketanzahl an.
   const tierLabels = t('modelPage.tierLabels');
+  const tierDescriptions = t('modelPage.tierDescriptions');
+  // Erklaerende Legende unter den Karten: ein Eintrag je Kategorie-Stufe (nicht je Paket),
+  // Akzentfarbe an einem repraesentativen Punkt der jeweiligen Kategorie-Spanne entnommen,
+  // damit die Legende farblich zu den Karten oben passt.
+  const tierLegend = tierLabels.map((label, i) => {
+    const legendT = (i + 0.5) / tierLabels.length;
+    const accentRgb = materialRgbAt(MATERIALS, legendT, 'accent').map(Math.round);
+    return { label, description: tierDescriptions[i], icon: TIER_ICONS[i], color: `rgb(${accentRgb.join(', ')})` };
+  });
   const rankById = new Map(
     [...packages].sort((a, b) => a.total_price - b.total_price).map((p, i) => [p.id, i])
   );
@@ -312,6 +325,18 @@ export default function ModelPage() {
                 );
               })}
             </div>
+
+            <div className="mt-14 grid grid-cols-2 gap-x-6 gap-y-8 border-t border-white/10 pt-10 sm:grid-cols-4 lg:grid-cols-7">
+              {tierLegend.map((item) => (
+                <div key={item.label}>
+                  <DynamicIcon name={item.icon} className="mb-2 h-6 w-6" style={{ color: item.color }} />
+                  <p style={{ color: item.color }} className="text-xs font-semibold uppercase tracking-wider">
+                    {item.label}
+                  </p>
+                  <p className="mt-1 text-xs text-neutral-400">{item.description}</p>
+                </div>
+              ))}
+            </div>
           </div>
         </section>
       )}