.characontent{
            position: static;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 90vh;
            align-items: center;
            text-align: center;
            background-image: none;
            filter: none;
            overflow: clip;
            }
            
            .charamain{
            position: relative;
            margin-top: 7%;
            height: 726px;
            }
            
            .charaname{
            position: relative;
            width: 321px;
            height: 273px;
            top: -53px;
            left: -132px;
            rotate: -6deg;
            align-content: center;
            filter: drop-shadow(-2px 2px 2px rgba(108, 32, 73, 0.17));
            }
            
            .charastats1{
                position: absolute;
                top: 117px;
                color: #5a4174;
            }
            
            .charastats2{
                position: absolute;
                top: 117px;
                left: 266px;
                color: #5a4174;
            }
            
            .charamaintext{
                position: absolute;
                top: -17px;
                left: 384px;
                width: 323px;
                height: 574px;
                rotate: 2deg;
                filter: drop-shadow(-2px 2px 2px rgba(108, 32, 73, 0.17));
            }
            
            .charamaintextscroll{
                position: absolute;
                top:15px;
                left: 15px;
                overflow-Y: scroll;
                width: 90%;
                height: 95%;
            }
            
            .charamaintextscroll::-webkit-scrollbar {
                    display: none;
                }
            
            .spoilertext{
                margin:10%; margin-bottom: 20%;
            }
            
            .chara_label_1{
                position: absolute;
                color: #ffec9d;
                bottom: -18px;
                right: 16px;
                rotate: -6deg;
                font-size: 30px;
            }
            
            body.dark .chara_label_1{
                color: #5a4174;
            }
            
            .charabinder{
                position: absolute;
                top: 342px;
                left: -352px;
                rotate: -4deg;
                filter: drop-shadow(-2px 2px 2px rgba(108, 32, 73, 0.17));
                color: #5a4174;
            }
            
            .charabinderscroll{
                position: absolute;
                top:52px;
                left: 15px;
                overflow-y: scroll;
                overflow-x: clip;
                width: 90%;
                height: 81%;
            }
            
            .charabinderscroll::-webkit-scrollbar {
                    display: none;
                }
            
            .spoilertext{
                margin:10%; margin-bottom: 20%;
            }
            
            .tab{
                position: absolute;
                height: 30px;
                z-index: -1;
                left: -26px;
                transition:all 0.3s ease-in-out;
            }
            
            .tab.active{
                left: -33px;
            }
            
            .tab:hover{
                left: -57px;
                cursor: pointer;
            }
            
            .tabsright{
                position: relative;
                z-index: -1;
                transform: scaleX(-1);
            }
            
            .tablabel{
                position: relative;
                top:-62px;
                left:-74px;
                rotate:-90deg;
                transition:all 0.3s ease-in-out;
            }
            
            .bindertitle{
                position: absolute;
                font-size: 23px;
                top: 19px;
                left:12px;
                width: 100%;
                height: 100%;
                text-align: center;
                color: #693a6a;
            }
            
            .tabcontent, .bindertitle-text {
                position: absolute;
                display: none;
            }

            .tabcontent.active, .bindertitle-text.active {
                display: block;
            }
            
            .charaimg{
                position: absolute;
                top: 163px;
                left: -187px;
                pointer-events: none;
            }

            .charaimg .changingimg img{
                top: -97px;
                left: -214px;
            }
            
            .magic_circle {
            width: 120px;
            height: 120px;
            opacity: 0;
                
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
                
            transition: opacity 0.7s ease;
            }

            .magic_circle.active {
                opacity: 1;
            }
            
            .spellname{
                position: relative;
                transition: 0.3s;
                transform-origin: left;
            }
            
            .spellname:hover{
                color:#ff52e9;
                text-shadow: 0 0 10px rgb(255, 255, 255), 0 0 20px 
                rgba(255, 255, 255, 0.94), 0 0 30px rgb(255, 255, 255);
                transform: scale(1.2);
            }
            
            .spellname:hover {
                opacity: 1;
                transition: opacity 0.3s ease-in-out, visibility 0s ease 0s; /* Bild sichtbar machen */
            }

.charastamp{
    position: relative;
    top: 269px;
    left: 250px;
    scale: 0.5;
    }

.stats_table{
                position: relative;
                width: 100%;
                text-align: left;
                border-collapse: collapse;
            }
            
            .stats_table td{
                padding: 1px 10px;
            }
            
            .stats_table td:first-child{
                color: #ffec9d;
            }
            
            .stats_table tr.section-end{
                border-bottom: 2px dotted #ffffff;
            }
            
            .character_stats img{
                position: absolute;
                left: -4px;
                z-index: 0;
                top: 1px;
            }

.magic_circle_note{
            position: fixed;
            width: 120px;
            height: 120px;
            right: -18px;
            bottom: 73px;
            rotate:12deg;
            z-index: 4;
            pointer-events: none;
            }

.charaname, .charaimg, .charabinder, .charamaintext, .charamain, .charastamp
{
    transition: 0.7s;
}

@media (max-width: 1150px){
    .charamain{
        height: 1223px;
    }
    .charaname{
        left: 25px;
        top: 32px;
        rotate: 11deg;
    }
    
    .charaimg{
        left: -234px;
        top: 278px;
        scale: 0.9;
    }
    
    .charabinder{
        left: -58px;
        top: 775px;
    }
    
    .charamaintext{
        left: 287px;
        top: 321px;
    }
    
    .charastamp{
        top: 677px;
        left: 286px;
        scale: 0.6;
    }
}

@media (max-width: 580px){
    .charamain{
     height: 1766px;   
        width: 439px;
        left: 21px;
        overflow-x: clip;
    }
    
    .charaname{
        left: 53px;
        rotate: 7deg;
        top: 0px;
        scale: 0.6;
    }
    
    .charaimg{
        left: -48px;
        top: 166px;
        scale: 0.7;
    }
    
    .charabinder{
        left: 87px;
        top: 612px;
    }
    
    .charamaintext{
        left: 27px;
        top: 961px;
    }
    
    .charastamp{
        top: 1281px;
        left: 37px;
        scale: 0.6;
    }
}