diff --git a/css/styles.css b/css/styles.css
index 2bf42e5..855d0c3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -72,7 +72,7 @@ a:hover { text-decoration: underline; }
 .user-search input { width: 100%; padding: 10px; border: 1px solid var(--gray2); border-radius: 8px; font-size: 1rem; outline: none; }
 .user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
 .users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
-.user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
+.user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; position: relative; overflow: visible; }
 .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; overflow: hidden; }
 .user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
 .user-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
@@ -87,7 +87,11 @@ a:hover { text-decoration: underline; }
 .user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; }
 .user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
 .user-posts { font-size: .75rem; color: #9ca3af; margin: 6px 0 0 0; }
-.rank-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
+.rank-badge {
+  font-size: .6rem; font-weight: 700; padding: 4px 8px; border-radius: 0 0 8px 8px;
+  position: absolute; top: 0; right: 0; white-space: nowrap;
+  box-shadow: 0 -1px 3px rgba(0,0,0,.08);
+}
 .rank-rookie { background: #f3f4f6; color: #6b7280; }
 .rank-beginner { background: #d1fae5; color: #065f46; }
 .rank-member { background: #dbeafe; color: #1e40af; }
diff --git a/js/main.js b/js/main.js
index 6cc47dc..2982807 100644
--- a/js/main.js
+++ b/js/main.js
@@ -248,10 +248,7 @@ async function loadUsers() {
         card.innerHTML = `
           <div class="user-avatar">${avatarContent}</div>
           <div class="user-info">
-            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
-              <h4 style="margin:0">${user.username || 'N/A'}</h4>
-              <span class="rank-badge rank-${rank.level}">${rank.emoji} ${rank.title}</span>
-            </div>
+            <h4 style="margin:0">${user.username || 'N/A'}</h4>
             <p class="user-company">${user.company || ''}</p>
             <p class="user-email">${user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : ''}</p>
             <p class="user-homepage">${user.homepage ? `<a href="${user.homepage.startsWith('http') ? '' : 'https://'}${user.homepage}" target="_blank">${user.homepage}</a>` : ''}</p>
@@ -259,6 +256,7 @@ async function loadUsers() {
             <p class="user-description">${user.Description || ''}</p>
             ${user.posts ? `<p class="user-posts">${user.posts} <span class="hide-de">Beiträge</span><span class="hide-en">posts</span></p>` : ''}
           </div>
+          <span class="rank-badge rank-${rank.level}" title="${rank.emoji} ${rank.title}">${rank.emoji} ${rank.title}</span>
         `;
         card.addEventListener('click', () => openUserDetailModal(user));
         usersContainer.appendChild(card);