/* Allgemeiner Container */
.memberlist-container {
    max-width: 1290px;
    width: 100%;
    margin: 0 auto;
   background-attachment: fixed;
  background-image: var(--accent-bg);
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  color: var(--light);
	outline: 1px solid var(--color-opac-border);
  outline-offset: 10px;
		margin-bottom:30px;

}

/* Header-Bereich */
.memberlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
	background-color: var(--color-accent1);
  background-attachment: fixed;
  background-image: var(--accent-bg);
  background-blend-mode: multiply;
	font-family: var(--main-font2);
  font-weight: 800;
  font-size: 12px;
  text-align: justify;
  color: var(--main-color);

}

.memberlist-title {
text-transform: uppercase;
}


/* Keine Abstände zwischen Header und Wrapper */
.memberlist-header + .memberlist-wrapper {
    margin-top: 0;
}


/* Buchstaben-Navigation */
.memberlist-navigation a {
    text-decoration: none;
    font-size: 12px;
    margin: 0 5px;
    text-transform: uppercase;
}

.memberlist-navigation a:hover {
    text-decoration: none;
}

/* Memberlist Wrapper */
.memberlist-wrapper {
display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 45px;
  padding: 100px;
}

/* Member Card */
.member-card {
    position: relative;
    width: 300px;
    height: 400px;
    overflow: hidden;
	filter:brightness(90%);
	outline: 1px solid var(--color-opac-border);
  outline-offset: 10px;
}

/* Last Seen (oben) */
.last-seen {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
	z-index:15;
	text-transform: uppercase;
	font-family: var(--main-font);
	letter-spacing:0.05em;
	opacity:0.8;
    padding:15px;
}

/* Avatar-Bereich */
.member-avatar img {
    width: 100%;
    height: 100%;
 -webkit-mask-image: linear-gradient(
    to bottom,
    var(--mask-start-color) 0%,
    var(--mask-middle-color) 20%,
    var(--mask-end-color) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    var(--mask-start-color) 0%,
    var(--mask-middle-color) 20%,
    var(--mask-end-color) 100%
  );
  overflow: hidden;
  background-size: cover;
    filter: grayscale(100%) brightness(25%);
}

/* Details unten */
.member-details {
    position: absolute;
    bottom: 22px;
    left: 20px;
    right: 20px;
    color: var(--color-main3);
}

/* Name */
.member-name {
    font-size: 40px;
	font-family: var(--deco-font);
    font-weight: bold;
    margin-bottom: 25px;
    display: block;
}

/* Info-Bereich unter dem Namen */
.member-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* "Geschrieben von" */
.member-meta {
    display: flex;
    flex-direction: column; /* Elemente werden vertikal gestapelt */
    font-size: 14px;
}

.meta-label {
 text-transform: uppercase;
  letter-spacing: 1px;
	font-weight:200;
	font-family: var(--main-font2);
	font-size:9px;
}

.meta-value {
    font-size: 14px; /* Standardgröße für den Wert */
	  letter-spacing: 1px;
	font-weight:800;
	font-family: var(--main-font2);
	 text-transform: uppercase;

}

.member-stats {
    font-size: 16px;
    font-weight: 400;
    width: 30px; /* Breite des Containers anpassen */
    height: 30px; /* Höhe des Containers anpassen */
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    outline: 1px solid var(--color-opac-border);
    outline-offset: 10px;
    font-family: var(--main-font2);
    text-align: center;
}

.member-name .witcher.username,
.member-name .angel.username,
.member-name .demon.username,
.member-name .vampire.username,
.member-name .werewolf.username,
.member-name .shapeshifter.username,
.member-name .dragonkin.username,
.member-name .fae.username,
.member-name .spirit.username,
.member-name .hybrid.username,
.member-name .demigod.username,
.member-name .human.username,
.member-name .admin.username {
    color: var(--color-main3) !important; /* Einheitliche Farbe für alle Gruppen */
	transition: color 0.3s ease!important; 
}

.member-name .witcher.username:hover,
.member-name .angel.username:hover,
.member-name .demon.username:hover,
.member-name .vampire.username:hover,
.member-name .werewolf.username:hover,
.member-name .shapeshifter.username:hover,
.member-name .dragonkin.username:hover,
.member-name .fae.username:hover,
.member-name .spirit.username:hover,
.member-name .hybrid.username:hover,
.member-name .demigod.username:hover,
.member-name .human.username:hover,
.member-name .admin.username:hover {
    color: var(--color-muted) !important; /* Einheitliche Farbe für alle Gruppen */
		cursor: pointer!important;
  transition: 1s ease-in-out!important;
}