/* ============================================================
   MeerHeimatLiebe – Forum Ränge
   Design passend zur neuen Forum-Seite
   ============================================================ */

body.scene-forum .forum-ranks {
    width: min(920px, calc(100% - 2rem));
    margin: 0 auto;

    padding: 1.25rem;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 69, 92, .80),
            rgba(2, 29, 44, .90)
        );

    border: 1px solid rgba(91, 216, 237, .30);

    box-shadow:
        0 22px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.045);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   TITEL
   ============================================================ */

body.scene-forum .forum-ranks h1 {
    margin: 0 0 .45rem;

    color: #f5fcff;

    font-size: clamp(1.8rem, 3vw, 2.7rem);

    line-height: 1.1;
    letter-spacing: -.025em;
}

body.scene-forum .forum-ranks > p {
    color: rgba(215,239,244,.76);

    line-height: 1.55;

    margin-bottom: 1.25rem;
}


/* ============================================================
   RANG-LISTE
   ============================================================ */

body.scene-forum .forum-ranks > .forum-rank,
body.scene-forum .forum-ranks .forum-rank {
    display: flex;
    align-items: center;

    gap: 1rem;

    width: 100%;

    min-height: 66px;

    margin-bottom: .65rem;

    padding: .85rem 1rem;

    border-radius: 18px;

    color: #eefcff;

    background:
        linear-gradient(
            145deg,
            rgba(7, 74, 99, .72),
            rgba(3, 37, 53, .88)
        );

    border: 1px solid rgba(88,210,232,.27);

    box-shadow:
        0 8px 24px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.035);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

body.scene-forum .forum-ranks .forum-rank:hover {
    transform: translateY(-2px);

    border-color: rgba(91,221,240,.56);

    background:
        linear-gradient(
            145deg,
            rgba(10,88,117,.82),
            rgba(4,46,64,.92)
        );

    box-shadow:
        0 14px 32px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* ============================================================
   RANG-ICON
   ============================================================ */

body.scene-forum .forum-ranks .forum-rank .icon,
body.scene-forum .forum-ranks .forum-rank > :first-child {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #72e5f5;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(72,209,235,.28),
            rgba(5,55,75,.64)
        );

    border: 1px solid rgba(91,220,239,.42);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 7px 18px rgba(0,0,0,.18);
}


/* ============================================================
   RANG-TEXT
   ============================================================ */

body.scene-forum .forum-ranks .forum-rank strong {
    color: #f3fcff;
    font-weight: 800;
}

body.scene-forum .forum-ranks .forum-rank small {
    color: rgba(205,234,240,.70);
}


/* ============================================================
   BESONDERE RÄNGE
   ============================================================ */

body.scene-forum .forum-ranks .forum-rank--captain {
    border-color: rgba(241,195,110,.52);

    background:
        linear-gradient(
            145deg,
            rgba(93,69,33,.46),
            rgba(50,39,24,.74)
        );
}

body.scene-forum .forum-ranks .forum-rank--captain strong {
    color: #ffe2a0;
}


/* ============================================================
   ABSTÄNDE
   ============================================================ */

body.scene-forum .forum-ranks .forum-rank + .forum-rank {
    margin-top: .65rem;
}


/* ============================================================
   BUTTONS / LINKS
   ============================================================ */

body.scene-forum .forum-ranks a.btn,
body.scene-forum .forum-ranks .btn {
    border-radius: 999px;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    body.scene-forum .forum-ranks {
        width: min(980px, calc(100% - 3rem));

        padding: 1.4rem;
    }

    body.scene-forum .forum-ranks .forum-rank {
        min-height: 72px;

        padding:
            .9rem
            1.1rem;
    }

}


/* ============================================================
   TABLET
   ============================================================ */




/* ============================================================
   MOBILE
   ============================================================ */