Add basic styles for layout and components

style.css

@@ -1,2 +1,100 @@
 /* Your styles here */
-/* Content from styles.css goes here */
+/* Content from styles.css goes here *//* style.css */
+
+/* Grundlayout */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  background: #fdf6e3;
+  color: #333;
+}
+
+/* Header */
+header {
+  background-color: #27ae60; /* modernes Grün */
+  color: white;
+  text-align: center;
+  padding: 30px 20px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2.5em;
+}
+
+header p {
+  margin-top: 5px;
+  font-size: 1.2em;
+}
+
+/* Navigation */
+nav {
+  background-color: #2c3e50;
+  text-align: center;
+  padding: 12px 0;
+}
+
+nav a {
+  color: white;
+  margin: 0 15px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.05em;
+  transition: color 0.3s;
+}
+
+nav a:hover {
+  color: #27ae60;
+}
+
+/* Container für Produktkarten */
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 30px 10px;
+  gap: 20px;
+}
+
+/* Produktkarten */
+.card {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  width: 250px;
+  padding: 20px;
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+}
+
+.card h2 {
+  color: #27ae60;
+  margin-bottom: 10px;
+}
+
+.card p {
+  font-size: 0.95em;
+  line-height: 1.4em;
+}
+
+/* Footer */
+footer {
+  background-color: #2c3e50;
+  color: white;
+  text-align: center;
+  padding: 18px 10px;
+  margin-top: 30px;
+}
+
+/* Responsive für Handy/Tablets */
+@media screen and (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+  }
+}