diff --git a/js/main.js b/js/main.js
index f85a510..0c62109 100644
--- a/js/main.js
+++ b/js/main.js
@@ -729,7 +729,6 @@ function renderWikiCards(data) {
     return;
   }
   
-  // Sort by updatedAt descending (newest first)
   const sorted = [...data].sort((a, b) => new Date(b.updatedAt || b.createdAt) - new Date(a.updatedAt || a.createdAt));
   
   sorted.forEach((item, idx) => {
@@ -741,4 +740,118 @@ function renderWikiCards(data) {
     const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
     const topicColor = getTopicColor(topic);
     
-    // Get excerpt from first subtopic
\ No newline at end of file
+    const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
+    const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
+    const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
+    const teaser = content.trim().substring(0, 180);
+    const teaserEnd = content.trim().length > 180 ? '...' : '';
+    
+    const badgeStyle = 'background:' + topicColor.bg + ';color:' + topicColor.text + ';border-left:4px solid ' + topicColor.border;
+    
+    card.innerHTML = '<span class="wiki-topic-badge" style="' + badgeStyle + '">' + escapeHtml(topic).toUpperCase() + '</span>' +
+      '<h3 class="wiki-subtopic-headline">' + escapeHtml(subtopic) + '</h3>' +
+      '<p class="wiki-teaser">' + escapeHtml(teaser) + teaserEnd + '</p>' +
+      '<div class="wiki-card-meta">' +
+        '<span class="wiki-date">' + dateStr + '</span>' +
+        '<span class="wiki-read-more">Weiterlesen</span>' +
+      '</div>';
+    
+    card.addEventListener('click', () => openWikiModalSingle(item));
+    card.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openWikiModalSingle(item);
+      }
+    });
+    
+    grid.appendChild(card);
+  });
+}
+
+function formatDate(date) {
+  if (!(date instanceof Date) || isNaN(date)) return '';
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return year + '-' + month + '-' + day;
+}
+
+function closeWikiModal() {
+  const overlay = document.getElementById('wiki-modal-overlay');
+  if (overlay) overlay.classList.remove('active');
+}
+
+function openWikiModalSingle(item) {
+  let modalOverlay = document.getElementById('wiki-modal-overlay');
+  if (!modalOverlay) {
+    modalOverlay = document.createElement('div');
+    modalOverlay.id = 'wiki-modal-overlay';
+    modalOverlay.className = 'modal-overlay';
+    document.body.appendChild(modalOverlay);
+  }
+  
+  const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
+  const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
+  const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
+  const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
+  
+  let html = '<div class="modal wiki-modal"><button class="modal-close" onclick="closeWikiModal()">&times;</button>';
+  html += '<div class="wiki-modal-content">';
+  html += '<div class="wiki-modal-topic">' + escapeHtml(topic) + '</div>';
+  html += '<h2 class="wiki-modal-title">' + escapeHtml(subtopic) + '</h2>';
+  if (dateStr) html += '<div class="wiki-modal-date">' + dateStr + '</div>';
+  html += '<div class="wiki-modal-text">' + escapeHtml(content) + '</div>';
+  html += '</div></div>';
+  modalOverlay.innerHTML = html;
+  modalOverlay.classList.add('active');
+}
+
+function searchWiki(term) {
+  if (!term.trim()) {
+    renderWikiCards(wikiData);
+    return;
+  }
+  
+  const t = term.toLowerCase();
+  const filtered = wikiData.filter(item => {
+    const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) +
+                  ' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) +
+                  ' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || ''));
+    return topic.toLowerCase().includes(t);
+  });
+  
+  renderWikiCards(filtered);
+}
+
+function getTopicColor(topic) {
+  const TOPIC_COLORS = {
+    '🌎 Internationales Geschäft': { bg: '#E0F2F1', text: '#00695C', border: '#00695C' },
+    '🏦 Banken & Finanzen Filialen': { bg: '#E3F2FD', text: '#1565C0', border: '#1565C0' },
+    '🏦 Banken & Finanzen allgmein': { bg: '#E8EAF6', text: '#283593', border: '#283593' },
+    '💰 Steuern': { bg: '#FFF3E0', text: '#E65100', border: '#E65100' },
+    '💻 Software & Digital Operations': { bg: '#EDE7F6', text: '#4527A0', border: '#4527A0' },
+    '📑 Buchhaltung': { bg: '#E8F5E9', text: '#2E7D32', border: '#2E7D32' }
+  };
+  
+  if (TOPIC_COLORS[topic]) return TOPIC_COLORS[topic];
+  
+  const cleanTopic = topic.replace(/^[^\s]+\s/, '');
+  for (const key of Object.keys(TOPIC_COLORS)) {
+    const cleanKey = key.replace(/^[^\s]+\s/, '');
+    if (cleanTopic === cleanKey) return TOPIC_COLORS[key];
+  }
+  
+  let hash = 0;
+  for (let i = 0; i < topic.length; i++) {
+    hash = topic.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hues = [200, 180, 240, 30, 140, 60];
+  const idx = Math.abs(hash) % hues.length;
+  const color = hues[idx];
+  return {
+    bg: 'hsl(' + color + ', 70%, 92%)',
+    text: 'hsl(' + color + ', 60%, 35%)',
+    border: 'hsl(' + color + ', 60%, 35%)'
+  };
+}
+