@media (max-width: 1024px) { 
  /**======================HEADER======================**/
      #header{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    header {
      position: block;
      z-index: 1;
    }

    #divHeader{
      width: 100vw;
      position: block;
      z-index: 2;
    }

        #istServerAktiv{
      position: absolute;
      display: flex;
      flex-direction: row-reverse;
      top: 10px;
      right: 25px;
    }

    #imgServerAktivität{
        position: relative;
        top: 10px;
        height: 6vw;
        object-fit: contain;
        top: 15px;
    }

    #stringServerAktivität{
        text-align: right;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px 5px 30px 0;
        color: white;
        font-family: "Noto Sans";
        font-weight: 700;
    }

    #servername{
      font-size: 10vw;
      align-content: center;
      text-align: center;
      margin: 10px 0 0 0;
      color: var(--primary);
      color: white;
      margin-bottom: 2vw;
    }

    #logoServer{
      width: 20vw;
      object-fit: contain;
      margin: 22vw auto 0 auto;
      display: block;
    }


    #istServerAktiv{
      text-align: center;
      margin-top: 2vw;
      flex: 1;
    }
  


  /**======================TITLE======================**/

  #servernameUndAktivität{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 6vw 20px 0 20px;
  }

  /**======================SUBTITLE======================**/
  #playerCount {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5vw 0 5vw 0;
  margin-top: 6vw;
  /* This ensures it stays in normal flow beneath #header */
}

    #aktiveSpielerOnline{
        font-size: 6vw;
    }

    #totaleSpielerMöglich{
        font-size: 6vw;
    }

    #playercount{
        font-size: 6vw;
    }

    h3{
      font-size: 6vw;
    }

    h4{
      font-size: 4vw;
    }
  /**======================GRAPH======================**/
    #graphenTotal{
      display: block;
      margin: 0 3vw;
  }

  #BoxMainChart{
    border: 1vw solid var(--third);
    height: clamp(200px, 50vw, 600px);
    border-radius: 6%;
  }

  #capacityPercent{
    margin-bottom: 10vw;
  }
  /**======================SIDE GRAPH======================**/

#BoxSideChartONE {
  height: clamp(100px, 20vw, 500px);
  border: 1vw solid var(--third);
  width: clamp(250px, 60vw, 500px);
  justify-self: center;
  margin-bottom: 3vw;
}
#BoxSideChartTWO {
  height: clamp(100px, 20vw, 500px);
  border: 1vw solid var(--third);
  width: clamp(250px, 60vw, 500px);
  justify-self: center;
  margin-bottom: 3vw;
}
#BoxSideChartTHREE {
  height: clamp(100px, 20vw, 500px);
  border: 1vw solid var(--third);
  width: clamp(250px, 60vw, 500px);
  justify-self: center;
  margin-bottom: 3vw;
}
.titleChartSide {
  font-size: clamp(10px, 3vw, 20px);
  margin-left: 14vw;
}
.verhältnisPlayersPLUS {
  margin-right: 15vw;
  font-size: clamp(10px, 3vw, 20px);
}
.verhältnisPlayersMINUS {
  margin-right: 15vw;
   font-size: clamp(10px, 3vw, 20px);
}

#graphenSideBackgroundBox{
    position: absolute;
    width: 100vw;
    background-color: #3D3938;
    z-index: -1;
    height: clamp(425px, 88vw, 899px);
    top: 65vh;
}
/**======================SEITENENDE======================**/
#Illustrationseitenende{
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 10vw;
    margin-bottom: 10vw;
}
  /**======================FOOTER======================**/

  /**======================BACKGROUND======================**/

  #mobileTopBox {
    position: absolute;
    width: 100vw;
    background-color: #3D3938;
    z-index: -1;
    height: clamp(47px, 30vw, 1354px);
  }
}