/* =========================================================
   M33 - Leistungen Kacheln (hone)
   Tokens: dunkel #303030 | gold #a5936f | weiss #fff
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Figma: m_leistungen auf 00_Startseite — 1 grosse Kachel (1464x507)
   + 2x2 Raster (722x507), s/w-Bilder, Titel gold, "+"-Quadrat.
   ========================================================= */

section.m33_engineering_service {
	background: transparent;
	/* Vertikal-Abstand kommt aus dem Abstand-Klonfeld (data-innerer-abstand) */
}

/* ---------- Header: Titel + Intro ---------- */
section.m33_engineering_service .m33_header {
	margin-bottom: 94px;
}

section.m33_engineering_service .m33_titel_container {
	margin-bottom: 31px;
}

section.m33_engineering_service .m33_titel {
	margin: 0;
	line-height: 1;            /* 35px */
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	color: #fff;
}

section.m33_engineering_service .m33_titel span {
	color: #a5936f;
}

section.m33_engineering_service .m33_text {
	max-width: 573px;
	font-size: 0.9rem;         /* 18px (Basis 20px) */
	line-height: 1.4444;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #fff;
}

/* Optionaler Button (Verlinkung-Clone) unterm Intro */
section.m33_engineering_service .m33_header .mM_links {
	margin-top: 31px;
}

/* ---------- Grid: erste Kachel voll, Rest 2-spaltig ---------- */
section.m33_engineering_service .m33_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

section.m33_engineering_service .m33_item:first-child {
	grid-column: 1 / -1;
}

/* ---------- Kachel ---------- */
section.m33_engineering_service .m33_card {
	position: relative;
	display: block;
	aspect-ratio: 722 / 507;
	overflow: hidden;
	background-color: #1f1f1f;
	text-decoration: none;
}

section.m33_engineering_service .m33_item:first-child .m33_card {
	aspect-ratio: 1464 / 507;
}

section.m33_engineering_service .m33_card_media {
	position: absolute;
	inset: 0;
}

section.m33_engineering_service .m33_card_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1);
	transition: transform .5s ease;
}

section.m33_engineering_service .m33_card:hover .m33_card_img {
	transform: scale(1.03);
}

/* Abdunklung + Gradient (kleine Kacheln: nach unten) */
section.m33_engineering_service .m33_card_shade {
	position: absolute;
	inset: 0;
	background: rgba(31, 31, 31, 0.5);
}

section.m33_engineering_service .m33_card_gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0.8) 100%);
}

/* Grosse Kachel: Gradient von links */
section.m33_engineering_service .m33_item:first-child .m33_card_gradient {
	background: linear-gradient(to right, rgba(38, 38, 38, 0.8) 0%, rgba(38, 38, 38, 0) 100%);
}

/* ---------- Kachel-Content unten links ---------- */
section.m33_engineering_service .m33_card_content {
	position: absolute;
	left: 63px;
	right: 63px;
	bottom: 48px;
	z-index: 1;
}

section.m33_engineering_service .m33_card_titel {
	margin: 0 0 16px 0;
	font-size: 1.1rem;         /* 22px (Basis 20px) */
	line-height: 1.59;         /* 35px */
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	color: #a5936f;
}

section.m33_engineering_service .m33_card_text {
	margin: 0;
	max-width: 573px;
	font-size: 0.9rem;         /* 18px (Basis 20px) */
	line-height: 1.4444;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #fff;
	text-transform: none;      /* Theme setzt a-Inhalte global uppercase */
}

/* ---------- "+"-Quadrat oben rechts: transparent mit hellem Rahmen ---------- */
section.m33_engineering_service .m33_card_plus {
	position: absolute;
	top: 39px;
	right: 39px;
	z-index: 1;
	width: 41px;
	height: 41px;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 0;   /* "+"-Textglyph ausblenden — Plus wird per Pseudo gezeichnet (exakt mittig, unabhaengig von Font-Metrik) */
	box-sizing: border-box;
	transition: background-color .3s, border-color .3s;
}

/* Plus als zwei zentrierte Balken (currentColor = #fff, auf Hover bleibt weiss) */
section.m33_engineering_service .m33_card_plus::before,
section.m33_engineering_service .m33_card_plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: currentColor;
}
section.m33_engineering_service .m33_card_plus::before {   /* horizontaler Balken */
	width: 12px;
	height: 1px;
}
section.m33_engineering_service .m33_card_plus::after {    /* vertikaler Balken */
	width: 1px;
	height: 12px;
}

section.m33_engineering_service .m33_card:hover .m33_card_plus {
	background-color: #a5936f;
	border-color: #a5936f;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	section.m33_engineering_service .m33_header {
		margin-bottom: 50px;
	}

	section.m33_engineering_service .m33_grid {
		grid-template-columns: 1fr;
	}

	section.m33_engineering_service .m33_item:first-child .m33_card {
		aspect-ratio: 722 / 507;
	}

	section.m33_engineering_service .m33_item:first-child .m33_card_gradient {
		background: linear-gradient(to bottom, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0.8) 100%);
	}

	section.m33_engineering_service .m33_card_content {
		left: 30px;
		right: 30px;
		bottom: 30px;
	}

	section.m33_engineering_service .m33_card_plus {
		top: 20px;
		right: 20px;
	}
}

@media (max-width: 575px) {
	section.m33_engineering_service .m33_titel {
		line-height: 1.15;
	}

	/* Gestapelt: Bild oben (mit Plus darueber), Text darunter im Fluss auf
	   dunklem Grund. Verhindert, dass der absolut positionierte Content mit dem
	   Plus-Icon kollidiert / der Text gequetscht wirkt. */
	section.m33_engineering_service .m33_card,
	section.m33_engineering_service .m33_item:first-child .m33_card {
		aspect-ratio: auto;
		min-height: 0;
		background-color: #1f1f1f;
	}

	section.m33_engineering_service .m33_card_media {
		position: relative;
		inset: auto;
		aspect-ratio: 722 / 430;
	}

	section.m33_engineering_service .m33_card_content {
		position: static;
		padding: 24px 24px 28px 24px;
	}

	/* Gradient nur noch ueber dem Bild (nicht ueber dem Text darunter) */
	section.m33_engineering_service .m33_card_gradient,
	section.m33_engineering_service .m33_item:first-child .m33_card_gradient {
		background: linear-gradient(to bottom, rgba(38, 38, 38, 0) 40%, rgba(38, 38, 38, 0.6) 100%);
	}

	/* Plus bleibt oben rechts ueber dem Bild */
	section.m33_engineering_service .m33_card_plus {
		top: 16px;
		right: 16px;
	}
}