diff --git a/index.html b/index.html
index b83ca3a..05a7887 100644
--- a/index.html
+++ b/index.html
@@ -3,76 +3,8 @@
Reifenliste mit Größenfilter
-
-
Interaktive Produktliste mit Filter
-
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..5a0e1f4
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,64 @@
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f5f5f5;
+ margin: 20px;
+ color: #333;
+ }
+
+ h1 {
+ text-align: center;
+ color: #2c3e50;
+ }
+
+ input[type="text"],
+ input[type="number"],
+ select {
+ padding: 8px 10px;
+ margin: 5px 0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ width: 200px;
+ box-sizing: border-box;
+ font-size: 14px;
+ }
+
+ label {
+ font-weight: bold;
+ margin-right: 10px;
+ }
+
+ #product-list {
+ margin-top: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ justify-content: center;
+ }
+
+ .product-card {
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+ padding: 15px;
+ width: 200px;
+ text-align: center;
+ transition: transform 0.2s, box-shadow 0.2s;
+ }
+
+ .product-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+ }
+
+ .product-name {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ color: #34495e;
+ }
+
+ .product-price {
+ font-size: 14px;
+ color: #e67e22;
+ font-weight: bold;
+ }
\ No newline at end of file