/* Grid für zwei Userbits nebeneinander */
.userbit-grid {
display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    float: left;
    height: 470px;
    width: 363px;
}

.userbit {
    background: var(--back2);
    width: 523px;
    overflow: hidden;
    position: relative;
    float: left;
    margin-right: 9px;
    margin-left: 9px;
    margin-bottom: 19px;
}

/* Header (Name) */
.userbit-header {
      background: var(--eye);
    font-size: 23px;
    font-family: var(--headschrift);
    color: var(--light);
    padding: 10px;
    text-align: center;
    text-transform: lowercase;
    letter-spacing: -2px;
}

/* Body mit Avatar und Infos */
.userbit-body {
    display: flex;
    gap: 15px;
    padding: 15px;
}

/* Avatar mit Hover-Beschreibung */
.userbit-avatar {
    position: relative;
    border: 6px solid var(--main);
    overflow: hidden;
    background: var(--avatar);
    width: 300px;
    height: 250px;
}

.userbit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Text */
.userbit-hovertext {
position: absolute;
    inset: 0;
    background: var(--back);
    color: var(--light);

    align-items: center;
    justify-content: center;
    text-align: justify;
    padding: 13px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 1.0s ease-in-out;
    color: var(--schrift);
    overflow: auto;
}

.userbit-avatar:hover .userbit-hovertext {
    opacity: 1;
}

/* Infos neben dem Avatar */
.userbit-info {
    flex: 1;
}

.userbitfact {
background: var(--main);
    color: var(--light);
    padding: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    width: 284px;

}

.memberbitfact {
    background: var(--back2);
    color: var(--main);
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 5px;
}

/* Quote unten */
.userbit-quote {
    text-align: center;
    font-size: 15px;
    font-family: var(--headschrift);
    background: var(--back2);
    color: var(--main);
    padding: 5px;
    border-top: 1px solid var(--main);
}
.played {
    font-size: 12px;
    transform: translate(58px, -7px);
    font-family: var(--schrifti);
    color: var(--bewohner);
    letter-spacing: 0px;
    font-weight: bold;
    opacity: 70%;
}