html {
  height: -webkit-fill-available;
}

.flipped {
transform: rotateX(180deg);
}

.mobile-menu-active {
  transform: translateY(0) !important;
}

@media only screen and (max-width: 1200px) {

  .menu-list {
    display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 54vw;
/* border: solid blue; */
z-index: 10;
padding-left: 3vw;
  }

  .menu-item1 {
    flex: 60%  !important;
  }

  .menu-item3 {
    flex: 60% !important;
  }

  /* .menu-item {
    flex: 30%;
  } */

  .title-sub {
    /* display: none; */
    transform: translate(5px, 100%);
  }

  body {
    /* background-color: lightblue; */
  }

  .calendar-content {
    width: 50vw;
  }

  .impressum-content {
    width: 50vw;
  }

  .impressum-menu-background {
    width: 50vw;
  }

  .header {
  width: calc(100vw - 10vw);
  }

  .header-a {
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .menu-list {
    flex-wrap: wrap;
  }

  .menu-item {
  transform: scaleY(200%);
  font-size: 25px;
  transition: transform 0.25s ease;
  flex: 30%;
  margin-bottom: 10px;
  padding-top: 3px;
  }

  .projekte-arrow {
    transform: translateX(calc(100% + 18px));
  }
}

@media only screen and (max-width: 1000px) {
  .arrow-link {
    width: 30px;
  }
  .projekte-arrow {
    transform: translateX(calc(100% + 42px));
  }

  .menu-item1 {
    flex: 50%  !important;
  }

  .menu-item3 {
    flex: 50% !important;
  }

}


@media only screen and (max-width: 800px) {

  .header-a {
    font-size: 50px;
  }

  .header-b {
    padding-right: 0;
  }

  .title-sub {
    /* display: none; */
  }
}

@media only screen and (max-width: 700px) {

  .header-a {
    font-size: 40px;
  }
}






@media only screen and (max-width: 800px) {

  .menu-item1 {
      transform: scaleY(200%) !important;
      -webkit-transform: scaleY(2) !important;
  }

  .menu-item2 {
      transform: scaleY(200%) !important;
      -webkit-transform: scaleY(2) !important;
  }

  .menu-item3 {
      transform: scaleY(200%) !important;
      -webkit-transform: scaleY(2) !important;
  }

  .menu-item4 {
      transform: scaleY(200%) !important;
      -webkit-transform: scaleY(2) !important;
  }



  .menu-list {

width: 100%;
padding-left: 0vw;
  }



  .arrow-link {
    width: 70px;
  }

  .header {
    padding-left: 10px;
    flex-direction: column;
  }

  .header-a {
    padding-right: 3vw;
    /* backdrop-filter: blur(15px); */
    z-index: 4;
  }

  .header-b {
  transform: translateY(-180%);
  transition: transform 0.5s ease;
  /* backdrop-filter: blur(15px); */
  /* width: calc(100% - 10vw); */

  z-index: 3;
  }

  .header-blur {
    display: none;
  }

  .header-blur-mobile {
    display: block;
    /* border: solid yellow; */
    position: absolute;
    width: 100%;
    height: calc(100% + 50px);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    transition: transform 0.5s ease;
    transform: translateY(-60%);
    padding-top: -20px;
    top: -10px;

    z-index: 2;

    left: 0;
  }

  .header-blur-mobile-color {
    display: block;
    /* border: solid yellow; */
    position: absolute;
    width: 100%;
    height: calc(100% + 15px);
    /* backdrop-filter: blur(15px); */

    transition: transform 0.5s ease;
    transform: translateY(-60%);
    padding-top: -20px;
    top: -10px;

    background-color: #cce6de;
    opacity: 0.5;

    z-index: 1;
  }

  .blur-visible {
    transform: translateY(0) translateX(-3%) !important;
  }

  .mobile-menu-icon {
    display: block;
    color: var(--highlight);
    transition: transform 0.5s ease;
  }

  .calendar-content {
    padding-right: calc(10vw + 5px);
    z-index: 5;
    padding-left: 15px;
    width: 70vw;
  }

  .calendar-content p {
    font-size: 0.8em;
  }

  .calendar-menu {
    z-index: 6;
  }

  .news-titel {
    font-size: 1em;
  }


  .menu-item:hover {
    transform: scaleY(100%);
  }

  .arrow-spacer {
    width: 10vw;
  }



}


@media only screen and (max-width: 600px) {

  .menu-item {
    padding-right: 5px;
  }

  .calendar-menu {
    width: 10vw;
  }

  .calendar-text {
    font-size: 1em;
  }

  .impressum-menu {
      background-color: black;
      color: white;
      padding-right: 10px;
      padding-left: 10px;
      border-radius: 25px;
  }

  .impressum-content {
    font-size: 12px;
    width: 70vw;
  }


}


@media only screen and (max-width: 400px) {

.menu-item {
  font-size: 6vw;
}
}

/* @media only screen and (max-width: 300px) {

.menu-item {
  font-size: 6vw;
}
} */