body {
  font-family: Arial, sans-serif;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

#bracket {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 80vh;  /* Höhe des gesamten Brackets */
  position: relative;
  #background: lightblue;
}

.Round {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  xmargin-top: 60px;
  height: 100%;
  xwidth: 25%;
  background: lightyellow;
  margin-left: 10%;
}

.Match {
  display: flex;
  flex-direction: column; /* Teams untereinander */
  justify-content: space-between; /* Vergrößert den Abstand zwischen den Teams */
  align-items: center;
  xmargin-bottom: 20px; /* Abstand zwischen den Spielen */
  position: relative;

  #background: lightgrey;
}

/* Die Teams */
.Player {
  width: 200px;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
}

/* Vertikale Linie links von jedem Matchup */
.Match::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 2px;  /* Dünne vertikale Linie */
  height: 100%; /* Deckt den gesamten Container ab */
  background-color: #000;
  xtransform: translateX(-50%);
}

/* Horizontale Verbindung zwischen den Spielen */
.Match::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;  /* Breite der horizontalen Linie */
  height: 2px;  /* Dicke der horizontalen Linie */
  background-color: #000;
  xtransform: translateY(-50%);
}

.RoundHeader {
  font-weight:bold;
  position: absolute;
  top: 1px;
}

.Round_2 {
    #background: #337ab7 ;
    height: 25%;
    margin-bottom: 20%; /* Abstand zwischen den Spielen */
    margin-top: 20%; /* Abstand zwischen den Spielen */
}

.Round_3 {
    #background: #337ab7 ;
    height: 50%;
  margin-bottom: 50%; /* Abstand zwischen den Spielen */
  margin-top: 50%; /* Abstand zwischen den Spielen */
  }

.Round_4 {
    #background: #337ab7;
    height: 55%;
    margin-bottom: 75%; /* Abstand zwischen den Spielen */
    margin-top: 75%; /* Abstand zwischen den Spielen */
  }

/* Verbinden der horizontalen Linien mit den nächsten Matches */
#round-2 .matchup::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;  /* Breite der Linie */
  height: 8px;   /* Dicke der Linie */
  background-color: #000;
  transform: translateY(-50%);
}

/* Runden anpassen: Positionieren auf der halben Höhe zwischen den Runden */
#round-2 .matchup {
  position: absolute;
  top: 50%; /* Positioniert auf der halben Höhe der vorherigen Runde */
  transform: translateY(-50%); /* Verschiebt um die Hälfte der eigenen Höhe */
}

#round-3 .matchup {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#winner {
  margin-top: 120px;
  text-align: center;
}

#winner .team {
  font-weight: bold;
  font-size: 24px;
  background-color: #4CAF50;
  color: white;
}

.btn-score {
  margin-left: 205%;
  margin-top: -25%;
  text-align: center;
  font-weight: bold
}