/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
/*--------------------------- Standardfarben -------------------------------*/
/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/

.awardsbutton {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: 2px solid var(--col4);
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease; 
}

.awardsbutton a {
  color: var(--col1);
 cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease; 
}

.awardsbutton:hover a {
  color: var(--col4); 
}

.awardstitle {
float: left; 
  padding: 2px;
}


/* Nur normale Awards anzeigen (Klassen, die nicht mit 'player-' beginnen) */
.normalawards [class^="player-"] {
    display: none;
}

/* Nur Player Awards anzeigen (Klassen, die mit 'player-' beginnen) */
.playerawards [class^="player-"] {
    display: block;
}

/* Verstecke alle anderen Awards in den Player Awards */
.playerawards [class^="normal-"] {
    display: none;
}

.normal-awards{
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left;
}

.normal-awards i {
    max-width: 100%;  
    height: auto;
    font-size: 20px;
    color: #a56245;
}

.player-awardsnormal {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 0;
    box-sizing: border-box;
	margin-right: 6px;
}

.player-awardsnormal i {
    font-size: 20px;
    color: #a56245;
    display: block;
    height: 100%; /* Füllt die gesamte Höhe des Containers */
    width: 100%; /* Füllt die gesamte Breite des Containers */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    text-align: center;
}
/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
/*------------------------------- Eventfarben -------------------------------*/
/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
/*------------------------------ OSTERN Teilnehmer ------------------------------*/
.player-awardseaster i {
    display: flex;
	margin-right: 6px;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #e53e3e,#facc15,#84cc16,#3b82f6,#8b5cf6,#d946ef);
  background-size: 800% 800%;
  animation: rainbow-glow 20s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes rainbow-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/*------------------------------ OSTERN Top-Sammler ------------------------------*/
.player-awardseasterg {
  display: flex;
  justify-content: center;
  align-items: center;     
  border: 2px solid #a56245; /* feste Farbe */
  height: 35px;
  width: 35px;
  padding: 5px;
  float: left; 
  font-size: 20px;
	margin-right: 6px;
}

.icon-glow {
  background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet);
  background-size: 400% 400%;
  animation: shimmer 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1;
}

@keyframes shimmer {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
/*------------------------------ Sonderfarben ------------------------------*/
/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
.normal-spawards.bronze i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #cd7f32, #b87333, #a05c2b, #cd7f32, #b87333, #a05c2b, #cd7f32);
  background-size: 400% 400%;
  animation: bronzeShine 5s linear infinite;
  -webkit-background-clip: text;
    background-clip: text;
  color: transparent;
}

@keyframes bronzeShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.normal-spawards.silver i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #c0c0c0, #dcdcdc, #a9a9a9, #808080, #c0c0c0, #dcdcdc, #a9a9a9);
  background-size: 400% 400%;
  animation: silverShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes silverShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.normal-spawards.gold i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #ffd700, #ffec8b, #f0e68c, #ffd700, #ffec8b, #f0e68c, #ffd700);
  background-size: 400% 400%;
  animation: goldShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes goldShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.normal-spawards.platin i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #e5e4e2, #d4d4d4, #b0c4de, #add8e6, #e5e4e2, #d4d4d4, #b0c4de, #add8e6);
  background-size: 400% 400%;
  animation: platinumShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes platinumShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
/*--------------------SPIELER Sonderfarben ------------------------------*/
/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
.player-spawards.bronze i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #cd7f32, #b87333, #a05c2b, #cd7f32, #b87333, #a05c2b, #cd7f32);
  background-size: 400% 400%;
  animation: bronzeShine 5s linear infinite;
  -webkit-background-clip: text;
    background-clip: text;
  color: transparent;
}

@keyframes bronzeShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.player-spawards.silver i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #c0c0c0, #dcdcdc, #a9a9a9, #808080, #c0c0c0, #dcdcdc, #a9a9a9);
  background-size: 400% 400%;
  animation: silverShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes silverShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.player-spawards.gold i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #ffd700, #ffec8b, #f0e68c, #ffd700, #ffec8b, #f0e68c, #ffd700);
  background-size: 400% 400%;
  animation: goldShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes goldShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.player-spawards.platin i {
    display: flex;
    justify-content: center;
    align-items: center;     
    border: 2px solid #a56245;
    height: 35px;
    width: 35px;
    padding: 5px;
    float: left; 
  font-size: 20px;
  transition: color 0.3s; 
  background: linear-gradient(45deg, #e5e4e2, #d4d4d4, #b0c4de, #add8e6, #e5e4e2, #d4d4d4, #b0c4de, #add8e6);
  background-size: 400% 400%;
  animation: platinumShine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes platinumShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}