Redesign wiki — individual cards with topic badge, subtopic headline, teaser, date (yyyy-mm-dd)

css/styles.css

@@ -784,8 +784,9 @@ body[data-lang="en"] .hide-de { display: none !important; }
    ======================================== */
 .wiki-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 12px;
+  gap: 20px;
+  margin-top: 30px;
 }
 .wiki-card {
   padding: 16px;
@@ -837,6 +838,90 @@ body[data-lang="en"] .hide-de { display: none !important; }
   color: #65676b;
 }
 .wiki-card-subtopic { color: #1877f2; }
+
+/* ========================================
+   WIKI NEW DESIGN — Individual Cards
+*/
+.wiki-card-new {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  border-left: 4px solid #1877f2;
+  position: relative;
+  overflow: hidden;
+}
+.wiki-card-new:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  border-left-color: #0d5fc9;
+}
+.wiki-card-new:active {
+  transform: translateY(0) scale(0.99);
+}
+
+.wiki-topic-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  background: #e7f3ff;
+  color: #1877f2;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wiki-subtopic-headline {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a2e;
+  margin: 0 0 12px 0;
+  line-height: 1.3;
+}
+
+.wiki-teaser {
+  font-size: 14px;
+  color: #65676b;
+  line-height: 1.5;
+  margin: 0 0 16px 0;
+}
+
+.wiki-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px solid #f0f2f5;
+}
+
+.wiki-date {
+  font-size: 13px;
+  color: #999;
+  font-weight: 500;
+}
+
+.wiki-read-more {
+  font-size: 13px;
+  color: #1877f2;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wiki-read-more::after {
+  content: '→';
+  transition: transform 0.2s ease;
+}
+
+.wiki-card-new:hover .wiki-read-more::after {
+  transform: translateX(4px);
+}
+
 .no-results { padding: 20px; text-align: center; color: #65676b; }
 .loading-text { padding: 20px; text-align: center; color: #65676b; font-style: italic; }
 
@@ -952,6 +1037,57 @@ body[data-lang="en"] .hide-de { display: none !important; }
 .user-detail-company { color: #65676b; text-align: center; }
 
 /* ========================================
+
+/* ========================================
+   WIKI MODAL ENHANCED
+   ======================================== */
+.wiki-modal-topic {
+  display: inline-block;
+  padding: 4px 10px;
+  background: #e7f3ff;
+  color: #1877f2;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.wiki-modal-date {
+  font-size: 13px;
+  color: #999;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+.wiki-modal-subtitle {
+  font-size: 16px;
+  color: #1877f2;
+  margin: 16px 0 8px;
+  border-bottom: 1px solid #f0f2f5;
+  padding-bottom: 4px;
+}
+.wiki-modal-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 24px;
+}
+.wiki-modal-close {
+  background: #f0f2f5;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  color: #65676b;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+.wiki-modal-close:hover {
+  background: #e4e6eb;
+  color: #1c1e21;
+}
+
 TELEGRAM BANNER
    ======================================== */
 .telegram-banner {

js/main.js

@@ -650,42 +650,56 @@ function renderWikiCards(data) {
     return;
   }
   
-  // Group by topic
+  // Sort by updatedAt descending (newest first)
-  const topics = {};
+  const sorted = [...data].sort((a, b) => new Date(b.updatedAt || b.createdAt) - new Date(a.updatedAt || a.createdAt));
-  data.forEach(item => {
-    const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown');
-    if (!topics[topicKey]) topics[topicKey] = [];
-    topics[topicKey].push(item);
-  });
   
-  const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow'];
+  sorted.forEach(item => {
-  
-  Object.entries(topics).forEach(([topicName, subtopics], idx) => {
     const card = document.createElement('div');
-    card.className = 'wiki-card';
+    card.className = 'wiki-card-new';
-    card.dataset.color = colors[idx % colors.length];
+    card.setAttribute('role', 'button');
+    card.setAttribute('tabindex', '0');
     
-    // Get excerpt from first subtopic
+    const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown');
-    const firstSub = subtopics[0];
+    const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || '');
-    const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || '');
+    const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || '');
-    const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || '');
+    
+    // Get date — try updatedAt first, fall back to createdAt
+    const dateStr = formatDate(new Date(item.updatedAt || item.createdAt));
+    
+    // Teaser: first 150 chars of content
+    const teaser = content.trim().substring(0, 180);
+    const teaserEnd = content.trim().length > 180 ? '...' : '';
     
     card.innerHTML = `
-      <div class="wiki-card-title">${escapeHtml(topicName)}</div>
+      <span class="wiki-topic-badge">${escapeHtml(topic)}</span>
-      <div class="wiki-card-excerpt">${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}</div>
+      <h3 class="wiki-subtopic-headline">${escapeHtml(subtopic)}</h3>
-      <div class="wiki-card-footer">
+      <p class="wiki-teaser">${escapeHtml(teaser)}${teaserEnd}</p>
-        <span class="wiki-card-subtopic">${escapeHtml(subtopicTitle)}</span>
+      <div class="wiki-card-meta">
-        <span>${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'}</span>
+        <span class="wiki-date">${dateStr}</span>
       </div>
     `;
     
     // Open modal on click
-    card.addEventListener('click', () => openWikiModal(topicName, subtopics));
+    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 openWikiModal(topicName, subtopics) {
   // Create modal if not exists
   let modalOverlay = document.getElementById('wiki-modal-overlay');
@@ -717,6 +731,33 @@ function closeWikiModal() {
   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 || '');
+  
+  // Get date
+  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);