body.stats {
    background: #050b18;   /* dunkles, tiefes Blau */
    color: #e0f0ff;
}


/* ===== ZENTRIERTER WRAPPER ===== */
.page-wrapper {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== TITEL ===== */
h2.title {
    text-align: center;
    width: 100%;
    margin: 10px auto 18px;
    color: #0040ff;
    font-size: 24px;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
}

table.bundesliga {
    background-color: #070f2a;  /* dunkles Blau */
    width: 100%;
    font-size: 12.5px;          /* Die Tabellenhöhe minimal besser lesbar */ 
}

/* ==== Tabellekopf ==== */

table.bundesliga thead th {
    background-color: #09143a; /* leicht heller als Tabelle */
    color: #00ffff;
}

/* ==== Hover bleibt sichtbar ==== */
table.bundesliga tbody tr:hover {
   background-color: #0b1a44;
   box-shadow: 0 0 10px #00ffff55;
}

table.bundesliga td,
table.bundesliga th {
    padding: 7px 8px;            /* vorher 6px */
    text-align: center;
    vertical-align: middle;
}

/* Mannschaftsspalte: Inhalt optisch mittig */
table.bundesliga td.team-wrap {
    justify-content: left;
}

/* ===== BUTTON LEISTE ===== */
.top-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 20px 0 25px;
    width: 100%;
}

/* Button Design */
.top-buttons .btn {
    padding: 12px 24px;
    min-width: 180px;
    text-align: center;
    color: #00ffff;
    background: #09103a;
    border: 2px solid #00ffff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 6px #00ffff;
    box-shadow: 0 0 10px #00ffff;
    transition: all 0.3s ease;
}

.team-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-wrap img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px #00ffff);
}


/* Hover */
.top-buttons .btn:hover {
    background: #00ffff;
    color: #0b0f3b;
    box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
}

/* Aktiver Button */
.top-buttons .btn.active {
    background: #00ffff;
    color: #0b0f3b;
    box-shadow: 0 0 25px #00ffff, 0 0 50px #00ffff;
}

/* Mobile */
@media (max-width: 600px) {
    .top-buttons {
        flex-direction: column;
    }
}

/* ===== PLATZIERUNGS-ZONEN ===== */

/* Champions League (1–4) */
tr.zone-cl {
    background: linear-gradient(90deg, #00ffcc, #00bfff);
    color: #051a24;
}

/* Europa League (5) */
tr.zone-el {
    background: #00bfff;
    color: #051a24;
}

/* Conference League (6) */
tr.zone-ecl {
    background: #5dff00;
    color: #081d00;
}

/* Relegation (16) */
tr.zone-relegation {
    background: #ffb300;
    color: #2b1a00;
}

/* Abstieg (17–18) */
tr.zone-down {
    background: #ff0033;
    color: #ffffff;
}

/* ==== Hover bleibt sichtbar (wichtig!) ==== */

table.bundesliga tbody tr.zone-cl:hover,
table.bundesliga tbody tr.zone-el:hover,
table.bundesliga tbody tr.zone-ecl:hover,
table.bundesliga tbody tr.zone-relegation:hover,
table.bundesliga tbody tr.zone-down:hover {
    filter: brightness(1.1);
}

/* Pokal-Icon links neben Teamnamen */
.icon-trophy {
    margin-right: 6px;     /* Abstand zum Logo */
    font-size: 16px;       /* etwas größer als Text */
    vertical-align: middle;
}

.icon-trophy {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700;
}

/* ===== LEGENDEN STYLING ===== */
.legend-wrapper {
    margin-top: 20px;
    text-align: center;
}

.legend span {
    display: inline-block;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
    text-shadow: 0 0 5px #00ffff;
    color: #0b0f3b;
}

/* Farben passend zu den Zonen */
.legend .cl { background-color: #00ffcc; }          /* Platz 1–4 */
.legend .el { background-color: #00bfff; }          /* Platz 5 */
.legend .ecl { background-color: #5dff00; }         /* Platz 6 */
.legend .relegation { background-color: #ffb300; }  /* Platz 16 */
.legend .down { background-color: #ff0033; }        /* Platz 17–18 */