section.m28_text_bildbox {
	position: relative;
}

section.m28_text_bildbox::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--flaeche_hell);
	z-index: 0;
}

section.m28_text_bildbox .mM_container,
section.m28_text_bildbox .mM_row {
	position: relative;
	z-index: 1;
}

section.m28_text_bildbox.m28_abstand_oben {
}

section.m28_text_bildbox.m28_abstand_oben {
}

section.m28_text_bildbox.m28_abstand_oben::before {
	content: none;
}

section.m28_text_bildbox.m28_abstand_oben .m28_bild {
	aspect-ratio: 747 / 656;
	margin-bottom: 0;
}

section.m28_text_bildbox.m28_flex_start .mM_row {
	justify-content: flex-start;
}

section.m28_text_bildbox .mM_row {
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 173px;
}

/* Bild und Text teilen sich die Zeile haelftig (abzueglich `gap`). Feste
   Basisbreiten liessen die Zeile 90-153px vor der Containerkante enden. */
section.m28_text_bildbox .m28_bild_wrapper {
	flex: 1 1 0;
	min-width: 0;
}

section.m28_text_bildbox .m28_bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 747 / 631;
	object-fit: cover;
	border-radius: 5px;
	margin-bottom: -64px;
}

section.m28_text_bildbox .m28_content_wrapper {
	flex: 1 1 0;
	min-width: 0;
}

/* Die Spalte ist haelftig, die Satzbreite bleibt gedeckelt: 657px ist die
   Textspalte des Entwurfs (18:210). Ohne Deckel liefen die Zeilen auf den
   weiten Containern bis 824px — zu lang zum Lesen. */
section.m28_text_bildbox .m28_text_container {
	max-width: 657px;
}

section.m28_text_bildbox .m28_titel {
	margin-bottom: 24px;
}

section.m28_text_bildbox .m28_text_container p {
	font-family: var(--font_base);
	line-height: normal;
	color: rgba(27, 27, 26, 0.5);
}

section.m28_text_bildbox .m28_text_container .button {
	margin-top: 32px;
}

section.m28_text_bildbox .mM_links_container.mM_links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

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

section.m28_text_bildbox.m28_kompakt {
	padding-bottom: 141px;
}

section.m28_text_bildbox.m28_kompakt::before {
	bottom: 141px;
}

section.m28_text_bildbox.m28_kompakt .mM_row {
	justify-content: flex-start;
}

section.m28_text_bildbox.m28_kompakt .m28_bild_wrapper {
	flex: 1 1 0;
	min-width: 0;
}

section.m28_text_bildbox.m28_kompakt .m28_bild {
	aspect-ratio: 594 / 607;
}

section.m28_text_bildbox.m28_kompakt .m28_content_wrapper {
	flex: 1 1 0;
	min-width: 0;
}

section.m28_text_bildbox.m28_kompakt .m28_text_container {
	max-width: 657px;
}

section.m28_text_bildbox.m28_kompakt .m28_bild_2_wrapper {
	position: absolute;
	right: 50px;
	bottom: 0;
	width: 287px;
	height: 198px;
	z-index: 2;
}

section.m28_text_bildbox.m28_kompakt .m28_bild_2 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

@media (max-width: 1599px) {
	section.m28_text_bildbox.m28_kompakt .m28_bild_2_wrapper {
		display: none;
	}
}

section.m28_text_bildbox.m28_dunkel {
}

section.m28_text_bildbox.m28_dunkel::before {
	content: none;
}

section.m28_text_bildbox.m28_dunkel {
	background-color: var(--flaeche_dunkel);
	background-image: radial-gradient(ellipse 1200px 700px at center, rgba(27, 27, 26, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

section.m28_text_bildbox.m28_dunkel::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../../../img/m28_dunkel_textur.png');
	background-size: cover;
	background-position: center;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}

section.m28_text_bildbox.m28_dunkel .m28_bild {
	aspect-ratio: 747 / 656;
	margin-bottom: 0;
}

section.m28_text_bildbox.m28_dunkel .m28_titel,
section.m28_text_bildbox.m28_dunkel .m28_titel span,
section.m28_text_bildbox.m28_dunkel .m28_text_container p {
	color: #ffffff;
}

section.m28_text_bildbox.m28_dunkel .m28_text_container p {
	opacity: 0.6;
}

@media (max-width: 992px) {
	/* Die Zeilen sind auf "innerer Abstand nur oben" gestellt, unten also 0.
	   Auf dem Schirm faellt das nicht auf: das Bild ist hoeher als die
	   Textspalte und bestimmt die Hoehe, der Button hat Luft unter sich.
	   Gestapelt steht der Button zuletzt und klebt auf der Kante.
	   Nur nachlegen, wenn unten nichts eingestellt ist — `*="unten"` trifft
	   sowohl "oben_und_unten" als auch "nur_unten", dort also kein Zuschlag.

	   Und nur bei `.ari_bild_zum_rand`. "Nur oben" ist dort Voraussetzung des
	   Ueberstands, das fehlende Polster also gewollt und der Zuschlag der
	   Ausgleich. Eine Zeile OHNE ueberstehendes Bild kann "nur oben" aus
	   ganz anderen Gruenden stehen haben — auf /unternehmen/ bekam
	   `m28_abstand_oben m28_flex_start` so 90px oben auf die 90px des
	   Folgemoduls: gemessen 315px bis zum naechsten Inhalt statt 225. */
	section.m28_text_bildbox.ari_bild_zum_rand:not([data-innerer-abstand*="unten"]) {
		padding-bottom: var(--modul_abstand);
	}

	section.m28_text_bildbox .m28_bild {
		margin-bottom: 0;
	}

	section.m28_text_bildbox .mM_row,
	section.m28_text_bildbox .mM_row.flex_row_reverse {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	section.m28_text_bildbox .m28_bild_wrapper,
	section.m28_text_bildbox .m28_content_wrapper {
		flex: 1 1 100%;
	}

	section.m28_text_bildbox.m28_abstand_oben {
	}

	section.m28_text_bildbox.m28_kompakt .m28_bild_wrapper,
	section.m28_text_bildbox.m28_kompakt .m28_content_wrapper {
		flex: 1 1 100%;
	}

	/* Die 141px der Grundfassung (und die 40px, die hier standen) sind der
	   Streifen UNTER der Flaeche, in den das Bild hineinragt: Polster der
	   Sektion und `bottom` des `::before` sind dort gleich gross, die
	   Unterkante der Flaeche liegt also genau auf dem Fuss des Inhalts.
	   Solange die Bildspalte die hoehere ist, faellt das nicht auf.

	   Gestapelt steht das Bild oben und ragt nirgends heraus — sein Fuss
	   sass bei 900px 345px ueber der Flaechenkante. Die Schaltflaeche dagegen
	   klebte auf genau dieser Kante (gemessen 0px), und die 40px darunter
	   waren toter Raum zwischen zwei Modulen. Also: Flaeche bis zur
	   Sektionskante, und der normale Modulabstand als Polster INNERHALB der
	   Flaeche. Die Fallunterscheidung wie im Theme, damit „nur oben" und
	   „kein Abstand" weiter unten kein Polster bekommen. */
	section.m28_text_bildbox.m28_kompakt {
		padding-bottom: 0;
	}

	section.m28_text_bildbox.m28_kompakt[data-innerer-abstand*="unten"] {
		padding-bottom: var(--modul_abstand);
	}

	section.m28_text_bildbox.m28_kompakt::before {
		bottom: 0;
	}
}