.ml_box {
width: 295px;
}

.memberlist {
display:flex;
flex-wrap:wrap;
gap:10px;
width: 100%;
margin-top: 10px;}

.ml_wrapper {
width:85%;
margin:auto;
	margin-top: 60px;
}

.ml_author i {
display: flex;
  justify-content: center;
  font-size: 30px;
  text-align: center;
  width: 100%;
  opacity: 1;
  margin-top: 20px;
}

.ml_spieler {
background: var(--paper);
  font-size: 10px;
  text-transform: uppercase;
  padding: 20px;
  text-align: center;
}

.ml_ue {
font-family: var(--mainfont);
  text-transform: uppercase;
  font-size: 20px;
}

.ml_ut {
text-transform: uppercase;
  font-style: italic;
  color: var(--golden);
  font-size: 10px;
  letter-spacing: 6px;
  opacity: 0.7;
}

.ml_kat {
background: var(--paper);
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid var(--golden);
}

.ml_author {
padding: 20px;
  background-image: url(/images/lex_pic.png);
}

/*AVATAR HOVER*/

.ml-avatar-wrapper {
   position: relative;
  width: 250px;
  height: 292px;
  overflow: hidden;
}

.ml-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay */
.ml-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(23,23,23,0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Einzelne Infos */
.ml-avatar-overlay .info {
opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  font-size: 10px;
  border-bottom: 1px solid var(--line1);
  margin-bottom: 20px;
  padding-left: 10px;
  padding-bottom: 5px;
  width: 80%;
  color: var(--link);
  text-transform: uppercase;
}

.ml_spieler b {
border-bottom: 1px solid var(--golden);
  padding: 3px;
	letter-spacing: 1px;
	text-align:center;
	margin-top:20px;
}

/* Hover aktivieren */
.ml-avatar-wrapper:hover .ml-avatar-overlay {
    opacity: 1;
}

/* Gestaffelte Animation */
.ml-avatar-wrapper:hover .info-1 {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
}

.ml-avatar-wrapper:hover .info-2 {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

.ml-avatar-wrapper:hover .info-3 {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateX(0);
}

.ml-avatar-wrapper:hover .info-4 {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateX(0);
}


/* Gestaffelte Animation */
.ml-avatar-wrapper:hover .info-5 {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateX(0);
}