/* Mobiles Menü als Vollbild-Überlagerung. Gilt nur bis 991 px, Desktop bleibt unberührt. */
@media (max-width: 991px) {

  /* Die Hülle selbst: über allem, ganze Fläche, eigener Bildlauf. */
  #nav-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Porto deckelt .mobile-nav-wrap auf eine feste Höhe mit eigenem Bildlauf.
     Das schneidet im Vollbild den letzten Menüpunkt ab, deshalb hier aufgehoben. */
  #nav-panel > .container,
  #nav-panel .mobile-nav-wrap,
  #nav-panel .menu-wrap {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Kopfleiste mit Logo und Schließkreuz, per JS eingesetzt. */
  .hm-menue-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    /* Exakt die Farbe des Hinweisbalkens über dem Kopf der Startseite (gemessen: rgb(16,55,133)).
       Das Logo-JPG hat denselben Grund (#103786), dadurch verschwindet seine Kante. */
    background: #103785;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .hm-menue-kopf img { height: 66px; width: auto; display: block; }
  .hm-menue-schliessen {
    appearance: none;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
  }
  .hm-menue-schliessen svg { width: 34px; height: 34px; display: block; }

  /* Die Liste selbst */
  #nav-panel ul.mobile-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 1.4rem 1rem 3rem !important;
    background: transparent !important;
    border: 0 !important;
  }
  #nav-panel ul.mobile-menu > li {
    border: 0 !important;
    border-bottom: 1px solid #e6ebf2 !important;
    background: transparent !important;
    position: relative;
  }
  #nav-panel ul.mobile-menu > li:last-child { border-bottom: 0 !important; }

  /* Hauptpunkte: rund dreimal so groß wie vorher (11,7 px), zentriert.
     Passt ein einzelnes Wort nicht in die Zeile, verkleinert das Skript genau diesen Punkt. */
  #nav-panel ul.mobile-menu > li > a {
    display: block !important;
    text-align: center !important;
    font-size: var(--hm-menue-groesse, clamp(1.75rem, 9vw, 2.4rem)) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.005em !important;
    color: #1C5FA8 !important;
    padding: 0.72rem 1.3rem !important;
    border: 0 !important;
    text-decoration: none !important;
    overflow-wrap: break-word;
  }
  /* Punkte mit Haken brauchen rechts Platz; links dasselbe, damit der Text mittig bleibt. */
  #nav-panel ul.mobile-menu > li.has-sub > a { padding-left: 3.4rem !important; padding-right: 3.4rem !important; }
  /* Porto hinterlegt den aktiven Punkt mit einem Balken; hier nur die Farbe. */
  #nav-panel ul.mobile-menu li > a,
  #nav-panel ul.mobile-menu li > a:hover,
  #nav-panel ul.mobile-menu li.current-menu-item > a { background: none !important; box-shadow: none !important; }
  #nav-panel ul.mobile-menu > li.current-menu-item > a,
  #nav-panel ul.mobile-menu > li > a.current { color: #d81f26 !important; }

  /* Der große Haken rechts für aufklappbare Punkte. */
  #nav-panel ul.mobile-menu > li > .arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 3.4rem !important;
    /* Höhe setzt das Skript auf die Höhe der Titelzeile: sonst wandert der Haken
       bei geöffnetem Untermenü in die Mitte der Unterpunkte. */
    height: auto !important;
    min-height: 3.4rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none !important;
    border: 0 !important;
  }
  #nav-panel ul.mobile-menu > li > .arrow::before,
  #nav-panel ul.mobile-menu > li > .arrow::after { content: none !important; }
  #nav-panel ul.mobile-menu > li > .arrow svg {
    width: 30px;
    height: 30px;
    display: block;
    fill: none;
    stroke: #1C5FA8;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
  }
  #nav-panel ul.mobile-menu > li.hm-offen > .arrow svg { transform: rotate(180deg); }

  /* Untermenü: geschlossen, öffnet mit weichem Ablauf. */
  #nav-panel ul.mobile-menu ul.sub-menu {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f2f6fb !important;
    border: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  #nav-panel ul.mobile-menu > li.hm-offen > ul.sub-menu { max-height: 1400px; }
  #nav-panel ul.mobile-menu ul.sub-menu li { border: 0 !important; background: transparent !important; }
  #nav-panel ul.mobile-menu ul.sub-menu li:first-child { padding-top: 0.5rem; }
  #nav-panel ul.mobile-menu ul.sub-menu li:last-child { padding-bottom: 0.5rem; }
  #nav-panel ul.mobile-menu ul.sub-menu a {
    display: block !important;
    text-align: center !important;
    font-size: clamp(1.05rem, 4.6vw, 1.3rem) !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: #2c3e50 !important;
    padding: 0.62rem 1.2rem !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  /* Solange das Menü offen ist, darf die Seite dahinter nicht mitscrollen. */
  html.hm-menue-offen, body.hm-menue-offen { overflow: hidden !important; }
}

@media (min-width: 992px) {
  .hm-menue-kopf { display: none !important; }
}