body {
  margin: 0;
  font-size:1vw;
}
h1,h2,h3,h4,h5,h6 {
  text-align: left;
  color: #0389c5;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f7c720;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.mobile {
  display: none;
}
ul.topnav li a:hover:not(.active) {
  background-color: #0389c5;
  color: #fff;
}

ul.topnav li a.active {background-color: #d50b7f; color: #fff}

ul.topnav li.right {float: right;}

.logo {
  background-image: url("../logo-musikschule-city-west.avif"), url("../musikschule-city-west.jpg");
  background-repeat: no-repeat;
  background-size: contain, contain;
  background-position: left top, right center;
  margin-bottom: 0;
  color: #0389c5;
  /*background-size: auto;*/
}
.logo + p {
  margin: auto;
  text-align: center
}

@media screen and (max-width: 64em) {
  .logo {
    background: none;
    margin-bottom: 0;
    /*background-size: auto;*/
  }
  .logo + p {
    margin: auto;
    text-align: center
  }

  body {
    font-size:4vw;
  }
  ul.topnav {
    display: none;
  }
  .mobile {
    display: block;
    text-align: right;
  }

  ul.topnav li.right,
  ul.topnav li {float: none;}
  * {
    max-width: 100%;
  }
}