.chara-box { 
    float: left; 
    box-sizing: border-box; 
    width: 30%; 
    margin: 10px;
} 

.chara-title { 
    box-sizing: border-box; 
    padding: 10px 20px; 
   
} 

.chara-title img { 
    filter: grayscale(100%); 
    width: 90px; 
    float: left; 
} 

.chara-name { 
    float: left; 
    text-align: justify; 
    width: 80px; position: 
    relative; 
    top: -20px; 
    margin-left: 5px;  
} 

.vorname { 
    color: #eee; 
    font-size: 18px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

.nachname { 
    color: #eee; 
    font-size: 9px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    margin-top: 0px;  
} 

.chara-descbox { 
    box-sizing: border-box; 
    padding: 20px 30px; 
    padding-bottom: 10px; 
    background: var(--highgrey); 
} 

.chara-desc { 
    height: 150px; 
    background: var(--grey); 
    padding: 5px 10px; 
    line-height: 1.5em; 
    overflow: auto; 
    scrollbar-width: none !important; 
    text-align: justify; 
    font-size: 13px; 
    font-family: 'calibri', sans-serif; 
    color: var(--fontdark); 
    margin-bottom: 10px; 
} 

.chara-desc::-webkit-scrollbar { 
    width: 0px !important; 
} 

.chara-fact { 
    box-sizing: border-box; 
    margin: 5px auto; 
    width: 90%; 
    padding: 5px;
    font-family: 'Calibri', sans-serif; 
    font-size: 8px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    color: #eee; 
    text-align: center; 
    font-weight: bold; 
    
}