/* The Modal (background) */
.modal,
.modal-element {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9500; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.fc-modal,
.fc-modal-element {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9600; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content,
.modal-element-content,
.fc-modal-content,
.fc-modal-element-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close,
.close-element,
.fc-close-element,
.close-logo-modal {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus,
.close-element:hover,
.close-element:focus,
.fc-close-element:hover,
.fc-close-element:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.li_update_btn,
.li_del_btn,
.li_toggle_btn {
	position: relative;
	top: -10px;
	margin-left: 5px;
}

/* MOBILE */
@media only screen and (min-width: 280px) {
	#headerWrapper {
		width: 100%;
		padding: 0px;
		margin-bottom: 50px;
		background-color: var(--farbe02);
	}
	
	.logoMenuContainer {
		background-color: var(--farbe02);		
	}
	
	
	.btn-save-navigation {
		float: left;
		background-color: #e30613;
		color: #ffffff;
		max-width: 200px;
		padding: 10px;
		margin-right: 20px;
		cursor: pointer;
		border: none;
		outline: none;
	}
	.btn-save-navigation:hover {
		background-color: #0069b4;
	}
	#siteHeader {
		padding: 0px;
	}
	.languageDropdown {
		display: block;
		padding: 10px;
		text-align: center;
	}
	.Homesite_Container {
		background-image: url(/media/homepage_main_background.png);
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	#header-menu-wrapper {
		text-align: right;
	}	
	#menu-members-area {
		list-style: none;
		padding: 0px;
		display: flex;
		justify-content: center;
	}
	#menu-members-area li {
		display: inline-block;
		margin: 0px 10px;
	}
	#menu-members-area li a {
		text-decoration: none;
		color: #000;
		font-weight: bold;
	}
	#logoMenuWrapper {
		padding: 10px;
		box-sizing: border-box;

	}
	#mainNavigation ul {
		list-style: none;
	}
	#mainNavigation ul li {
		display: inline-block;
		margin: 0px 10px;
	}
	.nav-link {
		text-decoration: none;
		color: #000;
		font-weight: bold;
		font-size: 1.25rem;
	}
	.nav-link:hover,
	.nav-link:active,
	.nav-link:focus {
		text-decoration: underline;
	}
	.mobileNav {
		display: block;
	}
	#mobileMenuBody {
		padding: 0px 15px;
		box-sizing: border-box;
		display: none;
		position: relative;
		clear:both;
	}
	.menu-point {
		margin-bottom: 10px;
	}
	.menu-point:hover,
	.menu-point:active,
	.menu-point:focus {
		color: #e30613;
	}
	.menu-top {
		color: var(--farbe01);
		font-family: var(--font01);
		font-weight: bold;
		font-size: 1.1rem;
		cursor: pointer;
		text-transform: uppercase;
	}
	.top-lvl-link:hover {
    text-decoration: underline;
	}
	.topNavLinks:hover {
		color: #e30613 !important;
    text-decoration: underline !important;		
	}
	.menu-top i {
		position: relative;
		top: -3px;
		left: 5px;
	}
	.submenue-link {
		color: #575756;
		font-size: 1rem;
		cursor: pointer;
		margin-bottom: 15px;
	}
	.submenue-link a {
		text-decoration: none;
		color: #575756;
		font-size: 1rem;
	}
	.submenue-link:last-child {
		margin-bottom: 0px;
	}
	.submenue {
		display: none;
		background-color: #ffffff;
		border: 1px solid rgba(0, 0, 0, .15);
		padding: 10px;
		box-sizing: border-box;
		margin-top: 5px;
	}
	.active {
		display: block;
	}	
	.active-top {
		text-decoration:underline;
	}
	#logoMenuWrapper {
		display: flex;
		justify-content: space-between;
	}	
	.mobileNavButton {
		font-size:44px;
		color:#000000;
	}	
	.submenue-link a:hover {
		text-decoration: underline;
	}	
	.top-lvl-link {
		text-decoration: none;
		color: inherit;
	}	
	.no-click {
		cursor: default;
		pointer-events: none; /* prevents interaction */
		text-decoration: none !important;
	}
	.no-click:hover,
	.no-click:active,
	.no-click:focus {
		text-decoration: none !important;
	}	
	#title_container {
		color: var(--farbe01);
		font-family: var(--font01);
		text-align: center;
		font-size: 30px;
		float: left;
		margin: 0px 15px 15px 15px;
	}	
	.styleLine {
		width: 100%;
		margin: 0 auto;
		height: 4px;
		background-color: var(--farbe01);
		box-shadow: none !important;
		border: none !important;
		border-style: none !important;
	}
	
	.menu_editable {
		border: 4px solid yellow;
	}
	
	.menu_editable > #logoMenuWrapper .circle-abs-menu {
		display: block;
		position: absolute;
		right: 10px;
		top: 15px;
		z-index: 7000;
	}
	
	.menu_editable > #mobileMenuBody .circle-abs-menu {
		display: block;
		position: absolute;
		right: -25px;
		top: -35px;
		z-index: 7000;
	}

	.nav_selected {
		text-decoration: underline;
		font-weight: bold;
	}	
	
	body { 
		background:#fff; 
		font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; 
	}
	.menu-point {
		font-family: <?php echo $font_text; ?>;
	}
	.handle {
		cursor: move;
		display: inline-block;
		padding: 4px 10px;
		background: #eee;
		border: 1px solid #ccc;
	}	
	#sortable, #sortable ul {
			list-style-type: none;
			padding-left: 0;
			margin-left: 0;
	}
	#sortable ul {
		padding-left: 40px; /* controls indentation of submenu */
		margin: 0;
		list-style-type: none; /* optional: remove bullets */
		margin-top: 10px;
	}
	#sortable li {
		margin-bottom: 10px;
	}	
	.sortable-placeholder {
			background: #d0ebff;
			border: 2px dashed #339af0;
			height: 2em;
			margin: 4px 0;
	}
	.sortable-placeholder {
			margin-left: 0; /* for level 1 */
	}
	#sortable li ul .sortable-placeholder {
			margin-left: 40px; /* for level 2 */
	}
	#sortable li ul li ul .sortable-placeholder {
			margin-left: 80px; /* for level 3 */
	}
.menu-box {
  border: 1px solid #ccc;
  margin: 20px;
  padding: 15px;
  background-color: #fafafa;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}
.menu-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-box li {
  position: relative;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.menu-box li:hover {
  background-color: #f1f1f1;
}
.menu-box li > span.ui-icon {
  margin-right: 6px;
  vertical-align: middle;
}
.menu-box .handle {
  display: inline-block;
  font-weight: bold;
  color: #333;
  cursor: move;
  vertical-align: middle;
}
.menu-box .circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
	top: 0px;
}
.menu-box li ul {
  margin-left: 20px;
  margin-top: 8px;
}
li.ui-sortable-helper {
  background: #e0f3ff !important;
  border: 2px dashed #3399ff !important;
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
li.menu-highlight {
  border: 2px dashed #ff5e5e !important;
  background: #fff0f0 !important;
  min-height: 30px;
}
.circle img {
  display: block;
  width: 100%;
  height: auto;
}
ul.nav-level-1,
ul.nav-level-2,
ul.nav-level-3 {
    list-style: none;
    padding-left: 0;
    margin: 0;
		display: flex;
}
ul.nav-level-2,
ul.nav-level-3 {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    padding-left: 1rem;
}
.nav-item.open > ul {
    max-height: 500px; /* large enough for animation */
}
.nav-item {
    position: relative;
}
.menu-top {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.arrow {
    margin-left: 8px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}
.arrow-down::after {
    content: "▼";
}
.arrow-right::after {
    content: "▼";
}
.nav-item.open > .menu-top .arrow-down {
	transform: rotate(180deg);
}
.nav-item.open > .menu-top .arrow-right {
	transform: rotate(180deg);
}
	.navigation-list {
		display: flex;
		flex-direction: column;
		list-style: none;
		padding: 0;
		margin: 0;
		gap: 20px;
	}
	.menu-item {
		 position: relative;
	}
	.menu-top {
		display: flex;
		align-items: center;
		height: 51px;
	}
	.menu-top.no-click .top-lvl-link {
		cursor: default;
		text-decoration: none;
		padding: 5px 8px;
	}
	.menu-top a {
		font-weight: 600;
		padding: 5px 8px;
	}
	.menu-top .arrow {
		cursor: pointer;
		margin-left: 6px;
		user-select: none;
		font-weight: bold;
		text-decoration: none;
		color: #000;
	}
	.submenu {
		position: absolute;
		top: 100%;
		left: 0;
		background: white;
		border: 1px solid #ccc;
		padding: 10px;
		display: none; /* hidden by default */
		min-width: 160px;
		box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		z-index: 100;
	}
	.submenu.open {
		display: block;
	}
	.menu-item > .submenu .menu-item > .submenu {
		top: 0;
		left: 100%;
	}
	.submenu {
		transition: opacity 0.3s ease;
		opacity: 0;
		pointer-events: none;
	}
	.submenu.open {
		opacity: 1;
		pointer-events: auto;
	}
	.navigation-list .arrow {
		text-decoration: none !important;
		cursor: pointer;
	}
	.navigation-list .arrow:hover,
	.navigation-list .arrow:focus,
	.navigation-list .arrow:active {
		text-decoration: none !important;
	}	
	.hidden {
		display: none;
	}
}

/* TABLET */
@media only screen and (min-width: 768px) {
	.languageDropdown {
		text-align: right;
	}
	.navigation-list {
		flex-direction: row;
	}
	.submenu	.navigation-list {
		flex-direction: column;
	}
}

/* DESKTOP */
@media only screen and (min-width: 1024px) {
	#logoMenuWrapper {
		display: none;
	}
	.main-logo {
		margin-right: 50px;
	}
	#menu-members-area {
		justify-content: flex-end;
	}
	.logoMenuContainer {
		padding: 10px 0px;
		display: flex;
		justify-content: center;
		width: fit-content;
		margin: 0 auto;
	}
	#mobileMenuBody {
		padding: 0 10px;
		padding: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.menu-point {
		margin-right: 20px;
		position: relative;
	}
	.submenue {
		position: absolute;
		top: 25px;
		left: 0px;
		width: max-content;
	}
	.mobileNav	{
		display: none;
	}
	#title_container {
		float: none;
		margin: 10px 0px 50px 0px;
	}
	.styleLine {
		width: 60%;
		margin: 0 auto;
		height: 4px;
		background-color: var(--farbe01);
		box-shadow: none !important;
		border: none !important;
		border-style: none !important;
	}
}