/* ============================================================
   easyIT Navigation – CSS3Menu-Optik, technisch konsolidiert
   ============================================================ */
.horizontal-nav{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:42px;
  padding:0 clamp(14px,2.5vw,38px);
  background:linear-gradient(180deg,#fff,#eef6fc);
  border-top:1px solid rgba(255,255,255,.3);
  border-bottom:2px solid var(--gold,#ffd500);
  overflow:visible;
}

ul#css3menu0,
ul#css3menu0 ul{
  margin:0;
  padding:0;
  list-style:none;
}

ul#css3menu0{
  position:relative;
  z-index:999;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  width:auto;
  border:1px solid #5f5f5f;
  border-radius:5px;
  background:#dedede;
}

ul#css3menu0 li{
  position:relative;
  margin:0;
  padding:0;
  white-space:nowrap;
}

ul#css3menu0 > li{
  display:flex;
  align-items:stretch;
}

ul#css3menu0 .menu-entry{
  display:flex;
  align-items:stretch;
}

ul#css3menu0 .menu-link,
ul#css3menu0 .submenu-button{
  box-sizing:border-box;
  min-height:40px;
  border:0;
  border-left:1px solid #c0c0c0;
  border-radius:0;
  background-color:#005aa9;
  background-image:url("../../img/css3menu0/mainbk.png");
  background-repeat:repeat;
  background-position:0 0;
  color:#fff;
  font:400 14px "Trebuchet MS",Arial,sans-serif;
  line-height:20px;
  text-decoration:none;
  text-shadow:#fff 0 0 1px;
}

ul#css3menu0 .menu-link{
  display:flex;
  align-items:center;
  padding:10px 12px;
}

ul#css3menu0 .submenu-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:8px 8px 8px 2px;
  border-left:0;
  cursor:pointer;
}

ul#css3menu0 > li:first-child > .menu-link,
ul#css3menu0 > li:first-child > .menu-entry > .menu-link{
  border-left:0;
  border-radius:5px 0 0 5px;
}

ul#css3menu0 > li:last-child > .menu-link,
ul#css3menu0 > li:last-child > .menu-entry > .submenu-button{
  border-radius:0 5px 5px 0;
}

ul#css3menu0 li:hover > .menu-link,
ul#css3menu0 li:hover > .menu-entry > .menu-link,
ul#css3menu0 li:hover > .menu-entry > .submenu-button,
ul#css3menu0 li:focus-within > .menu-link,
ul#css3menu0 li:focus-within > .menu-entry > .menu-link,
ul#css3menu0 li:focus-within > .menu-entry > .submenu-button,
ul#css3menu0 li.is-open > .menu-entry > .menu-link,
ul#css3menu0 li.is-open > .menu-entry > .submenu-button,
ul#css3menu0 li.is-active > .menu-link,
ul#css3menu0 li.is-active > .menu-entry > .menu-link{
  background-color:#ffd500;
  background-position:0 100px;
  color:#000;
}

ul#css3menu0 .submenu-panel{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  z-index:1000;
  min-width:210px;
  padding-top:1px;
}

ul#css3menu0 li:hover > .submenu-panel,
ul#css3menu0 li:focus-within > .submenu-panel,
ul#css3menu0 li.is-open > .submenu-panel{
  display:block;
}

ul#css3menu0 .submenu{
  min-width:210px;
  padding:4px 10px 10px;
  border:1px solid #d4d4d4;
  border-radius:6px;
  background:#fff;
  box-shadow:3.5px 3.5px 5px rgba(0,0,0,.55);
}

ul#css3menu0 .submenu li{
  display:block;
  margin:6px 0 0;
}

ul#css3menu0 .submenu .menu-entry{
  width:100%;
}

ul#css3menu0 .submenu .menu-link,
ul#css3menu0 .submenu .submenu-button{
  min-height:32px;
  border:0;
  background:#fff;
  background-image:none;
  color:#000;
  font:400 14px Tahoma,Arial,sans-serif;
  text-shadow:none;
}

ul#css3menu0 .submenu .menu-link{
  flex:1;
  padding:6px 8px;
}

ul#css3menu0 .submenu .submenu-button{
  min-width:30px;
  padding:5px;
  color:#555;
}

ul#css3menu0 .submenu li:hover > .menu-link,
ul#css3menu0 .submenu li:hover > .menu-entry > .menu-link,
ul#css3menu0 .submenu li:hover > .menu-entry > .submenu-button,
ul#css3menu0 .submenu li:focus-within > .menu-link,
ul#css3menu0 .submenu li:focus-within > .menu-entry > .menu-link,
ul#css3menu0 .submenu li:focus-within > .menu-entry > .submenu-button,
ul#css3menu0 .submenu li.is-open > .menu-entry > .menu-link,
ul#css3menu0 .submenu li.is-open > .menu-entry > .submenu-button,
ul#css3menu0 .submenu li.is-active > .menu-link,
ul#css3menu0 .submenu li.is-active > .menu-entry > .menu-link{
  background:#f2f2f2;
  color:#555;
}

/* Untermenüs ab Ebene 3 öffnen seitlich. */
ul#css3menu0 .submenu-panel .submenu-panel{
  left:100%;
  top:-5px;
  padding-top:0;
  padding-left:2px;
}

/* Der letzte Hauptmenüpunkt richtet sein Untermenü rechts aus. */
ul#css3menu0 > li:last-child > .submenu-panel{
  right:0;
  left:auto;
}

/* Alle tieferen Ebenen des letzten Hauptmenüpunkts öffnen nach links. */
ul#css3menu0 > li:last-child .submenu-panel .submenu-panel{
  right:100%;
  left:auto;
  padding-right:2px;
  padding-left:0;
}

ul#css3menu0 a:focus-visible,
ul#css3menu0 button:focus-visible{
  position:relative;
  z-index:2;
  outline:3px solid #ffbf47;
  outline-offset:-3px;
}

@media screen and (max-width:1050px){
  .horizontal-nav{
    display:none;
    min-height:0;
    padding:8px 10px;
    background:#005aa9;
  }

  .horizontal-nav.is-open{display:block}

  ul#css3menu0{
    display:block;
    width:100%;
  }

  ul#css3menu0 > li,
  ul#css3menu0 .menu-entry{
    display:flex;
    width:100%;
  }

  ul#css3menu0 > li{
    flex-direction:column;
    white-space:normal;
  }

  ul#css3menu0 .menu-link{
    flex:1;
  }

  ul#css3menu0 > li > .menu-link,
  ul#css3menu0 > li > .menu-entry > .menu-link,
  ul#css3menu0 > li > .menu-entry > .submenu-button{
    border-radius:0;
  }

  ul#css3menu0 > li:first-child > .menu-link,
  ul#css3menu0 > li:first-child > .menu-entry > .menu-link{
    border-radius:5px 0 0 0;
  }

  ul#css3menu0 > li:first-child:not(.has-submenu) > .menu-link{
    border-radius:5px 5px 0 0;
  }

  ul#css3menu0 > li:last-child > .menu-link{
    border-radius:0 0 5px 5px;
  }

  ul#css3menu0 > li:last-child.has-submenu > .menu-entry > .menu-link{
    border-radius:0;
  }

  ul#css3menu0 > li:last-child.has-submenu > .menu-entry > .submenu-button{
    border-radius:0 0 5px 0;
  }

  ul#css3menu0 .submenu-panel,
  ul#css3menu0 > li:last-child > .submenu-panel,
  ul#css3menu0 .submenu-panel .submenu-panel,
  ul#css3menu0 > li:last-child .submenu-panel .submenu-panel{
    position:static;
    width:100%;
    min-width:0;
    padding:0;
  }

  /* Auf Touch-Geräten nur per Schaltfläche öffnen, nicht dauerhaft durch Hover. */
  ul#css3menu0 li:hover > .submenu-panel,
  ul#css3menu0 li:focus-within > .submenu-panel{
    display:none;
  }

  ul#css3menu0 li.is-open > .submenu-panel{
    display:block;
  }

  ul#css3menu0 .submenu{
    width:auto;
    min-width:0;
    margin:0;
    padding:4px 10px 10px 18px;
    border:0;
    border-left:4px solid #ffd500;
    border-radius:0;
    box-shadow:none;
  }

  ul#css3menu0 .submenu .menu-link,
  ul#css3menu0 .submenu .submenu-button{
    min-height:42px;
  }
}

@media (prefers-reduced-motion:reduce){
  ul#css3menu0 *{scroll-behavior:auto!important}
}
