statistik ändern

<div class="stats-container">
    <div class="stats-box">

        <!-- Threads -->
        <div class="stat-item">
            <div class="stat-icon">💬</div>
            <div class="stat-number">{#$wbbStatistics[threads]}</div>
            <div class="stat-label">{lang}wbb.thread.threads{/lang}</div>
        </div>

        <!-- Posts -->
        <div class="stat-item">
            <div class="stat-icon">🗨️</div>
            <div class="stat-number">{#$wbbStatistics[posts]}</div>
            <div class="stat-label">{lang}wbb.post.posts{/lang}</div>
        </div>

        <!-- Benutzer (wird nur angezeigt wenn stats vorhanden) -->
        <div class="stat-item">
            {if $userStats|isset}
                <div class="stat-icon">👥</div>
                <div class="stat-number">{#$userStats[users]}</div>
                <div class="stat-label">{lang}wcf.user.members{/lang}</div>
            {/if}
        </div>

        <!-- Letzter User -->
        <div class="stat-item">
            {if $userStats|isset}
                <div class="stat-icon">➕</div>
                <div class="stat-number">{$userStats[lastUser]->username}</div>
                <div class="stat-label">{lang}wcf.user.members.new{/lang}</div>
            {/if}
        </div>

    </div>
</div>

<style>
.stats-container {
    width: 100%;
    padding: 10px 0;
}

.stats-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: #1b1f23;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #2c3238;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 5px;
    border-right: 1px solid #2c3238;
    min-height: 100px;
    justify-content: center;
}

.stat-item:last-child {
    border-right: none;
}

.stat-icon {
    font-size: 32px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.stat-number {
    font-size: 26px;
    font-weight: 600;
    color: #d8d8d8;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #aaa;
}

/* Responsive */
@media (max-width: 700px) {
    .stats-box {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 450px) {
    .stats-box {
        grid-template-columns: 1fr;
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid #2c3238;
    }
    .stat-item:last-child {
        border-bottom: none;
    }
}
</style>