/* =========================================================
   M44 - Kontakt Karte (hone)
   Tokens: weiss #fff | gold #a5936f | text weiss
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Figma: 05_Kontakt — weisse Flaeche, Kartenbild 1019x567 links
   (Gold-Pin mittig), Gold-Infobox 574x365 rechts, vertikal
   mittig ueberlappend. Vertikal-Abstand kommt aus dem
   Abstand-Klonfeld.
   ========================================================= */

section.m44_kontakt_karte {
	background-color: #fff;
}

section.m44_kontakt_karte .m44_inner {
	position: relative;
}

/* ---------- Karte ---------- */
section.m44_kontakt_karte .m44_karte {
	position: relative;
	display: block;
	width: 69.7%;              /* 1019 von 1462 */
	aspect-ratio: 1019 / 567;
	overflow: hidden;
	background-color: #303030;
}

/* Im ueberlappenden Layout (>=1200, Gold-Infobox = min-height 365px, absolut
   zentriert) bekommt die Karte eine FESTE Hoehe = 365 + 2×101 = 567px statt der
   width-getriebenen aspect-ratio. So ragt sie oben und unten IMMER genau 101px
   ueber die Infobox — auch auf sehr breiten Screens (>=2200), wo die aspect-ratio
   die Karte sonst mitwachsen liess (143px+). */
@media (min-width: 1200px) {
	section.m44_kontakt_karte .m44_karte {
		aspect-ratio: auto;
		height: 567px;
	}
}

/* Gold-Infobox ueberlappt die Karte um KONSTANT 129px: die Karte fuellt den
   Container minus (Infobox-Breite 574px - 129px Ueberlapp) = 445px. Infobox
   bleibt buendig rechts (right:0). Ab 1400px, wo der Container (>=1320) breit
   genug ist, dass die Infobox ihre volle 574px-Breite hat (max-width:46% greift
   nicht). Ersetzt die width-getriebene 69.7%, deren Ueberlapp mit der Breite
   schwankte (131px @1462, weniger auf breiteren Screens). */
@media (min-width: 1400px) {
	section.m44_kontakt_karte .m44_karte {
		width: calc(100% - 445px);
	}
}

section.m44_kontakt_karte .m44_karte_bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

section.m44_kontakt_karte .m44_pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
}

section.m44_kontakt_karte .m44_pin svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Gold-Infobox (ueberlappt die Karte rechts) ---------- */
section.m44_kontakt_karte .m44_infobox {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	width: 574px;
	max-width: 46%;
	min-height: 365px;
	box-sizing: border-box;
	padding: 95px 60px 60px 62px;
	background-color: #a5936f;
}

section.m44_kontakt_karte .m44_firmierung {
	margin: 0;
	font-size: 1.1rem;         /* 22px (Basis 20px) */
	line-height: 1.2727;       /* 28px */
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	color: #fff;
}

section.m44_kontakt_karte .m44_adresse {
	margin: 26px 0 0 0;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	line-height: 1.4666;       /* 22px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #fff;
	white-space: pre-line;     /* Feld-Zeilenumbrueche ohne <br> rendern */
}

section.m44_kontakt_karte .m44_kontaktzeilen {
	margin: 23px 0 0 0;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	line-height: 1.8666;       /* 28px */
	letter-spacing: 0.45px;
	font-weight: 300;
}

section.m44_kontakt_karte .m44_kontaktzeile {
	display: flex;             /* eigene Zeile ohne <br> (Telefon / E-Mail untereinander) */
	width: fit-content;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	transition: color .3s;
}

section.m44_kontakt_karte .m44_kontaktzeile:hover {
	color: #1f1f1f;
}

section.m44_kontakt_karte .m44_icon {
	display: inline-flex;
	width: 17px;
	height: 17px;
}

section.m44_kontakt_karte .m44_icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	section.m44_kontakt_karte .m44_infobox {
		padding: 50px 40px 40px 40px;
		min-height: 0;
	}
}

@media (max-width: 991px) {
	section.m44_kontakt_karte .m44_karte {
		width: 100%;
	}

	section.m44_kontakt_karte .m44_infobox {
		position: static;
		transform: none;
		width: 100%;
		max-width: 100%;
	}
}

/* Lange Woerter (z.B. "UNTERNEHMENSGRUPPE" uppercase) brechen, sonst
   sprengen sie die Infobox auf schmalen Screens (bis 280px). */
section.m44_kontakt_karte .m44_firmierung,
section.m44_kontakt_karte .m44_adresse {
	overflow-wrap: break-word;
	word-break: break-word;
}

section.m44_kontakt_karte .m44_kontaktzeile {
	max-width: 100%;
}

@media (max-width: 575px) {
	section.m44_kontakt_karte .m44_infobox {
		padding: 40px 24px;
	}
}

/* ---------- Google-Maps-Variante (WP Go Maps Shortcode) ---------- */
section.m44_kontakt_karte .m44_karte_maps {
	overflow: visible;         /* Info-Fenster der Karte nicht abschneiden */
}

section.m44_kontakt_karte .m44_karte_maps .wpgmza_map {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	inset: 0;
}

section.m44_kontakt_karte .m44_karte_maps > div {
	position: absolute;
	inset: 0;
}