.memberlist-container { display: flex;
    flex-direction: row;
	flex-wrap: wrap; }

.userlist-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tbl-main-tr2);
  margin: 20px 0;
  overflow: hidden;
  transition: all 0.3s ease;
  font-family: var(--fliesstext);
  color: var(--txtcol);
  width: 45%;
    margin: 10px;
}

/* Einfärbungen je nach Gruppe */
.userlist-box[class~="9"]  { background-color: rgba(var(--vampir-rgb), 0.4);  }
.userlist-box[class~="8"]  { background-color: rgba(var(--hexe-rgb), 0.4);  }
.userlist-box[class~="13"]  { background-color: rgba(var(--medium-rgb), 0.4);  }
.userlist-box[class~="14"]  { background-color: rgba(var(--beschenkt-rgb), 0.4);  }
.userlist-box[class~="11"]  { background-color: rgba(var(--daemon-rgb), 0.4);  }
.userlist-box[class~="10"]  { background-color: rgba(var(--werwesen-rgb), 0.4);  }
.userlist-box[class~="12"]  { background-color: rgba(var(--mensch-rgb), 0.4);  }
.userlist-box[class~="2"]  { background-color: rgba(var(--bewerber-rgb), 0.2);  }

/* Banner als BG */
.userlist-banner {
  position: relative;
  height: 80px;
  overflow: hidden;
}

.userlist-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

/* Avatar */
.userlist-avatar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
}

.userlist-avatar img {
  width: 120px;
  height: auto;
  object-fit: cover;
}

.userlist-name { display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: var(--txtxl);
    font-family: var(--akzenttext);
    color: var(--txtcol);
    text-transform: lowercase;
    z-index: 3;
    align-items: center;
    flex-direction: row-reverse;
    text-shadow: 3px 2px 1px var(--tbl-main-tr);
    line-height: 0.5em;
}

.userlist-title {
  font-size: var(--txtxsmall);
  color: var(--txtcol);
}

/* Info-Block */
.userlist-info {
  font-size: var(--txtxsmall);
  padding: 10px 15px;
  line-height: 1.5;
}

/* Hoverbereich für Biotext */
.userlist-bio {
  position: absolute;
  top: 0;
  right: -100%;
  width: 48%;
  height: auto;
  max-height: 100%;
  background: var(--tbl-main-tr);
  transition: right 0.6s ease;
  z-index: 10;
	overflow: auto;
}

.userlist-box:hover .userlist-bio {
  right: 0;
}

.bio-inner {
  padding: 20px;
  font-size: var(--txtsmall);
  text-align: justify;
  height: 100%;
  overflow-y: auto;
}

.userlist-basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  padding: 10px 0;
}

.userlist-basics .ubox {
  background: var(--tbl-main-tr);
  color: var(--txtcol);
  padding: 8px 10px;
  font-size: var(--txtxsmall);
  font-family: var(--fliesstext);
}

.userlist-basics .ubox small {
  font-size: var(--txtxxsmall);
	  color: var(--akzent-red);
}


.userlist-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 15px;
  justify-content: flex-start;
}

.userlist-buttons .button {
  background: var(--tbl-main-tr3);
  color: var(--txtcol);
  font-size: var(--txtxxsmall);
  padding: 4px 8px;
  border-radius: 2px;
  font-family: var(--fliesstext);
  white-space: nowrap;
  text-align: center;
}

.userlist-buttons .button a {
  color: var(--txtcol);
  text-decoration: none;
}