/* ----------------------- */
/* ---   menustyle.css --- */
/* ----------------------- */
@media screen{
#grayout{
  position:fixed;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  background-color:black;
  opacity:0.5;
  transition: background-color 500ms ease-in-out;
}
.sticky{
  position:fixed;
  top:0;
  width: auto; /*100%;*/
  height:auto; /*test für footer*/
}
.sticky + .content{
  padding-top: 60px;
}
.hamburg-container{
  position:sticky;
}

#nav .active {
  color:crimson;
  background-color:silver; /*lightgrey;*/
  text-decoration:none;
  font-size:120%;
  margin:0;
}
#nav .active:hover{
  background-color: #2581DC;
}

.clearfix::after{content:"";display:block;clear:both}

a.link, a.no-underline {
  text-decoration: none !important;
  border: 0;
}

#nav a{
  display:block;
  text-decoration:none !important;
  color:white;
  width:100%;
  font-size:120%;
  margin:0 !important;
}

#nav li a{
  display:block;
  float:left;
  padding-top:0;
  padding-bottom:0;
  padding-left:20px;
  padding-right:20px;
  line-height:40px;
  margin:0 !important;
  text-decoration: none !important;
}

nav{
  z-index: 9000;
  position: sticky;
  top: 0;
  background: silver;
  height:40px;
}
/* test 27.08.24 */
#nav li {
  white-space:nowrap;
}

#nav ul li{
  z-index:9000;
  margin:0 !important;
  text-decoration: none !important;
}

#nav ul li ul li{
  width:100%;
  height:auto;
  z-index:9000;
  margin:0 !important;
}

.nav-dropdown{
  position:absolute;
  display:none;
  z-index:9000;
  box-shadow:0 3px 12px rgba(0, 0, 0, 0.15);
  top:40px;
}
.sub-dropdown{
  position:absolute;
  display:none;
  z-index:9000;
  top:0;
  left:100%;
}
.main-menu.has_children > a:after{
  content:'  ▾';
  font-weight:bold;
}
.main-item.show:not(:only-child):after{
  content:'  ▴';
  font-weight:bold;
}
.sub-menu.has_children > a:after{
  content:'  ▸';
  font-weight:bold;
}
.sub-item.show:not(:only-child):after{
  content:'  ◂';
  font-weight:bold;
}
}
@media screen and (min-width: 1220px){
  /* --- large screens --- */

  html,body{font-size: 100%}
  #nav ul li a:hover,
  #nav ul li ul li a:hover{
    background-color:#2581DC;
    cursor:pointer;
  } 
  #nav .online-termine {
    background-color: red;
  }
  #nav .test > a:hover{
    background-color:#2581DC;
  }
  .main-item.selected:not(.active),
  .sub-item.selected:not(.active) {
    color:black;
    background-color:lightgray;
    text-decoration:none
  }
  .main-item.selected:hover,
  .sub-item.selected:hover {
    background-color:#2581DC;
    cursor:pointer
  }
  .main-menu,
  .sub-menu,
  .sub-sub-menu {
    float:left;
    position:relative;
		width:auto;
    text-decoration: none !important;
  }
  .sub-menu,
  .sub-sub-menu {
    background-color:silver;
    border:1px solid #f1f1f1
  }  

  .hr-1,
  .hr-2,
  .hr-3{
    display:none;
  }
}
@media screen and (max-width: 1212px){
  /* --- small screens --- */
  .main-item:hover,
  .main-item.focus,
  .main-item.selected:hover,
  .main-item.active:hover,
  .main-item.selected.show:hover,
  #nav .main-item.selected:not(.active):hover,
  #nav .sub-item.selected:not(.active):hover,
  .sub-item:hover,
  .sub-item.focus:hover,
  .sub-item.selected:hover,
  .sub-item.selected.show:hover,
  .sub-item.active:hover,
  .sub-item.show:hover,
  .sub-sub-item:hover,
  .sub-sub-item.focus:hover,
  .sub-sub-item.active:hover,
  .sub-sub-item.selected:hover{
    background-color:#2581DC;
  }
  #nav > li:active{
    background-color: green;
  }
  #nav .main-item.selected:not(.active),
  #nav .sub-item.selected:not(.active){
    background-color:lightgrey;
    text-decoration:none;
  }
  .sub-menu.has_children > a:after{
    content:'  ▾';
    font-weight:bold;
  }
  .sub-item.show:not(:only-child):after{
    content:'  ▴';
    font-weight:bold;
  }
  .hamburg{
    float: none;
    position: relative;
    display: flex;
    background:silver;
    width:40px;
    height:40px;
    margin-left:0%;
    margin-right:auto;
    border-radius:2px;
    transition:border-radius .5s;
    justify-content:center;
    align-items:center;
  }
  .hamburg:hover{
    background-color: rgb(85,119,174);
    cursor:pointer;
  }
  .nav-list{
    position:absolute;
    left:-100%;
    transition:all .5s ease-in-out;
    height:auto;
    min-height:auto;
    background-color:silver;
    border:1px solid #f1f1f1;
    overflow-y:auto;
  }
  #nav ul li{
    float: none;
    /*border-bottom:1px solid #f1f1f1; testweise rausgenommen*/
  }
  #nav li{
    display: block;
  }
  #nav li a{
    float: none
  }
  .main-item{
    left:1em;
    text-decoration: none !important;
  }
  /*
  .sub-item{
    padding-left:40px;
  }
  */
  .sub-item{
    left:2em;
  }
  .sub-sub-item{
    left:3em;
  }
  .nav-dropdown{
    height:auto; /*for test */
    width:auto; /*100%;*/
    background-color:silver;
    border-bottom:1px solid #f1f1f1;
    transition: background-color 500ms ease-in-out;
    margin-left: 2em; /*test*/
  }
  .sub-dropdown{
    height:auto; /*only for test */
    width:auto; /*100%;*/
    background-color:silver;
    border-bottom:1px solid #f1f1f1;
    transition: background-color 500ms ease-in-out;
    margin-left: 2em; /*test*/
  }
  .main-menu,.test{
    border-bottom:1px solid #f1f1f1;
  }
  .sub-menu{
    border-left:1px solid #f1f1f1;
    border-bottom:1px solid #f1f1f1;
    background-color:silver;
  }
  .sub-menu:first-child{
    border-top:1px solid #f1f1f1;
  }
  .sub-menu:last-child{
    border-bottom: 0;
  }
  .sub-sub-menu{
    border-top:1px solid #f1f1f1;
    border-left:1px solid #f1f1f1;
    border-bottom:1px solid #f1f1f1;
    background-color:silver;
  } 
  .sub-sub-menu:last-child{
    border-bottom: 0;
  }
  .nav-dropdown{
    position: sticky;
    top: 0;
  } 
  .sub-dropdown{
    position:static;
    display:none;
    z-index:2;
    box-shadow:0 3px 12px rgba(0, 0, 0, 0.15);
  }
  nav.open ul{
    opacity:1;
    left:0;
  }
  .main-menu.test {
    border-bottom:1px solid #f1f1f1;
    background-color: red;    
  }
  .line {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:3px;
    background-color:white;
    padding:0;
    transition:all .25s ease-in-out;
  }
  .line:nth-child(1){
    background-color:white;
    transform:translateY(calc(-50% - 10px));
  }
  .line:nth-child(3){
    background-color:white;
    transform:translateY(calc(-50% + 10px));
  }
  .hamburg.checked .line:nth-child(1){
    transform:translateY(-50%) rotate(-45deg);
  }
  .hamburg.checked .line:nth-child(2){
    opacity:0;
  }
  .hamburg.checked .line:nth-child(3){
    transform:translateY(-50%) rotate(45deg);
  }
  .hr-1{
    display:block;
    margin-left: 0;
    border-color: green;
  }
  #nav .hr-2{
    display:block;
    margin-left:-4em;
    border-color: yellow;
  }
}