section.m27_kundendienst {
	/* Luecke zwischen Textspalte und Karte, Einzug der Karte zur rechten
	   Containerkante. Beide Werte stehen im Entwurf; zusammen mit den
	   Basisbreiten 594/595 ergeben sie bei 1920 genau die Containerbreite,
	   der Zuwachs darueber verteilt sich gleichmaessig auf beide Spalten. */
	--m27_luecke: 171px;
	--m27_einzug: 154px;
	background-color: var(--flaeche_dunkel);
	overflow: hidden;
}

section.m27_kundendienst::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('./img/bg-grain.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.05;
	pointer-events: none;
}

section.m27_kundendienst::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('./img/bg-glow.jpg');
	background-size: cover;
	background-position: center;
	mix-blend-mode: screen;
	opacity: 0.6;
	pointer-events: none;
}

section.m27_kundendienst .mM_container {
	position: relative;
	z-index: 1;
}

section.m27_kundendienst .mM_row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	/* Getrennt statt Kurzform: `gap` setzt BEIDE Richtungen. Ab 1399px kippt
	   die Zeile auf `column` — dieselben 171px wirkten dann senkrecht und
	   rissen Text und Karte weit auseinander. */
	column-gap: var(--m27_luecke);
	row-gap: 32px;
	align-items: center;
}

/* Text und Karte teilen sich die Zeile haelftig. Mit festen Breiten
   (594/595) floss oberhalb von 1920px der gesamte Zuwachs des Containers in
   die Luecke: 171px bei 1600, 325px bei 1920, 805px bei 2560.

   Die Haelfte steht als Basis und nicht als `flex: 1 1 0`: bei Basis 0 zaehlt
   das Innenmass der Karte (2x50px Polster + Rahmen) zur Ausgangsgroesse, sie
   wuerde 102px breiter als die Textspalte. */
section.m27_kundendienst .m27_kundendienst_text {
	flex: 1 1 594px;
	min-width: 0;
}

section.m27_kundendienst .m27_kundendienst_karte {
	flex: 1 1 595px;
	min-width: 0;
	/* Im Entwurf endet die Karte 154px vor der Containerkante (x968+595 bei
	   Container 203-1717) — auf allen drei Seiten gleich. */
	margin-right: var(--m27_einzug);
}

section.m27_kundendienst .m27_untertitel {
	color: var(--primarlink_font_color);
	font-family: var(--font_base);
	font-size: 1.0625rem;
	letter-spacing: 6.8px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

section.m27_kundendienst .m27_kundendienst_text h2 {
	color: #ffffff;
}

section.m27_kundendienst .m27_kundendienst_text_body {
	margin-top: 24px;
	max-width: 440px;
}

/* set on the <p> itself: inherited color loses to the global `* { color }` rule regardless of specificity */
section.m27_kundendienst .m27_kundendienst_text_body p {
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font_base);
	line-height: normal;
}

section.m27_kundendienst .m27_kundendienst_karte {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(3.5px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 5px;
	box-shadow: 0px 4px 100px 10px rgba(255, 255, 255, 0.1);
	padding: 50px;
}

section.m27_kundendienst .m27_kundendienst_karte_ueberschrift {
	color: #ffffff;
	font-family: var(--font_base);
	margin-bottom: 7px;
}

section.m27_kundendienst .m27_kundendienst_karte_telefon {
	color: #ffffff;
	font-family: var(--font_extd);
	font-weight: 800;
	font-size: 2.059rem;
	text-transform: uppercase;
	white-space: nowrap;
	margin-bottom: 26px;
}

section.m27_kundendienst .m27_kundendienst_karte_infos {
	display: flex;
	flex-direction: column;
}

section.m27_kundendienst .m27_kundendienst_karte_info {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 0;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3) 50%, rgba(255,255,255,0)) top / 100% 1px no-repeat;
}

/* margin:0 overrides project.css's global p:not(:last-child){margin-bottom:24px} */
section.m27_kundendienst .m27_kundendienst_karte_info_label,
section.m27_kundendienst .m27_kundendienst_karte_info_wert {
	font-family: var(--font_base);
	line-height: 37px;
	margin: 0;
}

section.m27_kundendienst .m27_kundendienst_karte_info_label {
	color: rgba(255, 255, 255, 0.5);
}

section.m27_kundendienst .m27_kundendienst_karte_info_wert {
	color: #ffffff;
	text-align: right;
}

/* Nur Geometrie. Die Farben stehen hier NICHT mehr: sie waren mit dem
   Projektstandard deckungsgleich (#DC1920 auf #FFFFFF), lagen aber mit
   (0,4,1) ueber `.button.primary:hover` (0,3,0) — der Hover auf #1B1B1A
   kam damit nie an. */
section.m27_kundendienst .m27_kundendienst_karte .button.primary {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: 39px;
}

section.m27_kundendienst.m27_hell {
	background-color: var(--flaeche_warm);
}

section.m27_kundendienst.m27_hell::before,
section.m27_kundendienst.m27_hell::after {
	content: none;
}

section.m27_kundendienst.m27_hell .m27_kundendienst_text h2 {
	color: var(--font_color);
}

section.m27_kundendienst.m27_hell .m27_kundendienst_text_body p {
	color: rgba(27, 27, 26, 0.5);
}

section.m27_kundendienst.m27_hell .m27_kundendienst_karte {
	background-color: #ffffff;
	backdrop-filter: none;
	border: none;
	box-shadow: none;
}

section.m27_kundendienst.m27_hell .m27_kundendienst_karte_ueberschrift {
	color: var(--font_color);
}

section.m27_kundendienst.m27_hell .m27_kundendienst_karte_telefon {
	color: var(--font_color);
}

section.m27_kundendienst.m27_hell .m27_kundendienst_karte_info_label {
	color: rgba(27, 27, 26, 0.5);
}

section.m27_kundendienst.m27_hell .m27_kundendienst_karte_info_wert {
	color: var(--font_color);
}

@media (max-width: 1399px) {
	section.m27_kundendienst .mM_row {
		flex-direction: column;
		align-items: stretch;
	}

	/* Gestapelt beide voll breit — die haelftige Basis und das `mM_col_50`
	   des Parents muessen hier beide ausser Kraft. */
	section.m27_kundendienst .m27_kundendienst_text,
	section.m27_kundendienst .m27_kundendienst_karte {
		flex: 0 0 auto;
		width: 100%;
		margin-right: 0;
	}
}

@media (max-width: 480px) {
	section.m27_kundendienst .m27_kundendienst_karte_telefon {
		white-space: normal;
		font-size: 1.5rem;
	}

	section.m27_kundendienst .m27_kundendienst_karte_info {
		flex-wrap: wrap;
	}

	section.m27_kundendienst .m27_kundendienst_karte_info_wert {
		flex-basis: 100%;
		text-align: left;
	}
}