/* Menu  © admotion*/

#menu {  z-index: 998;  }

.mod-menu__toggle-sub {display: none;}

#menu {position: fixed; top: 0; right: 0; width: 100%; height: 100dvh; background: var(--primary); padding: 80px 40px 40px; z-index: 999; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none;transform: translateX(100%); transition: 0.5s ease-in-out; }
#menu::-webkit-scrollbar { display: none; }
#menu.open {transform: translateX(0%);}

#mainmenu ul li a { color: var(--text); font-family: 'Chelsea Market'; display: block;}
#mainmenu ul ul li a { color: var(--text); font-family: 'Utopia'; font-weight: 700;}
#mainmenu #gross { padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--secondary);}
#mainmenu #gross ul li a { font-size: 24px; padding-bottom: 20px;}
#mainmenu #gross ul li a:hover { color: var(--secondary);}
#mainmenu #gross ul li.current > a { color: var(--secondary);}
#mainmenu #gross ul ul {margin-bottom: 20px;}
#mainmenu #gross ul ul li {list-style: none;}
#mainmenu #gross ul ul li a { font-size: 20px; padding: 5px 0;}


#mainmenu #klein ul li a { font-size: 20px; padding-bottom: 20px;}
#mainmenu #klein ul li a:hover { color: var(--secondary);}
#mainmenu #klein ul li.current a { color: var(--secondary);}



/* ----- Mainmenu Submenu Toggle ------ */
/* Parent LI */
#mainmenu .mod-menu .parent {  position: relative;}

/* Link + Toggle */
#mainmenu .mod-menu .parent > a {  padding-right: 2.5rem;}

/* Eigenes Toggle */
#mainmenu .mod-menu .parent::after { content: "+"; position: absolute; top: 0; right: 0; width: 2.5rem; height: 100%; text-align: right; font-size: 2rem; cursor: pointer; transition: transform 0.2s ease; z-index: 2;}

/* Offen */
#mainmenu .mod-menu .parent.is-open::after {  content: "–";}

/* Submenu */
#mainmenu .mod-menu .mod-menu__sub {  display: none;  padding-left: 1rem;}

/* Offen anzeigen */
#mainmenu .mod-menu .parent.is-open > .mod-menu__sub {  display: block;}




/* -------- Top Menü ---------- */
#topmenu {margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--secondary);}
#topmenu li a { color: var(--secondary); font-size: 16px; font-weight: 400;}
#topmenu li:nth-child(-n+2) a{ color: var(--text);}

#topmenu ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* --------- Hamburger Menu ----------- */
#menu-small {
  width: 65px;
  height: 46px;
  position: fixed; top: 5px; right: 20px; z-index: 10001;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#menu-small span {
  display: block;
  position: absolute;
  height: 2px;
  width: 30px;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 35px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#m-close {position: absolute; opacity: 1; bottom: 0;transition: .5s ease-in-out; width: 22px; margin-left: 5px;}
#menu-small.open #m-close {opacity: 0;}

#menu-small span:nth-child(1) {
  bottom: 20px;
}

#menu-small span:nth-child(2) {
  bottom: 10px; width: 20px;
}
#menu-small span:nth-child(3) {
  bottom: 0px;
}

#menu-small.open span:nth-child(1) { bottom: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-small.open span:nth-child(2) { opacity: 0;
}

#menu-small.open span:nth-child(3) { bottom: 10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


@media(min-width:768px) {
    #menu {width: 50%; }

}
@media(min-width:960px) {
    
}
@media(min-width:1250px) {
   
#menu {position: relative; top: auto; right: auto; width: auto; height: auto; background: transparent; padding: 0px; z-index: 999; transform: translateX(0%); overflow: visible; }

    #menu-small { display: none; }

     /*mainmenu gross*/
    #mainmenu { display: block; position: absolute; right: 0; }
    #mainmenu ul{text-align: right;}
    #mainmenu ul ul {text-align: left;}
    #mainmenu #gross { border: 0; padding-bottom: 0px; margin-bottom: 0;}
    #mainmenu #gross ul#mod-menu1 { display: flex; flex-direction: column; align-items: end;}
    #mainmenu #gross ul li { display: table; position: relative; padding-left: 20px;}
    #mainmenu #gross ul li::before { content: ""; width: 14px; height: 16px;  display: block;  background: var(--rot);  -webkit-mask: url("/images/dreieck-l.svg") no-repeat center; mask: url("/images/dreieck-l.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; position: absolute; right: -30px; top: 21px; transition: 0.2s;opacity: 0; }
    #mainmenu #gross ul li.current::before { content: ""; right: -25px; opacity: 1;}
    #mainmenu #gross ul li:hover::before { content: ""; right: -25px; opacity: 1;}
    #mainmenu #gross ul li:nth-child(1)::before { background: var(--rot);}
    #mainmenu #gross ul li:nth-child(2)::before { background: var(--lachs);}
    #mainmenu #gross ul li:nth-child(3)::before { background: var(--orange);}
    #mainmenu #gross ul li:nth-child(4)::before { background: var(--gruen);}
    #mainmenu #gross ul li:nth-child(5)::before { background: var(--violett);}
    #mainmenu #gross ul li:nth-child(6)::before { background: var(--secondary);}
    #mainmenu #gross ul li:nth-child(7)::before { background: var(--rot);}
    #mainmenu #gross ul li a { font-size: 40px; padding-bottom: 20px; display: inline-block; transition: 0.2s ease-out;}
    #mainmenu #gross ul li a:hover { color: var(--text); transform: translateX(-5px);}
    #mainmenu #gross ul li.current > a { color: var(--text);}

    /*mainmenu gross submenu*/
    #mainmenu #gross ul ul {position: absolute; margin: 0; padding: 20px 30px; border-radius: 10px;  background: url(/images/Muster/muster.jpg) no-repeat; background-size: cover; text-align: left; right: 100%; top: -2px; z-index: 10;}
    #mainmenu #gross ul ul::before { content: ""; width: 14px; height: 16px;  display: block;  background: var(--rot);  -webkit-mask: url("/images/dreieck-r.svg") no-repeat center; mask: url("/images/dreieck-r.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; position: absolute; right: -12px; top: 21px; z-index: 1; }
    #mainmenu #gross ul li:hover ul { display: block;}
    #mainmenu #gross ul ul li::before { content: none;}
    #mainmenu #gross ul ul li { padding: 0; white-space: nowrap;}
    #mainmenu #gross ul ul li a { color: var(--text); text-shadow: 0 0 6px rgba(0, 0, 0, 0.80); padding: 10px 0;}
    #mainmenu #gross ul ul li:hover::before {content: none; }
    #mainmenu #gross ul ul li.current > a { color: var(--primary);}


    #mainmenu #gross ul li:nth-child(1) { z-index: 10;}
    #mainmenu #gross ul li:nth-child(2) { z-index: 9;}
    #mainmenu #gross ul li:nth-child(3) { z-index: 8;}
    #mainmenu #gross ul li:nth-child(4) { z-index: 7;}
    #mainmenu #gross ul li:nth-child(5) { z-index: 6;}
    #mainmenu #gross ul li:nth-child(6) { z-index: 5;}
    #mainmenu #gross ul li:nth-child(7) { z-index: 4;}
    #mainmenu #gross ul li:nth-child(8) { z-index: 3;}
    #mainmenu #gross ul li:nth-child(9) { z-index: 2;}


    #mainmenu .mod-menu .parent::after {display: none;}
    #mainmenu .mod-menu .parent > a {padding-right: 0;}


    /*mainmenu klein*/
    #mainmenu #klein ul li a { transition: 0.2s ease-out;}
    #mainmenu #klein ul li a:hover { color: var(--secondary); transform: translateX(-5px);}

  
    /*topmenu*/
    #topmenu {display: flex; gap: 25px; border: 0; padding: 0; margin-bottom: 40px;}
    #topmenu ul {display: flex; gap: 25px;}
    #topmenu li a { font-size: 16px;}
    #topmenu li a:hover { color: var(--orange);}
    #topmenu li:nth-child(-n+2) a:hover { color: var(--rot);}

}



@media(min-width:1750px){
   #mainmenu #klein ul li a {font-size: 24px;}
}

@media(min-width:2150px){
  
}