/* =========================================================
   MEMBERLIST – GRUNDLAYOUT
   ========================================================= */

#memberlist-page {
    --ml-bg: #160d08;
    --ml-panel: #1c100a;
    --ml-panel-soft: #24140c;
    --ml-panel-light: #302014;
    --ml-border: #50321d;
    --ml-border-soft: #3f2818;
    --ml-accent: #98602d;
    --ml-accent-light: #c58b45;
    --ml-gold: #d6a363;
    --ml-gold-light: #ead0a1;
    --ml-text: #d9c4a5;
    --ml-muted: #9d856b;

    width: 100%;
    margin: 20px auto;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    color: var(--ml-text);
    background: var(--ml-bg);

    border-top: 1px solid var(--ml-border);
    border-right: 1px solid var(--ml-border-soft);
    border-bottom: 1px solid var(--ml-border);
    border-left: 4px solid #8c572a;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30),
        inset 0 0 35px rgba(0, 0, 0, 0.18);

    font-family: Arial, sans-serif;
}

#memberlist-page,
#memberlist-page *,
#memberlist-page *::before,
#memberlist-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   HAUPTÜBERSCHRIFT
   ========================================================= */

.list_headback {
    position: relative;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 15px 22px;

    display: flex;
    align-items: center;

    color: var(--ml-gold);

    background:
        linear-gradient(
            90deg,
            rgba(58, 36, 22, 0.96),
            rgba(36, 20, 12, 0.96)
        );

    border-bottom: 1px solid #68401f;

    font-family: Cinzel, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.list_headback::after {
    content: "";
    height: 1px;
    margin-left: 18px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            rgba(197, 139, 69, 0.55),
            transparent
        );
}


/* =========================================================
   SEITENNAVIGATION
   ========================================================= */

.memberlist-pagination {
    width: 100%;
    padding: 11px 20px;

    color: var(--ml-text);
    background: rgba(28, 16, 10, 0.88);

    text-align: center;
}

.memberlist-pagination:empty {
    display: none;
}

.memberlist-pagination-top {
    border-bottom: 1px solid var(--ml-border);
}

.memberlist-pagination-bottom {
    border-top: 1px solid var(--ml-border);
}


/* =========================================================
   MITGLIEDER-GRID
   ========================================================= */

.list_wrap {
    width: 100%;
    padding: 20px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 10px,
            rgba(197, 139, 69, 0.012) 10px,
            rgba(197, 139, 69, 0.012) 11px
        ),
        #1a0f09;
}


/* =========================================================
   MITGLIEDERKARTE
   ========================================================= */

.list_user {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;

    color: var(--ml-text);

    background:
        linear-gradient(
            115deg,
            rgba(197, 139, 69, 0.035),
            transparent 48%
        ),
        rgba(28, 16, 10, 0.88);

    border-top: 1px solid rgba(197, 139, 69, 0.22);
    border-right: 1px solid rgba(197, 139, 69, 0.12);
    border-bottom: 1px solid rgba(197, 139, 69, 0.22);
    border-left: 3px solid #8f592b;

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.list_user::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;

    width: 17px;
    height: 17px;

    pointer-events: none;

    border-top: 1px solid rgba(197, 139, 69, 0.22);
    border-right: 1px solid rgba(197, 139, 69, 0.22);
}


/* =========================================================
   BENUTZERNAME
   ========================================================= */

.list_username {
    width: 100%;
    min-height: 48px;
    padding: 10px 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    color: var(--ml-gold-light);

    background:
        linear-gradient(
            90deg,
            rgba(58, 36, 22, 0.90),
            rgba(36, 20, 12, 0.84)
        );

    border-bottom: 1px solid #68401f;
}

.list_username-main {
    min-width: 0;

    font-family: Cinzel, Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 1px;
    text-transform: uppercase;

    overflow-wrap: anywhere;
}

.list_username-main a:link,
.list_username-main a:visited,
.list_username-main a:active {
    color: var(--ml-gold-light);
}

.list_username-main a:hover {
    color: #ffffff;
}


/* =========================================================
   VERKNÜPFTE ACCOUNTS
   ========================================================= */

.list_attached_accounts {
    min-width: 0;

    color: #a58a69;

    font-size: 12px;
    line-height: 150%;
    text-align: right;
}

.list_attached_accounts:empty {
    display: none;
}

.list_attached_accounts a:link,
.list_attached_accounts a:visited,
.list_attached_accounts a:active {
    color: #c59257;
}

.list_attached_accounts a:hover {
    color: #efd0a3;
}


/* =========================================================
   KARTENINHALT
   ========================================================= */

.list_userflex {
    width: 100%;
    padding: 14px;

    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 15px;
    align-items: stretch;
}


/* =========================================================
   LINKE SPALTE
   ========================================================= */

.list_userleft {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   AVATAR
   ========================================================= */

.list_userava {
    width: 100%;
    height: 205px;
    margin: 0 0 11px;
    overflow: hidden;

    background: #160d08;

    border: 1px solid #79502b;

    outline: 3px solid rgba(22, 13, 8, 0.85);
    outline-offset: -4px;
}

.list_userava img,
.list_user_avatar_image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: none !important;
    border: 0;
    border-radius: 0;

    filter:
        sepia(0.06)
        brightness(0.92)
        contrast(1.04);
}


/* =========================================================
   BEITRÄGE, THEMEN UND DATEN
   ========================================================= */

.list_userstats {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.list_userstat {
    min-width: 0;
    padding: 8px;

    color: #bba386;
    background: rgba(36, 20, 12, 0.72);

    border: 1px solid rgba(197, 139, 69, 0.14);

    text-align: center;
}

.list_userstat-wide {
    grid-column: 1 / -1;

    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;

    text-align: left;
}

.list_userstat-label {
    display: block;

    color: #9f805e;

    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.list_userstat-value {
    display: block;

    color: #d4b58e;

    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 150%;
}


/* =========================================================
   ALTER, BLUTSTATUS UND SPIELER
   ========================================================= */

.list_userfacts {
    width: 100%;
    margin-top: 9px;
}

.list_userfact {
    width: 100%;
    padding: 7px 8px;

    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;

    color: #9f876e;

    border-bottom: 1px solid rgba(197, 139, 69, 0.12);

    font-size: 12px;
    line-height: 150%;
}

.list_userfact:last-child {
    border-bottom: 0;
}

.list_userfact span {
    color: #9f805e;

    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.list_userfact strong {
    min-width: 0;

    color: #d2b28a;

    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: normal;
    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   CHARAKTERTEXT
   ========================================================= */

.list_usertext {
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;

    color: var(--ml-text);
    background: rgba(36, 20, 12, 0.58);

    border-top: 1px solid rgba(197, 139, 69, 0.16);
    border-right: 1px solid rgba(197, 139, 69, 0.09);
    border-bottom: 1px solid rgba(197, 139, 69, 0.16);
    border-left: 2px solid #70451f;
}

.list_usertext-headline {
    width: 100%;
    padding: 9px 12px;

    color: #c99559;
    background: rgba(58, 36, 22, 0.58);

    border-bottom: 1px solid rgba(197, 139, 69, 0.16);

    font-family: Cinzel, Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.list_usertext-content {
    width: 100%;
    height: 365px;
    padding: 13px 15px;

    overflow-y: auto;
    overflow-x: hidden;

    color: #cfb799;

    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 175%;
    text-align: justify;

    scrollbar-width: thin;
    scrollbar-color: #875326 #160d08;
}

.list_usertext-content h1 {
    display: block;
    margin: 0;
    padding: 0;

    color: inherit;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
}

.list_usertext-content p {
    margin: 0 0 12px;
}

.list_usertext-content p:last-child {
    margin-bottom: 0;
}

.list_usertext-content span {
    padding: 1px 3px;

    color: #dfc39d;
    background: rgba(58, 36, 22, 0.72);
}

.list_usertext-content a:link,
.list_usertext-content a:visited,
.list_usertext-content a:active {
    color: #d1a064;
}

.list_usertext-content a:hover {
    color: #f0d3a7;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.list_usertext-content::-webkit-scrollbar {
    width: 6px;
}

.list_usertext-content::-webkit-scrollbar-track {
    background: #160d08;
}

.list_usertext-content::-webkit-scrollbar-thumb {
    background: #875326;
}


/* =========================================================
   PAGINATION
   ========================================================= */

#memberlist-page .pagination {
    margin: 0;
}

#memberlist-page .pagination a,
#memberlist-page .pagination_current {
    display: inline-block;
    min-width: 30px;
    padding: 6px 9px;

    color: #c19a69;
    background: #24140c;

    border: 1px solid #50321d;

    font-size: 12px;
    line-height: 1.2;
}

#memberlist-page .pagination a:hover,
#memberlist-page .pagination_current {
    color: #160d08;
    background: #d1a267;
    border-color: #d1a267;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1100px) {

    .list_wrap {
        grid-template-columns: 1fr;
    }

    .list_userflex {
        grid-template-columns: 190px minmax(0, 1fr);
    }

}

@media screen and (max-width: 650px) {

    .list_wrap {
        padding: 14px;
    }

    .list_userflex {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 11px;
        padding: 11px;
    }

    .list_userava {
        height: 185px;
    }

    .list_usertext-content {
        height: 340px;
        text-align: left;
    }

    .list_username {
        display: block;
    }

    .list_attached_accounts {
        margin-top: 5px;
        text-align: left;
    }

}

@media screen and (max-width: 480px) {

    .list_headback {
        padding: 13px 15px;

        font-size: 15px;
        letter-spacing: 1.5px;
    }

    .list_userflex {
        display: block;
    }

    .list_userleft {
        margin-bottom: 12px;
    }

    .list_userava {
        width: 150px;
        height: 190px;
        margin-right: auto;
        margin-left: auto;
    }

    .list_userstats {
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
    }

    .list_userfacts {
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
    }

    .list_usertext-content {
        height: 260px;

        font-size: 12px;
        line-height: 170%;
    }

}