diff --git a/public/index.html b/public/index.html
index a74b974..7d530c0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,11 @@
-#<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Infraviewer - Wartung</title>
     <link rel="icon" type="image/png" href="/images/icons/favicon.png">
     <link rel="apple-touch-icon" href="/images/icons/icon-180x180.png">
+    <title>Infraviewer - Volltextsuche</title>
     <style>
         * {
             margin: 0;
@@ -15,124 +15,609 @@
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #0066FF;
             min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             padding: 20px;
         }
 
-        .maintenance-container {
-            background: white;
-            border-radius: 16px;
-            padding: 60px 40px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
             text-align: center;
-            max-width: 600px;
-            width: 100%;
+            color: white;
+            margin-bottom: 40px;
         }
 
-        .maintenance-icon {
-            font-size: 5rem;
-            margin-bottom: 30px;
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% {
-                transform: scale(1);
-                opacity: 1;
-            }
-            50% {
-                transform: scale(1.1);
-                opacity: 0.8;
-            }
-        }
-
-        h1 {
-            color: #333;
+        .header h1 {
             font-size: 2.5rem;
-            margin-bottom: 20px;
-            font-weight: 700;
-        }
-
-        .subtitle {
-            color: #666;
-            font-size: 1.2rem;
-            margin-bottom: 30px;
-            line-height: 1.6;
-        }
-
-        .info-box {
-            background: #f5f5f5;
-            border-left: 4px solid #667eea;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 30px 0;
-            text-align: left;
-        }
-
-        .info-box p {
-            color: #555;
             margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
         }
 
-        .info-box p:last-child {
-            margin-bottom: 0;
+        .header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
         }
 
-        .dev-link {
-            display: inline-block;
-            margin-top: 30px;
-            padding: 15px 30px;
+        .search-card {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+            margin-bottom: 30px;
+        }
+
+        .search-box {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .search-input {
+            flex: 1;
+            padding: 15px 20px;
+            font-size: 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+
+        .search-input:focus {
+            border-color: #667eea;
+        }
+
+        .search-filter {
+            padding: 15px 12px;
+            font-size: 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            background: white;
+            color: #333;
+            cursor: pointer;
+            min-width: 140px;
+        }
+        .search-filter:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .search-button {
+            padding: 15px 40px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            text-decoration: none;
+            border: none;
             border-radius: 8px;
+            font-size: 16px;
             font-weight: 600;
+            cursor: pointer;
             transition: transform 0.2s, box-shadow 0.2s;
         }
 
-        .dev-link:hover {
+        .search-button:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
         }
 
+        .search-button:active {
+            transform: translateY(0);
+        }
+
+        .search-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .stats {
+            display: flex;
+            gap: 20px;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+
+        .stat-item {
+            flex: 1;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #667eea;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            color: #666;
+            margin-top: 5px;
+        }
+
+        .results {
+            margin-top: 30px;
+        }
+
+        .table-result {
+            background: white;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .table-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .table-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .table-count {
+            background: rgba(255,255,255,0.2);
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+        }
+
+        .records {
+            padding: 20px;
+        }
+
+        .record {
+            display: flex;
+            margin-bottom: 10px;
+            border-radius: 6px;
+            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;
+            padding: 5px 0;
+            margin: 0 -15px;
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        .record-body .record-field:nth-child(even) {
+            background: rgba(0,0,0,0.04);
+        }
+        .record-body .record-field:nth-child(odd) {
+            background: transparent;
+        }
+
+        .field-name {
+            font-weight: 600;
+            color: #666;
+            min-width: 150px;
+        }
+
+        .field-value {
+            color: #333;
+            word-break: break-word;
+            white-space: pre-line;
+            margin-left: 16px;
+        }
+
+        .price-age {
+            margin-left: 6px;
+            font-size: 0.9em;
+            color: #555;
+        }
+
+        .price-age--old {
+            color: #c62828;
+            font-weight: 600;
+        }
+
+        .field-value .part-link {
+            color: #1565c0;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .field-value .part-link:hover {
+            text-decoration: underline;
+        }
+
+        .highlight {
+            background-color: #ffeb3b;
+            padding: 2px 4px;
+            border-radius: 3px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            background: #ffebee;
+            color: #c62828;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 20px;
+        }
+
+        .no-results {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+
+        .config-button {
+            padding: 10px 20px;
+            background: white;
+            color: #667eea;
+            border: 2px solid white;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-left: 10px;
+        }
+
+        .config-button:hover {
+            background: transparent;
+            color: white;
+        }
+
         @media (max-width: 768px) {
-            .maintenance-container {
-                padding: 40px 30px;
+            .search-box {
+                flex-direction: column;
             }
 
-            h1 {
-                font-size: 2rem;
+            .stats {
+                flex-direction: column;
             }
 
-            .maintenance-icon {
-                font-size: 4rem;
+            .header h1 {
+                font-size: 1.8rem;
             }
         }
     </style>
 </head>
 <body>
-    <div class="maintenance-container">
-        <div class="maintenance-icon">🔧</div>
-        <h1>Grade unter Wartung</h1>
-        <p class="subtitle">
-            Die Anwendung wird derzeit gewartet und ist vorübergehend nicht verfügbar.
-        </p>
-        
-        <div class="info-box">
-            <p><strong>Was passiert gerade?</strong></p>
-            <p>Wir arbeiten an Verbesserungen und Updates für die Infraviewer-Anwendung.</p>
+    <div class="container">
+        <div class="header">
+            <h1>🔍 Infraviewer</h1>
+            <p>Volltextsuche über MS SQL Server Express Datenbank</p>
         </div>
 
-        <div class="info-box">
-            <p><strong>Wann ist die Anwendung wieder verfügbar?</strong></p>
-            <p>Die Wartungsarbeiten werden voraussichtlich in Kürze abgeschlossen sein.</p>
+        <div class="search-card">
+            <div class="search-box">
+                <input 
+                    type="text" 
+                    id="searchInput" 
+                    class="search-input" 
+                    placeholder="Suchbegriff eingeben..."
+                    autofocus
+                >
+                <select id="statusFilter" class="search-filter" title="Status-Filter">
+                    <option value="">Alle</option>
+                    <option value="aktiv">Nur Aktiv</option>
+                    <option value="pruefbar">Nur Prüfbar</option>
+                    <option value="inaktiv">Nur Inaktiv</option>
+                </select>
+                <button id="searchButton" class="search-button">Suchen</button>
+                <button id="configButton" class="config-button" style="display: none;">Konfiguration</button>
+            </div>
+
+            <div id="stats" class="stats" style="display: none;">
+                <div class="stat-item">
+                    <div class="stat-value" id="totalMatches">0</div>
+                    <div class="stat-label">Treffer</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="searchTime">0ms</div>
+                    <div class="stat-label">Suchzeit</div>
+                </div>
+            </div>
         </div>
 
-        <a href="/dev.html" class="dev-link">Entwicklungsversion öffnen</a>
+        <div id="results" class="results"></div>
     </div>
+
+    <script>
+        const searchInput = document.getElementById('searchInput');
+        const searchButton = document.getElementById('searchButton');
+        const resultsDiv = document.getElementById('results');
+        const statsDiv = document.getElementById('stats');
+        const statusFilterSelect = document.getElementById('statusFilter');
+        let currentSearchTerm = '';
+
+        // Enter-Taste zum Suchen
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                performSearch();
+            }
+        });
+
+        searchButton.addEventListener('click', performSearch);
+
+        resultsDiv.addEventListener('click', (e) => {
+            const link = e.target.closest('.part-link');
+            if (!link) return;
+            e.preventDefault();
+            const part = link.getAttribute('data-part');
+            if (part) {
+                searchInput.value = part;
+                // Beim Klick auf "Ersetzt durch" immer auf "Alle" setzen
+                statusFilterSelect.value = '';
+                performSearch();
+            }
+        });
+
+        async function performSearch() {
+            const searchTerm = searchInput.value.trim();
+            
+            if (!searchTerm) {
+                alert('Bitte geben Sie einen Suchbegriff ein');
+                return;
+            }
+
+            currentSearchTerm = searchTerm;
+            searchButton.disabled = true;
+            searchButton.textContent = 'Suche läuft...';
+            
+            resultsDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Datenbank wird durchsucht...</p></div>';
+            
+            const startTime = performance.now();
+
+            try {
+                const statusFilter = statusFilterSelect.value;
+                const url = new URL('/api/search', window.location.origin);
+                url.searchParams.set('q', searchTerm);
+                if (statusFilter) url.searchParams.set('status', statusFilter);
+                const response = await fetch(url.toString());
+                const data = await response.json();
+                
+                const endTime = performance.now();
+                const searchTime = Math.round(endTime - startTime);
+
+                if (data.success) {
+                    displayResults(data, searchTime);
+                } else {
+                    displayError(data.error);
+                }
+            } catch (error) {
+                displayError('Verbindungsfehler: ' + error.message);
+            } finally {
+                searchButton.disabled = false;
+                searchButton.textContent = 'Suchen';
+            }
+        }
+
+        function displayResults(data, searchTime) {
+            // Statistiken anzeigen
+            statsDiv.style.display = 'flex';
+            document.getElementById('totalMatches').textContent = data.totalMatches;
+            document.getElementById('searchTime').textContent = searchTime + 'ms';
+
+            // Ergebnisse anzeigen
+            if (data.totalMatches === 0) {
+                resultsDiv.innerHTML = `
+                    <div class="no-results">
+                        <h2>Keine Ergebnisse gefunden</h2>
+                        <p>Der Suchbegriff "${escapeHtml(data.searchTerm)}" wurde in keiner Tabelle gefunden.</p>
+                    </div>
+                `;
+                return;
+            }
+
+            let html = '';
+            
+            data.results.forEach(tableResult => {
+                if (tableResult.matchCount > 0) {
+                    html += `
+                        <div class="table-result">
+                            <div class="table-header">
+                                <span class="table-name">${escapeHtml(tableResult.tableName)}</span>
+                                <span class="table-count">${tableResult.matchCount} Treffer</span>
+                            </div>
+                            <div class="records">
+                                ${tableResult.records.slice().sort((a, b) => getStatusSortOrder(a.Stat) - getStatusSortOrder(b.Stat)).map(record => renderRecord(record)).join('')}
+                            </div>
+                        </div>
+                    `;
+                }
+            });
+
+            resultsDiv.innerHTML = html;
+        }
+
+        // Feste Spaltenreihenfolge und Anzeige-Labels (siehe Spalten.txt)
+        const DISPLAY_COLUMNS = [
+            { key: 'Teil', label: 'Teilenummer' },
+            { key: 'Bez', label: 'Bezeichnung' },
+            { key: 'Bez2', label: 'Bezeichnung 2' },
+            { key: 'Ben8', label: 'Bezeichnung 3' },
+            { key: 'Ben7', label: 'Englischer Text' },
+            { key: 'Hersteller', label: 'Hersteller' },
+            { key: 'Text', label: 'Zusatztext' },
+            { key: 'PrsVK', label: 'VK in €' },
+            { key: 'Ben43', label: 'Zeichnungsnummer' },
+            { 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
+        }
+
+        /** Sortierreihenfolge: 0 = aktiv (zuerst), 1 = prüfbar, 2 = Rest */
+        function getStatusSortOrder(stat) {
+            const s = (stat == null ? '' : String(stat).trim());
+            if (s === '') return 0;   // aktiv
+            if (s === 'L') return 1;  // prüfbar
+            return 2;                  // inaktiv, löschbar, pseudoteil
+        }
+
+        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) {
+            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];
+                let displayValue;
+                if (key === 'Ersatz' && value != null && String(value).trim() !== '') {
+                    const partNum = String(value).trim();
+                    const safePart = escapeHtml(partNum);
+                    const safePartAttr = safePart.replace(/"/g, '&quot;');
+                    displayValue = `<a href="#" class="part-link" data-part="${safePartAttr}">${safePart}</a>`;
+                } else if (key === 'PrsVK') {
+                    const isVkTeil = record.VkTeil != null && Number(record.VkTeil) !== 0;
+                    if (isVkTeil && value != null && String(value).trim() !== '') {
+                        const priceText = highlightSearchTerm(String(value));
+                        const priceTermStr = record.PrsVkTerm || record.PrsVKTerm;
+                        let ageHtml = '';
+                        if (priceTermStr) {
+                            const priceDate = new Date(priceTermStr);
+                            if (!isNaN(priceDate)) {
+                                const now = new Date();
+                                const diffMs = now.getTime() - priceDate.getTime();
+                                const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+                                const ageText = `${diffDays} Tage alt`;
+                                const isOld = diffDays > 182; // > ca. 6 Monate
+                                const ageClass = isOld ? 'price-age price-age--old' : 'price-age';
+                                ageHtml = ` <span class="${ageClass}">(${escapeHtml(ageText)})</span>`;
+                            }
+                        }
+                        displayValue = `${priceText}${ageHtml}`;
+                    } else {
+                        displayValue = escapeHtml('kein Verkaufsteil');
+                    }
+                } else {
+                    displayValue = value === null || value === undefined ? '' : highlightSearchTerm(String(value));
+                }
+                html += `
+                    <div class="record-field">
+                        <span class="field-name">${escapeHtml(label)}:</span>
+                        <span class="field-value">${displayValue}</span>
+                    </div>`;
+            }
+            html += `
+                    </div>
+                </div>`;
+            return html;
+        }
+
+        function highlightSearchTerm(text) {
+            if (!currentSearchTerm) return escapeHtml(text);
+            
+            const words = currentSearchTerm.trim().split(/\s+/).filter(Boolean);
+            if (words.length === 0) return escapeHtml(text);
+
+            const escapedText = escapeHtml(text);
+            const pattern = words.map(w => escapeRegex(w)).join('|');
+            const searchRegex = new RegExp(`(${pattern})`, 'gi');
+            return escapedText.replace(searchRegex, '<span class="highlight">$1</span>');
+        }
+
+        function displayError(errorMessage) {
+            statsDiv.style.display = 'none';
+            resultsDiv.innerHTML = `
+                <div class="error">
+                    <strong>Fehler:</strong> ${escapeHtml(errorMessage)}
+                </div>
+            `;
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function escapeRegex(text) {
+            return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+
+        // Health Check beim Laden
+        window.addEventListener('load', async () => {
+            try {
+                const response = await fetch('/api/health');
+                const data = await response.json();
+                if (data.status !== 'ok') {
+                    displayError('Datenbankverbindung fehlgeschlagen. Bitte überprüfen Sie die Konfiguration.');
+                }
+            } catch (error) {
+                console.error('Health check failed:', error);
+            }
+        });
+    </script>
 </body>
 </html>
