/* Container & Zentrierung */
.tt-wrapper {
    width: 100%;
    text-align: center; /* Zentriert die h2 Überschriften */
}

/* Titel-Styling */
.tt-wrapper h3 {
    background-color: #ffb923;
    margin-top: 40px;
    color: #333;
}

.fake-header-row td {
    background-color: #414042 !important;
    color: whitesmoke !important;
    font-weight: bold !important;
    display: table-cell !important;
    text-align: center !important;
}

/* Grunddesign der Tabelle */
#mannschaftTable, #einzelRanglisteKopf {
    width: 80% !important;
    border-collapse: collapse;
    font-family: sans-serif;
    margin: 20px auto;
    font-size: 0.9em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Kopfzeile */
#mannschaftTable thead tr, #einzelRanglisteKopf thead tr {
    background-color: #a2a2a2;
    color: #000000;
    text-align: center;
    border-bottom: 2px solid #000;
}

#mannschaftTable th, 
#mannschaftTable td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd;
    text-align: center;
}

#einzelRanglisteKopf td {
    border-bottom: 1px solid #dddddd;
    text-align: center;
    padding: 5px 2px;
}

/* Ausrichtung basierend auf den Original-Klassen */
.zentriert, .zentriertNopKeinRand { text-align: center !important; padding-right: 0px !important; padding-left: 0px !important; }


/* Zebrastreifen */
#mannschaftTable tbody tr:nth-of-type(even), #einzelRanglisteKopf tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* --- CSS-DREIECKE FÜR AUF-/ABSTEIGER --- */
/* Gemeinsame Basis für die Dreieck-Zelle (die erste Spalte) */
#mannschaftTable td:first-child {
    position: relative;
    width: 30px; /* Feste Breite für das Symbol */
    padding: 0;
    text-align: center;
}

/* Das Pseudoelement, das das Dreieck zeichnet */
#mannschaftTable td:first-child::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    
    /* Standard-Dreieck-Stil (nach rechts, unsichtbar) */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid transparent; 
}

/* AUFSTEIGER (Grünes Dreieck nach oben) */
/* Selektor: Die Zelle hat das Attribut title="Aufsteiger..." */
#mannschaftTable td[title^="Aufsteiger"]::before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #2e7d32; /* Sattes Grün */
    border-top: 0; /* Verhindert, dass es ein Rhombus wird */
}

/* ABSTEIGER (Rotes Dreieck nach unten) */
/* Selektor: Die Zelle hat das Attribut title="Absteiger" */
#mannschaftTable td[title^="Absteiger"]::before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #c62828; /* Sattes Rot */
    border-bottom: 0;
}
/* ENDE CSS-Dreiecke */


/* --- HERVORHEBUNG UNSERER MANNSCHAFTEN --- */
/* Hintergrundfarben für die Zeilen der jeweiligen Mannschaft */
#mannschaftTable tr[data-team="KOPF1"] { background-color: #ffdd8d !important; } /* Gold */
#mannschaftTable tr[data-team="KOPF2"] { background-color: #b1deff !important; } /* Blau */
#mannschaftTable tr[data-team="KOPF3"] { background-color: #d8e9c3 !important; } /* Grün */
#mannschaftTable tr[data-team="KOPF4"] { background-color: #eccbc4 !important; } /* Rot */

/* rechter Rand als Akzent-Linie */
#mannschaftTable tr[data-team="KOPF1"] td:first-child { box-shadow: inset 4px 0 0 #FBC02D !important; }
#mannschaftTable tr[data-team="KOPF2"] td:first-child { box-shadow: inset 4px 0 0 #509dd6 !important; }
#mannschaftTable tr[data-team="KOPF3"] td:first-child { box-shadow: inset 4px 0 0 #8ea96e !important; }
#mannschaftTable tr[data-team="KOPF4"] td:first-child { box-shadow: inset 4px 0 0 #c95440 !important; }

/* Alle Zeilen welche data-team-Attribut "KOPF" enthalten ansprechen */
#mannschaftTable tr[data-team^="KOPF"] { 
    font-weight: bold;
}




/* --- Mobile Optimierung (Responsive) --- */
@media screen and (max-width: 768px) {
    /* Wichtig: Alle Zellen in der Header-Zeile sichtbar machen */
    .fake-header-row td {
        font-size: 10px !important;
    }

    #mannschaftTable, #einzelRanglisteKopf {
        width: 100% !important;
    }

    #mannschaftTable td {
        padding: 5px 0px;
        border-bottom: 1px solid #dddddd;
        text-align: center;
    }
    /* --- Spalten-Management Einzelrangliste --- */
    #einzelRanglisteKopf tbody tr:not(.fake-header-row) td:nth-child(3),  /* PassNr (Body) */
    #einzelRanglisteKopf tbody tr:not(.fake-header-row) td:nth-child(4),  /* Verein (Body) */
    #einzelRanglisteKopf tbody tr:not(.fake-header-row) td:nth-child(12), /* AK (Body) */
    .r-header td:nth-child(3),             /* PassNr (Header) */
    .r-header td:nth-child(4),             /* Verein (Header) */
    .r-header td:nth-child(8)              /* AK (Header) */ {
        display: none !important;
    }

    /* --- Spalten-Management Mannschaftstabelle --- */
    .m-header td:nth-child(3),          /* T-Abk. (Header) */
    .m-header td:nth-child(8),          /* Sp-V (Header) */
    .m-header td:nth-child(9)           /* Sz-V (Header) */
    {
        display: none !important;
    }

    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(4),   /* T-Abk. (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(9),   /* Sp-V (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(10),  /* Sp-V (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(11),  /* Sp-V (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(12),  /* Sz-V (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(13),  /* Sz-V (Body) */
    #mannschaftTable tbody tr:not(.fake-header-row) td:nth-child(14)   /* Sz-V (Body) */ 
    {
        display: none !important;
    } 

    /* Mannschaftsnamen begrenzen */
    #mannschaftTable td:nth-child(3) {
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }

    #einzelRanglisteKopf td:nth-child(2) {
        text-align: left;
        font-weight: bold;
    }
}