/* ---------- Sticky Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9000;
  overflow: visible; 
 background-image: var(--gradientmenu);
	margin-top: -1px;
	
}


/* menu desktop mainmenuicons*/
.primary-nav .menu > li > a {
	padding:0.3rem 0 0.3rem 0; 
	font-family: "Roboto Condensed", sans-serif;
	font-size:20px;
color:#fff;
}

/* menu mobile mainmenuicons*/
.site-brand-holder .primary-nav .menu > li > a{
		font-family: "Roboto Condensed", sans-serif;
	font-size:21px;
color:#fff;
}

/* menu mobile submenuicons*/
.primary-nav .menu a{
			font-family: "Roboto Condensed", sans-serif;
	font-size:20px;
color:#fff;
	
}



@media (min-width: 1001px){
	
		.primary-nav .sub-menu a { padding: 11px 0 11px 0;}
	
	
  .primary-nav{ position: static; display:block; }
  .primary-nav li{ position: relative; }
  .primary-nav .sub-menu{
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    min-width: 220px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    padding: .5rem;
    display: none;                  
    z-index: 9200;
  }
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li.show-submenu > .sub-menu{
    display: block;
  }
  /* Flyout ab Ebene 2 */
  .primary-nav .sub-menu .sub-menu{
    left: 100%;
    top: -6px;
  }
}

@media (max-width: 1000px){

	
	
  .site-brand-holder{
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .site-brand-holder .primary-nav{
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    display: none;                
    z-index: 4300;
  }
  .site-brand-holder .primary-nav.is-open{
    display: block;                
  }

  /* Liste vertikal */
  .site-brand-holder .primary-nav .menu{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem;
  }
}

/* ------- Header Layout  backdrop-filter: saturate(180%) blur(8px); ----------*/
.header-inner{
  height: var(--header-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-brand{
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
}

/* ---------- Social Icons ---------- */
.header-social{  display: flex; align-items: center; margin-left: 0rem; width:20%;    justify-content: space-between;}
.header-social .social-link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  text-decoration: none; background: transparent;
  transition: background .2s, transform .12s;
}



  

.header-social .social-link svg{ width:18px; height:18px; fill:currentColor; color:#fff; }
.header-social .social-link:hover{ background:#f4f4f5; transform: translateY(-1px); }
@media (max-width:1000px){
  .header-social{ gap:1vw; }
   .header-social .social-link svg {        width: 24px;        height: 24px;    }
   .header-social .social-link {        width: 30px;        height: 30px;    }
	 .header-social {    width: 100%;    justify-content: space-around;}
 

}

/* ---------- Primary Nav: Basis ---------- */
.primary-nav{ position: relative; z-index: 9100; width:70%; max-width:800px;}
.primary-nav .menu{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0rem; align-items:center; justify-content:space-around;
}
.primary-nav .menu > li{ position: relative;height: var(--header-height); }
.primary-nav .menu > li > a{
	height: var(--header-height);
  display:block;              
  padding:22px 0.1rem;           
  text-decoration:none; color:inherit;  line-height:1.25;
}


/* Falls Walker Toggle-Buttons rendert → ausblenden, sonst Höhenmix */
.primary-nav .submenu-toggle{ display:none !important; }

/* ---------- Hero immer unter Header ---------- */
.header-hero{ position: relative; z-index: 0; }

/* =========================================================
   DESKTOP (≥ 1201px): Hover smooth + Touch-Desktop via .show-submenu
   ========================================================= */
@media (min-width:1001px){

  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li.show-submenu > .sub-menu{
   opacity:1;  visibility:visible; pointer-events:auto;
   transform:translateY(0);
  }
  .primary-nav .sub-menu .sub-menu{ left:100%; top:-6px; }
  .primary-nav .sub-menu a{  border-radius:8px; white-space:normal; }
}

/* =========================================================
   MOBIL/TABLET (≤ 1200px): Brand-Trigger + smooth Height
   ========================================================= */

/* Container, in den Brand + Nav per JS wandern */
.site-brand-holder{
  position: relative; display:flex; align-items:center; gap:.5rem;
}

#primary-menu{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.4px;
  text-align: left;
 color:var(--fontw);
	width:100%;

}
	
/* Hauptmenü klappt unter Brand	 */
	
@media (max-width:1000px){
	
	#primary-menu{	padding-right: 30px;
	padding-bottom: 20px;}
	
  .site-brand-holder .primary-nav{max-width: 80vw;
    position:absolute; 
	  left:-16px; 
	  top:calc(100% + 10px);
	  width: auto;
        background: none;
 background-image: var(--gradientmenu2);
  border: none;
	 border-radius: 0 0 180px 0px; 
	box-shadow: 12px 10px 13px -5px rgba(0,0,0,0.25), -12px 10px 13px -5px rgba(0,0,0,0.25);
    z-index:9300;
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
    transition:max-height var(--e-med), opacity .25s ease;
  }

  .site-brand-holder .primary-nav.is-open{
    max-height:calc(100vh - 64px); opacity:1; pointer-events:auto;
  }

  .site-brand-holder .primary-nav .menu{
    display:flex; flex-direction:column; align-items:stretch;
    gap:.0rem; padding:.5rem 18px;
  }
  .site-brand-holder .primary-nav .menu > li > a{
    padding:4px 0px 4px 8px; 
	  border-radius:8px;
  }

  /* Submenus als Accordion */
  .primary-nav .sub-menu{
    position:static;
    margin:0 0 0 .75rem; padding-left:.0rem; border-left:2px solid var(--fontw);
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
    transition:max-height var(--e-med), opacity .25s ease, margin-top .2s ease, margin-bottom .2s ease;
  }
  .primary-nav li.is-open > .sub-menu{
    max-height:1000px; opacity:1; pointer-events:auto;
    margin:.25rem 0 .5rem .75rem; 
  }
	
	/* ----------------- MOBILE:---------------------------  */

  .primary-nav .menu > li{
    height: auto;              
  }
  .primary-nav .menu > li > a{
    height: auto;            
    display: block;            
    padding: .75rem 1rem;     
    line-height: 1.4;          
  }

	.primary-nav .menu > li > ul > li{
    height: auto;             
	font-weight: 200;
	  }	
	
	.primary-nav .menu > li > ul > li{
    height: auto;            
	font-weight: 300;
	  }	
	
	.primary-nav .menu > li > ul > li .current_page_item{
    height: auto;            
	font-style:italic; 
	  }		
	
}

@media (max-width:380px){  .site-brand-holder .primary-nav{margin-top:0px;}}

/* =========================================================
   Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .site-brand-holder .primary-nav,
  .primary-nav .sub-menu,
  .lang-menu{ transition:none !important; }
}




/* =====DESKTOP SUBMENU FIX ===== */
@media (min-width: 1001px){
  .primary-nav .sub-menu{
    display: block;             
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;	  
	  width: max-content;  
  }
}

/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */
/* ########################################################################################################## */

#site-brand{
display: contents;
	flex-shrink: 0;
		height:44px;
	width:44px;
}
#sitebrandfirst{
	background-image: url("../../pix/sitebrand.png");
	background-size: 98% 98%;
wp-block-list	background-position: center center;
	background-repeat: no-repeat;
	height:44px;
	width:44px;
	flex-shrink: 0;
}
#sitebrandsec{
	background-image: url("../../pix/sitebrandsec.png");
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	height:14px;
	width:14px;
	flex-shrink: 0;
}
@media (min-width: 1001px){#sitebrandsec{display:none;}}

.header-social .social-link svg{ color:var(--fontw);}
.lang-current  {   padding:0;}

.current_page_item > a{ 		font-style:italic; 	}
.current_menu_item a{ 		}

.show-submenu{ }

.primary-nav .menu a{ font-weight:700;  text-decoration: none !important;  }
.primary-nav .menu a:hover{ font-weight:800;  text-decoration: none !important;  }
.primary-nav .menu a:focus{ font-weight:800;  text-decoration: none !important; }



/* Desktop-Basiszustand  */
@media (min-width:1001px){
  .primary-nav .sub-menu{
    position: absolute;
    left: -20px;
    top: 100%;
    min-width: 216px;
   
    background-image: var(--gradientmenu2);
	  padding:0 31px 22px 32px;
	  color:#fff;
    border-left: 30px solid var(--gradient3);
    border-bottom: 30px solid var(--gradient3);
    border-right: 30px solid var(--gradient3);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 10px 10px 15px -5px rgba(0,0,0,0.25), -10px 10px 15px -5px rgba(0,0,0,0.25);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 8000;
  }
}


/* ==== Smooth Submenu Animation (alle Ebenen) ==== */
.primary-nav .sub-menu{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
}
.primary-nav li.is-open > .sub-menu,
.primary-nav li.show-submenu > .sub-menu{
  max-height: 1000px; /* groß genug wählen */
  opacity: 1;
		
}

/* (Optional) Mobile Toggle-Button */
.primary-nav .submenu-toggle{
  margin-left: .25rem;
  border: 0;
  background: transparent;
  padding: .5rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}
.primary-nav .submenu-toggle:focus{
  outline: 2px solid #000;
  outline-offset: 2px;
}
.primary-nav .submenu-toggle::after{
  content: "▾";
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.primary-nav li.is-open > .submenu-toggle::after{
  transform: rotate(-180deg);
}
.primary-nav li > a{
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
}




/* ==== Hero z-Index unter Menü ==== */
.header-hero{ position: relative; z-index: 0; }



/* ==== unter 360 fix ==  == */

@media (max-width: 320px) {
    .header-social {
     display:none;
    }
	
	
	#hero-slide-0 > .hero-overlay > .hero-content > .hero-title {
    font-size: 6vw;
}

	#hero-slide-0 > .hero-overlay > .hero-content > .hero-text {
    font-size: 3vw;
	
}


}


.sub-menu > li > a{ font-weight: 400;}






/* ########################## SPENDEN FAT ################################# */

#menu-item-33 > a{font-weight:900;}
#menu-item-33 > a:hover{font-weight:900;}