:root {
--body-color: #887874;
--container-color: #124554;
--text-color: #c6b9b8;
--nav-color: #93979d;
--highlite: whitesmoke;
}

body {
    font-family: Arial, sans-serif;
    background-color: #333;
    color: white;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    margin: 0;
}

.bracket_winner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 10px;
}
.bracket_looser {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 10px;
}
.ergebnis {
    color: red;
    text-align: end;
}

/* ====== Gewinner Runde ======= */
.spiel_1 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
.spiel_2 {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
}
.spiel_3 {
    grid-column: 1 / 3;
    grid-row: 6 / 8;
}
.spiel_4 {
    grid-column: 1 / 3;
    grid-row: 8 / 10;
}
.spiel_5 {
    grid-column: 4 / 6;
    grid-row: 3 / 5;
}
.spiel_6 {
    grid-column: 4 / 6;
    grid-row: 6 / 8;
}
.spiel_7 {
    grid-column: 7 / 9;
    grid-row: 4 / 7;
}
.spiel_8 {
    grid-column: 10 / 12;
    grid-row: 4 / 7;
}
.spiel_9 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
.spiel_10 {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
}
.spiel_11 {
    grid-column: 4 / 6;
    grid-row: 2 / 4;
}
.spiel_12 {
    grid-column: 4 / 6;
    grid-row: 4 / 6;
}
.spiel_13 {
    grid-column: 7 / 9;
    grid-row: 3 / 5;
}
.spiel_14 {
    grid-column: 10 / 12;
    grid-row: 3 / 5;
}



.spiel_1, .spiel_2, .spiel_3, .spiel_4, .spiel_5, .spiel_6, .spiel_7, .spiel_8 {
    background-color: #444;
    border-radius: 5px;
    text-align: center;    
}

.halbfinale {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 4 / 7;
        grid-row: 1;
        background-color: var(--container-color);
}
.round_1 {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 1 / 4;
        grid-row: 1;
        background-color: var(--container-color);
}
.a_Finale {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 7 / 10;
        grid-row: 1;
        background-color: var(--container-color);
}
.Finale {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 10 / 13;
        grid-row: 1;
        background-color: var(--container-color);
}

/* ========  VERLIERRERUNDE ========== */
.spiel_9, .spiel_10, .spiel_11, .spiel_12, .spiel_13, .spiel_14 {
    background-color: #444;
    border-radius: 5px;
    text-align: center;    
}
.looser_round_1 {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 1 / 4;
        grid-row: 1;
        background-color: var(--container-color);
    }    
.looser_round_2 {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 4 / 7;
        grid-row: 1;
        background-color: var(--container-color);
}
.looser_round_3 {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 7 / 10;
        grid-row: 1;
        background-color: var(--container-color);
}
.looser_halbfinale {
    justify-content: center;
    align-items: center;
    text-align: center;
        grid-column: 10 / 13;
        grid-row: 1;
        background-color: var(--container-color);
}