/* =========================================================
   NAVIGATION
   ========================================================= */

.main-navigation ul,
.main-navigation li {
	margin: 0;
	padding: 0;

	list-style: none;
}

.main-navigation li::before,
.main-navigation li::marker {
	display: none;
	content: none;
}


/* =========================================================
   ICONS
   ========================================================= */

.main-navigation-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	flex: 0 0 32px;

	margin: 0;
	padding: 0;

	color: inherit;
}

.main-navigation-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 901px) {

	.main-navigation {
		flex: 1 1 auto;
		overflow: visible;
	}


	.main-navigation-list {
		display: flex;
		align-items: stretch;
		justify-content: flex-end;

		gap: 0;

		width: 100%;
	}


	.main-navigation-item {
		position: relative;

		margin: 0;
		padding: 0;
	}


	/* =====================================================
	   HAUPTNAVIGATION
	   ===================================================== */

	.main-navigation-list
	> .main-navigation-item
	> a {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		gap: 12px;

		min-height: 62px;

		padding: 8px 18px;

		box-sizing: border-box;

		border-radius: 10px;

		color: var(--font-color);

		font-size: 17px;
		line-height: 1.2;

		text-align: left;
		text-decoration: none;

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


	.main-navigation-list
	> .main-navigation-item
	> a:hover,

	.main-navigation-list
	> .main-navigation-item
	> a:focus-visible,

	.main-navigation-list
	> .main-navigation-item.active
	> a,

	.main-navigation-list
	> .main-navigation-item.current
	> a {
		background-color: var(--logo-color-1);
		color: #ffffff;

		text-decoration: none;
	}


	/* =====================================================
	   TITEL
	   ===================================================== */

	.main-navigation-title {
		display: block;

		min-width: 0;

		margin: 0;
		padding: 0;

		text-align: left;
	}


	/* =====================================================
	   PFEILE
	   ===================================================== */

	.main-navigation-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 12px;
		height: 12px;

		flex: 0 0 12px;

		margin-left: 2px;

		line-height: 0;

		transition: transform 0.22s ease;
	}


	.main-navigation-arrow svg {
		display: block;

		width: 100%;
		height: 100%;
	}


	.main-navigation-list
	> .has-children
	> a
	> .main-navigation-arrow {
		transform: rotate(90deg);
	}


	/* =====================================================
	   UNTERMENÜ
	   ===================================================== */

	.main-navigation-submenu {
		position: absolute;

		z-index: 5000;

		display: block;

		width: max-content;
		min-width: 0;

		margin: 0;
		padding: 6px;

		box-sizing: border-box;

		background-color: #ffffff;

		border-radius: 12px;

		box-shadow:
			0 12px 30px rgba(0, 0, 0, 0.14);

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

		transition:
			opacity 0.24s ease,
			transform 0.24s ease,
			visibility 0s linear 0.24s;
	}


	/* =====================================================
	   HAUPT-UNTERMENÜS MITTIG
	   ===================================================== */

	.main-navigation-list
	> .main-navigation-item
	> .main-navigation-submenu {
		top: 100%;
		left: 50%;

		transform: translate(-50%, -8px);
	}


	.main-navigation-list
	> .main-navigation-item:hover
	> .main-navigation-submenu,

	.main-navigation-list
	> .main-navigation-item:focus-within
	> .main-navigation-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translate(-50%, 0);

		transition:
			opacity 0.24s ease,
			transform 0.24s ease,
			visibility 0s;
	}


	/* =====================================================
	   LETZTER HAUPTPUNKT RECHTSBÜNDIG
	   ===================================================== */

	.main-navigation-list
	> .main-navigation-item:last-child
	> .main-navigation-submenu {
		right: 0;
		left: auto;

		transform: translateY(-8px);
	}


	.main-navigation-list
	> .main-navigation-item:last-child:hover
	> .main-navigation-submenu,

	.main-navigation-list
	> .main-navigation-item:last-child:focus-within
	> .main-navigation-submenu {
		transform: translateY(0);
	}


	/* =====================================================
	   UNTERMENÜ-LI
	   ===================================================== */

	.main-navigation-submenu
	> .main-navigation-item {
		display: block;

		width: 100%;

		margin: 0;
		padding: 0;
	}


	/* =====================================================
	   UNTERMENÜ-LINK
	   ===================================================== */

	.main-navigation-submenu
	> .main-navigation-item
	> a {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		gap: 13px;

		width: 100%;
		min-height: 50px;

		margin: 0;
		padding: 7px 12px;

		box-sizing: border-box;

		border-radius: 9px;

		color: var(--font-color);

		font-size: 16px;
		line-height: 1.25;

		text-align: left;
		text-decoration: none;

		white-space: nowrap;

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


	.main-navigation-submenu
	.main-navigation-title {
		flex: 1 1 auto;

		text-align: left;
		white-space: nowrap;
	}


	/* =====================================================
	   HOVER / ACTIVE
	   ===================================================== */

	.main-navigation-submenu
	> .main-navigation-item
	> a:hover,

	.main-navigation-submenu
	> .main-navigation-item
	> a:focus-visible,

	.main-navigation-submenu
	> .main-navigation-item.active
	> a,

	.main-navigation-submenu
	> .main-navigation-item.current
	> a {
		background-color: var(--logo-color-1);
		color: #ffffff;

		text-decoration: none;
	}


	/* =====================================================
	   UNTERMENÜ-ICONS
	   ===================================================== */

	.main-navigation-submenu
	.main-navigation-icon {
		width: 28px;
		height: 28px;

		flex: 0 0 28px;

		margin: 0;
		padding: 0;

		color: inherit;
	}


	/* =====================================================
	   WEITERE MENÜEBENEN
	   ===================================================== */

	.main-navigation-submenu
	.main-navigation-submenu {
		top: 0;
		left: 100%;
		right: auto;

		transform: translateX(-8px);
	}


	.main-navigation-submenu
	.main-navigation-item:hover
	> .main-navigation-submenu,

	.main-navigation-submenu
	.main-navigation-item:focus-within
	> .main-navigation-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateX(0);
	}


	.main-navigation-submenu
	.main-navigation-arrow {
		margin-left: auto;

		transform: none;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

	.main-navigation-icon {
		width: 26px;
		height: 26px;

		flex-basis: 26px;
	}

}