src/components/ProductDetails.tsx

@@ -33,7 +33,9 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
   const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
 
   return (
-    <div className="product-details">
+    <div 
+      className="product-details"
+    >
       <h2>{product.name}</h2>
       
       <div className="options-list">
@@ -43,6 +45,8 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
             key={option.name}
             className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
             onClick={() => setSelectedOption(option)}
+            style={(option.color || product.color) ? 
+              { backgroundColor: `${option.color || product.color}60` } : {}}
           >
             <span>{option.name}</span>
             {!hasSamePrice && <span className="option-price">{option.price.toFixed(2)} €</span>}

src/components/ProductList.tsx

@@ -21,6 +21,7 @@ const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
           to={`/product/${category}/${product.id}`} 
           key={product.id} 
           className="product-item"
+          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
         >
           <div className="product-name">{product.name}</div>
           <div className="product-price">{product.basePrice.toFixed(2)} €</div>

src/data/products.json

@@ -4,9 +4,10 @@
       "id": "f1",
       "name": "Hendl",
       "basePrice": 9.50,
+      "color": "#FFEBCD",
       "options": [
         {"name": "Halbes Hendl", "price": 9.50},
-        {"name": "Ganzes Hendl", "price": 16.00},
+        {"name": "Ganzes Hendl", "price": 16.00, "color": "#FFDAB9"},
         {"name": "Hendl mit Semmel", "price": 11.00}
       ]
     },
@@ -14,16 +15,18 @@
       "id": "f2",
       "name": "Schnitzelsemmel",
       "basePrice": 5.80,
+      "color": "#FFEFC1",
       "options": [
         {"name": "Klassisch", "price": 5.80},
-        {"name": "Mit Salat", "price": 6.50},
+        {"name": "Mit Salat", "price": 6.50, "color": "#E8F5E9"},
-        {"name": "Mit Käse", "price": 6.80}
+        {"name": "Mit Käse", "price": 6.80, "color": "#FFF9C4"}
       ]
     },
     {
       "id": "f3",
       "name": "Pommes",
       "basePrice": 3.50,
+      "color": "#FFD700",
       "options": [
         {"name": "Klein", "price": 3.50},
         {"name": "Groß", "price": 4.50},
@@ -34,6 +37,7 @@
       "id": "f4",
       "name": "Grillwurst",
       "basePrice": 4.20,
+      "color": "#FFCCCB",
       "options": [
         {"name": "Bratwurst", "price": 4.20},
         {"name": "Käsekrainer", "price": 4.50},
@@ -44,6 +48,7 @@
       "id": "f5",
       "name": "Leberkässemmel",
       "basePrice": 4.00,
+      "color": "#FFE4E1",
       "options": [
         {"name": "Klassisch", "price": 4.00},
         {"name": "Mit Gurkerl", "price": 4.30},
@@ -54,6 +59,7 @@
       "id": "f6",
       "name": "Langos",
       "basePrice": 4.80,
+      "color": "#DEB887",
       "options": [
         {"name": "Mit Knoblauch", "price": 4.80},
         {"name": "Mit Käse", "price": 5.50},
@@ -66,16 +72,18 @@
       "id": "d1",
       "name": "Bier",
       "basePrice": 4.20,
+      "color": "#F0E68C",
       "options": [
-        {"name": "Krügerl (0,5L)", "price": 4.20},
+        {"name": "Krügerl (0,5L)", "price": 4.20, "color": "#F5DEB3"},
         {"name": "Seidl (0,3L)", "price": 3.50},
-        {"name": "Radler (0,5L)", "price": 4.20}
+        {"name": "Radler (0,5L)", "price": 4.20, "color": "#FAFAD2"}
       ]
     },
     {
       "id": "d2",
       "name": "Cola",
       "basePrice": 3.50,
+      "color": "#D2B48C",
       "options": [
         {"name": "Cola Rot (0,5L)", "price": 3.50},
         {"name": "Cola Weiß (0,5L)", "price": 3.50},
@@ -87,6 +95,7 @@
       "id": "d3",
       "name": "Softdrinks",
       "basePrice": 3.50,
+      "color": "#FFDAB9",
       "options": [
         {"name": "Fanta (0,5L)", "price": 3.50},
         {"name": "Sprite (0,5L)", "price": 3.50},
@@ -98,6 +107,7 @@
       "id": "d4",
       "name": "Mineral",
       "basePrice": 2.80,
+      "color": "#E0FFFF",
       "options": [
         {"name": "Prickelnd (0,5L)", "price": 2.80},
         {"name": "Still (0,5L)", "price": 2.80},
@@ -109,6 +119,7 @@
       "id": "d5",
       "name": "Gespritzt",
       "basePrice": 3.00,
+      "color": "#FFDAB9",
       "options": [
         {"name": "Apfelsaft g'spritzt", "price": 3.00},
         {"name": "Johannisbeer g'spritzt", "price": 3.20},
@@ -120,6 +131,7 @@
       "id": "d6",
       "name": "Spritzer",
       "basePrice": 3.80,
+      "color": "#FFE4E1",
       "options": [
         {"name": "Weißer Spritzer", "price": 3.80},
         {"name": "Aperol Spritzer", "price": 4.50},
@@ -131,6 +143,7 @@
       "id": "d7",
       "name": "Schnaps",
       "basePrice": 3.00,
+      "color": "#E6E6FA",
       "options": [
         {"name": "Marille (2cl)", "price": 3.00},
         {"name": "Williams (2cl)", "price": 3.00},

src/types/types.ts

@@ -1,6 +1,7 @@
 export type ProductOption = {
   name: string;
   price: number;
+  color?: string; // Optional color for this specific option
 };
 
 export type Product = {
@@ -8,6 +9,7 @@ export type Product = {
   name: string;
   basePrice: number;
   options: ProductOption[];
+  color?: string; // Optional color code for background highlight
 };
 
 export type ProductsData = {