/* Eigene Anpassungen für das Menü */
body {
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #007bff;
}

.navbar-brand {
    color: white;
}

.navbar-nav .nav-link {
    color: white;
}

.navbar-toggler {
    border-color: white;
}

.navbar-toggler-icon {
    background-color: white;
}

.block-blau   { background-color: #9cc2e5; }
.block-orange { background-color: #f4b083; }
.block-gruen  { background-color: #a8d08d; }
.block-rosa   { background-color: #ff99ff; }

/* Die 'Nr.' und 'VS' Zellen kleiner machen */
.nr-column, .done-column, .rest-column, .vs-column {
    width: 18px;
    text-align: center;
}

/* Die 'Name' Zellen größer machen */
.name-column {
    width: 50%;
    text-align: center;
    font-size: 18px;
}

/* Einheitliche Schriftgröße */
.nr-column, .done-column, .rest-column, .name-column, .vs-column, .pkt-column, .platz-column, .diff-coulmn, .platz-column {
    font-size: 18px;
    text-align: center;
}

/* VS-Zellen (falls leer) trotzdem gut sichtbar */
td {
    text-align: center;
}

th {
    text-align: center;
}

/* Bracket Styles */
.bracket-wrapper {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    margin-top: 40px;
    overflow-x: auto; /* Falls es zu breit wird */
    padding-bottom: 40px;
}

.round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
}



.round-title {
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
}

.matches {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Increase the gap to create more space */
}

.match {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

/* Linienverbindung zwischen den Partien */
.match-final::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 4px;
    background-color: #ccc;
}

.match-qf {
    position: relative;
}

.match-qf::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* Rechts außen */
    transform: translateY(-50%); /* Vertikal zentrieren */
    width: 40px;
    height: 4px;
    background-color: #ccc;
}


/* Viertelfinale Match mit Info */
.match-qf .match-info {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    text-align: center;
    border: 2px solid #ccc;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.match-qf .match-players {
    background-color: #fff;
    padding: 10px;
    border-radius: 0 10px 10px 0;
    text-align: center;
    border: 2px solid #ccc;
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: none;
}

/* Halbfinale: Nur Spielernamen */
.match-sf .match-players {
    background-color: #fff;
    padding: 95px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #aaa;
    width: 500px; /* Doppelt so groß wie Viertelfinale */
    display: flex;
    flex-direction: column;
    height: 244px;
    margin-right: 40px;
    margin-left: 40px;
}



.match-final {
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center;     /* Zentriert den Inhalt vertikal */
    height: 244px;           /* Höhe des Containers */
    
}

.match-final .match-player {
    background-color: #f5f5f5;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #888;
    text-align: center;
    width: 500px; /* Doppelt so groß wie Viertelfinale */
    display: flex; /* Flexbox hinzufügen für vertikale Zentrierung */
    justify-content: center; /* Stellt sicher, dass der Text horizontal zentriert wird */
    align-items: center; /* Stellt sicher, dass der Text vertikal zentriert wird */
    font-weight: bold; /* Optional, wenn du die Namen fett machen möchtest */
    height: 80px;

}


/* Optional: Spieler-Namen fett */
.match-players > div,
.match-info > div,
.match-final .match-player {
    font-weight: bold;
}

/* Die 'VS' Zellen im Bracket */
.match-players > div:not(:last-child) {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

/* Zur Vermeidung von Layout-Problemen */
.match, .match-info, .match-players {
    min-width: 160px;
}