/*
 * Kontaktformulare (Schnitt 6). Die Grundgestaltung der Felder kommt wie bisher aus dem freien Elementor
 * (frontend.min.css: .elementor-field-group, .elementor-field-textual, .elementor-column …).
 *
 * Teil A: was Elementor Pro beisteuerte, damit das Formular ohne Pro aussieht wie vorher. Das sind die 19 Regeln, die
 * Pro für das Formular-Element 4ef6e06 auf /kontakt/ und /bblz-kontakt/ erzeugte (beide gleich, gemessen 16.10.2026,
 * post-1128.css), und die Knopf-Regeln aus widget-form.min.css (Elementor Pro 4.3.0, GPL).
 * Teil B: Darstellung im CI (Robs Angebot vom 16.10.), nur mit der Klasse .mtv-kontakt--ci; Aufbau und Felder bleiben.
 * Alle Regeln beginnen mit .elementor (die Elementor-Seite) und erreichen so dieselbe Spezifität wie die Regeln, die
 * Pro je Element erzeugte; Teil B steht danach und gewinnt bei gleicher Spezifität.
 */

/* ---------- Teil A: wie bisher ---------- */

.elementor .mtv-kontakt.elementor-button-align-stretch {
	--e-form-steps-indicators-spacing: 20px;
	--e-form-steps-indicator-padding: 30px;
	--e-form-steps-divider-width: 1px;
	--e-form-steps-divider-gap: 10px;
}
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-button-content-wrapper { flex-direction: row; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-field-group { padding-right: calc(10px / 2); padding-left: calc(10px / 2); margin-bottom: 24px; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form-fields-wrapper { margin-left: calc(-10px / 2); margin-right: calc(-10px / 2); margin-bottom: -24px; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-labels-above .elementor-field-group > label { padding-bottom: 4px; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-field-group .elementor-field:not(.elementor-select-wrapper) { background-color: #ffffff; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-button[type="submit"] { background-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-button[type="submit"] svg * { fill: var(--e-global-color-primary); }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-button[type="submit"]:hover { color: #ffffff; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-button[type="submit"]:hover svg * { fill: #ffffff; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button .elementor-button-content-wrapper { align-items: center; gap: 5px; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button .elementor-button-text { white-space: normal; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button svg { height: auto; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button .e-font-icon-svg { height: 1em; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button .elementor-button-icon,
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form .elementor-button .elementor-button-text { flex-grow: unset; order: unset; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-form[aria-busy="true"] .elementor-button { opacity: .6; cursor: progress; }

/* Verstecktes Feld (Spamschutz): außerhalb des Bildes, für Vorleseprogramme verborgen. */
.mtv-kontakt__falle { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-message { margin: 18px 0 0; line-height: 1.4; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-message::before { content: none; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-message-success { color: #2e7d32; }
.elementor .mtv-kontakt.elementor-button-align-stretch .elementor-message-danger { color: #c62828; }

/* Danke-Fenster, Maße und Farben wie das frühere Popup #5401 (post-5401.css, popup.min.css). */
.elementor .mtv-kontakt .mtv-kontakt-danke {
	width: 640px;
	max-width: 100vw;
	max-height: 100vh;
	padding: 24px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	overflow: auto;
}
.elementor .mtv-kontakt .mtv-kontakt-danke::backdrop { background: rgba(0, 0, 0, .8); }
.elementor .mtv-kontakt .mtv-kontakt-danke__inhalt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.elementor .mtv-kontakt .mtv-kontakt-danke__haken { width: 50px; height: 50px; margin-bottom: 20px; fill: none; stroke: var(--e-global-color-primary, #333366); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.elementor .mtv-kontakt .mtv-kontakt-danke h2 { margin: 0; color: #1c244b; font-size: 24px; line-height: 140%; letter-spacing: 0; }
.elementor .mtv-kontakt .mtv-kontakt-danke p { margin: 0 0 -10px; color: #324a6d; font-size: 16px; line-height: 1.5; }
.elementor .mtv-kontakt .mtv-kontakt-danke__knopf.elementor-button {
	margin-top: 32px;
	padding: 12px 24px;
	border: 1px solid var(--e-global-color-primary);
	background-color: var(--e-global-color-primary);
	color: #fff;
	font-size: 16px;
	line-height: 150%;
	cursor: pointer;
}
.elementor .mtv-kontakt .mtv-kontakt-danke__x {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	width: 22px;
	height: 22px;
	padding: 2px;
	border: 0;
	background: none;
	cursor: pointer;
}
.elementor .mtv-kontakt .mtv-kontakt-danke__x svg { width: 100%; height: 100%; fill: none; stroke: #1f2124; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 1024px) { .elementor .mtv-kontakt .mtv-kontakt-danke__knopf.elementor-button { font-size: 14px; } }
@media (max-width: 767px) { .elementor .mtv-kontakt .mtv-kontakt-danke__knopf.elementor-button { font-size: 15px; } }

/* ---------- Teil B: im CI (.mtv-kontakt--ci) ---------- */

.elementor .mtv-kontakt.mtv-kontakt--ci {
	--mk-akzent: var(--mtv-tuerkis, #33cccc);
	--mk-akzent-text: var(--mtv-lila-dunkel, #241243);
	--mk-dunkel: var(--mtv-lila, #3b2270);
	--mk-mittel: var(--mtv-lila-hell, #5b3aa6);
	--mk-flaeche: var(--mtv-flaeche, #f8f6fc);
	--mk-linie: #ddd3ef;
	--mk-fokus: rgba(51, 204, 204, .28);
	--mk-text: #221a33;
	padding: clamp(20px, 3.4vw, 34px);
	border: 1.5px solid var(--mk-linie);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(36, 18, 67, .08);
}
.elementor .mtv-kontakt.mtv-kontakt--ci[data-bereich="bblz"] {
	--mk-akzent: var(--bblz-orange, #fe8009);
	--mk-akzent-text: #fff;
	--mk-dunkel: var(--bblz-grau, #24272d);
	--mk-mittel: var(--bblz-orange, #fe8009);
	--mk-flaeche: var(--bblz-flaeche, #f6f4f0);
	--mk-linie: #e5ded3;
	--mk-fokus: rgba(254, 128, 9, .22);
	--mk-text: #17191d;
}
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group { margin-bottom: 20px; align-content: flex-start; } /* Beschriftung am Feld, auch neben dem höheren Betreff-Kasten */
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-form-fields-wrapper { margin-bottom: -20px; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group > .elementor-field-label { color: var(--mk-dunkel); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-mark-required .elementor-field-label::after { color: var(--mk-mittel); }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group .elementor-field-textual {
	min-height: 48px;
	padding: 11px 15px;
	border: 1.5px solid var(--mk-linie);
	border-radius: 12px;
	background-color: var(--mk-flaeche);
	color: var(--mk-text);
	font-size: 16px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group .elementor-field:not(.elementor-select-wrapper) { background-color: var(--mk-flaeche); }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group .elementor-field-textual:focus {
	border-color: var(--mk-akzent);
	background-color: #fff;
	box-shadow: 0 0 0 4px var(--mk-fokus);
	outline: 0;
}
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-group .elementor-field-textual::placeholder { color: #8a7fa3; opacity: 1; }
.elementor .mtv-kontakt.mtv-kontakt--ci[data-bereich="bblz"] .elementor-field-textual::placeholder { color: #8b857b; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-type-checkbox .elementor-field-subgroup { gap: 8px; padding: 14px 16px; border: 1.5px solid var(--mk-linie); border-radius: 12px; background: var(--mk-flaeche); }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-option { display: flex; align-items: center; gap: 9px; width: 100%; color: var(--mk-text); font-size: 15px; line-height: 1.35; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-field-option input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--mk-mittel); }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"] {
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background-color: var(--mk-akzent);
	color: var(--mk-akzent-text);
	font-weight: 750;
	transition: background-color .18s ease, color .18s ease;
}
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"] svg * { fill: var(--mk-akzent-text); }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"]:hover,
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"]:focus-visible { background-color: var(--mk-dunkel); color: #fff; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"]:hover svg *,
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-button[type="submit"]:focus-visible svg * { fill: #fff; }
.elementor .mtv-kontakt.mtv-kontakt--ci .elementor-message { padding: 12px 16px; border-radius: 12px; background: var(--mk-flaeche); }

.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke { width: min(560px, calc(100vw - 32px)); padding: 34px 30px 30px; border-radius: 22px; box-shadow: 0 18px 46px rgba(36, 18, 67, .28); }
.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke::backdrop { background: rgba(36, 18, 67, .72); }
.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke__haken { stroke: var(--mtv-tuerkis, #33cccc); }
.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke h2 { color: var(--mtv-lila-dunkel, #241243); font-weight: 800; }
.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke p { margin: 12px 0 0; color: #4a3f60; }
.elementor .mtv-kontakt.mtv-kontakt--ci .mtv-kontakt-danke__knopf.elementor-button { margin-top: 26px; border: 0; border-radius: 999px; background: var(--mtv-lila, #3b2270); font-weight: 750; }