Ersetzt durch added, farben

public/dev.html

@@ -160,12 +160,40 @@
         }
 
         .record {
-            background: #f9f9f9;
-            padding: 15px;
+            display: flex;
             margin-bottom: 10px;
             border-radius: 6px;
-            border-left: 4px solid #667eea;
+            overflow: hidden;
+            background: #f9f9f9;
         }
+        .record-status-bar {
+            width: 16px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 0;
+        }
+        .record-status-label {
+            writing-mode: vertical-rl;
+            text-orientation: mixed;
+            transform: rotate(180deg);
+            color: rgba(255,255,255,0.95);
+            font-size: 11px;
+            font-weight: 600;
+            white-space: nowrap;
+            letter-spacing: 0.5px;
+        }
+        .record-body {
+            flex: 1;
+            padding: 15px;
+        }
+        /* Status-Farben (siehe status.txt): aktiv=grün, inaktiv/löschbar=rot, prüfbar=orange, pseudoteil=grün */
+        .record-status-bar.record--aktiv { background: #2e7d32; }
+        .record-status-bar.record--inaktiv { background: #c62828; }
+        .record-status-bar.record--loeschbar { background: #c62828; }
+        .record-status-bar.record--pruefbar { background: #e65100; }
+        .record-status-bar.record--pseudoteil { background: #2e7d32; }
 
         .record-field {
             display: flex;
@@ -396,11 +424,37 @@
             { key: 'Ben8', label: 'Deutscher Text' },
             { key: 'Hersteller', label: 'Hersteller' },
             { key: 'Text', label: 'Zusatztext' },
-            { key: 'PrsVK', label: 'Verkaufspreis in €' }
+            { key: 'PrsVK', label: 'Verkaufspreis in €' },
+            { key: 'Ersatz', label: 'Ersetzt durch' }
         ];
 
+        function getStatusClass(stat) {
+            const s = (stat == null ? '' : String(stat).trim());
+            if (s === 'i') return 'record--inaktiv';
+            if (s === 'l') return 'record--loeschbar';
+            if (s === 'L') return 'record--pruefbar';
+            if (s === 'p') return 'record--pseudoteil';
+            return 'record--aktiv';  // "" oder leer = aktiv
+        }
+
+        function getStatusLabel(stat) {
+            const s = (stat == null ? '' : String(stat).trim());
+            if (s === 'i') return 'Inaktiv';
+            if (s === 'l') return 'Löschbar';
+            if (s === 'L') return 'Prüfbar';
+            if (s === 'p') return 'Pseudoteil';
+            return 'Aktiv';
+        }
+
         function renderRecord(record) {
-            let html = '<div class="record">';
+            const statusClass = getStatusClass(record.Stat);
+            const statusLabel = getStatusLabel(record.Stat);
+            let html = `
+                <div class="record">
+                    <div class="record-status-bar ${statusClass}">
+                        <span class="record-status-label">${escapeHtml(statusLabel)}</span>
+                    </div>
+                    <div class="record-body">`;
             for (const { key, label } of DISPLAY_COLUMNS) {
                 if (!(key in record)) continue;
                 const value = record[key];
@@ -409,10 +463,11 @@
                     <div class="record-field">
                         <span class="field-name">${escapeHtml(label)}:</span>
                         <span class="field-value">${displayValue}</span>
-                    </div>
-                `;
+                    </div>`;
             }
-            html += '</div>';
+            html += `
+                    </div>
+                </div>`;
             return html;
         }