section.m10_kontakt {
	position: relative;
	background: #ebebeb;
}
section.m10_kontakt .m10_kontakt_main {
	position: relative;
	padding: 182px 0;
}
section.m10_kontakt .m10_allgemeine_daten_formular_container {
	position: relative;
	width: 100%;
}
section.m10_kontakt .m10_allgemeine_daten_formular_container .wpcf7 {
	margin: 0;
	padding: 0;
}

/* === FORM HEADLINE === */
section.m10_kontakt .form_headline h2 {
	font-size: 45px;
	font-weight: 700;
	color: #111516;
	text-transform: uppercase;
	margin: 0 0 8px;
	/* letter-spacing: 0.5px;
	line-height: 1.2; */
}

/* === Description + Pflichtfelder Row === */
section.m10_kontakt .form_main_text_required_tag_container {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 35px;
}
section.m10_kontakt .form_main_text {
	max-width: 420px;
}
section.m10_kontakt .form_main_text p {
	color: #111516;
	font-size: 15px;
	line-height: 1.5;
}
section.m10_kontakt .form_required_tag p {
	color: #888;
	font-size: 15px;
	white-space: nowrap;
}

/* === FORM LAYOUT === */
/* project.css hat .form_container als display:flex - wir überschreiben für Desktop auf grid */
@media (min-width: 992px) {
	section.m10_kontakt .cf7_formular {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 89px;
		row-gap: 18px;
		align-items: start;
	}
	/* Headline + Description spannen über volle Breite */
	section.m10_kontakt .cf7_formular .form_headline,
	section.m10_kontakt .cf7_formular .form_main_text_required_tag_container {
		grid-column: 1 / -1;
	}
	/* form_container "auflösen" */
	section.m10_kontakt .cf7_formular .form_container {
		display: contents;
	}
	section.m10_kontakt .cf7_formular .form_container > .form_item:nth-child(1) {
		grid-column: 1;
	}
	section.m10_kontakt .cf7_formular .form_container > .form_item:nth-child(2) {
		grid-column: 2;
	}
	/* Textarea spannt rechte Spalte über mehrere Reihen */
	section.m10_kontakt .cf7_formular .form_textarea {
		grid-column: 2 !important;
		grid-row: span 2;
	}
	section.m10_kontakt .cf7_formular .form_textarea textarea {
		min-height: 100%;
	}
	section.m10_kontakt .cf7_formular .submit_accept_container {
		grid-column: 1 / -1;
	}
}

/* === Inputs (Override project.css für Footer-Section) === */
section.m10_kontakt .form_item input[type="text"],
section.m10_kontakt .form_item input[type="email"],
section.m10_kontakt .form_item input[type="tel"],
section.m10_kontakt .form_item textarea {
	padding: 16px 20px;
	border: 1px solid #c8c8c8;
	background: #fff;
	border-radius: 0;
	font-size: 15px;
	color: #111516;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
section.m10_kontakt .form_item input:focus,
section.m10_kontakt .form_item textarea:focus {
	border-color: #1b9cd9;
}
section.m10_kontakt .form_item input::placeholder,
section.m10_kontakt .form_item textarea::placeholder {
	color: #6b6b6b;
}
section.m10_kontakt .form_item textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
}

/* === Custom Selects (mM_custom_select) === */
section.m10_kontakt .mM_custom_select {
	display: block;
	position: relative;
	width: 100%;
}
section.m10_kontakt .mM_custom_select select.wpcf7-select {
	position: absolute;
	left: -9999px;
	opacity: 0;
}
section.m10_kontakt .mM_select_selected {
	width: 100%;
	padding: 16px 60px 16px 20px;
	border: 1px solid #c8c8c8;
	background: #fff;
	border-radius: 4px;
	font-size: 15px;
	color: #6b6b6b;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s;
}
section.m10_kontakt .mM_select_selected:hover {
	border-color: #999;
}
section.m10_kontakt .mM_select_arrows {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: #d8d8d8;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.2s;
}
section.m10_kontakt .mM_custom_select:hover .mM_select_arrows {
	background: #c4c4c4;
}
section.m10_kontakt .mM_select_arrow_down img {
	width: 8px;
	height: auto;
}
section.m10_kontakt .mM_select_items {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	max-height: 280px;
	overflow-y: auto;
	z-index: 10;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
section.m10_kontakt .mM_select_items.mM_select_hide {
	display: none;
}
section.m10_kontakt .mM_select_item {
	padding: 12px 20px;
	cursor: pointer;
	transition: background 0.15s;
	font-size: 15px;
	color: #111516;
}
section.m10_kontakt .mM_select_item:hover {
	background: #f4f4f4;
}
section.m10_kontakt .mM_select_item.mM_same_as_selected {
	color: #6b6b6b;
}

/* === SUBMIT + ACCEPT ROW === */
section.m10_kontakt .submit_accept_container {
	display: flex;
	justify-content: space-between;
	justify-self: end;
	align-items: center;
	width: 50%;
	gap: 30px;
	margin-top: 25px;
	flex-wrap: wrap;
	padding-left: 44px;
}
section.m10_kontakt .form_accept p {
	margin: 0;
	font-size: 14px;
}

/* ============================================
   FLOATING LABELS - alle Felder
   ============================================ */

/* form_item bekommt position relative.
   ACHTUNG: Die mM_select_selected divs des Custom-Select-Systems landen durch HTML-Parsing
   außerhalb des <p> (HTML-Validierungs-Quirk: <div> in <span> ist invalid und wird vom 
   Browser rausgeschoben). Daher anchor wir am form_item statt am p. */
section.m10_kontakt .form_item {
	position: relative;
}

/* Label sichtbar machen (project.css versteckt es via mM_d_none) */
section.m10_kontakt .form_item label.mM_d_none {
	display: block !important;
	position: absolute;
	left: 38px;
	top: 23px;
	font-size: 16px;
	color: #111516;
	pointer-events: none;
	transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, background 0.2s ease, padding 0.2s ease;
	background: transparent;
	z-index: 1;
	line-height: 1;
}

section.m10_kontakt .form_item p {
	margin: 0;
}

/* <br> nach label ausblenden (CF7 fügt es hinzu) */
section.m10_kontakt .form_item label.mM_d_none + br {
	display: none;
}

/* Honeypot-Label NICHT betreffen */
section.m10_kontakt .form_item .hp-message {
	display: none !important;
}

/* === Inputs / Textareas styling === */
section.m10_kontakt .form_item input[type="text"],
section.m10_kontakt .form_item input[type="email"],
section.m10_kontakt .form_item input[type="tel"],
section.m10_kontakt .form_item textarea {
	padding: 16.5px 38px;
	border: 1px solid #a9aaab;
	background: transparent;
	font-size: 16px;
	color: #111516;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s, color 0.2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
section.m10_kontakt .form_item textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
}

/* Placeholder unsichtbar machen - das Label übernimmt die Placeholder-Rolle */
section.m10_kontakt .form_item input::placeholder,
section.m10_kontakt .form_item textarea::placeholder {
	color: transparent;
}

/* === FLOATING LABEL Animation für Input + Textarea ===
   Nutzt :placeholder-shown trick: Wenn Placeholder sichtbar ist, ist das Feld leer.
   Bei Focus oder vollem Feld -> Label fliegt hoch.
   WICHTIG: input/textarea brauchen einen placeholder=" " (mind. 1 Leerzeichen) damit das funktioniert! */

section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):focus) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):not(:placeholder-shown)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(textarea:focus) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(textarea:not(:placeholder-shown)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(.mM_select_item.mM_same_as_selected:not(:first-child)) > p > label.mM_d_none,
section.m10_kontakt .form_item:has(.mM_select_items:not(.mM_select_hide)) > p > label.mM_d_none {
	top: -7px;
	left: 14px;
	font-size: 14px;
	color: #1b9cd9;
	background: #ebebeb;
	padding: 0 6px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

/* Filled (hat Wert): blauer Border + blauer Text - für Inputs/Textareas */
section.m10_kontakt .form_item:has(input:not([tabindex="-1"]):not(:placeholder-shown)) input:not([tabindex="-1"]),
section.m10_kontakt .form_item:has(textarea:not(:placeholder-shown)) textarea,
section.m10_kontakt .form_item:has(.mM_select_item.mM_same_as_selected:not(:first-child)) .mM_select_selected {
	border-color: #1b9cd9;
	color: #1b9cd9;
	font-weight: 500;
}

/* Focus state: blauer Border (auch ohne Wert) */
section.m10_kontakt .form_item input:focus,
section.m10_kontakt .form_item textarea:focus {
	border-color: #1b9cd9;
}

/* === SELECT - mM_custom_select === */
section.m10_kontakt .mM_custom_select {
	display: block;
	position: relative;
	width: 100%;
}
section.m10_kontakt .mM_custom_select select.wpcf7-select {
	position: absolute;
	left: -9999px;
	opacity: 0;
}
section.m10_kontakt .mM_select_selected {
	width: 100%;
	padding: 18px 60px 21px 20px;
	border: 1px solid #a9aaab;
	background: transparent;
	border-radius: 0;
	font-size: 16px;
	color: transparent; /* Default-Text verstecken - Label übernimmt Placeholder-Rolle */
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s, color 0.2s;
	min-height: 51px;
}

section.m10_kontakt .mM_select_selected:hover {
	border-color: #1b9cd9;
}

/* Pfeil-Button rechts (runder grauer Kreis) */
section.m10_kontakt .mM_select_arrows {
	position: absolute;
	top: 50%;
	right: 28px;
	transform: translateY(-50%);
	width: 31px;
	height: 31px;
	background: #d7d7d8;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
section.m10_kontakt .mM_select_arrow_down img {
	width: 8px;
	height: auto;
}

/* Dropdown */
section.m10_kontakt .mM_select_items {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 0;
	max-height: 280px;
	overflow-y: auto;
	z-index: 10;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
section.m10_kontakt .mM_select_items.mM_select_hide {
	display: none;
}
section.m10_kontakt .mM_select_item {
	padding: 12px 20px;
	cursor: pointer;
	font-size: 15px;
	color: #111516;
}
section.m10_kontakt .mM_select_item:hover {
	background: #f4f4f4;
}
section.m10_kontakt .mM_select_item.mM_same_as_selected {
	color: #6b6b6b;
}

/* Datenschutz-Checkbox: project.css hat schon Styles - wir override nur Farben für blau */
section.m10_kontakt .wpcf7-acceptance label:has(input.checked):before {
	background-color: #1b9cd9;
	border-color: #1b9cd9;
}

/* Submit Button mit Pfeil */
section.m10_kontakt .form_submit p {
	margin: 0;
	position: relative;
	display: inline-block;
}
section.m10_kontakt .submit_btn,
section.m10_kontakt input[type="submit"].wpcf7-submit {
	padding: 18px 56px 18px 30px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: none;
	border-radius: 0;
	font-family: 'Oswald', sans-serif;
	-webkit-appearance: none;
	appearance: none;
}
section.m10_kontakt .submit_btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
section.m10_kontakt .form_submit p:after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-50%) rotate(-45deg);
	pointer-events: none;
}

section.m10_kontakt .wpcf7-spinner { display: none; }

/* Honeypot ausblenden */
section.m10_kontakt .hp-message,
section.m10_kontakt [class*="confirm_mail"] {
	display: none !important;
}

/* === GERHARD IMAGE + SPEECH BUBBLE === */
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
	position: relative;
	pointer-events: none;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container {
	position: relative;
	pointer-events: auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
	display: block;
	max-width: 320px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
	position: absolute;
	background: #fff;
	padding: 22px 26px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	max-width: 340px;
	z-index: 2;
	pointer-events: auto;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container p {
	font-size: 14px;
	line-height: 1.55;
	color: #111516;
	margin: 0;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container p span:first-child {
	font-weight: 700;
}
section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container a {
	color: #1b9cd9;
	font-weight: 600;
	text-decoration: none;
}

section.m10_kontakt .wpcf7-acceptance a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container:after {
	content: '';
	position: absolute;
	right: 5px;
	bottom: -25px;
	width: 70px;
	height: 26px;
	background: url('../../../img/sprechblase_dreieck.png') no-repeat;
	background-size: contain;
	/* border-top: 14px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 18px solid #fff; */
	filter: drop-shadow(2px 1px 1px rgba(0,0,0,0.06));
}

/* Desktop: Bild absolut in linker Form-Hälfte */

/* @media all and (min-width: 476px) {
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container::after {
		content: '';
		position: absolute;
		right: 5px;
		bottom: -25px;
		width: 70px;
		height: 26px;
		background: url('../../../img/sprechblase_dreieck.png') no-repeat;
		background-size: contain;
		border-top: 14px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 18px solid #fff; 
		filter: drop-shadow(2px 1px 1px rgba(0,0,0,0.06));
	}
} */

@media all and (min-width: 992px) {
	section.m10_kontakt .m10_kontakt_main {
		min-height: 580px;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 50%;
		display: flex;
		justify-content: end;
		align-items: flex-end;
		padding-right: 44px;
		z-index: 1;
		/* overflow: hidden; */
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 100%;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
		/* max-width: 280px; */
		max-height: 100%;
		object-fit: contain;
		object-position: bottom;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		top: 0;
		left: 0;
		
	}
	
}

@media (max-width: 1399px) {
	section.m10_kontakt .cf7_formular {
		column-gap: 18px;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		top: -50px;
		max-width: 250px;
	}
	
	section.m10_kontakt .submit_accept_container {
		padding-left: 10px;
	}
}

@media all and (max-width: 1199px) {
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
		max-width: 250px;
	}
}

/* Tablet/Mobile - Form bleibt klassisch via project.css */
@media (max-width: 991px) {
	section.m10_kontakt .m10_kontakt_main {
		padding: 70px 0 0;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
		display: flex;
		justify-content: end;
		padding-right: 100px;
		margin-top: 50px;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		top: 0;
		max-width: 350px;
		left: 0;
	}
	
	section.m10_kontakt .submit_accept_container {
		width: 100%;
		padding-left: 0;
	}
}

@media (max-width: 767px) {
	section.m10_kontakt .m10_kontakt_main {
		padding: 50px 0 0;
	}
	
	section.m10_kontakt .form_main_text_required_tag_container {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	section.m10_kontakt .submit_accept_container {
		flex-direction: column;
		align-items: stretch;
	}
	section.m10_kontakt .form_submit p {
		width: 100%;
		text-align: center;
	}
	section.m10_kontakt .submit_btn {
		width: 100%;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
		padding-right: 50px;
	}
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		max-width: 250px;
	}
}

@media all and (max-width: 575px) {
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
		padding-right: 0;
	}
	section.m10_kontakt .form_headline h2 {
		font-size: 35px;
	}
}

@media all and (max-width: 475px) {
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_container img {
		max-width: 200px;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		max-width: 200px;
	}
}

@media all and (max-width: 375px) {
	section.m10_kontakt .m10_kontakt_main {
		padding: 50px 0 50px;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_wrapper {
		flex-direction: column;
		align-items: center;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		margin-top: -30px;
		max-width: 100%;
	}
	
	section.m10_kontakt .mM_post_type_single_post_footer_contact_form_img_speech_bubble_container:after {
		content: none;
	}
}