/* ------------------------------
   Hamburger Button
---------------------------------*/
/*-- Globale Menüfarben----*/
:root {
/*	  	--schriftfarbe:#1b7ec2; 	/* --Blau ---*/
/*		--schriftfarbe:#ecda3c; 	/*-- Gelb---*/	
		--schriftfarbe:#fff;   		/*-- weis---*/ 

/*	 	--aktivfarbe:#fff;			/*--weis---*/
		--aktivfarbe:#ecda3c;  		/*--gelb---*/
/*    	--aktivfarbe:#fff;        	/*--weis---*/

/*		--textschattenktiv: 2px 2px 4px rgba(0,0,0,0.8);   	/*---- Dafault ------*/
		--textschattenktiv: 2px 2px 4px #1b7ec2;   			/*---- blau ------*/
/*		--textschattenktiv: 2px 2px 4px #ecda3c;   			/*---- gelb ------*/
/*		--textschattenktiv: 2px 2px 4px #ffff;   			/*---- weis ------*/

	
}



.menu-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2100;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: #ecda3c;
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 3px 3px rgba(153, 0, 51, 0.99);
}

/* Animation zum Kreuz */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
}

/* ------------------------------
   Overlay bei offenem Menü
---------------------------------*/
body.menu-open::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
}

/* ------------------------------
   Mobile Menü Container
---------------------------------*/
#main-menu-links-AF {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  background: #990033;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1200;
  overflow-y: auto;
  padding: 20px 0;
}

#main-menu-links-AF.visible {
  transform: translateY(0);
  opacity: 1;
}
#main-menu-links-AF.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* ------------------------------
   Menü Level 1
---------------------------------*/
#main-menu-links-AF .level_1 {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}
#main-menu-links-AF .level_1 > li {
  margin: 10px 0;
}
#main-menu-links-AF .level_1 > li > a,
#main-menu-links-AF .level_1 > li > strong {
  display: block;
  padding: 12px;
  /*color: #fff;*/
  text-decoration: none;
  font-size: 18px;
  text-align: center;
}
#main-menu-links-AF .level_1 > li > a:hover {
  background: rgba(0,0,0,0.1);
  border-radius: 6px;
}

/* ------------------------------
   Submenus (Level 2, 3 …)
---------------------------------*/
#main-menu-links-AF .level_2,
#main-menu-links-AF .level_3 {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  background: rgba(0,0,0,0.2);
  border-left: 3px solid rgba(255,255,255,0.3);
}

#main-menu-links-AF li.open > .level_2 {
  overflow: visible;
}


#main-menu-links-AF .level_2 > li > a {
  display: block;
  padding: 10px 16px 10px 32px;
  font-size: 0.95rem;
  color: #f1f1f1;
  text-decoration: none;
  text-align: left;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}
#main-menu-links-AF .level_2 > li > a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff049;
}

/* ------------------------------
   Pfeil für Submenus
---------------------------------*/
#main-menu-links-AF .level_1 > li.has-sub > a::after,
#main-menu-links-AF .level_1 > li.has-sub > strong::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  transition: transform 0.3s ease;
}

#main-menu-links-AF .level_1 > li.open > a::after,
#main-menu-links-AF .level_1 > li.open > strong::after {
  transform: rotate(180deg);
}




/* NICHT mehr feste Werte – JS setzt max-height inline */
#main-menu-links-AF li.open > .level_2,
#main-menu-links-AF li.open > .level_3 {
  /* nur Animation über JS */
}

#main-menu-links-AF ul.level_2 a,
#main-menu-links-AF ul.level_3 a {
  display: block;
  padding: 8px 20px 8px 45px;
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 2px 2px 3px #000;
}

/* ------------------------------
   Sichtbarkeit Desktop vs. Mobil
---------------------------------*/
@media (min-width: 980px) {
  .menu-toggle,
  #main-menu-links-AF {
    display: none !important;
  }
}
@media (max-width: 979px) {
  .menu-toggle {
    display: flex;
  }
}

/* ==========================================================
   MOBILMENÜ – mit Icons
   ========================================================== */
@media (max-width: 979px) {
/*------------------------------------------------------------*/

/* ------------------------------
   Submenus Animation
---------------------------------*/
#main-menu-links-AF .level_2 {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  background: rgba(0,0,0,0.2);
  border-left: 3px solid rgba(255,255,255,0.3);
}

#main-menu-links-AF li.open > .level_2 {
  overflow: visible;
}

#main-menu-links-AF .level_2 > li > a {
  display: block;
  padding: 10px 16px 10px 32px;
  font-size: 0.95rem;
  color: #f1f1f1;
  text-decoration: none;
  text-align: left;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}
#main-menu-links-AF .level_2 > li > a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff049;
}

/* ------------------------------
   Pfeil für Submenus
---------------------------------*/
#main-menu-links-AF .level_1 > li.has-sub > a::after,
#main-menu-links-AF .level_1 > li.has-sub > strong::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  transition: transform 0.3s ease;
}

#main-menu-links-AF .level_1 > li.open > a::after,
#main-menu-links-AF .level_1 > li.open > strong::after {
  transform: rotate(180deg);
}








/*-----------------------------------------------------*/

  /* Hauptpunkte */
  #main-menu-links-AF ul.level_1 > li > a,
  #main-menu-links-AF ul.level_1 > li > strong {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.2rem;
      font-weight: 600;
      padding: 12px 16px;
      /*color: #fff;*/
      text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  }
	/*--------------- Textfarbe Hauptpunkte-----------*/
	#main-menu-links-AF .seite_home {
 		color: var(--schriftfarbe);
  	}
	#main-menu-links-AF .seite_kalender {
		color: var(--schriftfarbe);
	}
 	#main-menu-links-AF .seite_verein {
		color: var(--schriftfarbe);
  	}
	#main-menu-links-AF .seite_galerie {
	    color: var(--schriftfarbe);
  	}	
	#main-menu-links-AF .seite_info {
        color: var(--schriftfarbe);
  	}
  	#main-menu-links-AF .seite_download {
      color: var(--schriftfarbe);
	}
	#main-menu-links-AF .seite_anmelden {
	  color: var(--schriftfarbe);
	}
 
  /* Icons */
  #main-menu-links-AF .seite_home > a::before,
  #main-menu-links-AF strong.seite_home.active::before {
      content: "\f015";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_kalender > a::before,
  #main-menu-links-AF strong.seite_kalender.active::before {
      content: "\f073";
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_verein > a::before,
  #main-menu-links-AF strong.seite_verein.active::before {
      content: "\f001";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_galerie > a::before,
  #main-menu-links-AF strong.seite_galerie.active::before {
      content: "\f03e";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_info > a::before,
  #main-menu-links-AF strong.seite_info.active::before {
      content: "\f05a";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_download > a::before,
  #main-menu-links-AF strong.seite_download.active::before {
      content: "\f56d";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }
  #main-menu-links-AF .seite_anmelden > a::before,
  #main-menu-links-AF strong.seite_anmelden.active::before {
      content: "\f007";
      font-family: "Font Awesome 6 Free";
      font-weight: 400;
      font-size: 1.4rem;
      color: var(--schriftfarbe);
  }

  /* Unterpunkte farblich */
  #main-menu-links-AF li.seite_home ul.level_2 a,
  #main-menu-links-AF li.seite_home ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_kalender ul.level_2 a,
  #main-menu-links-AF li.seite_kalender ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_verein ul.level_2 a,
  #main-menu-links-AF li.seite_verein ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_galerie ul.level_2 a,
  #main-menu-links-AF li.seite_galerie ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_info ul.level_2 a,
  #main-menu-links-AF li.seite_info ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_download ul.level_2 a,
  #main-menu-links-AF li.seite_download ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }
  #main-menu-links-AF li.seite_anmelden ul.level_2 a,
  #main-menu-links-AF li.seite_anmelden ul.level_3 a {
      color: var(--schriftfarbe) !important;
  }

  /* Aktiver Menüpunkt */
  #main-menu-links-AF li.active > a,
  #main-menu-links-AF li > strong.active {
      /*color: #fff049 !important;*/
	  color: var(--aktivfarbe);
      text-shadow: var(--textschattenktiv);
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
	  padding: 10px 16px 10px 32px;
  }
}

/*--------- Ergänzungen---------------*/


/* ------------------------------
   Fix: Doppelte Hamburger-Buttons
---------------------------------*/
#main-menu-links-AF .menu-toggle {
  display: none !important; /* nur innerhalb des Menüs ausblenden */
}

/* ------------------------------
   Fix: Submenu aufklappen
---------------------------------*/
#main-menu-links-AF .level_2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#main-menu-links-AF li.open > .level_2 {
  max-height: 1000px; /* groß genug, JS passt open-Klasse an */
  overflow: visible;
}


/*--------------- css für Untermenü Pfeile ---------------*/
/* Pfeil neben Hauptpunkten */
#main-menu-links-AF .submenu-toggle {
  margin-left: 8px;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  cursor: pointer;
}

#main-menu-links-AF li.open .submenu-toggle {
  transform: rotate(180deg); /* dreht Pfeil nach oben */
}







/*------------------------- 02.09.--------*/

/* Submenu-Wrapper darf nicht clippen (überstimmt .block{overflow:hidden}) */
#main-menu-links-AF .submenu-wrapper > .block { overflow: visible !important; }
#main-menu-links-AF .submenu-wrapper { overflow: visible !important; }

/* Sicherheit: Submenu-UL immer sichtbar, wenn geöffnet wird (überstimmt Inline max-height:0) */
#main-menu-links-AF .submenu-wrapper ul.level_2 {
  display: block !important;
  overflow: visible !important;
}

/* Optional: Falls Contao irgendwo im Submenu noch einen "inneren" Hamburger mitsendet → weg damit */
#main-menu-links-AF .submenu-wrapper #AF_Trigger1 { display: none !important; }


/*-------------------02.09. 12:00 - Schrift unterpunkte erst ausblende-------------------*/
/* Nur die Untermenüs (zweite Ebene) verstecken */
/*
#main-menu-links-AF .submenu-wrapper ul.level_2 {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

#main-menu-links-AF li.open > .submenu-wrapper ul.level_2 {
  overflow: visible;
}



/*------------------------ 02.09.25 12:40 -----------*/
/* Minimal-Styling für den Toggle-Button (kein Standard-Button-Layout) */
#main-menu-links-AF .submenu-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.95rem;
  margin-left: 8px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
#main-menu-links-AF .submenu-toggle:focus { outline: 2px solid rgba(255,255,255,0.25); }

/* sicherstellen: Untermenü standardmäßig versteckt (falls CSS fehlt) */
#main-menu-links-AF .submenu-wrapper > ul.level_2 {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
#main-menu-links-AF li.open > .submenu-wrapper > ul.level_2 {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}


/*----------- Doppelter untermenü Buton verstecken --------------*/

#main-menu-links-AF .submenu-toggle {
  display: none;
}

/*---------------- merr abstand von oben ------------*/
#main-menu-links-AF > ul.level_1 {
  margin-top: 0rem;   /* Abstand nach oben (z. B. 16px) */
}

/*------------------ Benutzername oben ------------------*/
#main-menu-links-AF .mobile-username {
  display: flex;
  justify-content: flex-end;   /* nach rechts ausrichten */
  align-items: center;
  gap: 0.4rem;                 /* etwas Abstand zwischen Icon und Name */
  padding: 0.5rem 1rem;        /* weniger hoch als vorher */
  font-size: 0.9rem;           /* Schrift leicht kleiner */
  border-bottom: 1px solid #ddd;
  /*color:#FFCC00;*/
  color:var(--schriftfarbe);
}

#main-menu-links-AF .mobile-username i {
  font-size: 0.9rem;  /* Icon etwas kleiner */
  /*color: #FFCC00*/
  color:var(--schriftfarbe);
}