/* Lead Downloads – Frontend CSS v1.5.0 */
/*
 * Hinweis Spezifität: Alle Komponenten-Selektoren sind mit .ld-form-wrap
 * geprefixt und nutzen Element+Klasse (z.B. button.ld-submit-btn), damit
 * Theme-Regeln wie `button[type="submit"]` oder `.entry-content button`
 * die Design-Einstellungen nicht überschreiben.
 */

/* ─── CSS Custom Properties (Defaults) ──────────────────────────────── */
.ld-form-wrap {
	--ld-primary:          #2563eb;
	--ld-bg:               #ffffff;
	--ld-text:             #111827;
	--ld-text-muted:       #6b7280;
	--ld-border:           #d1d5db;
	--ld-input-bg:         #ffffff;
	--ld-shadow:           0 4px 24px rgba(0,0,0,0.08);
	--ld-radius:           12px;
	--ld-input-radius:     8px;
	--ld-btn-radius:       8px;
	--ld-btn-text-color:   #ffffff;
	--ld-btn-height:       48px;
	--ld-btn-width:        100%;
	--ld-btn-hover:        color-mix(in srgb, var(--ld-primary) 88%, #000);
	--ld-input-pad-y:      12px;
	--ld-card-border:      0px solid transparent;
	--ld-font:             inherit;
	--ld-max-width:        100%;
	--ld-focus-ring:       color-mix(in srgb, var(--ld-primary) 35%, transparent);

	width: 100%;
	max-width: var(--ld-max-width);
	box-sizing: border-box;
	font-family: var(--ld-font);
}

/* Fallback für ältere Browser ohne color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ld-form-wrap {
		--ld-btn-hover: var(--ld-primary);
		--ld-focus-ring: rgba(37, 99, 235, 0.25);
	}
}

/* ─── Dark Variant (Defaults) ────────────────────────────────────────── */
.ld-form-wrap.ld-dark {
	--ld-bg:           #1e293b;
	--ld-text:         #f1f5f9;
	--ld-text-muted:   #94a3b8;
	--ld-border:       #334155;
	--ld-input-bg:     #0f172a;
	--ld-shadow:       0 4px 24px rgba(0,0,0,0.4);
}

/* ─── Layout mit optionalem Coverbild ────────────────────────────────── */
.ld-form-wrap .ld-form-layout {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.ld-form-wrap .ld-form-cover {
	flex: 0 0 36%;
	max-width: 36%;
	position: sticky;
	top: 24px;
}

.ld-form-wrap .ld-form-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ld-radius);
	box-shadow: var(--ld-shadow);
}

.ld-form-wrap .ld-form-main {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 640px) {
	.ld-form-wrap .ld-form-layout {
		flex-direction: column;
	}
	.ld-form-wrap .ld-form-cover {
		position: static;
		flex: none;
		max-width: 280px;
		width: 100%;
		margin: 0 auto;
	}
}

/* ─── Card Container ─────────────────────────────────────────────────── */
.ld-form-wrap .ld-form-card {
	background:    var(--ld-bg);
	border-radius: var(--ld-radius);
	box-shadow:    var(--ld-shadow);
	border:        var(--ld-card-border);
	padding:       32px 36px;
	width:         100%;
	box-sizing:    border-box;
}

@media (max-width: 480px) {
	.ld-form-wrap .ld-form-card {
		padding: 24px 20px;
	}
}

/* ─── Form Description ───────────────────────────────────────────────── */
.ld-form-wrap .ld-form-desc {
	color:       var(--ld-text-muted);
	font-size:   15px;
	line-height: 1.6;
	margin:      0 0 24px;
}

/* ─── Messages ───────────────────────────────────────────────────────── */
.ld-form-wrap .ld-form-messages:empty {
	display: none;
}

.ld-form-wrap .ld-message {
	padding:       12px 16px;
	border-radius: 8px;
	font-size:     14px;
	line-height:   1.5;
	margin-bottom: 16px;
}

.ld-form-wrap .ld-message.success {
	background: #d1fae5;
	color:      #065f46;
	border:     1px solid #6ee7b7;
}

.ld-form-wrap .ld-message.error {
	background: #fee2e2;
	color:      #991b1b;
	border:     1px solid #fca5a5;
}

/* ─── Feld-Raster: ganze + halbe Breiten ─────────────────────────────── */
.ld-form-wrap .ld-form-fields {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   16px;
}

.ld-form-wrap .ld-form-fields .ld-form-row {
	grid-column: 1 / -1;   /* Standard: ganze Breite */
	width: 100%;
	min-width: 0;
}

.ld-form-wrap .ld-form-fields .ld-form-row.ld-col-half {
	grid-column: span 1;   /* halbe Breite: zwei Felder pro Zeile */
}

@media (max-width: 480px) {
	.ld-form-wrap .ld-form-fields .ld-form-row.ld-col-half {
		grid-column: 1 / -1; /* mobil immer volle Breite */
	}
}

.ld-form-wrap .ld-form-row {
	width: 100%;
}

.ld-form-wrap .ld-label {
	display:       block;
	font-size:     14px;
	font-weight:   500;
	color:         var(--ld-text);
	margin-bottom: 6px;
}

.ld-form-wrap .ld-required {
	color:       #ef4444;
	margin-left: 2px;
}

/* ─── Inputs ─────────────────────────────────────────────────────────── */
.ld-form-wrap input.ld-input,
.ld-form-wrap textarea.ld-input {
	width:        100%;
	padding:      var(--ld-input-pad-y) 14px;
	font-size:    15px;
	font-family:  var(--ld-font);
	color:        var(--ld-text);
	background:   var(--ld-input-bg);
	border:       1.5px solid var(--ld-border);
	border-radius: var(--ld-input-radius);
	box-sizing:   border-box;
	transition:   border-color 0.15s, box-shadow 0.15s;
	line-height:  1.5;
	appearance:   none;
	-webkit-appearance: none;
	max-width:    100%;
}

.ld-form-wrap input.ld-input::placeholder,
.ld-form-wrap textarea.ld-input::placeholder {
	color: var(--ld-text-muted);
	opacity: 1;
}

.ld-form-wrap input.ld-input:focus,
.ld-form-wrap textarea.ld-input:focus {
	outline:      none;
	border-color: var(--ld-primary);
	box-shadow:   0 0 0 3px var(--ld-focus-ring);
}

.ld-form-wrap textarea.ld-input {
	resize:     vertical;
	min-height: 80px;
}

/* ─── Checkboxes ─────────────────────────────────────────────────────── */
.ld-form-wrap .ld-checkbox-label {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	cursor:      pointer;
	margin-top:  8px;
}

.ld-form-wrap .ld-checkbox-label input[type="checkbox"] {
	width:       18px;
	height:      18px;
	flex-shrink: 0;
	margin-top:  2px;
	accent-color: var(--ld-primary);
	cursor:      pointer;
}

.ld-form-wrap .ld-checkbox-label span {
	font-size:   14px;
	color:       var(--ld-text-muted);
	line-height: 1.5;
}

.ld-form-wrap .ld-privacy-text a {
	color:           var(--ld-primary);
	text-decoration: underline;
}

.ld-form-wrap .ld-privacy-text a:hover {
	text-decoration: none;
}

/* ─── Submit Button ──────────────────────────────────────────────────── */
.ld-form-wrap .ld-form-submit-row {
	margin-top: 8px;
}

.ld-form-wrap button.ld-submit-btn,
.ld-form-wrap .ld-submit-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           var(--ld-btn-width);
	min-height:      var(--ld-btn-height);
	padding:         12px 24px;
	background:      var(--ld-primary);
	background-color: var(--ld-primary);
	color:           var(--ld-btn-text-color);
	font-size:       15px;
	font-family:     var(--ld-font);
	font-weight:     600;
	text-transform:  none;
	letter-spacing:  normal;
	border:          none;
	border-radius:   var(--ld-btn-radius);
	cursor:          pointer;
	transition:      background-color 0.15s, transform 0.1s, box-shadow 0.15s;
	box-sizing:      border-box;
	box-shadow:      none;
	text-decoration: none;
}

.ld-form-wrap button.ld-submit-btn:hover,
.ld-form-wrap .ld-submit-btn:hover {
	background:       var(--ld-btn-hover);
	background-color: var(--ld-btn-hover);
	color:            var(--ld-btn-text-color);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ld-form-wrap button.ld-submit-btn:focus,
.ld-form-wrap .ld-submit-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--ld-focus-ring);
}

.ld-form-wrap button.ld-submit-btn:active {
	transform: scale(0.99);
}

.ld-form-wrap button.ld-submit-btn:disabled {
	opacity: 0.6;
	cursor:  not-allowed;
}

/* ─── Spinner ────────────────────────────────────────────────────────── */
.ld-form-wrap .ld-btn-spinner {
	display:       none;
	width:         18px;
	height:        18px;
	border:        2px solid rgba(255,255,255,0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation:     ld-spin 0.7s linear infinite;
}

.ld-form-wrap .ld-submit-btn.loading .ld-btn-spinner {
	display: inline-block;
}

.ld-form-wrap .ld-submit-btn.loading .ld-btn-text {
	opacity: 0.7;
}

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

/* ─── Trust Note ─────────────────────────────────────────────────────── */
.ld-form-wrap .ld-trust-note {
	display:     flex;
	align-items: center;
	gap:         6px;
	color:       var(--ld-text-muted);
	font-size:   12px;
	margin:      12px 0 0;
}

.ld-form-wrap .ld-trust-icon {
	flex-shrink: 0;
	color:       #10b981;
}

/* ─── Feldbezogene Fehlermeldungen ───────────────────────────────────── */
.ld-form-wrap .ld-field-error {
	display: none;
	color: #dc2626;
	font-size: 13px;
	margin-top: 4px;
}

.ld-form-wrap .ld-field-error.visible {
	display: block;
}

.ld-form-wrap .ld-form-row.ld-has-error input.ld-input,
.ld-form-wrap .ld-form-row.ld-has-error textarea.ld-input {
	border-color: #dc2626;
}

.ld-form-wrap.ld-dark .ld-field-error {
	color: #f87171;
}

/* ─── CAPTCHA-Widget ─────────────────────────────────────────────────── */
.ld-form-wrap .ld-captcha-row {
	margin: 14px 0;
}

/* ─── Erfolgs-Meldung (ersetzt Formular nach Absenden) ───────────────── */
.ld-form-wrap .ld-success-message {
	text-align: center;
	color: var(--ld-text);
}

.ld-form-wrap .ld-success-icon {
	color: #10b981;
	margin-bottom: 8px;
}

.ld-form-wrap .ld-success-title {
	color: var(--ld-text);
	font-size: 20px;
	margin: 0 0 8px;
}

.ld-form-wrap .ld-success-text,
.ld-form-wrap .ld-success-email {
	color: var(--ld-text-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 8px;
}

.ld-form-wrap .ld-success-hint {
	color: var(--ld-text-muted);
	font-size: 13px;
	margin: 12px 0 0;
}