@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   M31 - Bild und Zahlen (Team & Kennzahlen)
   Tokens: bg #f4f5f2 | orange #f48520 | dark #271b11 | taupe #685a51
   Font: Inter | Font-Sizes in rem, Spacing in px.
   ========================================================= */

section.m31_bild_und_zahlen {
	position: relative;
	background-color: #f4f5f2;
	font-family: 'Inter', sans-serif;
}

/* Inter + korrekte Weights auf injizierten Titel & Zahlen erzwingen (gegen globale Theme-Styles) */
section.m31_bild_und_zahlen .m31_titel,
section.m31_bild_und_zahlen .m31_titel_container,
section.m31_bild_und_zahlen .m31_titel * {
	font-family: 'Inter', sans-serif !important;
}
section.m31_bild_und_zahlen .m31_titel {
	font-weight: 800 !important;
}
section.m31_bild_und_zahlen .m31_zahl .m31_zahl_value,
section.m31_bild_und_zahlen .m31_zahl .m31_zahl_einheit {
	font-family: 'Inter', sans-serif !important;
	font-weight: 900;
}

/* Voll-breit wie m30 (m30 liegt NICHT in .mM_container -> 44/56 vom Viewport).
   Daher mM_container hier auf volle Breite zwingen, dann teilt .m31_inner den Viewport. */
section.m31_bild_und_zahlen .mM_container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* .m31_inner = .mM_row (Theme: display:flex; flex-wrap:wrap; gap:20px).
   nowrap + gap:0, sonst bricht der Content bei 44%+56%+gap > 100% um (untereinander). */
section.m31_bild_und_zahlen .m31_inner {
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
	min-height: 620px;
}
section.m31_bild_und_zahlen .flex_row_reverse {
	flex-direction: row-reverse;
}

/* ---------- Bild ----------
   Bild 44% vom Viewport, buendig am Rand (= Breite des m30-Textbereichs). */
section.m31_bild_und_zahlen .m31_media {
	flex: 0 0 44%;
	max-width: 44%;
	min-width: 0;
	align-self: stretch;
	/* Bild ragt auf Desktop 120px unten ins naechste Modul (align-items:stretch -> Bild
	   wird um 120px hoeher und ueberlappt nach unten). Mobil zurueckgesetzt. */
	margin-bottom: -120px;
}
section.m31_bild_und_zahlen .m31_img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 620px;
	object-fit: cover;
}

/* ---------- Content ----------
   56% vom Viewport (rechts breiter). Innenabstand laut Figma (Section 6:557 @1920):
   links = Gap Bild->Text 182px (Bildkante 868 -> Content 1050),
   rechts = globaler 234px-Gutter (Content-Kante 1686 -> Rand 1920). */
section.m31_bild_und_zahlen .m31_content {
	flex: 1 1 56%;
	max-width: 56%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 234px 80px 182px;
	box-sizing: border-box;
}

section.m31_bild_und_zahlen .m31_topline {
	display: block;
	margin-bottom: 3px;
	font-size: 1.0625rem;   /* 17px */
	font-weight: 800;
	text-transform: uppercase;
	color: #f48520;
}

/* per JS injizierter Titel */
section.m31_bild_und_zahlen .m31_titel {
	margin: 0;
	font-weight: 800;
	text-transform: uppercase;
	color: #271b11;
}
section.m31_bild_und_zahlen .m31_titel_container {
	margin-bottom: 29px;
}

section.m31_bild_und_zahlen .m31_text {
	max-width: 663px;
	margin-bottom: 48px;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.47;
	color: #685a51;
}

/* ---------- Kennzahlen ---------- */
section.m31_bild_und_zahlen .m31_zahl_item {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 23px 0 20px;   /* top +1, bottom -2 */
}
section.m31_bild_und_zahlen .m31_zahl_item + .m31_zahl_item {
	border-top: 2px solid rgba(104, 90, 81, 0.3);
}

section.m31_bild_und_zahlen .m31_zahl {
	flex: 0 0 auto;
	min-width: 150px;
	font-size: 2.8125rem;   /* 45px */
	font-weight: 900;
	line-height: 1;
	color: #271b11;
	white-space: nowrap;
}
section.m31_bild_und_zahlen .m31_zahl_einheit {
	color: #f48520;
}

section.m31_bild_und_zahlen .m31_zahl_beschr {
	margin: 0;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.47;
	color: #685a51;
}
section.m31_bild_und_zahlen .m31_zahl_beschr strong {
	font-weight: 600;
	color: #271b11;
}

section.m31_bild_und_zahlen .m31_zahl_beschr span {
	font-weight: 600;
}

/* =========================================================
   Responsive — grosse Figma-Gutter (182/234) zu schmaleren Viewports herunterskalieren
   ========================================================= */
@media screen and (max-width: 1599px) {
	section.m31_bild_und_zahlen .m31_content {
		padding: 70px 140px 70px 120px;
	}
}
@media screen and (max-width: 1299px) {
	section.m31_bild_und_zahlen .m31_content {
		padding: 60px 80px 60px 70px;
	}
}

@media screen and (max-width: 991px) {
	/* kein Ueberhang mehr -> stattdessen unten Abstand = innerer Modulabstand (s. project.css) */
	section.m31_bild_und_zahlen {
		padding-bottom: 80px;
	}
	section.m31_bild_und_zahlen .m31_inner,
	section.m31_bild_und_zahlen .m31_inner.flex_row_reverse {
		flex-direction: column;
		min-height: 0;
		/* ab Umbruch wieder in den Container: Bild + Content kleben nicht mehr am Rand */
		padding: 0 24px;
	}
	section.m31_bild_und_zahlen .m31_media {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
		margin-bottom: 0;   /* kein Ueberhang ab Umbruch */
	}
	section.m31_bild_und_zahlen .m31_img {
		/* feste Hoehe raus -> Bild in natuerlicher Hoehe */
		min-height: 0;
		height: auto;
	}
	section.m31_bild_und_zahlen .m31_content {
		flex: 1 1 100%;
		max-width: 100%;
		padding: 60px 0 0;
	}
	section.m31_bild_und_zahlen .m31_titel {
		font-size: 2.25rem;   /* 36px */
	}
	section.m31_bild_und_zahlen .m31_zahl {
		min-width: 110px;
		font-size: 2.25rem;   /* 36px */
	}
}

@media screen and (max-width: 600px) {
	/* innerer Modulabstand wird hier 56px (s. project.css) -> Section-Padding-Bottom angleichen */
	section.m31_bild_und_zahlen {
		padding-bottom: 56px;
	}
	section.m31_bild_und_zahlen .m31_zahl_item {
		gap: 20px;
	}
	section.m31_bild_und_zahlen .m31_zahl {
		min-width: 90px;
	}
}