/* Container für alle Profile */
.newhope-memlist-container {
    display: flex;
    flex-wrap: wrap; /* Falls der Platz nicht reicht, umbrechen */
    justify-content: center; /* Zentriert die Elemente */
    gap: 10px; /* Abstand zwischen den Profilen */
}

/* Einzelnes Profil */
.newhope-memlist-profile {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
	background-color: var(--col6); 
    width: 270px;
    text-align: center;
    color: var(--highlight);
    border-radius: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px;
}

.newhope-memlist-profile.regi {
    background-color: rgba(230, 230, 230, 0.2);
	color: var(--highlight);
}

.newhope-memlist-profile.humani {
    background-color: rgba(231, 168, 97, 0.2);
		color: var(--highlight);
}

.newhope-memlist-profile.werei {
    background-color: rgba(121, 197, 101, 0.2);
		color: var(--highlight);
}

.newhope-memlist-profile.witchi {
    background-color: rgba(211, 106, 195, 0.2);
		color: var(--highlight);
}

.newhope-memlist-profile.vampirei {
    background-color: rgba(255, 80, 80, 0.2); 
		color: var(--highlight);
}

.newhope-memlist-profile.magei {
    background-color: rgba(74, 189, 255, 0.2); 
		color: var(--highlight);
}

.newhope-memlist-profile.dragoni {
    background-color: rgba(129, 152, 122, 0.2); 
		color: var(--highlight);
}
 
/* Avatar */
.newhope-memlist-avatar {
    width: 250px;
    height: 177px;
    overflow: hidden;
    border-radius: 15px;
    margin: 0 auto;
}

.newhope-memlist-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    margin-top: 0;
}

/* Charaktername */
.newhope-memlist-name {
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

/* Wesen | Geschlecht | Alter */
.newhope-memlist-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; 
    font-size: 12px;
    background:  var(--col3) ;
    color: var(--highlight);
    padding: 5px;
    text-align: center;
}

.newhope-memlist-info {
    flex: 1; 
    text-align: center;
	font-size: 45px;
	width: 50px;
	height: 50px;
}

.newhope-memlist-info svg {
	width: 50px;
	height: 50px;
	stroke-width: 2px;
}

.newhope-memlist-info i {
    font-size: 50px;
}

.newhope-memlist-info .bg-text {
    position: absolute;
    top: 260px;
    left: 80%;
    transform: translateX(-50%);
    font-size: 45px;
    font-weight: bold;
	transform: translate(-50%, -50%) rotate(-30deg); /* Dreht das "y/o" um 30° */
    opacity: 0.2;
    z-index: 4;
    text-transform: uppercase;
    white-space: nowrap;
}

.newhope-memlist-info .age-number {
    font-size: 45px;
    font-weight: bold;
    position: absolute;  
    top: 260px;  
    left: 80%;  
    transform: translate(-50%, -50%);
    z-index: 5;
}

.newhope-memlist-userinfo {
    position: relative;
	height: 60px;
    background: var(--col3);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.newhope-memlist-playedby {
    position: absolute;
    top: 4px;
    left: 20%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    opacity: 0.2;
    z-index: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.newhope-memlist-username {
    font-size: 18px;
    font-weight: bold;
    position: absolute;  
    top: 45%;  
    left: 30%;  
    transform: translate(-50%, -50%);
    z-index: 1;
}

.newhope-memlist-lastonline {
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    bottom: 5px;
    right: 10px;
}


/* Szenen | leer | Posts */
.newhope-memlist-stats {
    display: flex;
    justify-content: space-between; /* Szenen links, Posts rechts, Mitte bleibt leer */
    align-items: center;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    background:  var(--col3);
}

.newhope-memlist-scenes,
.newhope-memlist-posts {
    width: 40%;
    text-align: center;
}


.theadmem {
    background-color: var(--col6);
    background-image: url(https://burning-ashes.de/img/asfalt-light.png);
    color: var(--highlight);
    text-align: center;
    padding: 5px;
    border-bottom: 3px solid var(--highlight);
    text-shadow: 1px 2px 2px #000;
    font-family: var(---title);
    font-size: 24px;
    font-weight: bold;
}

.theadmem a:link {
    color: var(--col4); 
    transition:all ease 0.8s;
    text-decoration: none;
    text-shadow: 1px 2px 2px #000;
}

.theadmem a:visited {
    color: var(--highlight);
    text-decoration: none;
}

.theadmem a:hover, 
.theadmem a:active {
    color: var(--highlight);
}