Alles mögliche

2026-04-08 00:53:49 +02:00
parent 5ffb99c9b5
commit a13b8e894f
78 changed files with 2833 additions and 650 deletions
--- a/src/main/resources/application-dev.properties
+++ b/src/main/resources/application-dev.properties
@@ -0,0 +1,9 @@
+# Lokale Entwicklung – überschreibt application.properties
+
+# Cookies ohne Secure-Flag, da lokal kein HTTPS läuft
+app.cookie.secure=false
+
+# Klartext-Credentials für lokale DB (kein Umgebungsvariablen-Zwang)
+spring.mail.username=local@dev.invalid
+spring.mail.password=unused
+jwt.keystore.password=XUR!Rv&f$j3UsqD&
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -22,18 +22,19 @@ spring.jpa.properties.hibernate.type.preferred_uuid_jdbc_type=VARCHAR
 # Mailpit
 spring.mail.host=smtp-relay.brevo.com
 spring.mail.port=587
-spring.mail.username=a6b17a001@smtp-brevo.com
-spring.mail.password=xsmtpsib-77b691d562154574133d12b09d44a06e166d30091aac6642480771a0ae463a79-8yH3jHOd4nMMAwuS
+spring.mail.username=${MAIL_USERNAME}
+spring.mail.password=${MAIL_PASSWORD}
 spring.mail.properties.mail.smtp.auth=true
 spring.mail.properties.mail.smtp.starttls.enable=true

 # JWT Keystore
 jwt.keystore.path=classpath:xxx.jks
-jwt.keystore.password=${JWT_KEYSTORE_PASSWORD:XUR!Rv&f$j3UsqD&}
+jwt.keystore.password=${JWT_KEYSTORE_PASSWORD}
 jwt.keystore.alias=xxx

 # App
 app.base-url=http://localhost:8080
+app.cookie.secure=true

 # Theme – alle Farben hier ändern, Email-Style passt sich automatisch an
 app.theme.color-bg=#1a1a2e
--- a/src/main/resources/static/community/feed.html
+++ b/src/main/resources/static/community/feed.html
@@ -182,10 +182,17 @@
    let composeBilderArr = [];

    // ── Boot ──
-    fetch('/login/me').then(r => r.ok ? r.json() : null).then(user => {
+    fetch('/login/me').then(r => r.ok ? r.json() : null).then(async user => {
        if (user) {
            myUserId = user.userId;
-            loadFeed('mine');
+            const raw = sessionStorage.getItem('feedOpenPost');
+            if (raw) {
+                sessionStorage.removeItem('feedOpenPost');
+                loadFeed('mine');
+                openLbWithData(JSON.parse(raw));
+            } else {
+                await loadFeed('mine');
+            }
        }
    }).catch(() => {});

@@ -387,7 +394,7 @@

    async function submitPost() {
        const text = document.getElementById('composeText').value.trim();
-        if (!text) return;
+        if (!text && composeBilderArr.length === 0) return;
        const beitragTyp = document.querySelector('input[name="beitragTyp"]:checked').value;
        const multiChoice = document.getElementById('multiChoice').checked;
        const isPublic = document.getElementById('isPublic').checked;
@@ -495,6 +502,20 @@
        document.getElementById('postLightbox').classList.add('open');
    }

+    function openLbWithData(p) {
+        activeLbPostId   = p.postId;
+        activeLbPostType = p.postType || 'FEED';
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = renderPostCard(p, 'mine');
+        const card = tempDiv.firstElementChild;
+        if (card) {
+            card.querySelectorAll('.post-actions').forEach(el => el.remove());
+            document.getElementById('lbPostBody').innerHTML = card.innerHTML;
+        }
+        loadLbComments(p.postId, p.postType || 'FEED');
+        document.getElementById('postLightbox').classList.add('open');
+    }
+
    function closeLb() {
        document.getElementById('postLightbox').classList.remove('open');
        activeLbPostId = null;
--- a/src/main/resources/static/dating/besucher.html
+++ b/src/main/resources/static/dating/besucher.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/img/icon.png" type="image/png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profilbesucher – xXx Sphere</title>
+    <link rel="stylesheet" href="/css/variables.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <style>
+        .profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
+        @media (max-width: 500px) { .profiles-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
+        .profile-card { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; }
+        .profile-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
+        .profile-card-img-wrap { position: relative; width: 100%; aspect-ratio: 1; flex-shrink: 0; overflow: hidden; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
+        .profile-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
+        .profile-card-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
+        .profile-card-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .profile-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+        .meta-chip { padding: 0.1rem 0.45rem; border-radius: 20px; background: var(--color-secondary); font-size: 0.73rem; color: var(--color-muted); }
+        .meta-chip.time { color: var(--color-primary); }
+        .profile-card-desc { font-size: 0.78rem; color: var(--color-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 0.15rem; }
+        .profile-card-skeleton { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
+        .skeleton-img { width: 100%; aspect-ratio: 1; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        .skeleton-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
+        .skeleton-line { height: 0.75rem; border-radius: 4px; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        @keyframes shimmer { to { background-position: -200% 0; } }
+        .empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-muted); grid-column: 1 / -1; }
+        .empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+        #sentinel { height: 1px; margin-top: 1rem; }
+        .results-count { font-size: 0.85rem; color: var(--color-muted); display: block; margin-bottom: 0.75rem; }
+    </style>
+</head>
+<body class="app">
+<div class="main">
+    <div class="content">
+        <h1 style="margin:0 0 0.15rem;">Profilbesucher</h1>
+        <span class="results-count" id="resultsCount"></span>
+        <div class="profiles-grid" id="profilesGrid"></div>
+        <div id="sentinel"></div>
+    </div>
+</div>
+<script src="/js/icons.js"></script>
+<script src="/js/sidebar.js"></script>
+<script>
+    const BATCH = 12;
+    let allEntries = [];
+    let loadedCount = 0;
+    let loading = false;
+
+    function relativeTime(iso) {
+        const diff = Date.now() - new Date(iso).getTime();
+        const m = Math.floor(diff / 60000);
+        if (m < 1) return 'gerade eben';
+        if (m < 60) return `vor ${m} Min.`;
+        const h = Math.floor(m / 60);
+        if (h < 24) return `vor ${h} Std.`;
+        const d = Math.floor(h / 24);
+        return `vor ${d} Tag${d !== 1 ? 'en' : ''}`;
+    }
+
+    function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+    function appendProfiles(profiles) {
+        const grid = document.getElementById('profilesGrid');
+        profiles.forEach(p => {
+            const entry = allEntries.find(e => e.userId === p.userId);
+            const pic = p.profilePictureHq || p.profilePicture;
+            const img = pic ? `<img src="data:image/png;base64,${pic}" alt="${esc(p.name)}" loading="lazy">` : '👤';
+            const chips = [
+                p.alter       ? `<span class="meta-chip">${p.alter} J.</span>` : '',
+                p.geschlecht  ? `<span class="meta-chip">${esc(p.geschlecht)}</span>` : '',
+                p.datingStadt ? `<span class="meta-chip">${esc(p.datingStadt)}</span>` : '',
+                entry?.visitedAt ? `<span class="meta-chip time">${relativeTime(entry.visitedAt)}</span>` : '',
+            ].filter(Boolean).join('');
+            const desc = p.beschreibung ? `<div class="profile-card-desc">${esc(p.beschreibung)}</div>` : '';
+            const card = document.createElement('a');
+            card.className = 'profile-card';
+            card.href = `/community/benutzer.html?userId=${p.userId}`;
+            card.innerHTML = `
+                <div class="profile-card-img-wrap">${img}</div>
+                <div class="profile-card-body">
+                    <div class="profile-card-name">${esc(p.name)}</div>
+                    <div class="profile-card-meta">${chips}</div>
+                    ${desc}
+                </div>`;
+            grid.appendChild(card);
+        });
+    }
+
+    async function loadNextBatch() {
+        if (loading || loadedCount >= allEntries.length) return;
+        loading = true;
+        const batch = allEntries.slice(loadedCount, loadedCount + BATCH);
+        const grid = document.getElementById('profilesGrid');
+        const skelDiv = document.createElement('div');
+        skelDiv.style.display = 'contents';
+        skelDiv.innerHTML = Array.from({length: batch.length}, () => `
+            <div class="profile-card-skeleton">
+                <div class="skeleton-img"></div>
+                <div class="skeleton-body">
+                    <div class="skeleton-line" style="width:70%"></div>
+                    <div class="skeleton-line" style="width:50%"></div>
+                </div>
+            </div>`).join('');
+        grid.appendChild(skelDiv);
+        try {
+            const res = await fetch('/dating/profiles/batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(batch.map(e => e.userId))
+            });
+            grid.removeChild(skelDiv);
+            if (res.ok) appendProfiles(await res.json());
+        } catch { grid.removeChild(skelDiv); }
+        loadedCount += batch.length;
+        loading = false;
+    }
+
+    (async () => {
+        try {
+            const res = await fetch('/social/profile-visits/my-visitors');
+            if (!res.ok) throw new Error();
+            const visitors = await res.json();
+            allEntries = visitors.map(v => ({ userId: v.userId, visitedAt: v.visitedAt }));
+            document.getElementById('resultsCount').textContent =
+                allEntries.length === 0 ? 'Noch keine Besucher'
+                : allEntries.length + (allEntries.length === 1 ? ' Besucher' : ' Besucher');
+            if (!allEntries.length) {
+                document.getElementById('profilesGrid').innerHTML =
+                    '<div class="empty-state"><div class="icon">👀</div><p>Noch niemand hat dein Profil besucht.</p></div>';
+                return;
+            }
+            loadNextBatch();
+        } catch {
+            document.getElementById('profilesGrid').innerHTML =
+                '<div class="empty-state"><div class="icon">⚠️</div><p>Fehler beim Laden.</p></div>';
+        }
+    })();
+
+    new IntersectionObserver(
+        e => { if (e[0].isIntersecting) loadNextBatch(); },
+        { rootMargin: '300px' }
+    ).observe(document.getElementById('sentinel'));
+</script>
+</body>
+</html>
--- a/src/main/resources/static/dating/dating.html
+++ b/src/main/resources/static/dating/dating.html
@@ -1038,7 +1038,7 @@
                    <div style="font-size:2.5rem; margin-bottom:0.75rem;">🎉</div>
                    <p>Keine weiteren Profile gefunden.<br>Schau später wieder vorbei!</p>
                </div>
-                <div id="discoveryLoading" style="text-align:center; padding:3rem 1rem; color:var(--color-muted);">
+                <div id="discoveryLoading" style="display:none; text-align:center; padding:3rem 1rem; color:var(--color-muted);">
                    Wird geladen…
                </div>
                <div class="discovery-actions" id="discoveryActions" style="display:none;">
@@ -1742,7 +1742,11 @@
        document.getElementById('discoveryEmpty').style.display   = 'none';
        try {
            const res = await fetch('/dating/discovery');
-            if (res.status === 403) return;
+            if (res.status === 403) {
+                document.getElementById('discoveryLoading').style.display = 'none';
+                document.getElementById('discoveryEmpty').style.display   = '';
+                return;
+            }
            if (!res.ok) throw new Error();
            discoveryQueue = await res.json();
            discoveryIdx   = 0;
--- a/src/main/resources/static/dating/likes.html
+++ b/src/main/resources/static/dating/likes.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/img/icon.png" type="image/png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Likes – xXx Sphere</title>
+    <link rel="stylesheet" href="/css/variables.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <style>
+        .profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
+        @media (max-width: 500px) { .profiles-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
+        .profile-card { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; }
+        .profile-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
+        .profile-card-img-wrap { position: relative; width: 100%; aspect-ratio: 1; flex-shrink: 0; overflow: hidden; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
+        .profile-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
+        .profile-card-img-wrap.blurred img { filter: blur(12px); transform: scale(1.1); }
+        .profile-card-img-wrap .lock-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
+        .profile-card-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
+        .profile-card-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .profile-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+        .meta-chip { padding: 0.1rem 0.45rem; border-radius: 20px; background: var(--color-secondary); font-size: 0.73rem; color: var(--color-muted); }
+        .meta-chip.accent { color: var(--color-primary); }
+        .profile-card-desc { font-size: 0.78rem; color: var(--color-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 0.15rem; }
+        .profile-card-skeleton { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
+        .skeleton-img { width: 100%; aspect-ratio: 1; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        .skeleton-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
+        .skeleton-line { height: 0.75rem; border-radius: 4px; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        @keyframes shimmer { to { background-position: -200% 0; } }
+        .empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-muted); grid-column: 1 / -1; }
+        .empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+        #sentinel { height: 1px; margin-top: 1rem; }
+        .results-count { font-size: 0.85rem; color: var(--color-muted); display: block; margin-bottom: 0.75rem; }
+        .premium-banner { background: var(--color-card); border: 1px solid var(--color-primary); border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; color: var(--color-muted); }
+        .premium-banner strong { color: var(--color-primary); }
+    </style>
+</head>
+<body class="app">
+<div class="main">
+    <div class="content">
+        <h1 style="margin:0 0 0.15rem;">Likes</h1>
+        <span class="results-count" id="resultsCount"></span>
+        <div id="premiumBanner" style="display:none;" class="premium-banner">
+            <strong>Premium</strong> – Mit Premium siehst du, wer dich geliket hat.
+        </div>
+        <div class="profiles-grid" id="profilesGrid"></div>
+        <div id="sentinel"></div>
+    </div>
+</div>
+<script src="/js/icons.js"></script>
+<script src="/js/sidebar.js"></script>
+<script>
+    const BATCH = 12;
+    let allEntries = [];   // { userId } – nur für Premium; gesamt inkl. locked
+    let loadedCount = 0;
+    let loading = false;
+    let isPremium = false;
+
+    function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+    function skeleton() {
+        return `<div class="profile-card-skeleton"><div class="skeleton-img"></div><div class="skeleton-body"><div class="skeleton-line" style="width:70%"></div><div class="skeleton-line" style="width:50%"></div></div></div>`;
+    }
+
+    function appendLockedCard() {
+        const grid = document.getElementById('profilesGrid');
+        const card = document.createElement('div');
+        card.className = 'profile-card';
+        card.style.cursor = 'default';
+        card.innerHTML = `
+            <div class="profile-card-img-wrap blurred">
+                <span style="font-size:3rem;">👤</span>
+                <div class="lock-overlay">🔒</div>
+            </div>
+            <div class="profile-card-body">
+                <div class="profile-card-name">???</div>
+                <div class="profile-card-meta"><span class="meta-chip accent">Premium</span></div>
+            </div>`;
+        grid.appendChild(card);
+    }
+
+    function appendProfiles(profiles) {
+        const grid = document.getElementById('profilesGrid');
+        profiles.forEach(p => {
+            const pic = p.profilePictureHq || p.profilePicture;
+            const img = pic ? `<img src="data:image/png;base64,${pic}" alt="${esc(p.name)}" loading="lazy">` : '👤';
+            const chips = [
+                p.alter       ? `<span class="meta-chip">${p.alter} J.</span>` : '',
+                p.geschlecht  ? `<span class="meta-chip">${esc(p.geschlecht)}</span>` : '',
+                p.datingStadt ? `<span class="meta-chip">${esc(p.datingStadt)}</span>` : '',
+                `<span class="meta-chip accent">❤️ mag dich</span>`,
+            ].filter(Boolean).join('');
+            const desc = p.beschreibung ? `<div class="profile-card-desc">${esc(p.beschreibung)}</div>` : '';
+            const card = document.createElement('a');
+            card.className = 'profile-card';
+            card.href = `/community/benutzer.html?userId=${p.userId}`;
+            card.innerHTML = `
+                <div class="profile-card-img-wrap">${img}</div>
+                <div class="profile-card-body">
+                    <div class="profile-card-name">${esc(p.name)}</div>
+                    <div class="profile-card-meta">${chips}</div>
+                    ${desc}
+                </div>`;
+            grid.appendChild(card);
+        });
+    }
+
+    async function loadNextBatch() {
+        if (loading || loadedCount >= allEntries.length) return;
+        loading = true;
+        const batch = allEntries.slice(loadedCount, loadedCount + BATCH);
+        const grid = document.getElementById('profilesGrid');
+        const skelDiv = document.createElement('div');
+        skelDiv.style.display = 'contents';
+        skelDiv.innerHTML = Array.from({length: batch.length}, () => skeleton()).join('');
+        grid.appendChild(skelDiv);
+        try {
+            const res = await fetch('/dating/profiles/batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(batch.map(e => e.userId))
+            });
+            grid.removeChild(skelDiv);
+            if (res.ok) appendProfiles(await res.json());
+        } catch { grid.removeChild(skelDiv); }
+        loadedCount += batch.length;
+        loading = false;
+    }
+
+    (async () => {
+        try {
+            const res = await fetch('/dating/who-likes-me');
+            if (!res.ok) throw new Error();
+            const data = await res.json();
+            isPremium = !!data.premium;
+
+            document.getElementById('resultsCount').textContent =
+                data.total === 0 ? 'Noch keine Likes'
+                : data.total + (data.total === 1 ? ' Person mag dich' : ' Personen mögen dich');
+
+            if (data.total === 0) {
+                document.getElementById('profilesGrid').innerHTML =
+                    '<div class="empty-state"><div class="icon">❤️</div><p>Noch keine Likes.</p></div>';
+                return;
+            }
+
+            if (!isPremium) {
+                document.getElementById('premiumBanner').style.display = '';
+                // Locked-Karten für alle anzeigen
+                data.likers.forEach(() => appendLockedCard());
+                return;
+            }
+
+            allEntries = data.likers.map(l => ({ userId: l.userId }));
+            loadNextBatch();
+        } catch {
+            document.getElementById('profilesGrid').innerHTML =
+                '<div class="empty-state"><div class="icon">⚠️</div><p>Fehler beim Laden.</p></div>';
+        }
+    })();
+
+    new IntersectionObserver(
+        e => { if (e[0].isIntersecting) loadNextBatch(); },
+        { rootMargin: '300px' }
+    ).observe(document.getElementById('sentinel'));
+</script>
+</body>
+</html>
--- a/src/main/resources/static/dating/matches.html
+++ b/src/main/resources/static/dating/matches.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/img/icon.png" type="image/png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Matches – xXx Sphere</title>
+    <link rel="stylesheet" href="/css/variables.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <style>
+        .profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
+        @media (max-width: 500px) { .profiles-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
+        .profile-card { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; }
+        .profile-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
+        .profile-card-img-wrap { position: relative; width: 100%; aspect-ratio: 1; flex-shrink: 0; overflow: hidden; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
+        .profile-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
+        .profile-card-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
+        .profile-card-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .profile-card-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+        .meta-chip { padding: 0.1rem 0.45rem; border-radius: 20px; background: var(--color-secondary); font-size: 0.73rem; color: var(--color-muted); }
+        .meta-chip.accent { color: var(--color-primary); }
+        .profile-card-desc { font-size: 0.78rem; color: var(--color-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 0.15rem; }
+        .profile-card-actions { padding: 0 0.75rem 0.75rem; display: flex; gap: 0.5rem; }
+        .profile-card-actions .btn { flex: 1; padding: 0.4rem 0.5rem; font-size: 0.8rem; text-align: center; }
+        .profile-card-skeleton { background: var(--color-card); border: 1px solid var(--color-secondary); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
+        .skeleton-img { width: 100%; aspect-ratio: 1; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        .skeleton-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
+        .skeleton-line { height: 0.75rem; border-radius: 4px; background: linear-gradient(90deg, var(--color-secondary) 25%, var(--color-card) 50%, var(--color-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+        @keyframes shimmer { to { background-position: -200% 0; } }
+        .empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-muted); grid-column: 1 / -1; }
+        .empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
+        #sentinel { height: 1px; margin-top: 1rem; }
+        .results-count { font-size: 0.85rem; color: var(--color-muted); display: block; margin-bottom: 0.75rem; }
+    </style>
+</head>
+<body class="app">
+<div class="main">
+    <div class="content">
+        <h1 style="margin:0 0 0.15rem;">Matches</h1>
+        <span class="results-count" id="resultsCount"></span>
+        <div class="profiles-grid" id="profilesGrid"></div>
+        <div id="sentinel"></div>
+    </div>
+</div>
+<script src="/js/icons.js"></script>
+<script src="/js/sidebar.js"></script>
+<script>
+    const BATCH = 12;
+    let allEntries = [];
+    let loadedCount = 0;
+    let loading = false;
+
+    function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+    function skeleton() {
+        return `<div class="profile-card-skeleton"><div class="skeleton-img"></div><div class="skeleton-body"><div class="skeleton-line" style="width:70%"></div><div class="skeleton-line" style="width:50%"></div></div></div>`;
+    }
+
+    function appendProfiles(profiles) {
+        const grid = document.getElementById('profilesGrid');
+        profiles.forEach(p => {
+            const pic = p.profilePictureHq || p.profilePicture;
+            const img = pic ? `<img src="data:image/png;base64,${pic}" alt="${esc(p.name)}" loading="lazy">` : '👤';
+            const chips = [
+                p.alter       ? `<span class="meta-chip">${p.alter} J.</span>` : '',
+                p.geschlecht  ? `<span class="meta-chip">${esc(p.geschlecht)}</span>` : '',
+                p.datingStadt ? `<span class="meta-chip">${esc(p.datingStadt)}</span>` : '',
+                `<span class="meta-chip accent">💕 Match</span>`,
+            ].filter(Boolean).join('');
+            const desc = p.beschreibung ? `<div class="profile-card-desc">${esc(p.beschreibung)}</div>` : '';
+            const card = document.createElement('div');
+            card.className = 'profile-card';
+            card.innerHTML = `
+                <a href="/community/benutzer.html?userId=${p.userId}" style="text-decoration:none;color:inherit;display:contents;">
+                    <div class="profile-card-img-wrap">${img}</div>
+                    <div class="profile-card-body">
+                        <div class="profile-card-name">${esc(p.name)}</div>
+                        <div class="profile-card-meta">${chips}</div>
+                        ${desc}
+                    </div>
+                </a>
+                <div class="profile-card-actions">
+                    <a class="btn" href="/community/nachrichten.html?userId=${p.userId}">Nachricht</a>
+                    <a class="btn" href="/community/benutzer.html?userId=${p.userId}" style="background:var(--color-secondary);color:var(--color-text);">Profil</a>
+                </div>`;
+            grid.appendChild(card);
+        });
+    }
+
+    async function loadNextBatch() {
+        if (loading || loadedCount >= allEntries.length) return;
+        loading = true;
+        const batch = allEntries.slice(loadedCount, loadedCount + BATCH);
+        const grid = document.getElementById('profilesGrid');
+        const skelDiv = document.createElement('div');
+        skelDiv.style.display = 'contents';
+        skelDiv.innerHTML = Array.from({length: batch.length}, () => skeleton()).join('');
+        grid.appendChild(skelDiv);
+        try {
+            const res = await fetch('/dating/profiles/batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(batch.map(e => e.userId))
+            });
+            grid.removeChild(skelDiv);
+            if (res.ok) appendProfiles(await res.json());
+        } catch { grid.removeChild(skelDiv); }
+        loadedCount += batch.length;
+        loading = false;
+    }
+
+    (async () => {
+        try {
+            const res = await fetch('/dating/matches');
+            if (!res.ok) throw new Error();
+            const matches = await res.json();
+            allEntries = matches.map(m => ({ userId: m.userId }));
+            document.getElementById('resultsCount').textContent =
+                allEntries.length === 0 ? 'Noch keine Matches'
+                : allEntries.length + (allEntries.length === 1 ? ' Match' : ' Matches');
+            if (!allEntries.length) {
+                document.getElementById('profilesGrid').innerHTML =
+                    '<div class="empty-state"><div class="icon">💕</div><p>Noch keine Matches. Schau öfter vorbei!</p></div>';
+                return;
+            }
+            loadNextBatch();
+        } catch {
+            document.getElementById('profilesGrid').innerHTML =
+                '<div class="empty-state"><div class="icon">⚠️</div><p>Fehler beim Laden.</p></div>';
+        }
+    })();
+
+    new IntersectionObserver(
+        e => { if (e[0].isIntersecting) loadNextBatch(); },
+        { rootMargin: '300px' }
+    ).observe(document.getElementById('sentinel'));
+</script>
+</body>
+</html>
--- a/src/main/resources/static/games/chastity/neulock.html
+++ b/src/main/resources/static/games/chastity/neulock.html
@@ -314,6 +314,24 @@
    </div>
 </div>

+<!-- Bereits in einem Lock-Dialog -->
+<div class="modal-overlay" id="activeLockModal">
+    <div class="modal-bg" onclick="document.getElementById('activeLockModal').classList.remove('open')"></div>
+    <div class="modal-box">
+        <div style="font-size:2rem;">🔒</div>
+        <h3 style="margin:0;text-align:center;">Du bist bereits in einem Lock</h3>
+        <p style="color:var(--color-muted);font-size:0.85rem;text-align:center;margin:0;">
+            Es ist bereits ein aktives Keuschheitslock für dein Konto vorhanden.
+            Beende oder öffne zuerst das bestehende Lock.
+        </p>
+        <a id="activeLockLink" href="#" style="display:none;width:100%;">
+            <button style="width:100%;">Zum aktiven Lock →</button>
+        </a>
+        <button class="btn-secondary" style="width:100%;"
+                onclick="document.getElementById('activeLockModal').classList.remove('open')">Schließen</button>
+    </div>
+</div>
+
 <!-- Entsperrcode-Modal -->
 <div class="modal-overlay" id="unlockModal">
    <div class="modal-bg"></div>
@@ -669,12 +687,29 @@
        el.style.display = '';
        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
-    function showActiveLockError() {
-        const el = document.getElementById('errorMsg');
-        el.innerHTML = 'Du befindest dich bereits in einem aktiven Lock. '
-            + '<a href="/games/chastity/meine-locks.html" style="color:inherit;text-decoration:underline;">Zum aktiven Lock</a>';
-        el.style.display = '';
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    async function showActiveLockError() {
+        const modal = document.getElementById('activeLockModal');
+        const linkEl = document.getElementById('activeLockLink');
+        linkEl.style.display = 'none';
+
+        // Eigenes aktives Lock suchen (CardLock oder TimeLock)
+        try {
+            const [cardRes, timeRes] = await Promise.all([
+                fetch('/keyholder/mylock'),
+                fetch('/keyholder/timelock/mylock')
+            ]);
+            if (cardRes.status === 200) {
+                const d = await cardRes.json();
+                linkEl.href = '/games/chastity/activelock.html?lockId=' + d.lockId;
+                linkEl.style.display = '';
+            } else if (timeRes.status === 200) {
+                const d = await timeRes.json();
+                linkEl.href = '/games/chastity/activetimelock.html?lockId=' + d.lockId;
+                linkEl.style.display = '';
+            }
+        } catch (_) {}
+
+        modal.classList.add('open');
    }
    function setFieldError(rowId, msg) {
        const row = document.getElementById(rowId);
--- a/src/main/resources/static/js/sidebar.js
+++ b/src/main/resources/static/js/sidebar.js
@@ -80,9 +80,17 @@
        ...socialLinks.map(navLink),
    ].join('');

-    const datingActive = path === '/dating.html';
-    const datingCls = datingActive ? ' class="active"' : '';
-    const datingItem = `<li id="navDating"><a href="/konto/einstellungen.html#sec-dating"${datingCls}><span class="icon">${I('DATING') || '♥'}</span> Dating</a></li>`;
+    const datingLinks = [
+        { href: '/dating/dating.html',   icon: I('DATING') || '♥', label: 'Dating',   id: 'navDating' },
+        { href: '/dating/besucher.html', icon: '👀',                label: 'Besucher'                  },
+        { href: '/dating/likes.html',    icon: '❤️',                label: 'Likes'                     },
+        { href: '/dating/matches.html',  icon: '💕',                label: 'Matches'                   },
+    ];
+    const datingItem = datingLinks.map(({ href, icon, label, id }) => {
+        const cls = path === href ? ' class="active"' : '';
+        const idAttr = id ? ` id="${id}"` : '';
+        return `<li${idAttr}><a href="${href}"${cls}><span class="icon">${icon}</span> ${label}</a></li>`;
+    }).join('');

    const fullHref = path + window.location.search;
    const nav = groups.map(({ label, icon, items }) => {
@@ -152,6 +160,11 @@
    document.querySelectorAll('.sidebar-group-toggle').forEach(toggle => {
        toggle.addEventListener('click', e => {
            e.preventDefault();
+            const href = toggle.getAttribute('href');
+            if (href && href !== '#') {
+                window.location.href = href;
+                return;
+            }
            toggle.closest('.sidebar-group').classList.toggle('open');
        });
    });
@@ -230,7 +243,7 @@
            const navDating = document.getElementById('navDating');
            if (navDating) {
                navDating.querySelector('a').href = user.datingAktiv
-                    ? '/dating.html'
+                    ? '/dating/dating.html'
                    : '/konto/einstellungen.html#sec-dating';
            }

--- a/src/main/resources/static/userhome.html
+++ b/src/main/resources/static/userhome.html
@@ -36,77 +36,63 @@
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--color-secondary);
        }
-        .visitors-strip {
-            display: flex; flex-wrap: wrap; gap: 0.75rem;
+        /* ── Aktivitäts-Grid (Besucher / Likes / Matches) ── */
+        .activity-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+            margin-bottom: 0.5rem;
        }
-        .visitor-card {
-            display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
-            text-decoration: none; color: var(--color-text);
-            width: 72px;
+        @media (max-width: 680px) {
+            .activity-grid { grid-template-columns: 1fr; }
        }
-        .visitor-card:hover .visitor-avatar { border-color: var(--color-primary); }
-        .visitor-avatar {
-            width: 56px; height: 56px; border-radius: 50%;
-            background: var(--color-secondary);
-            border: 2px solid var(--color-secondary);
+        .activity-col {
+            background: var(--color-card);
+            border: 1px solid var(--color-secondary);
+            border-radius: 12px;
+            padding: 0.75rem 0.85rem 0.85rem;
+        }
+        .activity-col-header {
+            display: flex; align-items: center; justify-content: space-between;
+            margin-bottom: 0.7rem;
+        }
+        .activity-col-title {
+            font-size: 0.78rem; font-weight: 700; color: var(--color-muted);
+            text-transform: uppercase; letter-spacing: 0.05em;
+        }
+        .activity-col-link {
+            font-size: 0.75rem; color: var(--color-primary);
+            text-decoration: none; font-weight: 600;
+        }
+        .activity-col-link:hover { text-decoration: underline; }
+        .activity-row {
+            display: flex; gap: 0.5rem;
+        }
+        /* Avatar-Karte */
+        .soc-card {
+            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
+            text-decoration: none; color: var(--color-text); cursor: pointer; min-width: 0;
+        }
+        .soc-card:hover .soc-avatar { border-color: var(--color-primary); }
+        .soc-avatar {
+            width: 48px; height: 48px; border-radius: 50%;
+            background: var(--color-secondary); border: 2px solid var(--color-secondary);
            display: flex; align-items: center; justify-content: center;
-            font-size: 1.4rem; overflow: hidden; flex-shrink: 0;
-            transition: border-color 0.15s;
+            font-size: 1.2rem; overflow: hidden; flex-shrink: 0;
+            transition: border-color 0.15s; position: relative;
        }
-        .visitor-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-        .visitor-name {
-            font-size: 0.75rem; text-align: center;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-            width: 100%;
+        .soc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+        .soc-lock {
+            position: absolute; inset: 0;
+            display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
        }
-        .visitor-time { font-size: 0.68rem; color: var(--color-muted); text-align: center; }
-
-        /* ── Dating: Likes & Matches ── */
-        .dating-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; }
-        .dating-card {
-            display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
-            text-decoration: none; color: var(--color-text); width: 72px;
-        }
-        .dating-card:hover .dating-avatar { border-color: var(--color-primary); }
-        .dating-avatar {
-            width: 56px; height: 56px; border-radius: 50%;
-            background: var(--color-secondary);
-            border: 2px solid var(--color-secondary);
-            display: flex; align-items: center; justify-content: center;
-            font-size: 1.4rem; overflow: hidden; flex-shrink: 0;
-            transition: border-color 0.15s;
-        }
-        .dating-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-        .dating-name {
-            font-size: 0.75rem; text-align: center;
+        .soc-name {
+            font-size: 0.68rem; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
        }
-        /* Verschwommene Karte für nicht-Premium */
-        .dating-card-locked {
-            width: 72px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
-            cursor: default;
-        }
-        .dating-avatar-blurred {
-            width: 56px; height: 56px; border-radius: 50%;
-            background: var(--color-secondary);
-            border: 2px solid var(--color-secondary);
-            overflow: hidden; flex-shrink: 0; position: relative;
-        }
-        .dating-avatar-blurred img {
-            width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
-            filter: blur(6px); transform: scale(1.1);
-        }
-        .dating-avatar-blurred .lock-icon {
-            position: absolute; inset: 0;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 1.1rem;
-        }
-        .premium-hint {
-            font-size: 0.65rem; color: var(--color-primary); text-align: center; font-weight: 600;
-        }
-        .match-badge {
-            font-size: 0.65rem; color: var(--color-primary); text-align: center; font-weight: 600;
-        }
+        .soc-sub { font-size: 0.62rem; color: var(--color-muted); text-align: center; }
+        .soc-sub-accent { font-size: 0.62rem; color: var(--color-primary); font-weight: 600; text-align: center; }
+        .activity-empty { font-size: 0.8rem; color: var(--color-muted); text-align: center; padding: 0.5rem 0; }

        /* ── Location-Events ── */
        .loc-event-list { display: flex; flex-direction: column; gap: 0.6rem; }
@@ -130,6 +116,159 @@
        .loc-event-title { font-size: 0.92rem; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .loc-event-date { font-size: 0.75rem; color: var(--color-primary); margin-top: 0.15rem; }
+
+        /* ── Aktive Spiele ── */
+        .active-game-list { display: flex; flex-direction: column; gap: 0.6rem; }
+        .active-game-card {
+            display: flex; gap: 0.75rem; align-items: center;
+            background: var(--color-secondary); border: 1px solid var(--color-secondary);
+            border-radius: 10px; padding: 0.65rem 0.85rem;
+            text-decoration: none; color: inherit;
+            transition: border-color 0.15s;
+        }
+        .active-game-card:hover { border-color: var(--color-primary); }
+        .active-game-icon {
+            width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
+            background: var(--color-card);
+            display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
+        }
+        .active-game-body { flex: 1; min-width: 0; }
+        .active-game-title { font-size: 0.92rem; font-weight: 600; }
+        .active-game-sub { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.1rem; }
+        .active-game-action {
+            font-size: 0.8rem; color: var(--color-primary); font-weight: 600; flex-shrink: 0;
+        }
+
+        /* ── Einladungen ── */
+        .invite-list { display: flex; flex-direction: column; gap: 0.6rem; }
+        .invite-card {
+            display: flex; gap: 0.75rem; align-items: center;
+            background: var(--color-secondary); border: 1px solid var(--color-secondary);
+            border-radius: 10px; padding: 0.65rem 0.85rem;
+            text-decoration: none; color: inherit;
+            transition: border-color 0.15s;
+        }
+        .invite-card:hover { border-color: var(--color-primary); }
+        .invite-avatar {
+            width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
+            background: var(--color-card);
+            display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
+            overflow: hidden;
+        }
+        .invite-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+        .invite-body { flex: 1; min-width: 0; }
+        .invite-from { font-size: 0.88rem; font-weight: 600;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .invite-type { font-size: 0.73rem; color: var(--color-muted); margin-top: 0.1rem; }
+        .invite-action { font-size: 0.8rem; color: var(--color-primary); font-weight: 600; flex-shrink: 0; }
+
+        /* ── Freundschaftsanfragen ── */
+        .friend-req-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+        .friend-req-card {
+            display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
+            text-decoration: none; color: var(--color-text); width: 72px;
+        }
+        .friend-req-card:hover .friend-req-avatar { border-color: var(--color-primary); }
+        .friend-req-avatar {
+            width: 56px; height: 56px; border-radius: 50%;
+            background: var(--color-secondary);
+            border: 2px solid var(--color-primary);
+            display: flex; align-items: center; justify-content: center;
+            font-size: 1.4rem; overflow: hidden; flex-shrink: 0;
+            transition: border-color 0.15s;
+        }
+        .friend-req-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+        .friend-req-name {
+            font-size: 0.75rem; text-align: center;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
+        }
+        .friend-req-badge { font-size: 0.65rem; color: var(--color-primary); font-weight: 600; text-align: center; }
+
+        /* ── Compose ── */
+        .post-compose { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; padding:1rem; margin-bottom:1rem; transition:border-color 0.15s; }
+        .post-compose.drag-over { border-color:var(--color-primary); background:rgba(var(--color-primary-rgb,180,0,60),0.06); }
+        .compose-type { display:flex; gap:1.5rem; margin-bottom:0.75rem; }
+        .compose-type label { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; cursor:pointer; }
+        .post-compose textarea { width:100%; padding:0.6rem 0.85rem; border:1px solid var(--color-secondary); border-radius:6px; background:var(--color-secondary); color:var(--color-text); font-size:0.95rem; outline:none; transition:border-color 0.2s; resize:vertical; min-height:70px; box-sizing:border-box; }
+        .post-compose textarea:focus { border-color:var(--color-primary); }
+        .compose-thumbs { display:none; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
+        .compose-thumb { position:relative; width:64px; height:64px; flex-shrink:0; }
+        .compose-thumb img { width:64px; height:64px; object-fit:cover; border-radius:6px; display:block; }
+        .compose-thumb-remove { position:absolute; top:-5px; right:-5px; background:rgba(0,0,0,0.7); border:none; color:#fff; border-radius:50%; font-size:0.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; margin:0; width:auto; line-height:1; }
+        .umfrage-options { margin-top:0.5rem; }
+        .umfrage-option-row { display:flex; gap:0.5rem; margin-bottom:0.4rem; }
+        .umfrage-option-row input { flex:1; }
+        .umfrage-option-row button { width:auto; margin:0; padding:0.3rem 0.6rem; font-size:0.8rem; }
+        .compose-footer { display:flex; justify-content:space-between; align-items:center; margin-top:0.75rem; flex-wrap:wrap; gap:0.5rem; }
+        .multi-toggle { font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
+        .privacy-toggle { font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
+        .compose-action-btn { background:none; border:1px solid var(--color-secondary); color:var(--color-muted); border-radius:6px; padding:0.35rem 0.6rem; font-size:0.95rem; cursor:pointer; margin:0; width:auto; transition:border-color 0.15s,color 0.15s; }
+        .compose-action-btn:hover { border-color:var(--color-primary); color:var(--color-primary); background:none; }
+        label.compose-action-btn { display:inline-flex; align-items:center; }
+
+        /* ── Post Cards (1:1 wie Feed) ── */
+        .post-card { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; padding:1rem; margin-bottom:0.9rem; cursor:pointer; transition:border-color 0.15s; }
+        .post-card:hover { border-color:var(--color-primary); }
+        .post-header { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.6rem; }
+        .post-avatar { width:36px; height:36px; border-radius:50%; background:var(--color-secondary); display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; overflow:hidden; }
+        .post-avatar img { width:100%; height:100%; object-fit:cover; }
+        .post-author { font-weight:600; font-size:0.9rem; }
+        .post-meta { font-size:0.75rem; color:var(--color-muted); }
+        .post-text { font-size:0.95rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
+        .post-bild { width:100%; max-height:400px; object-fit:contain; border-radius:6px; margin-top:0.5rem; display:block; }
+        .post-actions { display:flex; gap:1rem; margin-top:0.75rem; align-items:center; flex-wrap:wrap; }
+        .post-action-btn { background:none; border:none; color:var(--color-muted); font-size:0.85rem; padding:0; display:flex; align-items:center; gap:0.3rem; margin:0; width:auto; pointer-events:none; }
+        .post-action-btn.active { color:var(--color-primary); }
+        .gruppe-badge { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; color:var(--color-muted); background:var(--color-secondary); border-radius:4px; padding:0.15rem 0.45rem; margin-left:0.3rem; }
+        .umfrage-option-bar { margin:0.3rem 0; border-radius:6px; overflow:hidden; border:1px solid var(--color-secondary); position:relative; }
+        .umfrage-option-bar.voted { border-color:var(--color-primary); }
+        .umfrage-bar-fill { position:absolute; inset:0; background:rgba(var(--color-primary-rgb,180,0,60),0.15); }
+        .umfrage-bar-content { position:relative; display:flex; justify-content:space-between; padding:0.45rem 0.75rem; font-size:0.88rem; }
+        .umfrage-total { font-size:0.78rem; color:var(--color-muted); margin-top:0.3rem; }
+
+        /* ── Neue Mitglieder ── */
+        .new-members-strip {
+            display: flex;
+            gap: 0.75rem;
+            overflow-x: auto;
+            padding-bottom: 0.4rem;
+            scrollbar-width: thin;
+            scrollbar-color: var(--color-secondary) transparent;
+        }
+        .new-members-strip::-webkit-scrollbar { height: 4px; }
+        .new-members-strip::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 2px; }
+        .nm-card {
+            flex: 0 0 160px;
+            background: var(--color-card);
+            border: 1px solid var(--color-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            text-decoration: none;
+            color: var(--color-text);
+            display: flex;
+            flex-direction: column;
+            transition: border-color 0.15s, box-shadow 0.15s;
+        }
+        .nm-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
+        .nm-card-img {
+            width: 100%; aspect-ratio: 1; flex-shrink: 0;
+            overflow: hidden; background: var(--color-secondary);
+            display: flex; align-items: center; justify-content: center;
+            font-size: 2.5rem; position: relative;
+        }
+        .nm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+        .nm-card-body { padding: 0.6rem 0.65rem; display: flex; flex-direction: column; gap: 0.25rem; }
+        .nm-card-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .nm-card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+        .nm-card-chip {
+            padding: 0.1rem 0.4rem; border-radius: 20px;
+            background: var(--color-secondary); font-size: 0.7rem; color: var(--color-muted);
+        }
+        .nm-card-desc {
+            font-size: 0.75rem; color: var(--color-muted); line-height: 1.35;
+            overflow: hidden; display: -webkit-box;
+            -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+        }
    </style>
 </head>
 <body class="app">
@@ -138,22 +277,62 @@
        <h1 style="margin:0 0 0.15rem;">Home</h1>
        <p class="welcome" id="greeting"></p>

-        <!-- Profilbesucher -->
-        <div id="visitorsSection" style="display:none;">
-            <div class="section-label">Profilbesucher 👀</div>
-            <div class="visitors-strip" id="visitorsStrip"></div>
+        <!-- Aktive Spiele -->
+        <div id="activeGamesSection" style="display:none;">
+            <div class="section-label">Aktive Spiele 🎮</div>
+            <div class="active-game-list" id="activeGamesList"></div>
        </div>

-        <!-- Wer hat mich geliked (Dating) -->
-        <div id="likesSection" style="display:none;">
-            <div class="section-label">Likes ❤️</div>
-            <div class="dating-strip" id="likesStrip"></div>
+        <!-- Aktiver Lock -->
+        <div id="activeLockSection" style="display:none;">
+            <div class="section-label">Aktiver Lock 🔒</div>
+            <div class="active-game-list" id="activeLockList"></div>
        </div>

-        <!-- Matches -->
-        <div id="matchesSection" style="display:none;">
-            <div class="section-label">Matches 💕</div>
-            <div class="dating-strip" id="matchesStrip"></div>
+        <!-- Einladungen -->
+        <div id="invitesSection" style="display:none;">
+            <div class="section-label">Einladungen 📨</div>
+            <div class="invite-list" id="invitesList"></div>
+        </div>
+
+        <!-- Freundschaftsanfragen -->
+        <div id="friendReqSection" style="display:none;">
+            <div class="section-label">Freundschaftsanfragen 🤝</div>
+            <div class="friend-req-strip" id="friendReqStrip"></div>
+        </div>
+
+        <!-- Aktivitäts-Grid -->
+        <div id="socialGridBlock" style="display:none;">
+            <div class="section-label">Aktivität</div>
+            <div class="activity-grid">
+                <div class="activity-col" id="visitorsCol" style="display:none;">
+                    <div class="activity-col-header">
+                        <span class="activity-col-title">👀 Besucher</span>
+                        <a class="activity-col-link" href="/dating/besucher.html">Alle →</a>
+                    </div>
+                    <div class="activity-row" id="visitorsRow"></div>
+                </div>
+                <div class="activity-col" id="likesCol" style="display:none;">
+                    <div class="activity-col-header">
+                        <span class="activity-col-title">❤️ Likes</span>
+                        <a class="activity-col-link" href="/dating/likes.html">Alle →</a>
+                    </div>
+                    <div class="activity-row" id="likesRow"></div>
+                </div>
+                <div class="activity-col" id="matchesCol" style="display:none;">
+                    <div class="activity-col-header">
+                        <span class="activity-col-title">💕 Matches</span>
+                        <a class="activity-col-link" href="/dating/matches.html">Alle →</a>
+                    </div>
+                    <div class="activity-row" id="matchesRow"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Neue Mitglieder -->
+        <div id="newMembersSection" style="display:none;">
+            <div class="section-label">Neue Mitglieder ✨</div>
+            <div class="new-members-strip" id="newMembersStrip"></div>
        </div>

        <!-- Meine angemeldeten Events -->
@@ -167,9 +346,46 @@
            <div class="section-label">Nächste Veranstaltungen 📍</div>
            <div class="loc-event-list" id="locEventsList"></div>
        </div>
+
+        <!-- Feed Compose + Vorschau -->
+        <div class="section-label">Feed 📰</div>
+        <div class="post-compose" id="homeCompose">
+            <div class="compose-type">
+                <label><input type="radio" name="homeBeitragTyp" value="TEXT" checked onchange="homeToggleUmfrage()"> Text</label>
+                <label><input type="radio" name="homeBeitragTyp" value="UMFRAGE" onchange="homeToggleUmfrage()"> Umfrage</label>
+            </div>
+            <textarea id="homeComposeText" placeholder="Was möchtest du teilen?" rows="3"></textarea>
+            <div class="compose-thumbs" id="homeComposeThumbs"></div>
+            <div class="umfrage-options" id="homeUmfrageOptions" style="display:none;">
+                <div id="homeOptionList"></div>
+                <button onclick="homeAddOption()" style="width:auto;margin:0;padding:0.3rem 0.75rem;font-size:0.8rem;margin-top:0.4rem;">+ Option</button>
+            </div>
+            <div class="compose-footer">
+                <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
+                    <label class="multi-toggle" id="homeMultiChoiceRow" style="display:none;">
+                        <input type="checkbox" id="homeMultiChoice"> Multi-Choice
+                    </label>
+                    <label class="privacy-toggle">
+                        <input type="checkbox" id="homeIsPublic"> Öffentlich
+                    </label>
+                </div>
+                <div style="display:flex;gap:0.5rem;align-items:center;">
+                    <button type="button" class="compose-action-btn" onclick="toggleEmojiPicker(this,'homeComposeText')" title="Emoji einfügen">😊</button>
+                    <label class="compose-action-btn" title="Fotos hinzufügen">📷
+                        <input type="file" id="homeComposeBildFile" accept="image/*" multiple style="display:none;" onchange="homeSelectBilder(this)">
+                    </label>
+                    <button onclick="homeSubmitPost()" style="width:auto;margin:0;">Veröffentlichen</button>
+                </div>
+            </div>
+        </div>
+        <div id="feedSection" style="display:none;">
+            <div id="feedList"></div>
+            <a href="/community/feed.html"><button style="width:100%;margin-top:0.1rem;">Weiter zum Feed →</button></a>
+        </div>
    </div>
 </div>

+<script src="/js/shared.js"></script>
 <script src="/js/icons.js"></script>
 <script src="/js/sidebar.js"></script>
 <script>
@@ -181,12 +397,18 @@
        .then(user => {
            if (user) {
                document.getElementById('greeting').textContent = 'Willkommen zurück, ' + user.name + '!';
+                loadActiveGames(user.userId);
+                loadActiveLock();
+                loadInvites();
+                loadFriendRequests();
                loadVisitors();
                loadMyEvents();
                loadLocEvents();
+                loadFeed();
                if (user.datingAktiv) {
                    loadWhoLikesMe();
                    loadMatches();
+                    loadNewDatingMembers();
                }
            }
        })
@@ -200,6 +422,176 @@
        return 'vor ' + Math.floor(diff / 86400) + ' Tag' + (Math.floor(diff / 86400) === 1 ? '' : 'en');
    }

+    // ── Aktive Spiele ──────────────────────────────────────────────────────────
+
+    async function loadActiveGames(userId) {
+        try {
+            const items = [];
+            const [vRes, bRes] = await Promise.all([
+                fetch('/vanilla?userId=' + userId),
+                fetch('/bdsm?userId=' + userId)
+            ]);
+            if (vRes.ok) {
+                const v = await vRes.json();
+                items.push({
+                    icon: '🎭',
+                    title: 'Vanilla-Spiel',
+                    sub: 'Level ' + v.level + ' · gestartet ' + relativeTime(v.startZeit),
+                    href: '/games/vanilla/vanillaingame.html?sessionId=' + v.sessionId
+                });
+            }
+            if (bRes.ok) {
+                const b = await bRes.json();
+                items.push({
+                    icon: '⛓',
+                    title: 'BDSM-Spiel',
+                    sub: 'Level ' + b.level + ' · gestartet ' + relativeTime(b.startZeit),
+                    href: '/games/bdsm/bdsmingame.html?sessionId=' + b.sessionId
+                });
+            }
+            if (!items.length) return;
+            const list = document.getElementById('activeGamesList');
+            list.innerHTML = items.map(i => `
+                <a class="active-game-card" href="${esc(i.href)}">
+                    <div class="active-game-icon">${i.icon}</div>
+                    <div class="active-game-body">
+                        <div class="active-game-title">${esc(i.title)}</div>
+                        <div class="active-game-sub">${esc(i.sub)}</div>
+                    </div>
+                    <span class="active-game-action">Weiterspielen →</span>
+                </a>`).join('');
+            document.getElementById('activeGamesSection').style.display = '';
+        } catch (_) {}
+    }
+
+    // ── Aktiver Lock ───────────────────────────────────────────────────────────
+
+    async function loadActiveLock() {
+        try {
+            const [cardRes, timeRes] = await Promise.all([
+                fetch('/keyholder/mylock'),
+                fetch('/keyholder/timelock/mylock')
+            ]);
+            const items = [];
+            if (cardRes.status === 200) {
+                const d = await cardRes.json();
+                items.push({ lockId: d.lockId, page: 'activelock' });
+            }
+            if (timeRes.status === 200) {
+                const d = await timeRes.json();
+                items.push({ lockId: d.lockId, page: 'activetimelock' });
+            }
+            if (!items.length) return;
+            const list = document.getElementById('activeLockList');
+            list.innerHTML = items.map(i => `
+                <a class="active-game-card" href="/games/chastity/${i.page}.html?lockId=${esc(i.lockId)}">
+                    <div class="active-game-icon">🔒</div>
+                    <div class="active-game-body">
+                        <div class="active-game-title">Keuschheitslock aktiv</div>
+                        <div class="active-game-sub">${i.page === 'activetimelock' ? 'TimeLock' : 'CardLock'} · Tippen für Details</div>
+                    </div>
+                    <span class="active-game-action">Zum Lock →</span>
+                </a>`).join('');
+            document.getElementById('activeLockSection').style.display = '';
+        } catch (_) {}
+    }
+
+    // ── Einladungen ────────────────────────────────────────────────────────────
+
+    async function loadInvites() {
+        try {
+            const [vRes, bRes, cRes] = await Promise.all([
+                fetch('/vanilla/einladung/pending'),
+                fetch('/bdsm/einladung/pending'),
+                fetch('/lockee/invitations/mine')
+            ]);
+            const items = [];
+
+            if (vRes.ok) {
+                const list = await vRes.json();
+                list.forEach(e => items.push({
+                    avatar: e.inviterAvatar,
+                    from: e.inviterName || 'Jemand',
+                    type: 'Vanilla-Spieleinladung',
+                    href: '/games/common/einladungen.html'
+                }));
+            }
+            if (bRes.ok) {
+                const list = await bRes.json();
+                list.forEach(e => items.push({
+                    avatar: e.inviterAvatar,
+                    from: e.inviterName || 'Jemand',
+                    type: 'BDSM-Spieleinladung',
+                    href: '/games/common/einladungen.html'
+                }));
+            }
+            if (cRes.ok) {
+                const list = await cRes.json();
+                list.forEach(e => items.push({
+                    avatar: e.keyholderProfilePic,
+                    from: e.keyholderName || 'Jemand',
+                    type: 'Keuschheitslock-Einladung: ' + esc(e.lockName),
+                    href: '/games/chastity/joinlock.html?token=' + esc(e.token)
+                }));
+            }
+
+            if (!items.length) return;
+            const container = document.getElementById('invitesList');
+            container.innerHTML = items.map(i => `
+                <a class="invite-card" href="${i.href}">
+                    <div class="invite-avatar">
+                        ${i.avatar
+                            ? `<img src="data:image/png;base64,${i.avatar}" alt="">`
+                            : '◉'}
+                    </div>
+                    <div class="invite-body">
+                        <div class="invite-from">${esc(i.from)}</div>
+                        <div class="invite-type">${i.type}</div>
+                    </div>
+                    <span class="invite-action">Ansehen →</span>
+                </a>`).join('');
+            document.getElementById('invitesSection').style.display = '';
+        } catch (_) {}
+    }
+
+    // ── Freundschaftsanfragen ──────────────────────────────────────────────────
+
+    async function loadFriendRequests() {
+        try {
+            const res = await fetch('/social/friends/pending');
+            if (!res.ok) return;
+            const requests = await res.json();
+            if (!requests.length) return;
+
+            const strip = document.getElementById('friendReqStrip');
+            strip.innerHTML = requests.map(r => {
+                const u = r.userProfile;
+                return `
+                    <a class="friend-req-card" href="/community/freunde.html">
+                        <div class="friend-req-avatar">
+                            ${u.profilePicture
+                                ? `<img src="data:image/png;base64,${u.profilePicture}" alt="${esc(u.name)}">`
+                                : '◉'}
+                        </div>
+                        <span class="visitor-name">${esc(u.name)}</span>
+                        <span class="friend-req-badge">+ Anfrage</span>
+                    </a>`;
+            }).join('');
+            document.getElementById('friendReqSection').style.display = '';
+        } catch (_) {}
+    }
+
+    // ── Aktivitäts-Grid ───────────────────────────────────────────────────────
+
+    function socAvatarHtml(pic, blurred = false) {
+        if (!pic) return '◉';
+        return `<img src="data:image/png;base64,${pic}" alt=""${blurred ? ' style="filter:blur(5px);transform:scale(1.1)"' : ''}>`;
+    }
+
+    function showSocialGrid() {
+        document.getElementById('socialGridBlock').style.display = '';
+    }
+
    async function loadWhoLikesMe() {
        try {
            const res = await fetch('/dating/who-likes-me');
@@ -207,31 +599,24 @@
            const data = await res.json();
            if (data.total === 0) return;

-            const strip = document.getElementById('likesStrip');
-            strip.innerHTML = data.likers.map(l => {
-                const pic = l.profilePicture
-                    ? `<img src="data:image/png;base64,${l.profilePicture}" alt="">`
-                    : '◉';
-
+            document.getElementById('likesRow').innerHTML = data.likers.slice(0, 4).map(l => {
                if (data.premium && l.userId) {
-                    return `
-                        <a class="dating-card" href="/community/benutzer.html?userId=${l.userId}">
-                            <div class="dating-avatar">${pic}</div>
-                            <span class="dating-name">${esc(l.name)}</span>
-                        </a>`;
-                } else {
-                    return `
-                        <div class="dating-card-locked">
-                            <div class="dating-avatar-blurred">
-                                ${pic}
-                                <span class="lock-icon">🔒</span>
-                            </div>
-                            <span class="premium-hint">Premium</span>
-                        </div>`;
+                    return `<a class="soc-card" href="/community/benutzer.html?userId=${l.userId}">
+                        <div class="soc-avatar">${socAvatarHtml(l.profilePicture)}</div>
+                        <span class="soc-name">${esc(l.name)}</span>
+                    </a>`;
                }
+                return `<div class="soc-card">
+                    <div class="soc-avatar">
+                        ${socAvatarHtml(l.profilePicture, true)}
+                        <span class="soc-lock">🔒</span>
+                    </div>
+                    <span class="soc-sub-accent">Premium</span>
+                </div>`;
            }).join('');

-            document.getElementById('likesSection').style.display = '';
+            document.getElementById('likesCol').style.display = '';
+            showSocialGrid();
        } catch (_) {}
    }

@@ -242,27 +627,237 @@
            const matches = await res.json();
            if (!matches.length) return;

-            const strip = document.getElementById('matchesStrip');
-            strip.innerHTML = matches.map(m => `
-                <a class="dating-card" href="/community/benutzer.html?userId=${m.userId}">
-                    <div class="dating-avatar">
-                        ${m.profilePicture
-                            ? `<img src="data:image/png;base64,${m.profilePicture}" alt="${esc(m.name)}">`
-                            : '◉'}
-                    </div>
-                    <span class="dating-name">${esc(m.name)}</span>
-                    <span class="match-badge">♥ Match</span>
-                </a>
-            `).join('');
-            document.getElementById('matchesSection').style.display = '';
+            document.getElementById('matchesRow').innerHTML = matches.slice(0, 4).map(m => `
+                <a class="soc-card" href="/community/benutzer.html?userId=${m.userId}">
+                    <div class="soc-avatar">${socAvatarHtml(m.profilePicture)}</div>
+                    <span class="soc-name">${esc(m.name)}</span>
+                    <span class="soc-sub-accent">♥</span>
+                </a>`).join('');
+
+            document.getElementById('matchesCol').style.display = '';
+            showSocialGrid();
        } catch (_) {}
    }

-    function esc(s) {
-        if (!s) return '';
-        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    // ── Neue Mitglieder ───────────────────────────────────────────────────────
+
+    async function loadNewDatingMembers() {
+        try {
+            const res = await fetch('/user/new-members');
+            if (!res.ok) return;
+            const members = await res.json();
+            if (!members.length) return;
+
+            const strip = document.getElementById('newMembersStrip');
+            strip.innerHTML = members.map(p => {
+                const img = p.profilePicture
+                    ? `<img src="data:image/png;base64,${p.profilePicture}" alt="${esc(p.name)}" loading="lazy">`
+                    : `<span>👤</span>`;
+                const chips = [
+                    p.alter       ? `<span class="nm-card-chip">${p.alter} J.</span>` : '',
+                    p.geschlecht  ? `<span class="nm-card-chip">${esc(p.geschlecht)}</span>` : '',
+                    p.neigung     ? `<span class="nm-card-chip">${esc(p.neigung)}</span>` : '',
+                    p.datingStadt ? `<span class="nm-card-chip">${esc(p.datingStadt)}</span>` : '',
+                ].filter(Boolean).join('');
+                const desc = p.beschreibung
+                    ? `<div class="nm-card-desc">${esc(p.beschreibung)}</div>` : '';
+                return `<a class="nm-card" href="/community/benutzer.html?userId=${p.userId}">
+                    <div class="nm-card-img">${img}</div>
+                    <div class="nm-card-body">
+                        <div class="nm-card-name">${esc(p.name)}</div>
+                        <div class="nm-card-meta">${chips}</div>
+                        ${desc}
+                    </div>
+                </a>`;
+            }).join('');
+            document.getElementById('newMembersSection').style.display = '';
+        } catch (_) {}
    }

+    // ── Feed Compose ──────────────────────────────────────────────────────────
+
+    let homeComposeBilder = [];
+
+    function homeToggleUmfrage() {
+        const isUmfrage = document.querySelector('input[name="homeBeitragTyp"]:checked').value === 'UMFRAGE';
+        document.getElementById('homeUmfrageOptions').style.display = isUmfrage ? '' : 'none';
+        document.getElementById('homeMultiChoiceRow').style.display = isUmfrage ? '' : 'none';
+        if (isUmfrage && document.getElementById('homeOptionList').children.length === 0) {
+            homeAddOption(); homeAddOption();
+        }
+    }
+
+    function homeAddOption() {
+        const list = document.getElementById('homeOptionList');
+        const idx = list.children.length;
+        const row = document.createElement('div');
+        row.className = 'umfrage-option-row';
+        row.innerHTML = `<input type="text" placeholder="Option ${idx + 1}" maxlength="100">
+            <button onclick="this.parentElement.remove()">✕</button>`;
+        list.appendChild(row);
+    }
+
+    function homeSelectBilder(input) {
+        [...input.files].forEach(f => { if (f.type.startsWith('image/')) homeProcessImage(f); });
+        input.value = '';
+    }
+
+    function homeProcessImage(file) {
+        const reader = new FileReader();
+        reader.onload = e => {
+            const img = new Image();
+            img.onload = () => {
+                const maxSize = 1024;
+                const canvas = document.createElement('canvas');
+                const scale = Math.min(maxSize / img.width, maxSize / img.height, 1);
+                canvas.width  = Math.round(img.width  * scale);
+                canvas.height = Math.round(img.height * scale);
+                canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+                homeComposeBilder.push(canvas.toDataURL('image/jpeg', 0.85).split(',')[1]);
+                homeRenderThumbs();
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    function homeRenderThumbs() {
+        const container = document.getElementById('homeComposeThumbs');
+        container.innerHTML = '';
+        homeComposeBilder.forEach((b, i) => {
+            const div = document.createElement('div');
+            div.className = 'compose-thumb';
+            div.innerHTML = `<img src="data:image/jpeg;base64,${b}" alt="">
+                <button class="compose-thumb-remove" onclick="homeRemoveThumb(${i})">✕</button>`;
+            container.appendChild(div);
+        });
+        container.style.display = homeComposeBilder.length > 0 ? 'flex' : 'none';
+    }
+
+    function homeRemoveThumb(idx) {
+        homeComposeBilder.splice(idx, 1);
+        homeRenderThumbs();
+    }
+
+    async function homeSubmitPost() {
+        const text = document.getElementById('homeComposeText').value.trim();
+        if (!text && homeComposeBilder.length === 0) return;
+        const beitragTyp = document.querySelector('input[name="homeBeitragTyp"]:checked').value;
+        const multiChoice = document.getElementById('homeMultiChoice').checked;
+        const isPublic = document.getElementById('homeIsPublic').checked;
+
+        let optionen = [];
+        if (beitragTyp === 'UMFRAGE') {
+            optionen = Array.from(document.getElementById('homeOptionList').querySelectorAll('input'))
+                .map(i => i.value.trim()).filter(v => v);
+            if (optionen.length < 2) { alert('Mindestens 2 Optionen erforderlich.'); return; }
+        }
+
+        const res = await fetch('/feed/posts', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ beitragTyp, text, multiChoice, optionen, bilder: [...homeComposeBilder], isPublic })
+        });
+        if (!res.ok) return;
+        const post = await res.json();
+
+        // Reset
+        document.getElementById('homeComposeText').value = '';
+        homeComposeBilder = [];
+        homeRenderThumbs();
+        document.querySelector('input[name="homeBeitragTyp"][value="TEXT"]').checked = true;
+        homeToggleUmfrage();
+        document.getElementById('homeMultiChoice').checked = false;
+        document.getElementById('homeIsPublic').checked = false;
+        document.getElementById('homeOptionList').innerHTML = '';
+
+        // Prepend in Vorschau
+        const feedList = document.getElementById('feedList');
+        feedList.insertAdjacentHTML('afterbegin', renderHomePostCard(post));
+        document.getElementById('feedSection').style.display = '';
+    }
+
+    // Drag & Drop
+    const homeCompose = document.getElementById('homeCompose');
+    if (homeCompose) {
+        homeCompose.addEventListener('dragover', e => {
+            e.preventDefault();
+            if ([...e.dataTransfer.items].some(i => i.type.startsWith('image/')))
+                homeCompose.classList.add('drag-over');
+        });
+        homeCompose.addEventListener('dragleave', e => {
+            if (!homeCompose.contains(e.relatedTarget)) homeCompose.classList.remove('drag-over');
+        });
+        homeCompose.addEventListener('drop', e => {
+            e.preventDefault();
+            homeCompose.classList.remove('drag-over');
+            [...e.dataTransfer.files].filter(f => f.type.startsWith('image/')).forEach(homeProcessImage);
+        });
+    }
+
+    // ── Feed-Vorschau ──────────────────────────────────────────────────────────
+
+    const homePostCache = {};
+
+    function homeOpenPost(postId) {
+        const p = homePostCache[postId];
+        if (p) sessionStorage.setItem('feedOpenPost', JSON.stringify(p));
+        window.location.href = '/community/feed.html';
+    }
+
+    function renderHomePostCard(p) {
+        homePostCache[p.postId] = p;
+        const avatarHtml = p.authorPicture
+            ? `<img src="data:image/png;base64,${p.authorPicture}" alt="">`
+            : '◉';
+        const privacyLabel = !p.isPublic ? ' <span style="font-size:0.7rem;color:var(--color-muted);">🔒</span>' : '';
+        const groupBadge = p.postType === 'GROUP' && p.gruppeId
+            ? `<span class="gruppe-badge">👥 ${esc(p.gruppeName)}</span>`
+            : '';
+        const bildHtml = bilderCarousel(p.bilder);
+        let umfrageHtml = '';
+        if (p.beitragTyp === 'UMFRAGE' && p.optionen && p.optionen.length > 0) {
+            const totalVotes = p.optionen.reduce((s, o) => s + o.stimmenCount, 0);
+            umfrageHtml = '<div style="margin-top:0.5rem;">' + p.optionen.map(o => {
+                const pct = totalVotes > 0 ? Math.round(o.stimmenCount / totalVotes * 100) : 0;
+                const voted = p.myVoteOptionIds && p.myVoteOptionIds.includes(o.optionId);
+                return `<div class="umfrage-option-bar${voted ? ' voted' : ''}">
+                    <div class="umfrage-bar-fill" style="width:${pct}%"></div>
+                    <div class="umfrage-bar-content"><span>${esc(o.text)}</span><span>${pct}%</span></div>
+                </div>`;
+            }).join('') + `<div class="umfrage-total">${totalVotes} Stimme${totalVotes !== 1 ? 'n' : ''}</div></div>`;
+        }
+        return `<div class="post-card" onclick="homeOpenPost('${p.postId}')" style="cursor:pointer">
+            <div class="post-header">
+                <div class="post-avatar">${avatarHtml}</div>
+                <div>
+                    <div class="post-author">${esc(p.authorName)}${privacyLabel}</div>
+                    <div class="post-meta">${fmtDate(p.createdAt)}${groupBadge}</div>
+                </div>
+            </div>
+            <div class="post-text">${esc(p.text || '')}</div>
+            ${bildHtml}
+            ${umfrageHtml}
+            <div class="post-actions">
+                <button class="post-action-btn${p.likedByMe ? ' active' : ''}">♥ <span>${p.likeCount}</span></button>
+                <button class="post-action-btn">💬 <span>${p.kommentarCount}</span></button>
+            </div>
+        </div>`;
+    }
+
+    async function loadFeed() {
+        try {
+            const res = await fetch('/feed/mine?size=3&page=0');
+            if (!res.ok) return;
+            const data = await res.json();
+            const posts = data.posts;
+            if (!posts || !posts.length) return;
+            document.getElementById('feedList').innerHTML = posts.map(renderHomePostCard).join('');
+            document.getElementById('feedSection').style.display = '';
+        } catch (_) {}
+    }
+
+    // ── Events ────────────────────────────────────────────────────────────────
+
    function renderEventCards(events, listId, sectionId) {
        if (!events.length) return;
        const list = document.getElementById(listId);
@@ -304,6 +899,8 @@
        } catch (_) {}
    }

+    // ── Profilbesucher ────────────────────────────────────────────────────────
+
    async function loadVisitors() {
        try {
            const res = await fetch('/social/profile-visits/my-visitors');
@@ -311,19 +908,15 @@
            const visitors = await res.json();
            if (!visitors.length) return;

-            const strip = document.getElementById('visitorsStrip');
-            strip.innerHTML = visitors.map(v => `
-                <a class="visitor-card" href="/community/benutzer.html?userId=${v.userId}">
-                    <div class="visitor-avatar">
-                        ${v.profilePicture
-                            ? `<img src="data:image/png;base64,${v.profilePicture}" alt="${v.name}">`
-                            : '◉'}
-                    </div>
-                    <span class="visitor-name">${v.name}</span>
-                    <span class="visitor-time">${relativeTime(v.visitedAt)}</span>
-                </a>
-            `).join('');
-            document.getElementById('visitorsSection').style.display = '';
+            document.getElementById('visitorsRow').innerHTML = visitors.slice(0, 4).map(v => `
+                <a class="soc-card" href="/community/benutzer.html?userId=${v.userId}">
+                    <div class="soc-avatar">${socAvatarHtml(v.profilePicture)}</div>
+                    <span class="soc-name">${esc(v.name)}</span>
+                    <span class="soc-sub">${relativeTime(v.visitedAt)}</span>
+                </a>`).join('');
+
+            document.getElementById('visitorsCol').style.display = '';
+            showSocialGrid();
        } catch (_) {}
    }
 </script>