refactor styles in CSS for improved theming and responsiveness; remove .htaccess file; update header structure in PHP to include branding elements

assets/css/style.css

@@ -1,4 +1,15 @@
 /* Reset and Base Styles */
+:root {
+    --brand-red: #b0001d;
+    --brand-red-dark: #8f0017;
+    --brand-dark: #1b1b1b;
+    --brand-text: #222;
+    --brand-muted: #6c757d;
+    --brand-surface: #ffffff;
+    --brand-bg: #f4f4f4;
+    --brand-border: #e5e5e5;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -8,8 +19,8 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     line-height: 1.6;
-    color: #333;
-    background-color: #f5f5f5;
+    color: var(--brand-text);
+    background-color: var(--brand-bg);
 }
 
 .container {
@@ -19,30 +30,67 @@ body {
 }
 
 /* Header */
-header {
-    background-color: #c41e3a;
+.site-header {
+    background-color: var(--brand-red);
     color: white;
-    padding: 1rem 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    padding: 0.9rem 0;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
 }
 
-header h1 {
-    font-size: 1.8rem;
-    margin-bottom: 0.5rem;
+.header-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: white;
+    text-decoration: none;
+}
+
+.brand-logo {
+    height: 52px;
+    width: auto;
+    display: block;
+    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
+}
+
+.brand-text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
 }
 
-header nav {
-    margin-top: 0.5rem;
+.brand-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
 }
 
-header nav a {
+.brand-subtitle {
+    font-size: 0.9rem;
+    font-weight: 500;
+    opacity: 0.9;
+}
+
+.site-nav {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.site-nav a {
     color: white;
     text-decoration: none;
-    margin-right: 1.5rem;
-    font-weight: 500;
+    font-weight: 600;
+    letter-spacing: 0.02em;
 }
 
-header nav a:hover {
+.site-nav a:hover {
     text-decoration: underline;
 }
 
@@ -56,7 +104,7 @@ main {
 .btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background-color: #c41e3a;
+    background-color: var(--brand-red);
     color: white;
     text-decoration: none;
     border: none;
@@ -68,7 +116,7 @@ main {
 }
 
 .btn:hover {
-    background-color: #a01a2e;
+    background-color: var(--brand-red-dark);
 }
 
 .btn-secondary {
@@ -93,7 +141,7 @@ main {
 }
 
 .product-card {
-    background: white;
+    background: var(--brand-surface);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
@@ -109,7 +157,7 @@ main {
     width: 100%;
     height: 200px;
     object-fit: cover;
-    background-color: #e9ecef;
+    background-color: var(--brand-border);
 }
 
 .product-card-content {
@@ -119,19 +167,19 @@ main {
 .product-card h3 {
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
-    color: #c41e3a;
+    color: var(--brand-red);
 }
 
 .product-card .price {
     font-size: 1.5rem;
     font-weight: bold;
-    color: #333;
+    color: var(--brand-text);
     margin: 0.5rem 0;
 }
 
 .product-card .stock {
     font-size: 0.9rem;
-    color: #6c757d;
+    color: var(--brand-muted);
     margin-bottom: 1rem;
 }
 
@@ -159,7 +207,7 @@ main {
 .form-group select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--brand-border);
     border-radius: 4px;
     font-size: 1rem;
     font-family: inherit;
@@ -169,12 +217,13 @@ main {
 .form-group textarea:focus,
 .form-group select:focus {
     outline: none;
-    border-color: #c41e3a;
+    border-color: var(--brand-red);
+    box-shadow: 0 0 0 3px rgba(176, 0, 29, 0.15);
 }
 
 /* Cart */
 .cart-item {
-    background: white;
+    background: var(--brand-surface);
     padding: 1.5rem;
     margin-bottom: 1rem;
     border-radius: 8px;
@@ -203,7 +252,7 @@ main {
 /* Tables */
 table {
     width: 100%;
-    background: white;
+    background: var(--brand-surface);
     border-collapse: collapse;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     border-radius: 8px;
@@ -211,7 +260,7 @@ table {
 }
 
 table th {
-    background-color: #c41e3a;
+    background-color: var(--brand-red);
     color: white;
     padding: 1rem;
     text-align: left;
@@ -220,7 +269,7 @@ table th {
 
 table td {
     padding: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--brand-border);
 }
 
 table tr:hover {
@@ -260,7 +309,7 @@ table tr:hover {
 
 /* Footer */
 footer {
-    background-color: #333;
+    background-color: var(--brand-dark);
     color: white;
     text-align: center;
     padding: 2rem 0;
@@ -300,7 +349,7 @@ footer {
 }
 
 .stat-card {
-    background: white;
+    background: var(--brand-surface);
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -308,14 +357,14 @@ footer {
 
 .stat-card h3 {
     font-size: 0.9rem;
-    color: #6c757d;
+    color: var(--brand-muted);
     margin-bottom: 0.5rem;
 }
 
 .stat-card .stat-value {
     font-size: 2rem;
     font-weight: bold;
-    color: #c41e3a;
+    color: var(--brand-red);
 }
 
 /* Product Detail Grid */
@@ -328,6 +377,20 @@ footer {
 
 /* Responsive */
 @media (max-width: 768px) {
+    .header-inner {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .site-nav {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .brand-logo {
+        height: 46px;
+    }
+
     .products-grid {
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: 1rem;

includes/header.php

@@ -7,10 +7,16 @@
     <link rel="stylesheet" href="<?php echo SITE_URL; ?>/assets/css/style.css">
 </head>
 <body>
-    <header>
-        <div class="container">
-            <h1><?php echo SITE_NAME; ?></h1>
-            <nav>
+    <header class="site-header">
+        <div class="container header-inner">
+            <a class="brand" href="<?php echo SITE_URL; ?>/index.php">
+                <img class="brand-logo" src="<?php echo SITE_URL; ?>/assets/feuerwehr-Logo-invers.webp" alt="Freiwillige Feuerwehr Freising Logo">
+                <div class="brand-text">
+                    <span class="brand-title"><?php echo SITE_NAME; ?></span>
+                    <span class="brand-subtitle">Onlineshop</span>
+                </div>
+            </a>
+            <nav class="site-nav">
                 <a href="<?php echo SITE_URL; ?>/index.php">Startseite</a>
                 <a href="<?php echo SITE_URL; ?>/cart.php">Warenkorb</a>
                 <a href="<?php echo SITE_URL; ?>/admin/">Admin</a>