@media screen and (min-width: 400px) {
  .header-inner {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    order: 1;
    justify-content: center;
    margin-bottom: 0px;
    max-height: 400px;
    background-position: 50% 30px;
    background-repeat: no-repeat;
    background-image: url("../images/header/freestyle.png");
    width: 100%; /* Standardmäßig volle Breite */
    max-width: 1501px; /* Hier deine gewünschte maximale Breite */
    background-size: cover;
    aspect-ratio: 16 / 9; /* Header behält immer das Bildformat bei */
    background-size: contain; /* Zeigt immer das ganze Bild */
    margin-left: auto; /* Drückt von links zur Mitte */
    margin-right: auto; /* Drückt von rechts zur Mitte */
  }
}

@media screen and (min-width: 1300px) {
  .header-inner {
    margin-top: 28px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    order: 1;
    justify-content: center;
    margin-bottom: 0px;
    max-height: 400px;
    background-position: 50% 30px;
    background-repeat: no-repeat;
    background-image: url("../images/header/freestyle.png");
    width: 1501px; /* Standardmäßig volle Breite */
    max-width: 1501px; /* Hier deine gewünschte maximale Breite */
    background-size: cover;
    aspect-ratio: 16 / 9; /* Header behält immer das Bildformat bei */

    margin-left: auto; /* Drückt von links zur Mitte */
    margin-right: auto; /* Drückt von rechts zur Mitte */
  }
}

.header {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 400px;
}

@media screen and (min-width: 400px) {
  .header {
    max-height: 150px;
  }
}

@media screen and (min-width: 800px) {
  .header {
    max-height: 200px;
  }
}

@media screen and (min-width: 1100px) {
  .header {
    max-height: 300px;
  }
}

@media screen and (min-width: 1300px) {
  .header {
    max-height: 400px;
  }
}