/*******************************************************************************
/
/ CRC 1333 MAX MEGA MENU: 
/ komplettes Styling, Desktop, Mobil
/ Ausgelagert aus style.css am 19.12.2025, JH
/
********************************************************************************/


/******************************************************************************/ 
/*** HEADER G.F. 
/******************************************************************************/ 
/*
.gb-menu-toggle {
  display: none !important;
}*/

/* GeneratePress Mobile Toggle vollstaendig und barrierefrei entfernen */
button.menu-toggle,
.menu-toggle {
    display: none !important;
}

/******************************************************************************/ 
/*** MEGA MAX MENUE  CSS optimiert, Test 3.12.2025 ***/ 
/******************************************************************************/ 

/* HAUPTMENUE PRIMARY */
#mega-menu-wrap-primary #mega-menu-primary {
  padding-left: 10px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu,
#sticky-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
  margin-top: 0px;
}

/* MEGA MENU RESPONSIVE STYLES */
@media (max-width: 1279px) and (min-width: 1024px) {
  /*
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-size:0.8rem;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0 15px 0 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-183.mega-menu-item {
    margin: 0 0 0 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    margin: 0 0 0 3px;
  }
  */
}

@media (max-width: 768px) {
  #mega-menu-wrap-secondary .mega-menu-toggle {
    display: none;
  }
}

/* MAXMEGAMENU – DESKTOP STYLE */
@media (min-width: 1024px) {

  /* Hauptmenü: Grundstil */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    background: none;
    line-height: 36px;
    height: 45px;
    padding: 0 10px;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item {
    padding: 5px 0 0 0;
    position: relative;
  }

  /* Aktiver Menüpunkt */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: none;
    color: white;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-thickness: 2.3px;
    text-underline-offset: 8px;
    text-decoration-color: #C9DEEE;
  }

  /* Hover-Effekt (auch für aktive Menüpunkte) */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover {
    background: #FFF;
    color: #055199;
    font-weight: normal;
    text-decoration: none;
    border-color: white;
  }

  /* Wenn Dropdown aktiv – aktiver Meuuepunkt bleibt hervorgehoben */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor:hover > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item.mega-toggle-on > a.mega-menu-link {
    background: #FFF;
    color: #055199;
    text-decoration-color: #055199;
  }

  /* Hover AKTIV */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current_page_item > a.mega-menu-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2.3px;
    text-underline-offset: 8px;
    text-decoration-color:#055199;
  }


  /* Layer/Submenu – 2. Ebene */
  
  /* ************* 2. EBENE ************** */
  /*****************************************/ 
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    float: right;
    clear: both;
    padding: 0 15px 15px 0;
    /*min-height: 200px;*/
    left: -20px;
  }

  #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    margin-top: 4px;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul li a.mega-menu-link {
    line-height: 1.35;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    margin: 15px 0 0 0;
  }

  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: 5px 15px 5px 20px;
    width: 100%;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  
  /* ************* 3. EBENE ************** */
  /*****************************************/   
  
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
    padding: 4px 0 0 0;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  /* Aktiver Eintrag (Icon) */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-parent > a:before,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a:before {
    position: absolute;
    display: inline-block;
    content: "\f345";
    font-family: dashicons;
    font-weight: normal;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: rotate(0);
    background: transparent;
    left: -3px;
    margin: 0 6px 0 -17px;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item {
    padding-left: 17px;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:before {
    content: "\f345";
    position: absolute;
    left: -3px;
    margin: 0 6px 0 -15px;
    font-family: dashicons;
    background: transparent;
  }
  /* Tastaturnavigation: Hover aktiver Menuepunkt */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:focus-visible {
  background: #FFF;
  color: #055199;
  text-decoration: underline;
  text-decoration-thickness: 2.3px;
  text-underline-offset: 8px;
  text-decoration-color: #055199;
}

} /* ENDE Desktop Style 1024 PX */



@media (max-width: 1279px) {
  
  /* 1. Ebene */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0 6px 0 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-size:18px;
  }

  
  /* 2. Ebene */
  /* Mobile: Font-Größe der Submenu-Links */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: 16px;
  }

} /* ENDE 1279 PX */


@media (max-width: 1023px) {

/********************************************************************/
/* ************************* MOBILES MENUE **************************/
/********************************************************************/

/* Mobile: Scroll für Mega Menu ermöglichen */
#mobile-header #mega-menu-primary {
    max-height: calc(100vh - 60px); /* Höhe des fixierten Headers hier etwas groesser */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Header darf Scrollen nicht blockieren */
#mobile-header {
    overflow: visible !important;
}


  #sticky-navigation,
  .navigation-stick,
  .sticky-navigation-transition {
    position: fixed !important;
    top: 0 !important;
  }
  
/*  .mega-menu-primary-mobile-open #sticky-navigation,
  .mega-menu-primary-mobile-open .navigation-stick,
  .mega-menu-primary-mobile-open .sticky-navigation-transition {
    position: absolute !important;
  }
*/

  
 /* Positionierung Hamburger Menue Button */
  .main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: right;
  }
  .main-navigation.has-branding:not([class*="nav-align-"]):not(.mobile-header-navigation) .inside-navigation, 
  .main-navigation.has-sticky-branding.navigation-stick:not([class*="nav-align-"]):not(.mobile-header-navigation) .inside-navigation {
    justify-content: right;
  }
  /* bei Scroll */
  .main-navigation.has-branding:not([class*="nav-align-"]):not(.mobile-header-navigation) .inside-navigation, 
  .main-navigation.has-sticky-branding.navigation-stick:not([class*="nav-align-"]):not(.mobile-header-navigation) .inside-navigation {
    width: auto;
    float:right;
  }

  #site-navigation .navigation-branding,
  #sticky-navigation .navigation-branding {
    margin-left: 10px;
    left: 0;
    position: fixed;
  }

	/* Hamburger Icon */
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, 
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, 
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff !important;
  }
  /* LUPE Icon */
  .gp-icon svg,
  #mobile-header .gp-icon svg {
    height:1.4em;
    width: 1.4em;
    top: 0.4em;
  }
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1:after {
      font-size: 32px;
  }
  
  /* LOGO */ 
  #mobile-header.main-navigation.has-branding .inside-navigation.grid-container,
  #mobile-header.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
      padding-left: 20px !important;
  }
  
  .navigation-branding img, .site-logo.mobile-header-logo img {
    padding: 4px 0 !important;
	}

  /*************************** 1. Ebene / NAVLAYER **************************/

 /* Flaeche NavLayer UL */
  #mega-menu-wrap-primary #mega-menu-primary {
    padding-top:7px !important;
    padding-bottom:7px !important;
    box-shadow: 0px 10px 20px -8px rgba(0, 0, 0, 0.25);
  }  
  #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    border-top: 1px solid #89b4e0;
    margin-top: 7px; /* 19.12.25, JH*/
  }
  
	/* FÜR ALLE EBENEN */
  #mega-menu-wrap-primary #mega-menu-primary a:hover {
    text-decoration:underline !important;
    text-underline-offset: 2px;
  }  
  
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0;
    padding: 0 15px;
  }
  
 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,      
 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link { 
    border-bottom: 1px solid #eaf7ff;
    padding: 0;
  }
 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child > a.mega-menu-link,      
 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor:last-child > a.mega-menu-link  { 
    border-bottom:none;
  }

	/* PLUS Icon */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    content: "\f543"; 
  }
  /* MINUS Icon */
   #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after {
    content: "\f460" !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
    font-size: 26px;
    margin: 0 6px 0 6px;
 }
  
 /* AKTIV 1. Ebene */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-current-menu-item  > a.mega-menu-link {
     padding-left:20px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:before,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-current-menu-item  > a.mega-menu-link:before  {
    content: "\f345";
    position: absolute; 
    left: -4px;
    font-size: 24px;
  } 
  

  /**********************  2. Ebene ***********************/
  


  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul li a.mega-menu-link {
    line-height: 1.35;
  }

  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    padding: 5px 0 5px 5px;
    min-height: 40px;
  }

  
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		margin: -1px 0px 0px -15px;
    width:100vw;
   }
  
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item a.mega-menu-link { 
   padding-left:20px;
   margin-top: 20px;
  }

 /* AKTIV 2. Ebene */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, 
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { 
    padding-left:20px;
    margin-top:10px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:before, 
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:before { 
    content: "\f345";
    position: absolute; 
    left: -4px;
    font-size: 22px;
    top: -6px;
  } 




  /**********************  3. Ebene ***********************/

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
   padding: 4px 0 0 20px;
   margin-top:6px;
  }

 /* AKTIV 3. Ebene */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
   padding: 4px 0 0 40px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:before {
    content: "\f345";
    position: absolute; 
    left: 18px;
    font-size: 22px;
    top: -2px;
  } 


    
} /* ENDE 1023 PX */




@media (max-width: 767px) {
  #mobile-header.main-navigation.has-branding .inside-navigation.grid-container,
  #mobile-header.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
    padding-left: 10px !important;
    }
  .section-S div.section-inner > div > div > h1{
    width: calc(72vw - 60px);
  }

  .main-navigation .main-nav ul li a, 
  .menu-toggle, .main-navigation .menu-bar-item > a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
  }
  .main-navigation.sticky-navigation-transition .main-nav > ul > li > a, 
  .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .menu-bar-item > a, 
  .sticky-navigation-transition .navigation-branding .main-title {
    line-height: 60px;
  }

    
}