/* =========================================================
   M2 - Text und Bild (hone)
   Tokens: weiss #fff | text #2b2b2b | gold #a5936f
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Figma: m_text ("Warum HONE?") auf 00_Startseite — helle Sektion,
   Bild links (ragt bei grossen Viewports bis 80px an den Rand und
   91px nach unten in die dunkle Folge-Sektion), Text rechts.
   ========================================================= */

section.m2_text_and_image {
	background-color: #fff;
	/* Vertikal-Abstand kommt aus dem Abstand-Klonfeld (data-innerer-abstand) */
}

section.m2_text_and_image .flex_row_reverse {
	flex-direction: row-reverse;
}

section.m2_text_and_image .m2_text_und_bild_main .mM_row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

section.m2_text_and_image .m2_galerie_wrapper,
section.m2_text_and_image .m2_content_wrapper {
	flex: 0 0 50%;
	max-width: 50%;
	width: 50%;
}

/* ---------- Bild ---------- */
section.m2_text_and_image .m2_galerie_item img,
section.m2_text_and_image .m2_galerie_item video {
	width: 100%;
	aspect-ratio: 722 / 576;
	object-fit: cover;
	display: block;
}

/* Grosse Viewports: Bild nach links bis 80px an den Viewport-Rand
   ziehen und 91px in die dunkle Folge-Sektion ueberlappen lassen */
@media (min-width: 1560px) {
	section.m2_text_and_image:not(.m2_bg_dunkel) {
		/* Struktur-Override (schlaegt das Abstand-Klonfeld):
		   das Bild ragt 91px in die dunkle Folge-Sektion, die weisse
		   Flaeche endet deshalb direkt am Inhalt. Gilt nur fuer die
		   helle Variante — bei "dunkel" liegt das Bild in der Flaeche
		   und das Abstand-Klonfeld behaelt die Kontrolle. */
		padding-bottom: 0;
	}

	section.m2_text_and_image .m2_galerie_container {
		margin-left: clamp(-149px, calc(-50vw + 811px), 0px); /* max. 149px Auszug, nie naeher als 80px an den Rand */
		width: 722px; /* feste Figma-Breite, sonst waechst der Container um den Margin */
	}

	section.m2_text_and_image .m2_galerie_item img,
	section.m2_text_and_image .m2_galerie_item video {
		height: 576px;
	}

	section.m2_text_and_image .m2_galerie_wrapper {
		margin-bottom: -91px; /* Ueberlappung in die dunkle Sektion darunter */
	}

	section.m2_text_and_image .m2_content_container {
		padding-top: 96px;
	}

	/* Gespiegelte Anordnung (Text links, Bild rechts): kein Links-Auszug —
	   das Bild bleibt in seiner Spalte am rechten Containerrand */
	section.m2_text_and_image .flex_row_reverse .m2_galerie_container {
		margin-left: 0;
		width: auto;
	}
}

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

	section.m2_text_and_image .flex_row_reverse .m2_galerie_container {
		margin-left: 0;
		width: auto;
	}

	section.m2_text_and_image .m2_galerie_item img,
	section.m2_text_and_image .m2_galerie_item video {
		height: 654px;
	}
}

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

	section.m2_text_and_image .flex_row_reverse .m2_galerie_container {
		margin-left: 0;
		width: auto;
	}

	section.m2_text_and_image .m2_galerie_item img,
	section.m2_text_and_image .m2_galerie_item video {
		height: 702px;
	}
}

/* ---------- Text rechts ---------- */
section.m2_text_and_image .m2_titel {
	margin: 0;
	line-height: 1;            /* 35px */
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	color: #2b2b2b;
}

section.m2_text_and_image .m2_titel span {
	color: #a5936f;
}

/* Goldene Phrase auf eigener Zeile (ersetzt frueheres <br>) — nur die
   Varianten, deren Titel zweizeilig gedacht sind. Andere m2-Varianten
   (hone_abnahme, hone_text_*, hone_bt_*) behalten inline-Gold. */
section.m2_text_and_image.hone_rundum .m2_titel span,
section.m2_text_and_image.hone_gebaeude .m2_titel span,
section.m2_text_and_image.hone_planung .m2_titel span,
section.m2_text_and_image.hone_pv_install .m2_titel span {
	display: block;
}

section.m2_text_and_image .m2_titel_container {
	margin-bottom: 25px;
}

section.m2_text_and_image .m2_text_container {
	max-width: 573px;
}

section.m2_text_and_image .m2_text_container,
section.m2_text_and_image .m2_text_container p {
	font-size: 0.9rem;         /* 18px (Basis 20px) */
	line-height: 1.4444;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #2b2b2b;
}

section.m2_text_and_image .m2_text_container p {
	margin-bottom: 0;
}

/* ---------- Button (per JS injiziert): helle Secondary-Variante ---------- */
section.m2_text_and_image .mM_links {
	margin-top: 55px;
}

section.m2_text_and_image .mM_links a.button.secondary,
section.m2_text_and_image .mM_links a.mM_button.secondary {
	background-color: #fff;
	border: 1px solid rgba(31, 31, 31, 0.3);
	color: #1f1f1f;
}

section.m2_text_and_image .mM_links a.button.secondary:hover,
section.m2_text_and_image .mM_links a.mM_button.secondary:hover {
	background-color: #1f1f1f;
	border-color: #1f1f1f;
	color: #fff;
}

/* ---------- Responsive ----------
   Gestapelt (Bild voll breit ueber dem Text) im GANZEN Tablet-Bereich bis
   1199px — zweispaltig erst ab 1200px, wo die Spalten breit genug sind. */
@media screen and (max-width: 1199px) {
	section.m2_text_and_image .m2_text_und_bild_main .mM_row {
		flex-wrap: wrap;
	}

	section.m2_text_and_image .m2_galerie_wrapper {
		margin-bottom: 40px;
	}

	section.m2_text_and_image .m2_galerie_wrapper,
	section.m2_text_and_image .m2_content_wrapper {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	/* Tablet/gestapelt: hohe (nahezu quadratische) Bilder werden bei voller
	   Breite viel zu hoch (z.B. 573/579 ≈ 728px auf 720er-Spalte) und kleben an
	   den Raendern der dunklen Flaeche. Auf ein Landschafts-Band deckeln;
	   object-fit:cover (Basis) schneidet mittig zu. */
	section.m2_text_and_image .m2_galerie_item img,
	section.m2_text_and_image .m2_galerie_item video {
		max-height: 480px;
	}
}

@media screen and (max-width: 575px) {
	section.m2_text_and_image .m2_titel {
		line-height: 1.15;
	}
}

/* =========================================================
   Hintergrund-Auswahl "Dunkel" (Feld m2_hintergrund)
   Figma: "Arbeiten bei Hone" auf 04_Karriere — Flaeche #2b2b2b,
   Titel/Text weiss (Gold-span bleibt), Bild 573x613 rechtsbuendig
   OHNE Auszug/Ueberhang. Steht am Dateiende: schlaegt bei gleicher
   Spezifitaet die Standard-Regeln. Nur additiv.
   ========================================================= */

section.m2_text_and_image.m2_bg_dunkel {
	background-color: #2b2b2b;
}

section.m2_text_and_image.m2_bg_dunkel .m2_titel {
	color: #fff;
}

section.m2_text_and_image.m2_bg_dunkel .m2_titel span {
	color: #a5936f;
}

section.m2_text_and_image.m2_bg_dunkel .m2_text_container,
section.m2_text_and_image.m2_bg_dunkel .m2_text_container p {
	color: #fff;
}

/* Button auf dunkler Flaeche: Ghost (transparent, weisser Rahmen) —
   die helle Secondary-Variante (weiss gefuellt) passt hier nicht */
section.m2_text_and_image.m2_bg_dunkel .mM_links a.button,
section.m2_text_and_image.m2_bg_dunkel .mM_links a.mM_button {
	background-color: transparent;
	border: 1px solid #fff;
	color: #fff;
}

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

/* Bild: schmaleres Figma-Format, rechtsbuendig in der Spalte, in der Flaeche */
section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item video {
	width: 573px;
	max-width: 100%;
	aspect-ratio: 573 / 613;
	margin-left: auto;
}

@media (min-width: 1560px) {
	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_container {
		margin-left: 0;
		width: auto;
	}

	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_wrapper {
		margin-bottom: 0;
	}

	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item img,
	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item video {
		height: auto;
	}
}

@media screen and (max-width: 1199px) {
	/* gestapelt: der 573px-Cap der dunklen Variante faellt weg -> Bild voll breit */
	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item img,
	section.m2_text_and_image.m2_bg_dunkel .m2_galerie_item video {
		width: 100%;
		margin-left: 0;
	}
}

/* =========================================================
   hone Rundum-Service (Wrapper "hone_rundum", 06_Facility)
   Figma 33:2599: dunkle Flaeche 636 hoch, Bild 722x636 buendig
   an der linken Container-Kante, beginnt am Content-Anfang und
   ragt 97px UNTEN in die weisse Folge-Sektion; Text 573 rechts,
   97px tiefer als das Bild. Ueberschreibt die m2_bg_dunkel-
   Bildregeln (573 rechtsbuendig). Nur additiv.
   ========================================================= */
@media (min-width: 1200px) {
	/* Zwischenbereich: proportional (722/1462 bzw. 573/1462) */
	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_galerie_wrapper {
		flex: 0 0 49.4%;
		max-width: 49.4%;
		width: 49.4%;
		margin-bottom: -97px; /* Bild ragt 97px in die weisse Folge-Sektion */
	}

	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}

	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_content_container {
		padding-top: 48px; /* Zwischenbereich: Textspalte kurz halten, damit das Bild den Ueberhang treibt */
	}

	/* Struktur-Override wie beim hellen Startseiten-m2: die dunkle Flaeche endet
	   am Inhalt, der 97px-Ueberhang des Bildes ist dadurch GARANTIERT sichtbar
	   (nicht von der Texthoehe abhaengig) */
	section.m2_text_and_image.m2_bg_dunkel.hone_rundum {
		padding-bottom: 0 !important;
	}
}

@media (min-width: 1560px) {
	/* Volle Container-Breite 1462: exakte Figma-Masse + 97px-Ueberhang */
	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_galerie_wrapper {
		flex: 0 0 722px;
		max-width: 722px;
		width: 722px;
		margin-bottom: -97px; /* padding-bottom der Sektion ist 0 -> exakt 97px Ueberhang */
	}

	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_content_wrapper {
		flex: 0 0 573px;
		max-width: 573px;
		width: 573px;
	}

	section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_content_container {
		padding-top: 97px; /* Figma: Text 97px tiefer als das Bild */
	}
}

/* Textspalte kompakt wie im Figma (442 hoch), sonst frisst sie den Ueberhang */
section.m2_text_and_image.m2_bg_dunkel.hone_rundum .mM_links {
	margin-top: 53px;
}

section.m2_text_and_image.m2_bg_dunkel.hone_rundum {
	position: relative;
	z-index: 1; /* ganze Sektion ueber die weisse Folge-Sektion heben — sonst verdeckt deren Hintergrund den Bild-Ueberhang */
}

section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_galerie_container {
	position: relative;
	z-index: 1;
}

section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_rundum .m2_galerie_item video {
	width: 100%;
	aspect-ratio: 722 / 636;
	height: auto;
	margin-left: 0;
}

/* =========================================================
   hone Gebaeude (Wrapper "hone_gebaeude", 06_Facility)
   Figma 33:3085: Bild rechts 573x523 (flacher als das
   Karriere-Format 573x613) — Sektion dadurch 717 statt 853.
   ========================================================= */
section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_galerie_item video {
	width: 100%;               /* fuellt die 39,2%-Bildspalte -> skaliert mit */
	aspect-ratio: 573 / 523;
	margin-left: 0;
}

/* Aufteilung wie hone_pv_install: Bild rechts + Text links je 39,2% (= 573/1462),
   space-between -> beide buendig an den Container-Kanten, skaliert mit dem
   Container. Feste Prozente statt Basis-50% (50%+50%+Gap laeuft ueber -> 20px
   Text-Ueberhang links). */
@media (min-width: 1200px) {
	section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_galerie_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_text_container {
		max-width: none;
	}
	/* Text mittig zum Bild (statt Top-Offset der Basis) */
	section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_content_wrapper {
		align-self: center;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_gebaeude .m2_content_container {
		padding-top: 0;
	}
}

/* =========================================================
   hone PV Planung-Foto (Wrapper "hone_planung", 06_Photovoltaik
   "Massgeschneiderte Planung"): dunkles m2, Bild LINKS buendig
   am Container-Rand, Format 573x579.
   ========================================================= */
section.m2_text_and_image.m2_bg_dunkel.hone_planung .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_planung .m2_galerie_item video {
	width: 100%;               /* fuellt die 39,2%-Bildspalte -> skaliert mit */
	aspect-ratio: 573 / 579;
	margin-left: 0;
}

/* Bildspalte 39,2% (= 573/1462) wie bei hone_pv_install -> gleiche Bildbreite,
   skaliert mit dem Container. Text-Spalte unveraendert (Basis 50%). */
@media (min-width: 1200px) {
	section.m2_text_and_image.m2_bg_dunkel.hone_planung .m2_galerie_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}
	/* Text mittig zum Bild (statt 96px Top-Offset der Basis) */
	section.m2_text_and_image.m2_bg_dunkel.hone_planung .m2_content_wrapper {
		align-self: center;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_planung .m2_content_container {
		padding-top: 0;
	}
}

/* =========================================================
   hone PV Installation (Wrapper "hone_pv_install", 06_Photovoltaik
   "Professionelle Installation"): auf SEITENFARBE statt #2b2b2b,
   Text links / Bild rechts (573x527), Text beginnt 101px tiefer
   als das Bild.
   ========================================================= */
section.m2_text_and_image.m2_bg_dunkel.hone_pv_install {
	background-color: #303030;
}
section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_galerie_item video {
	width: 100%;               /* Bild fuellt seine (prozentuale) Spalte -> skaliert mit */
	aspect-ratio: 573 / 527;
	margin-left: 0;
}

/* Bild rechts, Text links — beide je 39,2% (= 573/1462) und per space-between
   buendig an den Container-Kanten, Luecke in der Mitte. Prozent (nicht px):
   skaliert mit dem Container mit (1680 @2200, 1800 @2400). 39,2%+39,2% laesst
   genug Platz fuer den 20px-Gap (kein Ueberlauf wie bei 50%+50%). */
@media (min-width: 1200px) {
	section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_galerie_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_content_container {
		padding-top: 101px;
	}
	/* Text fuellt seine prozentuale Spalte (statt 573er-Cap) -> skaliert mit */
	section.m2_text_and_image.m2_bg_dunkel.hone_pv_install .m2_text_container {
		max-width: none;
	}
}

/* =========================================================
   hone PV Abnahme (Wrapper "hone_abnahme", 06_Photovoltaik
   "Technische Abnahme"): Geometrie wie hone_rundum (Bild 722
   buendig links, Text 573 rechts, Text 97 tiefer), aber auf
   SEITENFARBE, Format 722x483 und OHNE Ueberhang.
   ========================================================= */
section.m2_text_and_image.m2_bg_dunkel.hone_abnahme {
	background-color: #303030;
}

section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_galerie_item video {
	width: 100%;
	aspect-ratio: 722 / 483;
	height: auto;
	margin-left: 0;
}

@media (min-width: 1200px) {
	section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_galerie_wrapper {
		flex: 0 0 49.4%;
		max-width: 49.4%;
		width: 49.4%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
		align-self: center; /* Text vertikal mittig zum Bild */
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_content_container {
		padding-top: 0;
	}
	/* Text fuellt seine prozentuale Spalte (statt 573er-Cap) -> skaliert mit */
	section.m2_text_and_image.m2_bg_dunkel.hone_abnahme .m2_text_container {
		max-width: none;
	}
}

/* Kein fester px-Block @1560: die Prozente (49,4% Bild / 39,2% Text) gelten fuer
   alle Breiten und skalieren mit dem groesser werdenden Container (2200/2400). */

/* PV-Varianten: Absatzabstand zwischen den Bold-Bloecken (Basis-m2 setzt p margin 0) */
section.m2_text_and_image.hone_planung .m2_text_container p + p,
section.m2_text_and_image.hone_pv_install .m2_text_container p + p,
section.m2_text_and_image.hone_abnahme .m2_text_container p + p {
	margin-top: 26px;
}

/* Startseite "Warum HONE?" (hone_abnahme in HELL): KEIN Bild-Ueberhang unten.
   Die generische Hell-Varianten-Ueberlappung (@1560: Sektion padding-bottom:0
   + galerie_wrapper margin-bottom:-91px) neutralisieren -> Bild bleibt in der
   Sektion, normaler Unten-Abstand. Photovoltaik-Abnahme (dunkel) bleibt unberuehrt. */
@media (min-width: 1560px) {
	section.m2_text_and_image.hone_abnahme:not(.m2_bg_dunkel) {
		padding-bottom: 120px;
	}
	section.m2_text_and_image.hone_abnahme:not(.m2_bg_dunkel) .m2_galerie_wrapper {
		margin-bottom: 0;
	}
	/* Text vertikal mittig zum Bild (statt generischem padding-top:96px) */
	section.m2_text_and_image.hone_abnahme:not(.m2_bg_dunkel) .m2_content_wrapper {
		align-self: center;
	}
	section.m2_text_and_image.hone_abnahme:not(.m2_bg_dunkel) .m2_content_container {
		padding-top: 0;
	}
}

/* =========================================================
   hone Bautraeger Intro (Wrapper "hone_bt_intro", 06_Bautraeger
   "Erfahrung, Qualitaet und Vertrauen"): WEISSE Flaeche, Text 573
   links, Bild 722x550 buendig am rechten Containerrand (kein
   Auszug), ragt 101px UNTEN in die dunkle Folge-Sektion.
   Spiegel von hone_rundum. Nur additiv.
   ========================================================= */
section.m2_text_and_image.hone_bt_intro .m2_titel_container {
	margin-bottom: 29px;   /* Basis 25 + 4 */
}

@media (min-width: 1200px) {
	section.m2_text_and_image.hone_bt_intro .m2_galerie_wrapper {
		flex: 0 0 49.4%;
		max-width: 49.4%;
		width: 49.4%;
		margin-bottom: -101px; /* Bild ragt 101px in die dunkle Folge-Sektion */
	}

	section.m2_text_and_image.hone_bt_intro .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
	}

	section.m2_text_and_image.hone_bt_intro .m2_content_container {
		padding-top: 0; /* Figma: Titel beginnt auf Bild-Oberkante */
	}

	/* Struktur-Override: weisse Flaeche endet am Inhalt, Ueberhang GARANTIERT */
	section.m2_text_and_image.hone_bt_intro {
		padding-bottom: 0 !important;
	}
}

@media (min-width: 1560px) {
	section.m2_text_and_image.hone_bt_intro .m2_galerie_wrapper {
		flex: 0 0 722px;
		max-width: 722px;
		width: 722px;
		margin-bottom: -101px;
	}

	section.m2_text_and_image.hone_bt_intro .m2_content_wrapper {
		flex: 0 0 573px;
		max-width: 573px;
		width: 573px;
	}

	section.m2_text_and_image.hone_bt_intro .m2_content_container {
		padding-top: 0;
	}
}

/* Ueberhang sichtbar: Sektion ueber die dunkle Folge-Sektion heben */
section.m2_text_and_image.hone_bt_intro {
	position: relative;
	z-index: 1;
}

section.m2_text_and_image.hone_bt_intro .m2_galerie_container {
	position: relative;
	z-index: 1;
}

section.m2_text_and_image.hone_bt_intro .m2_galerie_item img,
section.m2_text_and_image.hone_bt_intro .m2_galerie_item video {
	width: 100%;
	aspect-ratio: 722 / 550;
	height: auto;
}

/* =========================================================
   hone Bautraeger Leistungen (Wrapper "hone_bt_leistungen",
   06_Bautraeger "Unsere Leistungen im Detail"): Geometrie wie
   hone_abnahme (Bild 722 buendig links, Text 573 rechts, Text
   101 tiefer), Flaeche #2b2b2b (Basis-Dunkel), Format 722x602.
   ========================================================= */
section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_galerie_item img,
section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_galerie_item video {
	width: 100%;
	aspect-ratio: 722 / 602;
	height: auto;
	margin-left: 0;
}

@media (min-width: 1200px) {
	section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_galerie_wrapper {
		flex: 0 0 49.4%;
		max-width: 49.4%;
		width: 49.4%;
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_content_wrapper {
		flex: 0 0 39.2%;
		max-width: 39.2%;
		width: 39.2%;
		align-self: center; /* Text vertikal mittig zum Bild */
	}
	section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_content_container {
		padding-top: 0;
	}
	/* Text fuellt seine prozentuale Spalte (statt 573er-Cap) -> skaliert mit */
	section.m2_text_and_image.m2_bg_dunkel.hone_bt_leistungen .m2_text_container {
		max-width: none;
	}
}

/* Kein fester px-Block @1560: die Prozente (49,4% Bild / 39,2% Text) gelten fuer
   alle Breiten und skalieren mit dem Container — Aufteilung wie hone_abnahme. */

section.m2_text_and_image.hone_bt_leistungen .m2_text_container p + p {
	margin-top: 26px;
}

/* =========================================================
   Wrapper-Attribut "zentriert und links ausgefuellt" an
   "Container Breit" (data-ausrichtung / data-ausrichtung-an
   auf .mM_container): das Bild laeuft links in die breite
   Flucht (x80), die Textspalte folgt dem normalen Fluss und
   rueckt um denselben Betrag nach links (Figma: Text bei x970).
   Gilt fuer jedes so konfigurierte m2 — auch bei "dunkel".
   ========================================================= */
@media (min-width: 1560px) {
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_galerie_container {
		margin-left: clamp(-149px, calc(-50vw + 811px), 0px);
		width: 722px;
	}
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_content_wrapper {
		margin-right: clamp(0px, calc(50vw - 811px), 149px);
	}
}
@media (min-width: 2200px) {
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_galerie_container {
		margin-left: clamp(-149px, calc(-50vw + 920px), 0px);
	}
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_content_wrapper {
		margin-right: clamp(0px, calc(50vw - 920px), 149px);
	}
}
@media (min-width: 2400px) {
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_galerie_container {
		margin-left: clamp(-149px, calc(-50vw + 980px), 0px);
	}
	section.m2_text_and_image .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_content_wrapper {
		margin-right: clamp(0px, calc(50vw - 980px), 149px);
	}
}

/* hone_bt_leistungen: Aufteilung wie hone_abnahme -> KEIN Links-Auszug (obwohl
   data-ausrichtung gesetzt ist); Bild skaliert in seiner 49,4%-Spalte statt fix
   722px in die breite Flucht zu ragen. */
@media (min-width: 1560px) {
	section.m2_text_and_image.hone_bt_leistungen .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_galerie_container {
		margin-left: 0;
		width: 100%;
	}
	section.m2_text_and_image.hone_bt_leistungen .mM_container[data-ausrichtung="zentriert_ausfuellung_links"][data-ausrichtung-an="container_breit"] .m2_content_wrapper {
		margin-right: 0;
	}
}

/* Titel-Umbruch nach "Leistungen" (span = "Unsere Leistungen" -> eigene Zeile) */
section.m2_text_and_image.hone_bt_leistungen .m2_titel span {
	display: block;
}

/* bt_intro: Titel-Umbruch wie Figma ("Erfahrung, Qualitaet" / "und Vertrauen") */
section.m2_text_and_image.hone_bt_intro .m2_titel {
	max-width: 460px;
}

/* =========================================================
   hone Text bündig oben (Wrapper "hone_text_top", 04_Karriere
   "Arbeiten bei Hone"): dunkle m2-Variante OHNE Bild-Überhang —
   der Basis-96px-Versatz (Startseiten-Überhang-Muster) ist hier
   funktionslos und erzeugt nur eine Lücke. Text bündig mit der
   Bild-Oberkante. Nur additiv, höhere Spezifität als die Basis.
   ========================================================= */
section.m2_text_and_image.hone_text_top .m2_content_container {
	padding-top: 0;
}

/* Karriere "Warum Hone?": Bild ragt 100px (statt Basis-91px) in die dunkle
   Folge-Sektion. Nur hone_text_top (einzigartig fuer dieses Modul). */
@media (min-width: 1560px) {
	section.m2_text_and_image.hone_text_top .m2_galerie_wrapper {
		margin-bottom: -100px;
	}
}

/* =========================================================
   hone Text mittig (Wrapper "hone_text_mittig", 04_Karriere
   "Arbeiten bei Hone"): Textspalte vertikal zentriert zum Bild
   (statt des Basis-96px-Überhang-Versatzes). Nur additiv.
   ========================================================= */
section.m2_text_and_image.hone_text_mittig .m2_text_und_bild_main .mM_row {
	align-items: center;
}
section.m2_text_and_image.hone_text_mittig .m2_content_container {
	padding-top: 0;
}