/* ----------------------------------------------------------------------------------------
* Modernes Mega-Menü (Desktop ab 992px) – gehört zu resources/views/partials/menu-modern.blade.php
* ----------------------------------------------------------------------------------------
* Jeder Bereich hat eine eigene Farbwelt + Hintergrundmuster:
*   STATIK      -> Navy (Website-Farbe), Blaupausen-Raster
*   GUTACHTEN   -> Petrol, Messpunkt-Raster
*   ENERGIE     -> Grün, Höhenlinien / Wellen
* Farben in Abschnitt 1 austauschbar.
*
* Zurück zum alten Menü:  .env -> MEGA_MENU_MODERN=false  (danach php artisan config:clear)
* ---------------------------------------------------------------------------------------- */

/************************************/
/***   1. Farbwelten              ***/
/************************************/

/* Navy der Website (#12223B) – Akzent helles Stahlblau */
.mm-theme-statik{
	--mm-color: #2c4f7c;
	--mm-rgb: 44, 79, 124;
	--mm-dark: #0b1628;
	--mm-dark-2: #12223B;
	--mm-light: #9cc0e8;
}

/* Petrol – liegt farblich zwischen Navy und Logo-Grün */
.mm-theme-gutachten{
	--mm-color: #0f6b6b;
	--mm-rgb: 15, 107, 107;
	--mm-dark: #082a2e;
	--mm-dark-2: #0e4a4f;
	--mm-light: #7fd6cc;
}

.mm-theme-energie{
	--mm-color: #1b7916;
	--mm-rgb: 27, 121, 22;
	--mm-dark: #082a10;
	--mm-dark-2: #145a1d;
	--mm-light: #8fdc7a;
}

@media only screen and (min-width: 992px){

	/************************************/
	/***   2. Hauptmenüpunkte         ***/
	/************************************/

	.main-menu ul li.submenu > a:after{
		display: inline-block;
		transition: transform 0.3s ease;
	}

	.main-menu .mega-menu-item:hover > a:after,
	.main-menu .mega-menu-item:focus-within > a:after{
		transform: rotate(180deg);
	}

	/* Linie unter dem offenen Punkt – in der Farbe des Bereichs */
	.main-menu .nav-menu-wrapper > ul > li > a::before{
		content: '';
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 4px;
		height: 2px;
		border-radius: 2px;
		background: var(--mm-light, var(--accent-light-color, var(--accent-color)));
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s ease;
	}

	.main-menu .nav-menu-wrapper > ul > li:hover > a::before,
	.main-menu .nav-menu-wrapper > ul > li:focus-within > a::before{
		transform: scaleX(1);
	}

	/************************************/
	/***   3. Panel                   ***/
	/************************************/

	.main-menu .mega-menu-item > .mega-menu{
		width: min(1160px, calc(100vw - 40px));
		transform: translate(-50%, 14px);
		transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
	}

	.main-menu .mega-menu-item:hover > .mega-menu,
	.main-menu .mega-menu-item:focus-within > .mega-menu{
		transform: translate(-50%, 0);
	}

	.main-menu .mega-menu-item > .mega-menu::before{
		height: 28px;
	}

	.mm-panel{
		display: grid;
		grid-template-columns: 310px minmax(0, 1fr);
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
		/* feiner Rand + kräftigerer Schatten: klare Kante auch auf hellen Seiten */
		border: 1px solid rgba(18, 34, 59, 0.12);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.6),
			0 4px 10px rgba(10, 20, 40, 0.10),
			0 30px 60px -12px rgba(10, 20, 40, 0.40),
			0 60px 120px -30px rgba(var(--mm-rgb), 0.35);
		text-align: left;
	}

	/************************************/
	/***   4. Farbige Themenkarte     ***/
	/************************************/

	.mm-feature{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 34px 30px 30px;
		overflow: hidden;
		isolation: isolate;
		color: #fff;
		background:
			radial-gradient(120% 80% at 100% 0%, rgba(var(--mm-rgb), 0.55) 0%, transparent 60%),
			linear-gradient(160deg, var(--mm-dark-2) 0%, var(--mm-dark) 100%);
	}

	/* Muster-Ebene */
	.mm-feature::before{
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		opacity: 0.9;
	}

	/* STATIK: Blaupausen-Raster (fein + grob) */
	.mm-theme-statik .mm-feature::before{
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
			linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
		background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
		-webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 85%);
		mask-image: linear-gradient(200deg, #000 20%, transparent 85%);
	}

	/* GUTACHTEN: Messpunkt-Raster */
	.mm-theme-gutachten .mm-feature::before{
		background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.2px, transparent 1.6px);
		background-size: 16px 16px;
		-webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 75%);
		mask-image: radial-gradient(120% 90% at 100% 0%, #000 10%, transparent 75%);
	}

	/* ENERGIE: Höhenlinien / Wellen */
	.mm-theme-energie .mm-feature::before{
		background-image: repeating-radial-gradient(circle at 110% -10%, transparent 0 18px, rgba(255, 255, 255, 0.09) 18px 19px);
		-webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 90%);
		mask-image: linear-gradient(200deg, #000 15%, transparent 90%);
	}

	/* Dezentes Linien-Icon unten rechts – bleibt neben dem Button, nicht dahinter */
	.mm-feature-art{
		position: absolute;
		right: -18px;
		bottom: -18px;
		z-index: -1;
		color: var(--mm-light);
		opacity: 0.16;
		transform: rotate(-8deg);
		transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
	}

	.mm-feature-art .zt-icon{
		width: 110px;
		height: 110px;
	}

	.mega-menu-item:hover .mm-feature-art{
		transform: rotate(0deg);
		opacity: 0.22;
	}

	.mm-eyebrow{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 12px;
		margin-bottom: 18px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #fff;
		background: rgba(255, 255, 255, 0.10);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 100px;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.mm-eyebrow::before{
		content: '';
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--mm-light);
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
	}

	.mm-feature-title{
		margin: 0 0 12px;
		font-size: 23px;
		font-weight: 700;
		line-height: 1.25em;
		letter-spacing: -0.01em;
		color: #fff;
	}

	.mm-feature-text{
		margin: 0 0 26px;
		font-size: 14px;
		line-height: 1.6em;
		color: rgba(255, 255, 255, 0.72);
	}

	.main-menu ul li a.mm-feature-btn{
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-top: auto;
		padding: 12px 20px !important;
		font-size: 14px;
		font-weight: 600;
		text-transform: none;
		color: var(--mm-dark);
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	}

	.main-menu ul li a.mm-feature-btn span{
		transition: transform 0.25s ease;
	}

	.main-menu ul li a.mm-feature-btn:hover{
		color: #fff;
		background: var(--mm-color);
	}

	.main-menu ul li a.mm-feature-btn:hover span{
		transform: translateX(4px);
	}

	/************************************/
	/***   5. Linkbereich             ***/
	/************************************/

	.mm-main{
		display: flex;
		flex-direction: column;
		background:
			radial-gradient(60% 70% at 100% 0%, rgba(var(--mm-rgb), 0.07) 0%, transparent 70%),
			#fff;
	}

	.mm-columns{
		display: grid;
		gap: 8px 18px;
		padding: 30px 30px 18px;
		flex: 1;
	}

	.mm-columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-columns-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.main-menu .mm-columns .mega-menu-column h4{
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 10px 10px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		line-height: 1.4em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--mm-color);
	}

	.main-menu .mm-columns .mega-menu-column h4::after{
		content: '';
		flex: 1;
		height: 1px;
		background: linear-gradient(90deg, rgba(var(--mm-rgb), 0.25), transparent);
	}

	.main-menu .mega-menu .mm-columns .mega-menu-column > ul{
		gap: 2px;
	}

	/* Link = Icon-Kachel + Titel + Kurzbeschreibung */
	.main-menu .mm-columns .mega-menu-column ul li a{
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px !important;
		border-radius: 6px;
		color: var(--primary-color);
		text-transform: none;
		transition: background-color 0.2s ease, transform 0.25s ease;
	}

	.main-menu .mm-columns .mega-menu-column ul li a:hover,
	.main-menu .mm-columns .mega-menu-column ul li a:focus{
		padding-left: 10px !important;
		background-color: rgba(var(--mm-rgb), 0.07);
		transform: translateX(3px);
	}

	.main-menu .mm-columns .mega-menu-column ul li a:focus-visible{
		outline: 2px solid var(--mm-color);
		outline-offset: 1px;
	}

	.mm-icon{
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 42px;
		height: 42px;
		border-radius: 6px;
		color: var(--mm-color);
		background: rgba(var(--mm-rgb), 0.09);
		box-shadow: inset 0 0 0 1px rgba(var(--mm-rgb), 0.12);
		transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease;
	}

	.mm-icon .zt-icon{
		width: 24px;
		height: 24px;
	}

	/* Zweifarbig wie die Icons auf der Seite: Linien Navy, letztes Detail (Haken, Tür, Blatt …) in Bereichsfarbe */
	.mm-icon .zt-icon{
		color: #12223B;
	}

	.mm-icon .zt-icon > :last-child{
		stroke: var(--mm-color);
		transition: stroke 0.25s ease;
	}

	.mm-columns a:hover .mm-icon,
	.mm-columns a:focus .mm-icon{
		background: linear-gradient(145deg, var(--mm-color), var(--mm-dark-2));
		box-shadow: 0 8px 18px -6px rgba(var(--mm-rgb), 0.6);
		transform: rotate(-6deg);
	}

	.mm-columns a:hover .mm-icon .zt-icon,
	.mm-columns a:focus .mm-icon .zt-icon{
		color: #fff;
	}

	.mm-columns a:hover .mm-icon .zt-icon > :last-child,
	.mm-columns a:focus .mm-icon .zt-icon > :last-child{
		stroke: var(--mm-light);
	}

	.mm-text{
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.mm-title{
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3em;
		color: var(--primary-color);
		transition: color 0.2s ease;
	}

	.mm-desc{
		font-size: 13px;
		font-weight: 400;
		line-height: 1.35em;
		color: rgba(40, 55, 77, 0.65);
	}

	.mm-columns a:hover .mm-title,
	.mm-columns a:focus .mm-title{
		color: var(--mm-color);
	}

	/************************************/
	/***   6. Fußleiste               ***/
	/************************************/

	.mm-footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: 0 20px 20px;
		padding: 12px 18px;
		font-size: 13px;
		color: var(--text-color);
		background: rgba(var(--mm-rgb), 0.06);
		border-radius: 6px;
	}

	.mm-footer-text{
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.mm-footer .zt-icon{
		width: 17px;
		height: 17px;
		color: var(--mm-color);
	}

	.main-menu ul li a.mm-footer-link{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 0 !important;
		font-size: 14px;
		font-weight: 700;
		color: var(--primary-color);
	}

	.main-menu ul li a.mm-footer-link:hover{
		color: var(--mm-color);
	}
}

/* Schmalere Desktops */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.mm-panel{
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.mm-feature{
		padding: 26px 22px 22px;
	}

	.mm-feature-title{
		font-size: 19px;
	}

	.mm-columns{
		padding: 24px 18px 14px;
		gap: 6px 10px;
	}

	.mm-desc{
		display: none;
	}

	.mm-icon{
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce){
	.main-menu .mega-menu-item > .mega-menu,
	.mm-feature-art,
	.mm-icon,
	.main-menu .mm-columns .mega-menu-column ul li a{
		transition: none;
	}
}