/* === Avatar-Hover (für dein aktuelles HTML) ============================= */

/* Container auf natürliche Bildgröße aufspannen */
.author_avatar{
  position: relative;
  display: inline-block;
  line-height: 0;            /* vermeidet feine Lücken unter Bildern */
}

/* Avatarbild sauber darstellen (ohne Zuschnitt) */
.author_avatar .avaback img{
  display: block;
  width: 100%;
  height: auto;              /* kein Crop */
  border-radius: 0;          /* bei Bedarf anpassen */
}

/* Overlay (unsichtbar bis Hover) */
.author_avatar .avatar-hover{
  position: absolute;
  inset: 0;                  /* exakt über dem Avatar */
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 1s cubic-bezier(.2,.8,.2,1),
    transform .45s cubic-bezier(.2,.8,.2,1);
}

/* Inhalt im Overlay vollflächig ausrichten */
.author_avatar .avatar-hover .hover-content{
    position: absolute;
    inset: 0;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--back);
    backdrop-filter: blur(2px);
    color: var(--main);
    text-align: center;
    overflow: hidden;
    border-radius: 0;

}

/* Deine inline-Styles auf .posicon-meta überschreiben (damit es 100% füllt) */
.author_avatar .avatar-hover .posicon-meta{
  width: 100% !important;
  height: 100% !important;
  padding: 12px !important;
  background: transparent !important; /* Hintergrund liegt schon auf .hover-content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Awards im Overlay */
.author_avatar .avatar-hover .pos-awards{
  max-width: 100%;
  max-height: 60%;
  overflow: auto;                  /* scrollt bei vielen Icons */
  margin-bottom: 8px;
}
.author_avatar .avatar-hover .pos-awards img{
  width: 28px; height: 28px;
  margin: 2px;
  vertical-align: middle;
}

/* Spielername */
.author_avatar .avatar-hover .pos-player{
    font-size: 14px;
    /* letter-spacing: .06em; */
    /* text-transform: uppercase; */
    opacity: .9;
    color: var(--main);
}

/* Trigger: Hover/Focus */
.author_avatar:hover .avatar-hover,
.author_avatar:focus-within .avatar-hover{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .author_avatar .avatar-hover{ transition: none; transform: none; }
}


/* Kein Hochfahren – nur Fade */
.author_avatar .avatar-hover{
  transform: none !important;                    /* Bewegung aus */
  transition: opacity 1s cubic-bezier(.2,.8,.2,1) !important; /* nur Transparenz animieren */
}

.author_avatar:hover .avatar-hover,
.author_avatar:focus-within .avatar-hover{
  opacity: 1;
  pointer-events: auto;
  /* kein transform mehr nötig */
}



/* Overlay-Fläche komplett transparent */
.author_avatar .avatar-hover{
  background: transparent !important;
}

/* Inhaltsschicht ebenfalls ohne Fläche/Weichzeichner */
.author_avatar .avatar-hover .hover-content{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Die kleine Karte (Box) behält ihre eigene Fläche/Farbe */
.author_avatar .avatar-hover .posicon-meta{
  /* deine bisherigen Werte – z.B.: */
  background: var(--back) !important;
  border: 1px solid var(--main);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}





/* Außenfläche transparent lassen */
.author_avatar .avatar-hover{
  background: transparent !important;
}
.author_avatar .avatar-hover .hover-content{
  background: transparent !important;
  backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;   /* zentriert die Box */
}

/* Die kleine Karte: 250x150 */
.author_avatar .avatar-hover .posicon-meta{
  width: 250px !important;
  height: 150px !important;
  padding: 12px !important;
  background: var(--back) !important;
  border: 1px solid var(--main);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Inhalte in der Box anpassen */
.author_avatar .avatar-hover .pos-awards{
  max-width: 100%;
  max-height: 80px;          /* damit es in 150px Höhe passt */
  overflow: auto;
  margin-bottom: 8px;
}
.author_avatar .avatar-hover .pos-awards img{
  width: 28px; height: 28px;
  margin: 2px;
  vertical-align: middle;
}
.author_avatar .avatar-hover .pos-player{
  font-size: 14px;
	
}
	
	.author_avatar .avatar-hover .posicon-meta{
  border-radius: 0 !important;
}




/* MyReactions: Plus-Icon verstecken */
.myreactions-container .reaction-add img{
  display: none !important;
}
.myreactions-container .reaction-add{
  padding-left: 0;        /* evtl. Restabstand entfernen */
}
.myreactions-container .reaction-add span{
  margin-left: 0;         /* Text bündig */
}