/* ===== Subnavigation Desktop ===== */
:root {
	--max-rows: 1;
	--column-min: 180px;
	/* minimale Spaltenbreite SubNav */
	--column-gap: 2px;
	--row-gap: 2px;
	--subnav-max-width: 1000px;
	/* max. Breite SubNav/SubSubNav */
	--subsubnav-max-width: 180px;
	/* max. Breite SubSubNav-Spalten */
	--transition-speed: 0.2s;
}

/* Desktop-Ansicht */
@media (min-width: 768px) {


	.jtpl-subnavigation .cc-nav-current a {
		background-color: #ff9900c4 !important;
	}

	/* ===== SubNav Level 1 ===== */
	ul.j-nav-level-1 {
		list-style: none !important;
		padding: 0 !important;
		display: grid !important;
		grid-auto-flow: row !important;
		grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr)) !important;
		grid-auto-rows: auto !important;
		column-gap: var(--column-gap) !important;
		row-gap: var(--row-gap) !important;
		width: auto !important;
		max-width: var(--subnav-max-width) !important;
		box-sizing: border-box !important;
		margin: 0 auto !important;
		justify-content: flex-start !important;

	}


	/* ===== SubSubNav Level 2 ===== */
	ul.j-nav-level-2 {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-template-rows: repeat(var(--max-rows), auto) !important;
		grid-auto-columns: minmax(min-content, var(--subsubnav-max-width)) !important;
		column-gap: var(--column-gap) !important;
		row-gap: var(--row-gap) !important;
		justify-content: flex-start !important;
		margin: 2px auto !important;
	}



	/* ===== Dropdown beim Hover sichtbar + Animation ===== */
	li.j-nav-has-children:hover > ul.j-nav-level-2,
	li.j-nav-has-children:focus-within > ul.j-nav-level-2 {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}


	ul.j-nav-level-2 li {
		margin: 1px 0;
	}


	/* ===== Links (SubNav + SubSubNav) ===== */
	ul.j-nav-level-1 a,
	ul.j-nav-level-2 a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 6px 10px !important;
		background: #fff !important;
		border: 1px solid #999 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		color: #000 !important;
		text-decoration: none !important;
		transition: background 0.2s ease-in-out !important;
	}


	ul.j-nav-level-1 a:hover,
	ul.j-nav-level-2 a:hover {
		background-color: #ff9900c4 !important;
	}




	/* ===== Alte Styles überschreiben ===== */
	.jtpl-subnavigation li {
		display: block !important;
	}

	@media (min-width: 990px) {

		.jtpl-subnavigation .j-nav-level-1 li:last-child,
		.jtpl-subnavigation .j-nav-level-2 li:last-child {
			margin-right: 0 !important;
		}
	}

	/* ===== Mobile Toggle ausblenden ===== */
	.jmd-nav__toggle-button {
		display: none !important;
	}
}