.index_container {
    width: 1100px;
    height: 379px;
    /* border: 10px #181f25 solid; */
    background: #121212 url(/images/chrono/bg.png) top left repeat-x;
    margin-top: 24px;
}

.index_stats {
    background: #181f25;
    width: 406px;
    height: 227px;
    margin: 8px;
    /* float: left; */
    margin-right: 5px;
    margin-bottom: 0px;
}

.index_last {
    width: 99%;
    height: 98px;
    margin: 8px;
    /* float: left; */
    margin: 26px 0px -24px 5px;
    background: #191919;
    border: 1px solid #302d21;
}

.index_container {
    width: 1200px;
    min-height: 379px;
    background: #121212;
    margin: 24px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    box-sizing: border-box;
}

.index_bigall {
    background: rgba(255, 255, 255, 0.03);
    flex: 0 0 392px;
    height: 190px;
    overflow: auto;
    text-align: justify;
    font-size: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(139, 125, 67, 0.2);
}

.index_bigall2 {
    background: rgba(255, 255, 255, 0.03);
    flex: 0 0 791px;
    height: 190px;
    overflow: auto;
    text-align: center;
    font-size: 13px;
    color: #656565;
    box-sizing: border-box;
    border: 1px solid rgba(139, 125, 67, 0.2);
}

/* Überschriften-Korrektur, damit sie nicht am Rand kleben */
.detailsheadline, .detailsheadline2 {
    padding: 5px;
    border-bottom: 1px dashed #8b7d43;
    color: #8b7d43;
    text-transform: uppercase;
    font-family: 'Blender Pro';
    font-size: 16px;
}
.index_wiotext {
    margin: 6px 8px;
    color: #555;
}

.index_legend {
    width: 100%;
    height: 36px;
    background: #161616;
    /* margin: 5px; */
    float: left;
    margin: -10px 0px 0px 0px;
}

.index_statistic {
    /* background: #fff; */
    width: 316px;
    height: 226px;
    margin-left: 86px;
}

.legendbox {
    /* background: #fff; */
    width: 141px;
    height: 24px;
    float: left;
    margin: 5px 8px;
    text-align: center;
    color: #5d5d5d;
    font-family: 'kenyan_coffeeregular';
    font-size: 17px;
}

.recentth {
    font-size: 11px;
    color: #626262;
    width: 243px;
    height: auto;
    /* margin-left: 41px; */
    margin-top: 3px;
    background: #1d262d;
    text-transform: uppercase;
    font-family: tahoma, sans-serif;
    margin-left: 5px;
}

.awaymember {
    color: #555555;
    padding: 7px;
    text-align: justify;
}

span.index_statstyle {
    color: #8b7d43;
    font-weight: 700;
}

.mc_item_Sisterboards {
    padding: 10px;
}

.detailsheadline {
    text-align: center;
    /* background: #252f37; */
    border-bottom: 1px dashed #8b7d43;
    padding: 2px;
    color: #4c4d1b;
}

.detailsheadline2 {
    text-align: center;
    /* background: #252f37; */
    border-bottom: 1px dashed #8b7d43;
    padding: 2px 2px;
    color: #4c4d1b;
    margin-top: -1.5px;
}

.detailsheadline a {
    color: #4c4d1b;
}
		
.smalltext-statsname {
    text-align: center;
    color: #797979;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    /* padding-top: 21px; */
    font-family: 'Blender Pro';
}

.statsname {
    font-size: 31px;
    letter-spacing: 3px;
    text-align: center;
    margin-top: -2px;
    margin-bottom: 0px;
    /* text-transform: uppercase; */
    font-family: 'kill_the_noiseregular';
}

.index_zahlen {
    text-align: center;
    color: #797979;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    /* padding-top: 21px; */
    float: left;
    width: 153px;
    /* background: #fff; */
    margin: 5px 2px;
    font-family: 'Blender Pro';
}
		
/* Container der Legende */
.fraktions_legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background: #111111;
    justify-content: center;
    /* width: fit-content; */
    margin: 20px auto;
}

/* Das Grund-Kästchen */
.fraktion_box {
    width: 95px;
    height: 30px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgb(0 0 0 / 20%);
}

/* Hover-Effekt für das Kästchen selbst */
.fraktion_box:hover {
    transform: scale(1.2) rotate(5deg); /* Leichte Drehung, wie gewünscht */
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
    z-index: 10;
}

/* Der Tooltip (Name der Fraktion) */
.fraktion_box::after {
    content: attr(data-name); /* Holt den Namen aus dem HTML */
    position: absolute;
    bottom: 140%;             /* Erscheint über dem Kästchen */
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 3px;
    opacity: 0;               /* Standardmäßig unsichtbar */
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fraktion_box:hover::after {
    opacity: 1;               /* Sichtbar beim Hover */
}

/* Beispiel-Farben für die 11 Fraktionen */
.f1 { background-color: #734f56; }
.f2 { background-color: #668671; }
.f3 { background-color: #2b2632; }
.f4 { background-color: #1d1313; }
.f5 { background-color: #1b3563; }
.f6 { background-color: #56423c; }
.f7 { background-color: #b3b3b3; }
.f8 { background-color: #b95a8b; }
.f9 { background-color: #d7b66c; }
.f10 { background-color: #5f3232; }
.f11 { background-color: #3b4a65; }