/* ============================================================
   M10 – Contact (Figma-Umsetzung)
   Tokens: Inter | Orange #f48520 | Dunkel #271b11 | Text #685a51
   ============================================================ */

section.m10_contact .m10_allgemeine_daten_formular_container {
	align-items: flex-start;
	--row_gap: 94px;
}

/* --- Spalten ------------------------------------------------ */
section.m10_contact .m10_text_allgemeine_daten_container {
	padding: 26px 0;
}

/* Formular als weisse Card rechts */
section.m10_contact .m10_shortcode_formular_container {
	background: #ffffff;
	padding: 92px;
}

/* --- Kopf: Kicker / Titel / Text ---------------------------- */
section.m10_contact .m10_topline {
	display: block;
	margin-bottom: 3px;
	font-size: 1.0625rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #f48520;
}

section.m10_contact .m10_titel {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 45px;
	line-height: 50px;
	text-transform: uppercase;
	color: #271b11;
	margin: 0;
}

section.m10_contact .m10_text_container {
	margin-top: 30px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 25px;
	color: #685a51;
	max-width: 560px;
}

section.m10_contact .m10_text_container p {
	color: #685a51;
}

/* --- Kontaktdaten ------------------------------------------- */
section.m10_contact .m10_allgemeine_daten_container {
	margin-top: 55px;
}

section.m10_contact .m10_kontaktdaten_titel,
section.m10_contact .cf7_top_title {
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	font-size: 22px;
	line-height: 25px;
	text-transform: uppercase;
	color: #271b11;
	margin: 0 0 28px;
}

section.m10_contact a {
	color: inherit;
	font-size: inherit;
}

section.m10_contact .form_accept_submit a {
	text-decoration: underline;
}

section.m10_contact .cf7_top_title {
	color: #685A51
}

section.m10_contact .cf7_top_text {
	color: #685A51;
	font-family: Inter;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 25px;
}

/* Datenblock: Label + Wert, mit Trennlinie darunter */
section.m10_contact .m10_daten_block {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(104, 90, 81, 0.3);
}

section.m10_contact .m10_daten_block:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

section.m10_contact .m10_label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 25px;
	text-transform: uppercase;
	color: rgba(104, 90, 81, 0.4);
	margin-bottom: 3px;
}

section.m10_contact .m10_daten_wert,
section.m10_contact .m10_daten_wert a {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 22px;
	color: #685a51;
}

section.m10_contact .m10_daten_wert a:hover {
	color: #f48520;
}

section.m10_contact .m10_firma_container .m10_daten_wert {
	font-weight: 700;
	margin-bottom: 0;
}

section.m10_contact .m10_adresse_trenner {
	color: rgba(104, 90, 81, 0.5);
	margin: 0 4px;
}

section.m10_contact .m10_route_link {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 22px;
	color: rgba(104, 90, 81, 0.5);
}

section.m10_contact .m10_route_link svg {
	min-width: 8.5px;
	width: 8.5px;
	min-height: 8.5px;
	height: 8.5px;
	rotate: 135deg;
	fill: rgba(104, 90, 81, 0.5);
}

section.m10_contact .m10_route_link:hover {
	color: #f48520;
}

section.m10_contact .m10_route_link:hover svg {
	fill: #f48520;
}

/* Telefon + E-Mail zweispaltig */
section.m10_contact .m10_contact_container {
	display: flex;
	gap: 40px;
}

section.m10_contact .m10_contact_container .m10_daten_col {
	flex: 1 1 0;
	min-width: 0;
}

/* Erreichbarkeit / Oeffnungszeiten */
section.m10_contact .m10_offnungszeiten_item {
	display: flex;
	gap: 16px;
}

section.m10_contact .m10_offnungszeiten_tage {
	min-width: 90px;
}

section.m10_contact .m10_offnungszeiten_zeit {
	display: inline;
}

/* --- Social Links ------------------------------------------- */
section.m10_contact .m10_social_links_container {
	margin-top: 30px;
}

section.m10_contact .m10_social_links_container_inner {
	display: flex;
	gap: 20px;
}

section.m10_contact .m10_social_link svg {
	width: 40px;
}

/* --- CTA-Box "Direkt Termin buchen" ------------------------- */
section.m10_contact .m10_termin_box {
	margin-top: 55px;
	background: #f48520;
	padding: 56px 60px;
}

section.m10_contact .m10_termin_titel {
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	font-size: 22px;
	line-height: 25px;
	text-transform: uppercase;
	color: #4a2e15;
	margin: 0 0 22px;
}

section.m10_contact .m10_termin_text,
section.m10_contact .m10_termin_text p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 22px;
	color: #4a2e15;
	margin-bottom: 28px;
}

/* dunkler Button (#4A2E15) mit orangem Icon-Kasten (#F48520) */
section.m10_contact .m10_termin_box .mM_button.primary,
section.m10_contact .m10_termin_box .mM_button.primary:hover {
	background-color: #4a2e15;
	color: #f4f5f2;
	text-decoration: none;
}
section.m10_contact .m10_termin_box .mM_button .mM_button_text {
	color: #f4f5f2;
}
section.m10_contact .m10_termin_box .mM_button .mM_button_icon {
	background-color: #f48520;
}

/* ============================================================
   Contact Form 7 – Formular-Styling in der Card
   ============================================================ */
section.m10_contact .m10_shortcode_formular_container .wpcf7 {
	--m10-field-bg: #f2f3f0;
	--m10-field-border: #d2cdcb;
	--m10-field-color: #4a2e15;
}

/* Kopf der Card: "Kontakt aufnehmen" + Intro + Pflichtfeld-Hinweis */
section.m10_contact .m10_form_titel {
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	font-size: 22px;
	line-height: 25px;
	text-transform: uppercase;
	color: #685a51;
	margin: 0 0 13px;
}

section.m10_contact .m10_form_intro,
section.m10_contact .m10_form_intro p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 25px;
	color: #685a51;
	margin: 0 0 40px;
}

section.m10_contact .wpcf7 p {
	margin: 0 0 30px;
}

/* Feld-Labels (Umbruch <label> oder eigener <span>) */
section.m10_contact .wpcf7 label,
section.m10_contact .wpcf7 .m10_form_label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 25px;
	text-transform: uppercase;
	color: #4a2e15;
}

section.m10_contact .wpcf7 .wpcf7-not-valid-tip {
	text-transform: none;
	font-weight: 400;
}

/* Eingabefelder */
section.m10_contact .wpcf7 input[type="text"],
section.m10_contact .wpcf7 input[type="email"],
section.m10_contact .wpcf7 input[type="tel"],
section.m10_contact .wpcf7 input[type="number"],
section.m10_contact .wpcf7 select,
section.m10_contact .wpcf7 textarea {
	width: 100%;
	margin-top: 5px;
	padding: 16px 27px;
	background: #f2f3f0;
	border: 1px solid #d2cdcb;
	border-radius: 0;
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	line-height: 25px;
	color: #4a2e15;
	-webkit-appearance: none;
	appearance: none;
}

section.m10_contact .wpcf7 input::placeholder,
section.m10_contact .wpcf7 textarea::placeholder {
	color: rgba(74, 46, 21, 0.5);
}

section.m10_contact .wpcf7 input:focus,
section.m10_contact .wpcf7 select:focus,
section.m10_contact .wpcf7 textarea:focus {
	outline: none;
	border-color: #f48520;
}

section.m10_contact .wpcf7 textarea {
	height: 120px;
	resize: none;
}

/* Dropdown mit Pfeil */
section.m10_contact .wpcf7 select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a2e15' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 27px center;
	padding-right: 50px;
	cursor: pointer;
}

/* Zweispaltige Feld-Reihe (Vorname/Nachname, E-Mail/Telefon):
   im CF7-Formular <div class="m10_form_row"> um zwei <p> legen */
section.m10_contact .wpcf7 .m10_form_row {
	display: flex;
	gap: 20px;
}
section.m10_contact .wpcf7 .m10_form_row > p {
	flex: 1 1 0;
	min-width: 0;
}

/* Checkbox / Datenschutz */
section.m10_contact .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

section.m10_contact .wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-transform: none;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: #685a51;
}

section.m10_contact .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: 0 0 18px;
	accent-color: #f48520;
}

/* Submit-Button rechtsbuendig ausrichten
   (im CF7-Formular Submit in <div class="m10_form_submit"> wrappen) */
section.m10_contact .wpcf7 .form_submit {
	text-align: right;
	margin-top: 6px;
}

/* Submit-Button: orange Flaeche + dunkle Icon-Box (#4A2E15) mit weissem Pfeil.
   CF7 rendert <input type="submit"> ohne Kind-Element -> Icon-Box als Hintergrund-SVG. */
section.m10_contact .wpcf7 input[type="submit"],
section.m10_contact .wpcf7 button[type="submit"] {
	usnet: all;
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 8px 70px 8px 30px;
	background-color: #f48520;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Crect width='45' height='45' fill='%234a2e15'/%3E%3Cpath d='M16 29 29 16M29 16H20M29 16v9' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	color: #ffffff;
	border: 0;
	border-radius: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 25px;
	text-transform: none;
	cursor: pointer;
	width: auto;
}

section.m10_contact .wpcf7 input[type="submit"][disabled]:hover,
section.m10_contact .wpcf7 button[type="submit"][disabled]:hover {
	background-color: #f48520;
	color: #ffffff;
	cursor: not-allowed;
}

section.m10_contact .wpcf7 input[type="submit"]:hover,
section.m10_contact .wpcf7 button[type="submit"]:hover {
	background-color: #e0770f;
	color: #fff;
}

/* Pflichtfeld-Hinweis */
section.m10_contact .wpcf7 .m10_pflichtfelder {
	text-align: right;
	font-size: 15px;
	line-height: 25px;
	color: rgba(74, 46, 21, 0.5);
	text-transform: none;
	font-weight: 400;
}

/* --- Karte -------------------------------------------------- */
section.m10_contact .m10_shortcode_karte_container {
	margin-top: 30px;
	width: 100%;
	display: inline-block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 1399px) {
	section.m10_contact .m10_allgemeine_daten_formular_container {
		--row_gap: 50px !important;
	}
	section.m10_contact .m10_shortcode_formular_container {
		padding: 40px 30px !important;
	}
	section.m10_contact .m10_titel {
		font-size: 38px;
		line-height: 44px;
	}
	
	section.m10_contact .wpcf7 input[type="text"], 
	section.m10_contact .wpcf7 input[type="email"], 
	section.m10_contact .wpcf7 input[type="tel"], 
	section.m10_contact .wpcf7 input[type="number"],
	section.m10_contact .wpcf7 select, 
	section.m10_contact .wpcf7 textarea {
		padding: 12px 17px;
	}
}

@media screen and (max-width: 991px) {
	section.m10_contact .m10_allgemeine_daten_formular_container {
		flex-direction: column;
		gap: 40px;
	}
	section.m10_contact .m10_text_allgemeine_daten_container,
	section.m10_contact .m10_shortcode_formular_container {
		width: 100%;
	}
	section.m10_contact .m10_text_allgemeine_daten_container {
		padding: 0;
	}
	section.m10_contact .m10_shortcode_formular_container {
		padding: 40px 30px;
	}
	section.m10_contact .m10_titel {
		font-size: 32px;
		line-height: 38px;
	}
}

@media screen and (max-width: 575px) {
	section.m10_contact .m10_contact_container {
		flex-direction: column;
		gap: 24px;
	}
	section.m10_contact .m10_shortcode_formular_container {
		padding: 30px 20px;
	}
	section.m10_contact .m10_termin_box {
		padding: 30px 24px;
	}
}


.elementor-page-10963 section.m10_contact .m10_allgemeine_daten_formular_container,
.elementor-page-10924 section.m10_contact .m10_allgemeine_daten_formular_container,
.elementor-page-10948 section.m10_contact .m10_allgemeine_daten_formular_container,
.elementor-page-10896 section.m10_contact .m10_allgemeine_daten_formular_container,
.elementor-page-12031 section.m10_contact .m10_allgemeine_daten_formular_container,
.elementor-page-10254 section.m10_contact .m10_allgemeine_daten_formular_container {
	--row_gap: 54px;
}

.elementor-page-10963 section.m10_contact .m10_shortcode_formular_container,
.elementor-page-10924 section.m10_contact .m10_shortcode_formular_container,
.elementor-page-10948 section.m10_contact .m10_shortcode_formular_container,
.elementor-page-10896 section.m10_contact .m10_shortcode_formular_container,
.elementor-page-12031 section.m10_contact .m10_shortcode_formular_container,
.elementor-page-10254 section.m10_contact .m10_shortcode_formular_container {
	padding: 70px 52px;
}