/* ==========================================
   TIVOLISCORE
   RANGLISTE
========================================== */

* {
    box-sizing: border-box;
}


/* ==========================================
   BODY
========================================== */

body {
    margin: 0;
    padding: 20px;

    font-family: Arial, Helvetica, sans-serif;

    background: #f3f6fa;
    color: #222222;
}


/* ==========================================
   HAUPTCONTAINER
========================================== */

.rangliste-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}


/* ==========================================
   ÜBERSCHRIFT
========================================== */

.rangliste-container h1 {
    margin: 0 0 20px 0;

    text-align: center;

    color: #0A4EA3;

    font-size: 28px;
}


/* ==========================================
   SCROLL-BEREICH
========================================== */

.rangliste-scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    background: #ffffff;

    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    -webkit-overflow-scrolling: touch;
}


/* ==========================================
   TABELLE
========================================== */

.rangliste-table {
    width: 100%;
    min-width: 1350px;

    border-collapse: separate;
    border-spacing: 0;
}


/* ==========================================
   TABELLENKOPF
========================================== */

.rangliste-table th {
    background: #0A4EA3;
    color: #ffffff !important;

    padding: 13px 9px;

    text-align: center;

    font-size: 14px;
    font-weight: bold;

    white-space: nowrap;
}


/* ==========================================
   TABELLENZELLEN
========================================== */

.rangliste-table td {
    padding: 11px 9px;

    text-align: center;

    border-bottom: 1px solid #e5e5e5;

    white-space: nowrap;

    font-size: 14px;

    color: #222222;
}


/* ==========================================
   ABWECHSELNDE ZEILEN
========================================== */

.rangliste-table tbody tr:nth-child(even) {
    background: #f8fbff;
}


/* ==========================================
   HOVER
========================================== */

.rangliste-table tbody tr:hover {
    background: #eaf3ff;
}


/* ==========================================
   RANG
========================================== */

.rangliste-table .rang {
    width: 65px;
    min-width: 65px;

    text-align: center;

    font-weight: bold;

    color: #222222;
}


/* ==========================================
   SPIELER
========================================== */

.rangliste-table .spieler {
    width: 220px;
    min-width: 220px;

    text-align: left;

    font-weight: bold;

    color: #222222;
}


/* ==========================================
   RUNDEN R1 - R15
========================================== */

.rangliste-table .runde {
    width: 58px;
    min-width: 58px;

    text-align: center;

    color: #222222;
}


/* ==========================================
   SUMME
========================================== */

.rangliste-table .summe {
    width: 85px;
    min-width: 85px;

    text-align: center;

    font-weight: bold;

    color: #222222;
}


/* ==========================================
   SCHNITT
========================================== */

.rangliste-table .schnitt {
    width: 90px;
    min-width: 90px;

    text-align: center;

    font-weight: bold;

    color: #222222;
}


/* ==========================================
   DIFFERENZ
========================================== */

.rangliste-table .diff {
    width: 70px;
    min-width: 70px;

    text-align: center;

    font-weight: bold;

    color: #222222;
}


/* ==========================================
   FARBEN
========================================== */

.rangliste-table .score-blau {
    color: #0A4EA3;
    font-weight: bold;
}


.rangliste-table .score-gruen {
    color: #198754;
    font-weight: bold;
}


.rangliste-table .score-rot {
    color: #dc3545;
    font-weight: bold;
}


.rangliste-table .score-schwarz {
    color: #222222;
    font-weight: bold;
}


/* ==========================================
   DIFFERENZ BLEIBT SCHWARZ
========================================== */

.rangliste-table .diff-schwarz {
    color: #222222;
    font-weight: bold;
}


/* ==========================================
   LEERE FELDER
========================================== */

.rangliste-table .leer {
    color: #b5b5b5;
}


/* ==========================================
   SCROLLBAR
========================================== */

.rangliste-scroll::-webkit-scrollbar {
    height: 10px;
}


.rangliste-scroll::-webkit-scrollbar-track {
    background: #e5eaf2;
    border-radius: 10px;
}


.rangliste-scroll::-webkit-scrollbar-thumb {
    background: #0A4EA3;
    border-radius: 10px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    body {
        padding: 15px;
    }


    .rangliste-container h1 {
        font-size: 24px;
    }


    .rangliste-table th,
    .rangliste-table td {
        padding: 10px 8px;
        font-size: 13px;
    }

}


/* ==========================================
   HANDY
========================================== */

@media (max-width: 650px) {

    body {
        padding: 10px;
    }


    .rangliste-container h1 {
        font-size: 22px;
        margin-bottom: 15px;
    }


    /* ------------------------------------------
       SCROLLBEREICH
    ------------------------------------------ */

    .rangliste-scroll {
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* ------------------------------------------
       TABELLE
    ------------------------------------------ */

    .rangliste-table {
        min-width: 1350px;

        border-collapse: separate;
        border-spacing: 0;
    }


    .rangliste-table th,
    .rangliste-table td {
        padding: 9px 7px;
        font-size: 13px;
    }


    /* ------------------------------------------
       RANG – 65 PX
    ------------------------------------------ */

    .rangliste-table .rang {
        width: 65px;
        min-width: 65px;
        max-width: 65px;
    }


    /* ------------------------------------------
       SPIELER – 140 PX
    ------------------------------------------ */

    .rangliste-table .spieler {
        width: 140px;
        min-width: 140px;
        max-width: 140px;

        text-align: left;
    }


    /* ------------------------------------------
       RUNDEN
    ------------------------------------------ */

    .rangliste-table .runde {
        width: 55px;
        min-width: 55px;
    }


    /* ------------------------------------------
       SUMME
    ------------------------------------------ */

    .rangliste-table .summe {
        width: 85px;
        min-width: 85px;
    }


    /* ------------------------------------------
       SCHNITT
    ------------------------------------------ */

    .rangliste-table .schnitt {
        width: 85px;
        min-width: 85px;
    }


    /* ------------------------------------------
       DIFFERENZ
    ------------------------------------------ */

    .rangliste-table .diff {
        width: 65px;
        min-width: 65px;
    }


    /* ==========================================
       RANG FEST
    ========================================== */

    .rangliste-table th.rang,
    .rangliste-table td.rang {
        position: sticky;

        left: 0;

        width: 65px;
        min-width: 65px;
        max-width: 65px;

        z-index: 20;

        background: #ffffff;
    }


    /* ==========================================
       SPIELER FEST
    ========================================== */

    .rangliste-table th.spieler,
    .rangliste-table td.spieler {
        position: sticky;

        left: 65px;

        width: 140px;
        min-width: 140px;
        max-width: 140px;

        z-index: 20;

        background: #ffffff;
    }


    /* ==========================================
       KOPFZEILE FESTE SPALTEN
    ========================================== */

    .rangliste-table thead th.rang,
    .rangliste-table thead th.spieler {
        background: #0A4EA3;

        color: #ffffff !important;

        z-index: 30;
    }


    /* ==========================================
       HINTERGRUND FESTE SPALTEN
    ========================================== */

    .rangliste-table tbody tr:nth-child(odd)
    td.rang,
    .rangliste-table tbody tr:nth-child(odd)
    td.spieler {
        background: #ffffff;
    }


    .rangliste-table tbody tr:nth-child(even)
    td.rang,
    .rangliste-table tbody tr:nth-child(even)
    td.spieler {
        background: #f8fbff;
    }


    /* ==========================================
       HOVER
    ========================================== */

    .rangliste-table tbody tr:hover
    td.rang,
    .rangliste-table tbody tr:hover
    td.spieler {
        background: #eaf3ff;
    }

}

/* ==========================================
   FARB-LEGENDE
========================================== */

.rangliste-legende {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;

    margin: 15px auto 0 auto;

    font-size: 13px;
    text-align: center;
}

.rangliste-legende span {
    white-space: nowrap;
}


/* Handy */

@media (max-width: 650px) {

    .rangliste-legende {
        gap: 14px;
        flex-wrap: wrap;
        font-size: 13px;
    }

}
/* ==========================================
   FARBEN DER LEGENDE
========================================== */

.rangliste-legende .score-blau {
    color: #0A4EA3 !important;
    font-weight: bold;
}

.rangliste-legende .score-gruen {
    color: #198754 !important;
    font-weight: bold;
}

.rangliste-legende .score-rot {
    color: #dc3545 !important;
    font-weight: bold;
}

.rangliste-legende .score-schwarz {
    color: #222222 !important;
    font-weight: bold;
}
/* ==========================================
   ZURÜCK-BUTTON
========================================== */

.rangliste-zurueck {
    display: block;

    width: fit-content;

    margin: 20px auto 0 auto;

    padding: 10px 22px;

    background: #0A4EA3;

    color: #ffffff !important;

    text-decoration: none;

    border-radius: 8px;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    transition: background 0.2s ease;
}


.rangliste-zurueck:hover {
    background: #083d82;
}
/* ==========================================
   TRENNLINIE NACH DEN ERSTEN 3 RÄNGEN
========================================== */

.rangliste-table tbody tr:nth-child(3) td {
    border-bottom: 2px solid #0A4EA3;
}

/* ==========================================
   ZURÜCK-BUTTON – HANDY
========================================== */

@media (max-width: 650px) {

    .rangliste-zurueck {
        margin-top: 18px;

        padding: 10px 20px;

        font-size: 14px;
    }

}
.spieler-history-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.spieler-history-link:hover {
    text-decoration: none;
}