/**
 * Community-Seite: Seitenkopf im Stil von Preise/Funktionen, edlere Filter & Karten.
 * Aufbau bleibt: Suche + Kategorien + Sortierung, darunter das Server-Raster.
 */
html body .cs-hero {
    max-width: 780px;
    margin: calc(var(--kynx-navbar-offset, 72px) + 28px) auto 1.6rem;
    padding: 0 1rem;
    text-align: center;
}
html body .cs-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(130, 150, 255, 0.3);
    background: rgba(88, 101, 242, 0.12);
    color: #c3ccff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
html body .cs-hero__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff 0%, #c9d1ff 55%, #8b98ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html body .cs-hero__lead {
    margin: 0 auto;
    max-width: 620px;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    color: rgba(235, 237, 245, 0.72);
}
/* Filterbereich direkt unter dem Kopf (der Kopf übernimmt den Navbar-Abstand) */
html body .cs-hero + .filter-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html body .filter-container {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(18, 20, 34, 0.62) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
html body .search-box {
    border-radius: 14px !important;
}
html body .filter-tab,
html body .sort-btn {
    border-radius: 999px !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
html body .filter-tab:hover,
html body .sort-btn:hover { transform: translateY(-1px); }
html body .filter-tab.active,
html body .sort-btn.active {
    background: linear-gradient(135deg, #5865f2, #2f6bff) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(64, 96, 255, 0.35);
}

/* Server-Karten */
html body .servers-grid .server-panel {
    border-radius: 20px !important;
    transition: transform 0.25s var(--kx-ease, ease), box-shadow 0.25s ease;
}
html body .servers-grid .server-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(130, 150, 255, 0.3);
}
html body .servers-grid .server-panel-name {
    letter-spacing: -0.01em;
}
html body .servers-grid .server-tag {
    border-radius: 999px !important;
}

@media (max-width: 640px) {
    html body .cs-hero { margin-top: calc(var(--kynx-navbar-offset, 72px) + 16px); }
}
/* ---------- Lesbarkeit & Handy ---------- */
html body .cs-hero__title,
html body .cs-hero__lead { text-wrap: balance; }

/* „Beitreten“ gut lesbar und gut antippbar */
html body .community-server-card .server-panel-invite {
    padding: 6px 12px;
    min-height: 30px;
    border-radius: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    /* Sortierung: Symbol + Text statt nur Symbol */
    html body .sort-btn {
        gap: 0.4rem;
        padding: 0 14px;
        font-size: 0.85rem;
    }
    html body .sort-btn span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
}

@media (max-width: 560px) {
    /* Karten nutzen die volle Breite statt 240 px */
    html body .servers-grid {
        --community-tile: min(calc(100vw - 40px), 360px);
        --community-grid-gap: 24px;
    }
    html body .community-server-card .server-panel-invite {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
        min-height: 34px;
        font-size: 0.82rem;
    }
}

/* Filterbereich mit fester Breite – sonst hängt sie von Anzahl/Sprache der Kategorie-Chips ab */
html body .filter-section {
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}