@media screen and (max-width: 1200px), (max-device-width: 1200px) {
  .topnav {
    padding-left: 0rem;
  }
}

@media screen and (max-width: 830px), (max-device-width: 830px) {

  .topnav {
    background: #dadada;
    width: 100%;
  }

  .topnav a,
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    color: var(--sb_rot);
    background: none;
    display: block;
    float: right;
    font-size: 1.25rem;
  }

  .topnav a.icon:hover {
    color: var(--sb_rot);
  }

  .topnav a,
  .dropdown .dropbtn {
    background: none;
  }
}

@media screen and (max-width: 830px), (max-device-width: 830px) {

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
  }

  .topnav.responsive a {
    display: block;
    float: none;
    text-align: left;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
    width: 100%;
  }

  /* Trennlinien für die Hauptmenüpunkte */
  .topnav.responsive > a:not(.icon),
  .topnav.responsive .dropdown {
    border-bottom: 1px solid #b0b0b0;
  }

  /* Standard-Hover für alle Dropdowns */
  .topnav.responsive .dropdown:hover .dropbtn {
    background-color: #555555;
    color: #fff;
  }

  /* Jugendzentrum */
  .topnav.responsive .nav-jugend:hover .dropbtn {
    background-color: var(--jugendbereich);
    color: #fff;
  }

  .topnav.responsive .nav-jugend .dropdown-content {
    background-color: var(--jugendbereich);
  }

  /* Hort */
  .topnav.responsive .nav-hort:hover .dropbtn {
    background-color: var(--hort);
    color: #fff;
  }

  .topnav.responsive .nav-hort .dropdown-content {
    background-color: var(--hort);
  }


  /* Standard-Submenüs aller anderen Dropdowns */
  .topnav.responsive .dropdown:not(.nav-jugend) .dropdown:not(.nav-hort) .dropdown-content {
    background-color: var(--sb_rot);
  }
}