/* -------------------------------------------------------------------------
   Reset Elementor Styles
   ------------------------------------------------------------------------- */

.site-header button.menu-toggle {
	border-radius: 10px;
}

.site-header button.submenu-toggle {
	background-color: unset;
	color: unset;
}


/* -------------------------------------------------------------------------
   Desktop Navigation
   ------------------------------------------------------------------------- */

.primary-navigation {
	margin-left: auto;
	display: flex;
	column-gap: 2rem;
}

.primary-menu {
	display: flex;
	align-items: center;

	gap: 2rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.primary-menu li {
	position: relative;

	margin: 0;
	padding: 0;

	list-style: none;
}

.primary-menu a {
	display: inline-flex;
	align-items: center;

	color: rgb(var(--color-dark));

	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;

	text-decoration: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
	color: rgb(var(--color-primary));
}


/* -------------------------------------------------------------------------
   Desktop Submenus
   ------------------------------------------------------------------------- */

.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;

	z-index: 1001;

	display: block;

	min-width: 220px;
	margin: 0;
	padding: 0.5rem;

	list-style: none;

	background: rgb(var(--color-white));
	border-radius: var(--radius-m);

	box-shadow: 0 12px 30px rgba(var(--color-dark), 0.12);

	opacity: 0;
	visibility: hidden;

	transform: translateY(-8px);

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}


/*
 * Unsichtbarer Bereich zwischen Hauptmenü und Submenu.
 * Verhindert, dass das Submenu beim Darüberfahren "verschwindet".
 */

.primary-menu .sub-menu::before {
	content: "";

	position: absolute;
	top: -0.75rem;
	left: 0;

	width: 100%;
	height: 0.75rem;
}


/*
 * Submenu bei Hover oder Tastatur-Fokus öffnen.
 */

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* -------------------------------------------------------------------------
   Submenu Items
   ------------------------------------------------------------------------- */

.primary-menu .sub-menu li {
	width: 100%;
}

.primary-menu .sub-menu a {
	display: flex;

	width: 100%;
	padding: 0.7rem 0.85rem;

	border-radius: calc(var(--radius-m) / 2);

	font-size: 0.9rem;
	font-weight: 500;

	white-space: nowrap;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	background: rgba(var(--color-primary), 0.06);
	color: rgb(var(--color-primary));
}


/* -------------------------------------------------------------------------
   Verschachtelte Submenus
   ------------------------------------------------------------------------- */

.primary-menu .sub-menu .sub-menu {
	top: -0.5rem;
	left: calc(100% + 0.5rem);
}

.primary-menu .sub-menu .sub-menu::before {
	top: 0;
	left: -0.5rem;

	width: 0.5rem;
	height: 100%;
}


/* -------------------------------------------------------------------------
   Submenu Toggle
   ------------------------------------------------------------------------- */

/*
 * Auf Desktop übernimmt Hover die Funktion.
 * Der Button wird deshalb nicht angezeigt.
 */

.submenu-toggle {
	display: none;
}


/* -------------------------------------------------------------------------
   CTA - letzter Menüpunkt
   ------------------------------------------------------------------------- */

.primary-menu > li:last-child > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.65rem 1.4rem;

	border-radius: var(--radius-m);

	background: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

.primary-menu > li:last-child > a:hover,
.primary-menu > li:last-child > a:focus-visible {
	background: rgb(var(--color-primary-dark));
	color: rgb(var(--color-white));
}


/*
 * Falls der letzte Menüpunkt selbst ein Submenu besitzt,
 * soll sein CTA-Styling nicht auf die Submenu-Links übertragen werden.
 */

.primary-menu > li:last-child .sub-menu a {
	display: flex;

	padding: 0.7rem 0.85rem;

	background: transparent;
	color: rgb(var(--color-dark));
}

.primary-menu > li:last-child .sub-menu a:hover,
.primary-menu > li:last-child .sub-menu a:focus-visible {
	background: rgba(var(--color-primary), 0.06);
	color: rgb(var(--color-primary));
}


/* -------------------------------------------------------------------------
   Mobile Menu Toggle / Burger
   ------------------------------------------------------------------------- */

.menu-toggle {
	display: none;

	width: 44px;
	height: 44px;

	padding: 0;

	background: rgb(var(--color-primary));

	border: 0;
	border-radius: 10px;

	cursor: pointer;

	align-items: center;
	justify-content: center;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.menu-toggle:hover {
	background: rgb(var(--color-primary-dark));
}

.menu-toggle:focus-visible {
	outline: 2px solid rgb(var(--color-primary));
	outline-offset: 3px;
}

.menu-toggle__bar {
	display: block;

	width: 24px;
	height: 2px;

	margin: 4px 0;

	background: rgb(var(--color-white));

	border-radius: 999px;

	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}


/* Burger -> X */

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .menu-toggle__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon .menu-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}


/* -------------------------------------------------------------------------
   Mobile Navigation
   ------------------------------------------------------------------------- */

@media (max-width: 782px) {
	
	
	.primary-navigation {
		flex-direction: column
	}

	.site-header__inner {
		gap: 1rem;
		padding-block: 0.75rem;
	}


	/* ---------------------------------------------------------------------
	   Burger
	   --------------------------------------------------------------------- */

	.menu-toggle {
		display: inline-flex;
		flex-shrink: 0;
	}


	/* ---------------------------------------------------------------------
	   Navigation Container
	   --------------------------------------------------------------------- */

	.primary-navigation {
		position: absolute;

		top: 100%;
		left: 0;
		right: 0;

		margin: 0;

		background: rgb(var(--color-white));

		box-shadow: 0 12px 24px rgba(var(--color-dark), 0.1);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateY(-8px);

		transition:
			opacity 0.2s ease,
			visibility 0.2s ease,
			transform 0.2s ease;
	}

	.primary-navigation.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0);
	}


	/* ---------------------------------------------------------------------
	   Main Menu
	   --------------------------------------------------------------------- */

	.primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;

		gap: 0;

		width: 100%;

		margin: 0;
		padding: 0.75rem 1.5rem 1.5rem;
	}


	/* ---------------------------------------------------------------------
	   Main Menu Items
	   --------------------------------------------------------------------- */

	.primary-menu > li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;

		width: 100%;

		border-bottom: 1px solid rgba(var(--color-dark), 0.06);
	}

	.primary-menu > li:last-child {
		border-bottom: 0;
		margin-top: 1rem;
	}


	/* ---------------------------------------------------------------------
	   Main Menu Links
	   --------------------------------------------------------------------- */

	.primary-menu > li > a {
		display: flex;
		align-items: center;

		min-height: 48px;

		padding: 0.75rem 0;

		color: rgb(var(--color-dark));
	}

	.primary-menu > li > a:hover,
	.primary-menu > li > a:focus-visible {
		color: rgb(var(--color-primary));
	}


	/* ---------------------------------------------------------------------
	   Mobile Submenu Toggle
	   --------------------------------------------------------------------- */

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 44px;
		height: 44px;

		padding: 0;

		background: transparent;
		border: 0;

		color: rgb(var(--color-dark));

		cursor: pointer;
	}

	.submenu-toggle:hover {
		color: rgb(var(--color-primary));
	}

	.submenu-toggle:focus-visible {
		outline: 2px solid rgb(var(--color-primary));
		outline-offset: -2px;
		border-radius: 6px;
	}


	/* ---------------------------------------------------------------------
	   Chevron
	   --------------------------------------------------------------------- */

	.submenu-toggle__icon {
		display: block;

		width: 8px;
		height: 8px;

		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;

		transform: rotate(45deg);

		transition: transform 0.2s ease;
	}

	.menu-item-has-children.submenu-open
		> .submenu-toggle
		> .submenu-toggle__icon {
		transform: rotate(225deg);
	}


	/* ---------------------------------------------------------------------
	   Mobile Submenus
	   --------------------------------------------------------------------- */

	.primary-menu .sub-menu {
		position: static;

		grid-column: 1 / -1;

		display: none;

		width: 100%;
		min-width: 0;

		margin: 0;
		padding: 0 0 0.75rem;

		background: transparent;

		border-radius: 0;
		box-shadow: none;

		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.primary-menu
		.menu-item-has-children.submenu-open
		> .sub-menu {
		display: block;
	}


	/* Abstand zwischen Link und Submenu */

	.primary-menu .sub-menu::before {
		display: none;
	}


	/* ---------------------------------------------------------------------
	   Mobile Submenu Links
	   --------------------------------------------------------------------- */

	.primary-menu .sub-menu li {
		display: block;

		width: 100%;

		border: 0;
	}

	.primary-menu .sub-menu a {
		display: flex;

		width: 100%;

		padding: 0.65rem 0.75rem;

		border-radius: 6px;

		font-size: 0.9rem;
		font-weight: 400;

		white-space: normal;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus-visible {
		background: rgba(var(--color-primary), 0.06);
		color: rgb(var(--color-primary));
	}


	/* ---------------------------------------------------------------------
	   Verschachtelte Mobile Submenus
	   --------------------------------------------------------------------- */

	.primary-menu .sub-menu .sub-menu {
		display: none;

		position: static;

		padding: 0 0 0.25rem 0.75rem;

		box-shadow: none;
	}

	.primary-menu
		.sub-menu
		.menu-item-has-children.submenu-open
		> .sub-menu {
		display: block;
	}


	/* ---------------------------------------------------------------------
	   CTA Mobile
	   --------------------------------------------------------------------- */

	.primary-menu > li:last-child {
		display: block;
	}

	.primary-menu > li:last-child > a {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;

		min-height: 48px;

		padding: 0.75rem 1.4rem;

		text-align: center;
	}

	.primary-menu > li:last-child .submenu-toggle {
		display: none;
	}

}


/* -------------------------------------------------------------------------
   Accessibility / Reduced Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.site-header *,
	.primary-navigation,
	.primary-menu .sub-menu,
	.menu-toggle__bar,
	.submenu-toggle__icon {
		transition: none !important;
	}
}


/* -------------------------------------------------------------------------
   Wahtsapp Button
   ------------------------------------------------------------------------- */
.whatsapp-button {
     color: rgb(var(--color-white));
     font-size: 0.95rem;
     font-weight: 500;
	color: rgb(var(--color-primary));
	transition: all 0.2s ease;
	display: flex;
    align-items: center;
    gap: 0.5rem;
	justify-content: center;
}
.whatsapp-button .hidden {
	display: none;
}
.whatsapp-button:hover {
    opacity: 0.75;
}
 .whatsapp-button svg {
	width: 36px;
	height: 36px;
     flex-shrink: 0;
}
.footer__whatsApp {
	margin-top: 1rem;
	display: flex;
}
.footer__whatsApp svg {
		width: 24px;
	height: 24px;
}

@media (max-width: 782px) {
	.primary-navigation .secondary-menu {
		padding: 0 1.5rem 1.5rem;
	}

	
	.primary-navigation .whatsapp-button {
			border: 2px solid rgb(var(--color-primary));
		border-radius: 10px;
		padding: 0.75rem 1.4rem;
	}
	
	.primary-navigation .whatsapp-button .hidden {
		display: block;
	}
	
	.primary-navigation .whatsapp-button svg {
		width: 24px;
		height: 24px;
	}
}