/* Rhenus Ansprechpartner-Box (Layout: breite Kontakt-Leiste) — scoped unter .rh-contact.
   Breite kommt vom Container. */

.rh-contact {
	--rh-c-accent: var(--e-global-color-accent, #ffcc01);
	--rh-c-img: 500px;
	--rh-c-ink: #1d1d1f;
	--rh-c-muted: #86868b;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;          /* per Control ueberschreibbar (auch transparent) */
	border-radius: 0.7rem !important;
	overflow: hidden;
	font-family: inherit;
}

.rh-contact--img-right { flex-direction: row-reverse; }

/* Bild */
.rh-contact__media {
	flex: 0 0 min(var(--rh-c-img), 44%);   /* Richtwert als Max, schrumpft mit der Breite */
	align-self: stretch;
	min-height: 300px;
	background: #f1f1f0;
}
.rh-contact__img,
.rh-contact__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Body = Hauptspalte + Seitenspalte */
.rh-contact__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: clamp(28px, 3.5vw, 48px);
	padding: clamp(28px, 3vw, 42px) clamp(28px, 3.2vw, 46px);
}

.rh-contact__main {
	flex: 1 1 auto;
	min-width: 0;
}

.rh-contact__label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rh-c-muted);
	margin-bottom: 10px;
}

.rh-contact__name {
	display: inline-block;
	font-size: clamp(1.5rem, calc(1.2rem + 1vw), 2rem);
	font-weight: 700;
	line-height: 1.12;
	padding-bottom: 0.04em;            /* Descender nicht clippen */
	/* Grau-Gradient als Text (wie das Zitat im Team Slider) */
	color: var(--e-global-color-button-hintergrund);
	background-color: transparent !important;
	background-image: linear-gradient(45deg, rgb(83, 83, 83), #202020 50%, rgb(86, 86, 86) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.rh-contact__rule {
	display: block;
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background: var(--rh-c-accent);
	margin: 15px 0 18px;
}

.rh-contact__contact {
	font-size: 16px;
	line-height: 1.6;
}
.rh-contact__link {
	display: block;
	width: fit-content;
	color: var(--rh-c-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.rh-contact__link:hover { border-color: var(--rh-c-accent); }

/* Seitenspalte: Adresse + Button, mit Trennlinie */
.rh-contact__aside {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 22px;
	padding-left: clamp(28px, 3.5vw, 48px);
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.rh-contact__address {
	display: block;
	font-size: 14px;
	line-height: 1.65;
	color: var(--rh-c-muted);
}

/* Button: gibt EXAKT euer Site-Markup (.btn-3d-invert-grey .elementor-button) aus.
   Optik + Hover kommen aus eurem CSS-Snippet. Hier nur die zwei Korrekturen, die der
   Button ausserhalb seines Original-Kontexts braucht (sonst zu niedrig / Icon links). */
.rh-contact__btnwrap { margin: 0; }
.rh-contact .elementor-button { line-height: 34px !important; }
.rh-contact .elementor-button-content-wrapper { flex-direction: row-reverse !important; }

/* Unter 820px: alles sauber stapeln (Bild oben, dann Infos, dann Adresse/Button) */
@media (max-width: 820px) {
	.rh-contact,
	.rh-contact--img-right {
		flex-direction: column;
	}
	.rh-contact__media {
		flex: 0 0 auto;
		width: 100%;
		height: clamp(220px, 48vw, 320px);
		min-height: 0;
	}
	.rh-contact__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}
	.rh-contact__aside {
		align-self: stretch;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding-left: 0;
		padding-top: 22px;
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
}