/* =========================================================
   M37 - Projekte (hone)
   Tokens: dunkel #303030 | bar rgba(31,31,31,.9) | gold #a5936f
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Figma: m_projekte auf 00_Startseite — 2x2 Karten 870x566,
   Badge 331x80 gold oben rechts, Info-Bar 191px unten.
   ========================================================= */

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

/* ---------- Hintergrund-Auswahl "Hell" (Feld m37_hintergrund) ---------- */
section.m37_projekte.m37_hell {
	background-color: #fff;
}

section.m37_projekte.m37_hell .m37_titel,
section.m37_projekte.m37_hell .m37_text {
	color: #1f1f1f;
}

section.m37_projekte.m37_hell .m37_footer .mM_links a.button,
section.m37_projekte.m37_hell .m37_footer .mM_links a.mM_button {
	background-color: #fff;
	border-color: rgba(31, 31, 31, 0.3);
	color: #1f1f1f;
}

section.m37_projekte.m37_hell .m37_footer .mM_links a.button:hover,
section.m37_projekte.m37_hell .m37_footer .mM_links a.mM_button:hover {
	background-color: #a5936f;
	border-color: #a5936f;
	color: #fff;
}

/* Headroom nur per Wrapper-Klasse "hone_headroom_oben" (Startseite):
   das m2-Bild darueber ragt ab 1560px 91px herein */
@media (min-width: 1560px) {
	section.m37_projekte.hone_headroom_oben .mM_container {
		padding-top: 91px;
	}
}

/* ---------- Header ---------- */
section.m37_projekte .m37_header {
	margin-bottom: 91px;
}

section.m37_projekte .m37_titel_container {
	margin-bottom: 24px;
}

section.m37_projekte .m37_titel {
	margin: 0;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	color: #fff;
}

section.m37_projekte .m37_titel span {
	color: #a5936f;
}

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

/* ---------- Grid ---------- */
section.m37_projekte .m37_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ---------- Karte ---------- */
section.m37_projekte .m37_card {
	position: relative;
	display: block;
	aspect-ratio: 870 / 566;
	overflow: hidden;
	background-color: #1f1f1f;
	text-decoration: none;
}

section.m37_projekte .m37_card_media {
	position: absolute;
	inset: 0;
}

section.m37_projekte .m37_card_media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

section.m37_projekte .m37_card:hover .m37_card_media img {
	transform: scale(1.03);
}

/* Badge oben rechts (Breite folgt dem hw_sold-Text, Figma-Referenz 331x80) */
section.m37_projekte .m37_card_badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - 60px);
	height: 80px;
	padding: 0 40px;
	text-align: center;
	background-color: #a5936f;
	color: #fff;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	font-weight: 500;
	letter-spacing: 0.375px;
	text-transform: uppercase;
	box-sizing: border-box;
}

/* Info-Bar unten */
section.m37_projekte .m37_card_bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	min-height: 191px;
	padding: 25px 63px 27px 63px;
	background-color: rgba(31, 31, 31, 0.9);
	box-sizing: border-box;
}

section.m37_projekte .m37_card_titel {
	margin: 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;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

section.m37_projekte .m37_card_untertitel {
	margin: 0;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	line-height: 1.7333;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #a5936f;
	text-transform: none;
}

section.m37_projekte .m37_card_meta {
	margin: 14px 0 0 0;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	line-height: 1.7333;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #fff;
	text-transform: none;
}

/* "Weitere Informationen" mit CSS-Dreieck (weiss, Hover: gold via currentColor) */
section.m37_projekte .m37_card_more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 17px;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	font-weight: 500;
	letter-spacing: 0.375px;
	text-transform: uppercase;
	color: #fff;
	transition: color .3s;
}

section.m37_projekte .m37_card_more::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
}

section.m37_projekte .m37_card:hover .m37_card_more {
	color: #a5936f;
}

/* ---------- Footer-Button zentriert ---------- */
section.m37_projekte .m37_footer .mM_links {
	justify-content: center;
	margin-top: 49px;
}

/* Figma: dunkler Button #2b2b2b mit 1px weisser Border statt gold */
section.m37_projekte .m37_footer .mM_links a.button,
section.m37_projekte .m37_footer .mM_links a.mM_button {
	background-color: #2b2b2b;
	border: 1px solid #fff;
	color: #fff;
}

section.m37_projekte .m37_footer .mM_links a.button:hover,
section.m37_projekte .m37_footer .mM_links a.mM_button:hover {
	background-color: #a5936f;
	border-color: #a5936f;
	color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	section.m37_projekte .m37_card_bar {
		padding: 20px 30px;
		min-height: 0;
	}

	section.m37_projekte .m37_card_badge {
		min-width: 0;
		height: auto;                  /* waechst mit dem Text statt zu ueberquellen */
		min-height: 41px;
		padding: 8px 20px;
		line-height: 1.25;
		max-width: calc(100% - 40px);
	}
}

/* Base-m37 (2-spaltig): unter der Figma-Breite (die 870er-Karten entstehen erst
   ab dem Breakout >=1560) verdeckt die Overlay-Bar zu viel -> Info-Bar unter das
   Bild, sobald <1560. Gilt fuer die Nicht-3-Spalten-Varianten. */
@media (max-width: 1559px) {
	section.m37_projekte:not(.hone_portfolio_3col):not(.hone_bt_projekte) .m37_card {
		aspect-ratio: auto;
	}

	section.m37_projekte:not(.hone_portfolio_3col):not(.hone_bt_projekte) .m37_card_media {
		position: relative;
		inset: auto;
		aspect-ratio: 870 / 400;
	}

	section.m37_projekte:not(.hone_portfolio_3col):not(.hone_bt_projekte) .m37_card_bar {
		position: relative;
	}

	section.m37_projekte:not(.hone_portfolio_3col):not(.hone_bt_projekte) .m37_card_titel {
		white-space: normal;
	}
}

@media (max-width: 991px) {
	section.m37_projekte .m37_grid {
		grid-template-columns: 1fr;
	}

	section.m37_projekte .m37_header {
		margin-bottom: 50px;
	}
}

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

	section.m37_projekte .m37_card_titel {
		font-size: 1rem;
		line-height: 1.3;
	}

	/* Info-Bar-Text enger ans Raster (30px war auf schmaler Karte zu viel Rand) */
	section.m37_projekte .m37_card_bar {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Badge kompakt halten, damit er das Bild nicht zudeckt */
	section.m37_projekte .m37_card_badge {
		font-size: 0.65rem;        /* 13px */
		padding: 7px 14px;
		max-width: 78%;
	}
}

/* Breites Layout: Nur die Karten (.m37_grid) ragen je 149px ueber den Container
   hinaus (Figma-Grid: 1760 bei Container 1462), nie naeher als 80px an den Rand
   (clamp). Der Header bleibt auf User-Wunsch im normalen Container (nicht mit
   rausgeschoben) — Titel/Intro fluchten mit dem Container-Rand. */
@media (min-width: 1560px) {
	section.m37_projekte .m37_grid {
		margin-left: clamp(-149px, calc(-50vw + 811px), 0px);
		margin-right: clamp(-149px, calc(-50vw + 811px), 0px);
	}
}

@media (min-width: 2200px) {
	section.m37_projekte .m37_grid {
		margin-left: clamp(-149px, calc(-50vw + 920px), 0px);  /* Container 1680 */
		margin-right: clamp(-149px, calc(-50vw + 920px), 0px);
	}
}

@media (min-width: 2400px) {
	section.m37_projekte .m37_grid {
		margin-left: clamp(-149px, calc(-50vw + 980px), 0px);  /* Container 1800 */
		margin-right: clamp(-149px, calc(-50vw + 980px), 0px);
	}
}

/* =========================================================
   hone Portfolio 3-spaltig (Wrapper "hone_portfolio_3col")
   Figma 06_Leistungen "Unser Portfolio" — 3 Karten 573x477
   (statt 2x 870x566), Bar 176px. Header links, Button rechts
   oben laeuft weiter ueber den Basis-Footer (zentriert). Der
   Breakout (>=1560) traegt 3x573+40 = 1760. Nur additiv.
   ========================================================= */
section.m37_projekte.hone_portfolio_3col .m37_grid {
	grid-template-columns: repeat(3, 1fr);
}

section.m37_projekte.hone_portfolio_3col .m37_card {
	aspect-ratio: 573 / 477;
}

section.m37_projekte.hone_portfolio_3col .m37_card_bar {
	min-height: 176px;
	padding: 24px 48px 22px 48px;
}

/* Figma: kein Status-Badge, kein "Weitere Informationen" */
section.m37_projekte.hone_portfolio_3col .m37_card_badge,
section.m37_projekte.hone_portfolio_3col .m37_card_more {
	display: none;
}

/* Kopfzeile (Titel + Button) im NORMALEN Container — Karten laufen in der
   breiten Flucht, der Header nicht. Basis-Breakout hier zuruecknehmen. */
section.m37_projekte.hone_portfolio_3col .m37_header_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

section.m37_projekte.hone_portfolio_3col .m37_header_row .m37_titel_container {
	margin-bottom: 0;
}

section.m37_projekte.hone_portfolio_3col .m37_header_links .mM_links {
	margin: 0;
	justify-content: flex-end;
	flex-shrink: 0;
}
/* Button-Optik: globaler Gold-Primary-Button (Figma) — kein eigenes Override */

/* Header bleibt im 1462er-Container (Basis setzt >=1560/2200/2400 Breakout-Margins) */
@media (min-width: 1560px) {
	section.m37_projekte.hone_portfolio_3col .m37_header {
		margin-left: 0;
		margin-right: 0;
	}
}

/* 3-spaltig nur ab 1560px, wo die Karten die volle Figma-Breite (573px)
   erreichen und die Info-Bar bei 176px ~37% deckt. Darunter waeren 3 Spalten
   zu schmal/niedrig -> die Bar (Text) deckt >60% des Bildes. Deshalb ab 1559px
   abwaerts ZWEI Spalten: breitere, hoehere Karten, Bar deckt ~33% und der
   Meta-Text passt in 2 Zeilen. */
@media (max-width: 1559px) {
	section.m37_projekte.hone_portfolio_3col .m37_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Unter der Figma-Breite: Info-Bar UNTER das Bild (wie bei den anderen
	   m37-Objekten), nicht mehr als Overlay drueber. Bild feste Landschafts-
	   Ratio, Bar fliesst darunter. */
	section.m37_projekte.hone_portfolio_3col .m37_card {
		aspect-ratio: auto;
	}
	section.m37_projekte.hone_portfolio_3col .m37_card_media {
		position: relative;
		inset: auto;
		aspect-ratio: 573 / 400;
	}
	section.m37_projekte.hone_portfolio_3col .m37_card_bar {
		position: relative;
		min-height: 0;
	}
	/* Titel darf jetzt umbrechen statt abzuschneiden (Bar ist voll breit unter dem Bild) */
	section.m37_projekte.hone_portfolio_3col .m37_card_titel {
		white-space: normal;
	}
}

@media (max-width: 575px) {
	section.m37_projekte.hone_portfolio_3col .m37_header_row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	section.m37_projekte.hone_portfolio_3col .m37_header_links .mM_links {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	section.m37_projekte.hone_portfolio_3col .m37_grid {
		grid-template-columns: 1fr;
	}
	/* Bar-unter-Bild kommt aus dem <=1559-Block; hier nur schmaleres Padding */
	section.m37_projekte.hone_portfolio_3col .m37_card_bar {
		padding-left: 24px;   /* 48px war einspaltig zu viel Rand */
		padding-right: 24px;
	}
}

/* =========================================================
   hone Bautraeger Projekte (Wrapper "hone_bt_projekte",
   06_Bautraeger): 3 Karten 573x459 in der breiten Flucht
   (Basis-Breakout greift), Bar 180px, kein Badge/"Weitere
   Informationen", KEIN Header — nur Grid + zentrierter
   Footer-Button (m37_hell). Nur additiv.
   ========================================================= */
section.m37_projekte.hone_bt_projekte .m37_grid {
	grid-template-columns: repeat(3, 1fr);
}

section.m37_projekte.hone_bt_projekte .m37_card {
	aspect-ratio: 573 / 459;
}

section.m37_projekte.hone_bt_projekte .m37_card_bar {
	min-height: 180px;
	padding: 25px 42px 22px 42px;
}

section.m37_projekte.hone_bt_projekte .m37_card_badge,
section.m37_projekte.hone_bt_projekte .m37_card_more {
	display: none;
}

/* 3 Spalten nur ab Figma-Breite (>=1560). Darunter 2 Spalten UND Info-Bar
   unter das Bild (wie portfolio_3col / base-m37) statt Overlay, das sonst zu
   viel vom Bild verdeckt. */
@media (max-width: 1559px) {
	section.m37_projekte.hone_bt_projekte .m37_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	section.m37_projekte.hone_bt_projekte .m37_card {
		aspect-ratio: auto;
	}
	section.m37_projekte.hone_bt_projekte .m37_card_media {
		position: relative;
		inset: auto;
		aspect-ratio: 573 / 400;
	}
	section.m37_projekte.hone_bt_projekte .m37_card_bar {
		position: relative;
		min-height: 0;
	}
	section.m37_projekte.hone_bt_projekte .m37_card_titel {
		white-space: normal;
	}
}
@media (max-width: 767px) {
	section.m37_projekte.hone_bt_projekte .m37_grid {
		grid-template-columns: 1fr;
	}
	section.m37_projekte.hone_bt_projekte .m37_card_bar {
		padding-left: 24px;   /* 42px war einspaltig zu viel Rand */
		padding-right: 24px;
	}
}