.PreviewView {
    text-align: center;
    margin-bottom: 32px;
}

.PreviewView h1 {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: 700;
}

.PreviewView .avatarContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.PreviewView .avatar {
    border-radius: 8px; /* Eckig */
    width: 80px;
    height: 80px;
    border: 3px solid var(--borders);
    object-fit: cover;
}

.PreviewView .defaultAvatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: var(--lightgrey);
    background-image: url('../images/chat-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.PreviewView .identifier {
    color: var(--ztfr-purple);
    font-family: monospace;
    font-size: 13px;
    margin: 8px 0;
    letter-spacing: 0.5px;
}

.PreviewView .memberCount p:not(.placeholder) {
    padding: 6px 12px 6px 28px;
    border-radius: 4px;
    color: var(--foreground);
    background-image: url(../images/member-icon.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-color: var(--lightgrey);
    display: inline-block;
    font-size: 12px;
}

.PreviewView .topic {
    font-size: 14px;
    line-height: 1.6;
    color: var(--font);
    margin: 24px 0;
}

/* Dark Mode Placeholders */
.placeholder {
    border-radius: 4px;
    --flash-bg: #2f313d;
    --flash-fg: #383a59;
    background: linear-gradient(120deg, var(--flash-bg), var(--flash-bg) 10%, var(--flash-fg) calc(10% + 25px), var(--flash-bg) calc(10% + 50px));
    animation: flash 2s linear infinite;
    background-size: 200%;
}

@keyframes flash {
    0% { background-position-x: 0; }
    100% { background-position-x: -200%; }
}

.PreviewView h1, 
.PreviewView .identifier, 
.PreviewView .topic {
    word-wrap: break-word;   /* Bricht extrem lange Wörter/IDs um */
    overflow-wrap: break-word;
    max-width: 100%;
}

@media screen and (max-width: 480px) {
    .PreviewView .avatar, 
    .PreviewView .defaultAvatar {
        width: 64px;
        height: 64px;
    }
    
    .PreviewView h1 {
        font-size: 20px; /* Titel etwas dezenter mobil */
    }
}