/* =========================================================
   M36 - CTA Karte (hone)
   Tokens: karte #fff | text #2b2b2b | gold #a5936f
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Figma: m_cta auf 00_Startseite — weisse Karte 1462x465,
   Text links (149px Inset), freigestelltes Team-Foto rechts
   (ragt 80px ueber die Kartenoberkante hinaus).
   ========================================================= */

section.m36_cta {
	background: transparent;
	/* Vertikal-Abstand kommt aus dem Abstand-Klonfeld (data-innerer-abstand) */
}

section.m36_cta .m36_card {
	position: relative;
	max-width: 1462px;
	width: calc(100% - 80px);
	margin: 80px auto 0 auto;  /* 80px Headroom: das Foto ragt ueber die Karte hinaus */
	background-color: #fff;
	min-height: 465px;
	box-sizing: border-box;
	padding: 97px 700px 97px 149px; /* rechts Platz fuer das Foto */
}

/* ---------- Foto rechts (freigestellt, unten buendig) ---------- */
section.m36_cta .m36_media {
	position: absolute;
	right: 105px;
	bottom: 0;
	width: 574px;
	aspect-ratio: 574 / 545;   /* Figma-Crop: oben zeigen, unterhalb der Karte beschneiden */
	overflow: hidden;
	pointer-events: none;
}

section.m36_cta .m36_media img {
	display: block;
	width: 100%;
	height: auto;              /* Kopf oben sichtbar, Beine werden unten beschnitten */
}

/* ---------- Content links ---------- */
section.m36_cta .m36_topline {
	display: block;
	margin-bottom: 15px;
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	letter-spacing: 0.375px;
	text-transform: uppercase;
	color: #a5936f;
}

section.m36_cta .m36_titel_wrap {
	margin-bottom: 28px;
}

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

section.m36_cta .m36_titel span {
	color: #a5936f;
	display: block;   /* goldene Phrase auf eigener Zeile (ersetzt frueheres <br>) */
}

section.m36_cta .m36_text {
	margin: 0;
	max-width: 573px;
	font-size: 0.9rem;         /* 18px (Basis 20px) */
	line-height: 1.4444;       /* 26px */
	letter-spacing: 0.45px;
	font-weight: 300;
	color: #2b2b2b;
	white-space: pre-line;     /* Absatz-Umbrueche aus dem Feld ohne <br> */
}

section.m36_cta .m36_links_wrap .mM_links {
	margin-top: 54px;
}

section.m36_cta.no_margin_top .m36_card {
	margin-top: 0;
}

/* ---------- Grosse Viewports: Karte folgt den Container-Stufen ---------- */
@media (min-width: 2200px) {
	section.m36_cta .m36_card {
		max-width: 1680px;
	}
}

@media (min-width: 2400px) {
	section.m36_cta .m36_card {
		max-width: 1800px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
	section.m36_cta .m36_card {
		padding-right: 560px;
	}

	section.m36_cta .m36_media {
		right: 40px;
		width: 480px;
	}
}

@media (max-width: 1199px) {
	section.m36_cta .m36_card {
		padding: 60px 420px 60px 60px;
	}

	section.m36_cta .m36_media {
		width: 380px;
	}
}

/* ---------- Mobil (<=991px): Karte wird Flex-Spalte ----------
   Gemeinsame Karten-/Reihenfolge-Regeln fuer beide Mobil-Ranges.
   Die spaltenspezifischen Breiten/Positionen kommen darunter je
   Range (576-991 = zweispaltig, <=575 = gestapelt). */
@media (max-width: 991px) {
	section.m36_cta .m36_card {
		width: calc(100% - 40px);
		display: flex;
		flex-direction: column;
		padding: 50px 40px 0 40px;   /* 0 unten: Bild sitzt buendig an der Kartenunterkante */
		min-height: 0;
		margin-top: 80px;            /* Abstand oben wie Desktop-Rhythmus (Foto ragt hier nicht raus, dient nur als Modul-Abstand) */
	}

	section.m36_cta .m36_content { order: 1; }  /* Text zuerst */
	section.m36_cta .m36_media { order: 2; position: static; }
}

/* Tablet/kleiner Desktop: zweispaltig — Text links begrenzt,
   Bild rechtsbuendig und per negativem margin-top hochgezogen
   (wie Desktop, wo das Foto aus der Karte ragt). */
@media (min-width: 576px) and (max-width: 991px) {
	section.m36_cta .m36_content { width: 56%; }   /* Text laeuft nie unter das Bild */
	section.m36_cta .m36_media {
		width: 40%;
		max-width: 340px;
		align-self: flex-end;        /* nach ganz rechts */
		margin: -150px 0 0 0;        /* hoch neben den Text ziehen */
	}
}

/* Handy: kein Platz fuer zwei Spalten -> gestapelt, Bild zentriert unten buendig */
@media (max-width: 575px) {
	section.m36_cta .m36_titel {
		line-height: 1.15;
	}

	section.m36_cta .m36_links_wrap .mM_links {
		margin-top: 32px;
		width: 100%;                 /* Button volle Kartenbreite statt schmal geschrumpft */
	}

	/* Link-Container darf schrumpfen (min-width:auto expandierte sonst am langen
	   Button-Wort "INITIATIVBEWERBUNG" und sprengte die Karte bis 280px). */
	section.m36_cta .m36_link_container {
		min-width: 0;
		width: 100%;
	}

	/* Langes CTA-Label passt mobil nicht in eine Zeile -> Button volle Breite,
	   Inhalt zentriert, Hoehe waechst mit (kein schiefer Umbruch, Pfeil bleibt
	   mittig neben dem Text statt oben rechts zu haengen). Lange Woerter brechen. */
	section.m36_cta .m36_links_wrap .mM_links a.button,
	section.m36_cta .m36_links_wrap .mM_links a.mM_button {
		width: 100%;
		height: auto;
		min-height: 41px;
		padding: 9px 20px;           /* schmaleres H-Padding, damit der Button auch bei 320px in der Karte bleibt */
		justify-content: center;
		text-align: center;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	section.m36_cta .m36_card {
		margin-top: 56px;            /* Abstand oben wie Modul-Abstand bei <=600px */
		padding-left: 24px;          /* 40px war auf 240px-Karte zu viel -> Text gequetscht */
		padding-right: 24px;
	}
	section.m36_cta .m36_content { width: 100%; }
	section.m36_cta .m36_media {
		width: 320px;
		max-width: 100%;
		align-self: center;
		margin: 40px auto 0 auto;
	}
}

/* Wrapper-Klasse "hone_mobil_abstand_oben": zusaetzlicher Abstand oben NUR mobil.
   Additiv als margin-top auf der Section (das Abstand-Klonfeld-Padding liegt
   ebenfalls auf der Section, wird also ergaenzt statt ueberschrieben).
   Im Backend-Feld "Wrapper-Klasse" aktivieren. */
@media (max-width: 991px) {
	section.m36_cta.hone_mobil_abstand_oben {
		margin-top: 60px;
	}
}

/* =========================================================
   Hintergrund-Auswahl "Gold" / "Dunkel" (Feld m36_hintergrund)
   Figma: m_cta auf 04_Karriere-02 — Karte #a5936f, Titel/Text
   weiss, freigestelltes Foto OHNE Panel direkt auf der Farbe
   (groesser: 640x607, ragt oben leicht ueber die Karte).
   "dunkel" (#2b2b2b) verhaelt sich identisch zu "gold" — jede
   Gold-Regel gilt auch fuer .m36_dunkel, nur die
   background-color der Karte unterscheidet sich.
   Steht am Dateiende: schlaegt bei gleicher Spezifitaet die
   Standard-Regeln. Nur additiv.
   ========================================================= */

/* ---- einziger Unterschied zwischen den beiden Varianten: Kartenfarbe ---- */
section.m36_cta.m36_gold .m36_card { background-color: #a5936f; }
section.m36_cta.m36_dunkel .m36_card { background-color: #2b2b2b; }

/* ---- ab hier gilt alles fuer beide Varianten ---- */
section.m36_cta.m36_gold .m36_card,
section.m36_cta.m36_dunkel .m36_card {
	min-height: 590px;
	padding-right: 720px;      /* Platz fuer das groessere Foto */
}

section.m36_cta.m36_gold .m36_titel,
section.m36_cta.m36_gold .m36_titel span,
section.m36_cta.m36_gold .m36_text,
section.m36_cta.m36_dunkel .m36_titel,
section.m36_cta.m36_dunkel .m36_titel span,
section.m36_cta.m36_dunkel .m36_text {
	color: #fff;
}

/* Gold-CTA (Karriere): Akzentwort "initiativ!" NICHT auf eigene Zeile zwingen —
   es steht mitten im Satz, der erzwungene Block-Umbruch erzeugt sonst eine
   haessliche Waisen-Zeile. Hier natuerlich umbrechen lassen. */
section.m36_cta.m36_gold .m36_titel span,
section.m36_cta.m36_dunkel .m36_titel span {
	display: inline;
}

section.m36_cta.m36_gold .m36_topline,
section.m36_cta.m36_dunkel .m36_topline {
	color: #fff;
}

/* Freigestelltes Foto: kein Panel, groesser, unten buendig */
section.m36_cta.m36_gold .m36_media,
section.m36_cta.m36_dunkel .m36_media {
	background-color: transparent;
	right: 60px;
	width: 640px;
	aspect-ratio: 640 / 607;
}

section.m36_cta.m36_gold .m36_links_wrap .mM_links a.button,
section.m36_cta.m36_gold .m36_links_wrap .mM_links a.mM_button,
section.m36_cta.m36_dunkel .m36_links_wrap .mM_links a.button,
section.m36_cta.m36_dunkel .m36_links_wrap .mM_links a.mM_button {
	background-color: #fff;
	border: 1px solid #fff;
	color: #a5936f;
}

section.m36_cta.m36_gold .m36_links_wrap .mM_links a.button:hover,
section.m36_cta.m36_gold .m36_links_wrap .mM_links a.mM_button:hover,
section.m36_cta.m36_dunkel .m36_links_wrap .mM_links a.button:hover,
section.m36_cta.m36_dunkel .m36_links_wrap .mM_links a.mM_button:hover {
	background-color: #1f1f1f;
	border-color: #1f1f1f;
	color: #fff;
}

/* Gold-/Dunkel-Variante responsive (groesseres Foto herunterskalieren) */
@media (max-width: 1399px) {
	section.m36_cta.m36_gold .m36_card,
	section.m36_cta.m36_dunkel .m36_card {
		padding-right: 600px;
	}
	section.m36_cta.m36_gold .m36_media,
	section.m36_cta.m36_dunkel .m36_media {
		right: 40px;
		width: 520px;
	}
}

@media (max-width: 1199px) {
	section.m36_cta.m36_gold .m36_card,
	section.m36_cta.m36_dunkel .m36_card {
		padding: 60px 440px 60px 60px;
		min-height: 0;
	}
	section.m36_cta.m36_gold .m36_media,
	section.m36_cta.m36_dunkel .m36_media {
		width: 400px;
	}
}

@media (max-width: 991px) {
	section.m36_cta.m36_gold .m36_card,
	section.m36_cta.m36_dunkel .m36_card {
		padding: 50px 40px 0 40px;
	}
	section.m36_cta.m36_gold .m36_media,
	section.m36_cta.m36_dunkel .m36_media { right: auto; }  /* Position/Reihenfolge kommt aus der Basis */
}
@media (min-width: 576px) and (max-width: 991px) {
	section.m36_cta.m36_gold .m36_media,
	section.m36_cta.m36_dunkel .m36_media {
		width: 40%;
		max-width: 340px;
		margin: -150px 0 0 0;
	}
}
@media (max-width: 575px) {
	section.m36_cta.m36_gold .m36_media,
	section.m36_cta.m36_dunkel .m36_media {
		width: 320px;
		max-width: 100%;
		margin: 40px auto 0 auto;
	}
	/* Gleiche Entquetschung wie non-gold; eigene Regel wegen hoeherer
	   Spezifitaet der .m36_gold-Padding-Regel im <=991-Block. */
	section.m36_cta.m36_gold .m36_card,
	section.m36_cta.m36_dunkel .m36_card {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* =========================================================
   hone Illustration (Wrapper "hone_illustration")
   Figma 06_Leistungen "Digitale Schadensmeldung" — weisse Karte,
   rechts eine Line-Art-Illustration (SVG, 567x454), die oben
   leicht ueber die Karte ragt und NICHT beschnitten wird
   (contain statt Foto-Crop). Nur additiv.
   ========================================================= */
section.m36_cta.hone_illustration .m36_card {
	margin-top: 24px;          /* Illustration ragt 24px ueber die Kartenoberkante */
	min-height: 482px;
	padding-right: 660px;
}

/* Titel "Digitale Schadensmeldung" bleibt einzeilig — die goldene Phrase NICHT
   auf eigene Zeile brechen (Basisregel .m36_titel span display:block ueberschreiben) */
section.m36_cta.hone_illustration .m36_titel span {
	display: inline;
}

section.m36_cta.hone_illustration .m36_media {
	top: -24px;
	bottom: auto;
	right: 60px;
	width: 567px;
	aspect-ratio: 567 / 454;
	overflow: visible;
}

section.m36_cta.hone_illustration .m36_media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 1399px) {
	section.m36_cta.hone_illustration .m36_card {
		padding-right: 540px;
	}
	section.m36_cta.hone_illustration .m36_media {
		right: 30px;
		width: 480px;
	}
}

@media (max-width: 1199px) {
	section.m36_cta.hone_illustration .m36_card {
		padding: 60px 400px 60px 60px;
		min-height: 0;
	}
	section.m36_cta.hone_illustration .m36_media {
		top: 50%;
		transform: translateY(-50%);
		width: 360px;
	}
}

@media (max-width: 991px) {
	section.m36_cta.hone_illustration .m36_card {
		margin-top: 0;
		padding: 50px 40px 0 40px;
	}
	section.m36_cta.hone_illustration .m36_media {
		top: auto;
		right: auto;
		transform: none;
	}
}
@media (min-width: 576px) and (max-width: 991px) {
	section.m36_cta.hone_illustration .m36_media {
		width: 42%;
		max-width: 360px;
		margin: -120px 0 0 0;
	}
}
@media (max-width: 575px) {
	section.m36_cta.hone_illustration .m36_media {
		width: 100%;
		max-width: 360px;
		margin: 30px auto 0 auto;
	}
	/* Seiten-Padding wie Basis (40px war auf schmaler Karte zu viel Rand) */
	section.m36_cta.hone_illustration .m36_card {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* =========================================================
   hone 24h (Wrapper "hone_24h" + m36_hintergrund=gold|dunkel)
   Figma 06_Facility "Firmennetzwerk 24h" — farbige Karte flacher
   (425px), rechts oben eine kleine 24h-Grafik (314x296) statt
   Freisteller-Foto; zwei gestapelte Buttons. Nur additiv.
   ========================================================= */
section.m36_cta.m36_gold.hone_24h .m36_card,
section.m36_cta.m36_dunkel.hone_24h .m36_card {
	min-height: 425px;
	padding: 96px 460px 44px 149px; /* Figma: Titel 96 unter Kante, Buttons enden 44 ueber Unterkante */
	margin-top: -97px; /* Karte ragt 97px in die weisse Hausmeister-Sektion (Abstand-Feld: nur_unten) */
	position: relative;
	z-index: 1;
}
section.m36_cta.m36_gold.hone_24h .m36_media,
section.m36_cta.m36_dunkel.hone_24h .m36_media {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	right: 192px; /* Figma: Grafik endet 192px vor der Kartenkante */
	width: 314px;
	aspect-ratio: 314 / 296;
	background: transparent;
	overflow: visible;
}
section.m36_cta.m36_gold.hone_24h .m36_media img,
section.m36_cta.m36_dunkel.hone_24h .m36_media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Button: Ghost (transparent, weisser Rahmen) statt der weiss
   gefuellten Gold-/Dunkel-Variante — Figma 06_Facility */
section.m36_cta.m36_gold.hone_24h .m36_links_wrap .mM_links a.button,
section.m36_cta.m36_gold.hone_24h .m36_links_wrap .mM_links a.mM_button,
section.m36_cta.m36_dunkel.hone_24h .m36_links_wrap .mM_links a.button,
section.m36_cta.m36_dunkel.hone_24h .m36_links_wrap .mM_links a.mM_button {
	background-color: transparent;
	border: 1px solid #fff;
	color: #fff;
}

section.m36_cta.m36_gold.hone_24h .m36_links_wrap .mM_links a.button:hover,
section.m36_cta.m36_gold.hone_24h .m36_links_wrap .mM_links a.mM_button:hover,
section.m36_cta.m36_dunkel.hone_24h .m36_links_wrap .mM_links a.button:hover,
section.m36_cta.m36_dunkel.hone_24h .m36_links_wrap .mM_links a.mM_button:hover {
	background-color: #1f1f1f;
	border-color: #1f1f1f;
	color: #fff;
}

@media (max-width: 1199px) {
	section.m36_cta.m36_gold.hone_24h .m36_card,
	section.m36_cta.m36_dunkel.hone_24h .m36_card {
		padding: 60px 300px 60px 60px;
	}
	section.m36_cta.m36_gold.hone_24h .m36_media,
	section.m36_cta.m36_dunkel.hone_24h .m36_media { right: 50px; width: 240px; }
}
@media (max-width: 991px) {
	section.m36_cta.m36_gold.hone_24h .m36_card,
	section.m36_cta.m36_dunkel.hone_24h .m36_card {
		padding: 50px 40px 40px 40px;
		margin-top: 0; /* gestapelt kein Ueberhang in die weisse Sektion */
	}
	section.m36_cta.m36_gold.hone_24h .m36_media,
	section.m36_cta.m36_dunkel.hone_24h .m36_media {
		top: auto;
		transform: none;
		right: auto;
	}
}
@media (min-width: 576px) and (max-width: 991px) {
	section.m36_cta.m36_gold.hone_24h .m36_media,
	section.m36_cta.m36_dunkel.hone_24h .m36_media {
		width: 240px;
		max-width: 40%;
		margin: -60px 0 0 0;
	}
}
@media (max-width: 575px) {
	section.m36_cta.m36_gold.hone_24h .m36_media,
	section.m36_cta.m36_dunkel.hone_24h .m36_media {
		width: 240px;
		max-width: 100%;
		margin: 30px auto 0 auto;
	}
	/* Seiten-Padding wie Basis (40px war auf schmaler Karte zu viel Rand) */
	section.m36_cta.m36_gold.hone_24h .m36_card,
	section.m36_cta.m36_dunkel.hone_24h .m36_card {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* =========================================================
   hone Vermietung & Verkauf CTA (Wrapper "hone_vv_cta",
   06_Vermietung-Verkauf "Seit 2010 ..."): dunkle Karte
   #1f1f1f mit Gold-Border in der breiten Flucht (1760),
   Inhalt zentriert (Titel weiss + span gold, Text 724,
   Gold-Button), KEIN Bild. Nur additiv.
   ========================================================= */
section.m36_cta.hone_vv_cta .m36_card {
	max-width: 1760px;
	margin-top: 0;             /* kein Foto-Headroom */
	min-height: 0;
	padding: 97px 80px;
	background-color: #1f1f1f;
	border: 1px solid #a5936f;
	text-align: center;
}

section.m36_cta.hone_vv_cta .m36_titel { color: #fff; }
section.m36_cta.hone_vv_cta .m36_titel_wrap { margin-bottom: 29px; }

section.m36_cta.hone_vv_cta .m36_text {
	max-width: 724px;
	margin: 0 auto;
	color: #fff;
}

section.m36_cta.hone_vv_cta .m36_links_wrap .mM_links {
	margin-top: 31px;
	justify-content: center;
}

@media (max-width: 991px) {
	section.m36_cta.hone_vv_cta .m36_card {
		padding: 60px 30px;
	}
	/* kein Bild -> Text bleibt voll breit und zentriert (Basis 56% zuruecksetzen) */
	section.m36_cta.hone_vv_cta .m36_content { width: 100%; }
}

@media (max-width: 575px) {
	/* Seiten-Padding wie Basis (30px war auf schmaler Karte zu viel Rand) */
	section.m36_cta.hone_vv_cta .m36_card {
		padding-left: 24px;
		padding-right: 24px;
	}
}