.participants-wrap { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: 0 auto; max-width: 1100px; } .participants-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; } .participants-search { flex:1 1 220px; min-width:160px; padding:10px 12px; border-radius:10px; border:1px solid #e3e3e3; font-size:15px; } .alpha-bar { display:flex; gap:6px; flex-wrap:wrap; } .alpha-btn { padding:6px 9px; border-radius:8px; border:1px solid transparent; background:transparent; cursor:pointer; font-size:13px; } .alpha-btn.active, .alpha-btn:hover { background:#f3f4f6; border-color:#e1e1e1; } .participants-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; list-style:none; padding:0; margin:0; } .participant-card { background: #fff; border:1px solid #eee; border-radius:10px; padding:14px 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.03); transition: transform .12s ease, box-shadow .12s ease; display:flex; align-items:center; justify-content:center; min-height:56px; text-align:center; } .participant-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(12,20,30,0.06); } .participant-name { font-weight:600; font-size:15px; color:#111; word-break:break-word; padding:0 6px; } .hidden { display:none !important; } @media (max-width:420px) { .participant-card { padding:10px; min-height:48px; } .participants-search { font-size:14px; } } (function(){ const search = document.getElementById('participantsSearch'); const grid = document.getElementById('participantsGrid'); const items = Array.from(grid.querySelectorAll('.participant-card')); const alphaBtns = Array.from(document.querySelectorAll('.alpha-btn')); function nameOf(item){ return item.textContent.trim().toLowerCase(); } search.addEventListener('input', function(){ const q = this.value.trim().toLowerCase(); alphaBtns.forEach(b => b.classList.remove('active')); filterItems(i => i.textContent.toLowerCase().includes(q)); }); alphaBtns.forEach(btn => { btn.addEventListener('click', function(){ alphaBtns.forEach(b=>b.classList.remove('active')); btn.classList.add('active'); const letter = btn.getAttribute('data-letter'); search.value = ''; if(letter === 'all') { filterItems(()=>true); } else { filterItems(i => i.textContent.trim().toUpperCase().startsWith(letter)); } }); }); function filterItems(testFn){ let visibleCount = 0; items.forEach(it => { if(testFn(it)) { it.classList.remove('hidden'); visibleCount++; } else { it.classList.add('hidden'); } }); if(visibleCount === 0){ grid.setAttribute('aria-label', 'Keine Ergebnisse gefunden'); } else { grid.removeAttribute('aria-label'); } } document.querySelector('.alpha-btn[data-letter="all"]').classList.add('active'); })();