adapting styling to fit general feuerwehr style

assets/css/style.css

@@ -1,13 +1,17 @@
 /* Reset and Base Styles */
 :root {
-    --brand-red: #b0001d;
-    --brand-red-dark: #8f0017;
+    --brand-primary: #2f3541;
+    --brand-primary-dark: #242a33;
+    --brand-danger: #cf2e2e;
+    --brand-danger-dark: #b12727;
+    --brand-accent: #cac300;
     --brand-dark: #1b1b1b;
-    --brand-text: #222;
-    --brand-muted: #6c757d;
-    --brand-surface: #ffffff;
-    --brand-bg: #f4f4f4;
-    --brand-border: #e5e5e5;
+    --brand-text: #f5f7fb;
+    --brand-muted: #c7ccd6;
+    --brand-surface: #2f3541;
+    --brand-surface-alt: #3a4150;
+    --brand-bg: #28292a;
+    --brand-border: #3b4252;
 }
 
 * {
@@ -23,6 +27,14 @@ body {
     background-color: var(--brand-bg);
 }
 
+a {
+    color: var(--brand-accent);
+}
+
+a:hover {
+    color: #e0d700;
+}
+
 .container {
     max-width: 1200px;
     margin: 0 auto;
@@ -31,7 +43,7 @@ body {
 
 /* Header */
 .site-header {
-    background-color: var(--brand-red);
+    background-color: var(--brand-primary);
     color: white;
     padding: 0.9rem 0;
     box-shadow: 0 2px 6px rgba(0,0,0,0.18);
@@ -91,7 +103,7 @@ body {
 }
 
 .site-nav a:hover {
-    text-decoration: underline;
+    color: var(--brand-accent);
 }
 
 /* Main Content */
@@ -104,7 +116,7 @@ main {
 .btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background-color: var(--brand-red);
+    background-color: var(--brand-danger);
     color: white;
     text-decoration: none;
     border: none;
@@ -116,15 +128,17 @@ main {
 }
 
 .btn:hover {
-    background-color: var(--brand-red-dark);
+    background-color: var(--brand-danger-dark);
 }
 
 .btn-secondary {
-    background-color: #6c757d;
+    background-color: transparent;
+    border: 1px solid var(--brand-border);
+    color: var(--brand-text);
 }
 
 .btn-secondary:hover {
-    background-color: #5a6268;
+    background-color: var(--brand-surface-alt);
 }
 
 .btn-small {
@@ -144,7 +158,7 @@ main {
     background: var(--brand-surface);
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
     transition: transform 0.3s, box-shadow 0.3s;
 }
 
@@ -167,7 +181,7 @@ main {
 .product-card h3 {
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
-    color: var(--brand-red);
+    color: var(--brand-accent);
 }
 
 .product-card .price {
@@ -184,11 +198,11 @@ main {
 }
 
 .product-card .stock.in-stock {
-    color: #28a745;
+    color: var(--brand-accent);
 }
 
 .product-card .stock.out-of-stock {
-    color: #dc3545;
+    color: var(--brand-danger);
 }
 
 /* Forms */
@@ -211,14 +225,16 @@ main {
     border-radius: 4px;
     font-size: 1rem;
     font-family: inherit;
+    background: var(--brand-surface-alt);
+    color: var(--brand-text);
 }
 
 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
     outline: none;
-    border-color: var(--brand-red);
-    box-shadow: 0 0 0 3px rgba(176, 0, 29, 0.15);
+    border-color: var(--brand-accent);
+    box-shadow: 0 0 0 3px rgba(202, 195, 0, 0.2);
 }
 
 /* Cart */
@@ -227,7 +243,7 @@ main {
     padding: 1.5rem;
     margin-bottom: 1rem;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -254,13 +270,13 @@ table {
     width: 100%;
     background: var(--brand-surface);
     border-collapse: collapse;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
     border-radius: 8px;
     overflow: hidden;
 }
 
 table th {
-    background-color: var(--brand-red);
+    background-color: var(--brand-primary);
     color: white;
     padding: 1rem;
     text-align: left;
@@ -273,7 +289,7 @@ table td {
 }
 
 table tr:hover {
-    background-color: #f8f9fa;
+    background-color: var(--brand-surface-alt);
 }
 
 /* Alerts */
@@ -281,35 +297,30 @@ table tr:hover {
     padding: 1rem;
     border-radius: 4px;
     margin-bottom: 1.5rem;
+    background: var(--brand-surface);
+    color: var(--brand-text);
+    border: 1px solid var(--brand-border);
 }
 
 .alert-success {
-    background-color: #d4edda;
-    color: #155724;
-    border: 1px solid #c3e6cb;
+    border-color: var(--brand-accent);
 }
 
 .alert-error {
-    background-color: #f8d7da;
-    color: #721c24;
-    border: 1px solid #f5c6cb;
+    border-color: var(--brand-danger);
 }
 
 .alert-info {
-    background-color: #d1ecf1;
-    color: #0c5460;
-    border: 1px solid #bee5eb;
+    border-color: #ffffff;
 }
 
 .alert-warning {
-    background-color: #fff3cd;
-    color: #856404;
-    border: 1px solid #ffeeba;
+    border-color: var(--brand-accent);
 }
 
 /* Footer */
 footer {
-    background-color: var(--brand-dark);
+    background-color: var(--brand-primary);
     color: white;
     text-align: center;
     padding: 2rem 0;
@@ -318,8 +329,8 @@ footer {
 
 /* Reservation Code */
 .reservation-code {
-    background: #fff3cd;
-    border: 2px solid #ffc107;
+    background: var(--brand-surface-alt);
+    border: 2px solid var(--brand-accent);
     padding: 2rem;
     border-radius: 8px;
     text-align: center;
@@ -328,7 +339,7 @@ footer {
 
 .reservation-code h2 {
     font-size: 2rem;
-    color: #856404;
+    color: var(--brand-accent);
     letter-spacing: 0.2rem;
     font-family: 'Courier New', monospace;
 }
@@ -352,7 +363,7 @@ footer {
     background: var(--brand-surface);
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
 }
 
 .stat-card h3 {
@@ -364,7 +375,91 @@ footer {
 .stat-card .stat-value {
     font-size: 2rem;
     font-weight: bold;
-    color: var(--brand-red);
+    color: var(--brand-accent);
+}
+
+.panel {
+    background: var(--brand-surface);
+    border: 1px solid var(--brand-border);
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
+    margin-bottom: 2rem;
+}
+
+.status {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    border: 1px solid transparent;
+}
+
+.status-open {
+    color: var(--brand-accent);
+    border-color: var(--brand-accent);
+}
+
+.status-notified,
+.status-picked {
+    color: #ffffff;
+    border-color: #ffffff;
+}
+
+.status-expired {
+    color: var(--brand-danger);
+    border-color: var(--brand-danger);
+}
+
+.code-highlight {
+    font-size: 1.5rem;
+    color: var(--brand-accent);
+    letter-spacing: 0.2rem;
+    font-family: 'Courier New', monospace;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.6);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: var(--brand-surface);
+    color: var(--brand-text);
+    padding: 2rem;
+    border-radius: 8px;
+    max-width: 1000px;
+    max-height: 95vh;
+    overflow-y: auto;
+    position: relative;
+    border: 1px solid var(--brand-border);
+}
+
+.product-placeholder {
+    width: 100%;
+    height: 400px;
+    background-color: var(--brand-surface-alt);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--brand-text);
+}
+
+.table-compact th,
+.table-compact td {
+    padding: 0.6rem;
+    font-size: 0.9rem;
 }
 
 /* Product Detail Grid */