Add rank badge to profile modal and user detail modal (readonly)

index.html

@@ -134,13 +134,14 @@
       <h3 class="hide-en">Your Profile</h3>
       <div class="profile-form">
         <div class="form-group">
-          <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+          <div id="profile-rank-row" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
             <span id="profile-username-display" class="username-display" style="margin: 0;"></span>
-            <input type="checkbox" id="profile-publish" />
+            <span id="profile-rank-badge" class="rank-badge" style="position: relative; top: auto; right: auto; box-shadow: none;"></span>
+          </div>
+          <input type="checkbox" id="profile-publish" style="margin-top: 8px;" />
           <label for="profile-publish" class="hide-de" style="display: inline; font-size: .85rem; font-weight: 600;">Veröffentlichen</label>
           <label for="profile-publish" class="hide-en" style="display: inline; font-size: .85rem; font-weight: 600;">Publish</label>
         </div>
-        </div>
         <div id="profile-edit-fields" class="hidden">
           <div class="form-group">
             <label for="profile-company" class="hide-de">Name der LLC / SRL</label>
@@ -188,7 +189,10 @@
           <span class="user-avatar-text" id="user-detail-initial">?</span>
         </div>
         <div>
-          <h2 id="user-detail-username">@username</h2>
+          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+            <h2 id="user-detail-username" style="margin:0;">@username</h2>
+            <span id="user-detail-rank-badge" class="rank-badge" style="position:relative;top:auto;right:auto;box-shadow:none;font-size:.6rem;"></span>
+          </div>
           <p id="user-detail-company">Company</p>
         </div>
       </div>

js/main.js

@@ -304,6 +304,9 @@ async function openProfileModal() {
     if (response.ok) {
       const user = await response.json();
       document.getElementById('profile-username-display').textContent = user.username || '';
+      const rank = getRank(user.posts || 0);
+      document.getElementById('profile-rank-badge').className = 'rank-badge rank-' + rank.level;
+      document.getElementById('profile-rank-badge').innerHTML = rank.emoji + ' ' + rank.title;
       document.getElementById('profile-company').value = user.company || '';
       document.getElementById('profile-email').value = user.email || '';
       document.getElementById('profile-homepage').value = user.homepage || '';
@@ -337,6 +340,10 @@ function openUserDetailModal(user) {
   }
 
   document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
+  const userRank = getRank(user.posts || 0);
+  const rankBadge = document.getElementById('user-detail-rank-badge');
+  rankBadge.className = 'rank-badge rank-' + userRank.level;
+  rankBadge.innerHTML = userRank.emoji + ' ' + userRank.title;
   document.getElementById('user-detail-company').textContent = user.company || '';
   const emailEl = document.getElementById('user-detail-email');
   emailEl.innerHTML = user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : '-';