/**
 * Frontend-Styles für das Dynamics-365-Lead-Formular.
 * Bewusst dezent & neutral gehalten, damit sich das Formular in nahezu jedes
 * Theme (inkl. Elementor) einfügt. Anpassbar über die eigenen CSS-Klassen.
 */

.d365-lead-form-wrapper {
	max-width: 560px;
	margin: 0 0 1.5em;
}

.d365-lead-form-title {
	margin: 0 0 0.75em;
}

.d365-lead-form .d365-field {
	margin-bottom: 1em;
}

.d365-lead-form label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.d365-lead-form input[type="text"],
.d365-lead-form input[type="email"] {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
}

.d365-lead-form input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.d365-lead-form .d365-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
}

.d365-lead-form .d365-consent input {
	margin-top: 0.25em;
}

.d365-lead-form .d365-req {
	color: #e5004b;
	font-weight: 700;
}

.d365-lead-form .d365-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.d365-lead-form .d365-field-error {
	display: block;
	margin-top: 0.35em;
	color: #e5004b;
	font-size: 0.875rem;
	font-weight: 500;
}

.d365-lead-form [aria-invalid="true"] {
	border-color: #e5004b !important;
	box-shadow: 0 0 0 3px rgba(229, 0, 75, 0.18);
}

.d365-lead-form .d365-consent a {
	color: #e5004b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.d365-lead-form .d365-submit button {
	display: inline-block;
	padding: 0.7em 1.6em;
	background: #2563eb;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.d365-lead-form .d365-submit button:hover {
	background: #1d4ed8;
}

.d365-lead-form .d365-submit button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Lade-Spinner während der Übermittlung. */
.d365-lead-form .d365-submit {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.d365-spinner {
	display: none;
	width: 1.15em;
	height: 1.15em;
	border: 2px solid rgba(37, 99, 235, 0.25);
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: d365-spin 0.7s linear infinite;
}

.d365-lead-form.is-submitting .d365-spinner {
	display: inline-block;
}

@keyframes d365-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Honeypot-Feld für Menschen unsichtbar halten. */
.d365-lead-form .d365-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	overflow: hidden;
}

.d365-form-message {
	margin-top: 0.75em;
	padding: 0.6em 0.8em;
	border-radius: 6px;
	display: none;
}

.d365-form-message.is-success {
	display: block;
	background: #ecfdf5;
	border: 1px solid #10b981;
	color: #065f46;
}

.d365-form-message.is-error {
	display: block;
	background: #fef2f2;
	border: 1px solid #ef4444;
	color: #991b1b;
}

/**
 * Optionale Design-Variante "d365-solnl": passt das Formular an die Karte des
 * solutioo-Newsletter-Blocks auf der Startseite an (helle Verlaufskarte,
 * Pill-Felder, Pink-Button). Wird nur aktiv, wenn der Wrapper zusätzlich die
 * Klasse "d365-solnl" trägt (Shortcode-Attribut class="d365-solnl" oder
 * Elementor-Widget-Einstellung "Zusätzliche CSS-Klasse"). Der neutrale
 * Basis-Stil oben bleibt für alle anderen Einsatzorte unverändert erhalten.
 */
.d365-lead-form-wrapper.d365-solnl {
	max-width: 640px;
	margin: 0 auto;
	background: linear-gradient(145deg, #fff 0%, #f8f8f8 62%, #f2f2f2 100%);
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 20px;
	padding: clamp(22px, 3vw, 34px);
	position: relative;
	overflow: hidden;
	box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.65);
	isolation: isolate;
}

.d365-solnl::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 110% at 100% 0%, rgba(229, 0, 75, 0.1), transparent 62%);
	pointer-events: none;
	z-index: 0;
}

.d365-solnl .d365-lead-form-title {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-weight: 900;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	color: #1f1f1f;
}

.d365-solnl .d365-lead-form {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 10px;
}

.d365-solnl .d365-field {
	margin: 0;
}

.d365-solnl .d365-field-text > label,
.d365-solnl .d365-field-email > label,
.d365-solnl .d365-field-tel > label,
.d365-solnl .d365-field-number > label,
.d365-solnl .d365-field-select > label,
.d365-solnl .d365-field-textarea > label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.d365-solnl input[type="text"],
.d365-solnl input[type="email"],
.d365-solnl input[type="tel"],
.d365-solnl input[type="number"],
.d365-solnl select,
.d365-solnl textarea {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(31, 31, 31, 0.2);
	border-radius: 999px;
	padding: 14px 18px;
	color: #1f1f1f;
	font-size: 0.95rem;
	font-family: "Roboto", system-ui, sans-serif;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.25s, box-shadow 0.25s;
	appearance: none;
}

.d365-solnl textarea {
	border-radius: 16px;
}

.d365-solnl input::placeholder {
	color: #777;
	font-family: "Roboto", system-ui, sans-serif;
}

.d365-solnl input:focus,
.d365-solnl select:focus,
.d365-solnl textarea:focus {
	border-color: #e5004b;
	box-shadow: 0 0 0 3px rgba(229, 0, 75, 0.12);
}

.d365-solnl .d365-consent,
.d365-solnl .d365-newsletter {
	grid-column: 1 / -1;
}

.d365-solnl .d365-consent label,
.d365-solnl .d365-newsletter label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 0.83rem;
	line-height: 1.5;
	color: #555;
	font-weight: 400;
	cursor: pointer;
}

.d365-solnl .d365-consent input,
.d365-solnl .d365-newsletter input {
	position: static !important;
	width: 16px !important;
	height: 16px !important;
	margin: 3px 0 0 !important;
	flex: 0 0 auto;
	accent-color: #e5004b;
	cursor: pointer;
	opacity: 1 !important;
}

.d365-solnl .d365-submit {
	grid-column: 1 / -1;
	justify-content: flex-end;
	margin-top: 2px;
}

.d365-solnl .d365-submit button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #e5004b;
	color: #fff;
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.95rem;
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.d365-solnl .d365-submit button::after {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	flex: 0 0 auto;
}

.d365-solnl .d365-submit button:hover {
	background: #1f1f1f;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(229, 0, 75, 0.6);
}

.d365-solnl .d365-submit button[disabled] {
	opacity: 0.6;
	transform: none;
	cursor: default;
}

.d365-solnl .d365-form-message {
	grid-column: 1 / -1;
	margin-top: 0;
	border-radius: 12px;
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 0.88rem;
}

@media (max-width: 560px) {
	.d365-solnl .d365-lead-form {
		grid-template-columns: 1fr;
	}
	.d365-solnl .d365-submit {
		justify-content: stretch;
	}
	.d365-solnl .d365-submit button {
		flex: 1;
		width: 100%;
		justify-content: center;
	}
}

/**
 * Eingebettete Variante ohne eigene Karten-Optik: fuer Faelle, in denen das
 * Formular bereits in eine vorhandene, gleich gestylte Karte einbettet ist
 * (z. B. die Newsletter-Karte auf der Startseite). Behaelt Raster, Felder,
 * Buttons und Meldungen von ".d365-solnl" bei, verzichtet aber auf
 * Hintergrund, Rahmen, Innenabstand, Schatten und das Verlaufs-Overlay,
 * damit keine doppelte Karte entsteht. Wird zusaetzlich zu "d365-solnl"
 * gesetzt (Klassenliste: "d365-solnl d365-solnl-embed").
 */
.d365-lead-form-wrapper.d365-solnl.d365-solnl-embed {
	max-width: none;
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
	/*
	 * Die Basis-Variante ".d365-solnl" setzt "overflow:hidden", damit der
	 * eigene Verlaufshintergrund/Schatten an der abgerundeten Kartenkante
	 * (border-radius) nicht überstehen. Im Embed-Fall gibt es weder
	 * Hintergrund noch Rahmen/Schatten – dafür sitzt der Wrapper hier ohne
	 * eigenes Padding direkt in der bereits gepolsterten äußeren Karte
	 * (".solnl"). Ohne diese Zeile schneidet "overflow:hidden" den
	 * box-shadow des Fokus-Rings der Eingabefelder hart an der
	 * Wrapper-Kante ab, da dort kein Puffer/Padding mehr vorhanden ist.
	 */
	overflow: visible;
	border-radius: 0;
	isolation: auto;
}
.d365-solnl.d365-solnl-embed::before {
	content: none;
}