/* ==========================================================================
   Autolack Müller × Greyd.Suite
   Ergänzt main.css für den Betrieb im Greyd Theme: fehlende Presets, Template-Teile,
   Greyd.Forms im Design „Showroom bei Nacht“.
   ========================================================================== */

:root {
	--wp--preset--font-size--lead: clamp(1.125rem, 1.4vw, 1.3125rem);
	--wp--preset--font-size--h-3: clamp(1.25rem, 2vw, 1.75rem);
	--alm-display: "Sora", var(--wp--preset--font-family--heading, system-ui), sans-serif;
	--alm-body: "Inter", var(--wp--preset--font-family--body, system-ui), sans-serif;
}

body.alm-site { background: #0A0A0B; color: #F2F2F2; }

/* Template-Teile des Greyd Themes: der Autolack-Header ist fixiert, der Wrapper soll keinen Platz einnehmen */
.alm-site .wp-site-blocks > header.wp-block-template-part,
.alm-site .wp-site-blocks > .alm-header-part,
.alm-site .wp-site-blocks > footer.wp-block-template-part,
.alm-site .wp-site-blocks > .alm-footer-part {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	position: static;
}
.alm-site .wp-site-blocks { padding-top: 0 !important; }
.alm-site .wp-site-blocks > main,
.alm-site .wp-site-blocks > .alm-main { margin-block-start: 0 !important; }

/* Greyd-Seiten, die nicht vom Plugin kommen (z. B. Blog, Suche), bekommen Abstand unter dem fixierten Header */
.alm-site .wp-site-blocks > main:not(.alm-main) { padding-top: calc(var(--alm-header-h) + 2rem); }

/* ---------- Greyd.Forms im dunklen Design --------------------------------- */

.alm-greyd-form {
	position: relative;
	padding: clamp(1.25rem, 4vw, 3rem);
	border-radius: 22px;
	background: linear-gradient(170deg, #18181b, #111113);
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 60px 120px -60px rgba(0, 0, 0, .9);
	color: #F2F2F2;
}
.alm-greyd-form--kontakt, .alm-greyd-form--bewerbung { padding: clamp(1.25rem, 3vw, 2.25rem); }

.alm-greyd-form .wp-block-heading { margin-top: 0; font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.alm-greyd-form .label,
.alm-greyd-form .label_wrap .label span:first-child { color: #F2F2F2; font-weight: 600; font-size: .95rem; }
.alm-greyd-form .requirement-optional { color: #A1A1AA; font-weight: 400; }
.alm-greyd-form .requirement-required { color: #FF3B30; }

.alm-greyd-form .input,
.alm-greyd-form input.input,
.alm-greyd-form textarea.input,
.alm-greyd-form select,
.alm-greyd-form .wp-block-greyd-forms-upload label .input {
	width: 100%;
	min-height: 52px;
	padding: .85rem 1rem;
	border-radius: 10px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	background: #1C1C1F !important;
	color: #F2F2F2 !important;
	font: inherit;
	font-size: 1rem;
	color-scheme: dark;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.alm-greyd-form .input::placeholder { color: #71717a; }
.alm-greyd-form .input:focus,
.alm-greyd-form select:focus {
	outline: none;
	border-color: #FF3B30 !important;
	box-shadow: 0 0 0 4px rgba(255, 59, 48, .18) !important;
	background: #202024 !important;
}
.alm-greyd-form .wp-block-greyd-forms-upload label .input { display: flex; align-items: center; gap: .5rem; cursor: pointer; border-style: dashed !important; }
.alm-greyd-form .wp-block-greyd-forms-upload label .input:hover { border-color: #FF3B30 !important; background: rgba(225, 6, 0, .08) !important; }
.alm-greyd-form .icon_upload { color: #FF3B30; }
.alm-greyd-form .wp-block-greyd-forms-checkbox .checkbox-label { display: flex; gap: .65rem; align-items: flex-start; color: #d4d4d8; font-weight: 400; font-size: .925rem; line-height: 1.5; }
.alm-greyd-form .wp-block-greyd-forms-checkbox input[type="checkbox"] { width: 20px; height: 20px; accent-color: #E10600; flex: none; margin-top: .1rem; }
.alm-greyd-form .wp-block-greyd-forms-checkbox a { color: #FF3B30; }
.alm-greyd-form .greyd-forms-tooltip-toggle { color: #A1A1AA; }
.alm-greyd-form .greyd-forms-tooltip-popup { background: #26262a; color: #F2F2F2; border: 1px solid rgba(255, 255, 255, .12); }

.alm-greyd-form .submitbutton,
.alm-greyd-form .multistep_button.next_step {
	min-height: 52px;
	padding: 1rem 1.6rem;
	border-radius: 6px;
	background: #E10600;
	color: #fff;
	font-weight: 600;
	border: 0;
}
.alm-greyd-form .submitbutton:hover,
.alm-greyd-form .multistep_button.next_step:hover { background: #C00500; }
.alm-greyd-form .multistep_button.prev_step { color: #F2F2F2; }
.alm-greyd-form .step_number { color: #FF3B30; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; text-decoration: none; }
.alm-greyd-form .progress_wrapper { margin-bottom: 1.5rem; }
.alm-greyd-form .wp-block-columns { gap: 1.25rem; margin-bottom: 0; }
.alm-greyd-form .input-wrapper { margin-bottom: 1.1rem; }
.alm-greyd-form .alm-form-tipps { padding: 1rem 1.25rem; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); color: #c4c4cc; font-size: .925rem; }
.alm-greyd-form .img_pnl span { color: inherit; }

.alm-field-msg { margin: .4rem 0 0; font-size: .875rem; color: #FF6B61; }
.alm-has-error .input, .alm-has-error select { border-color: #FF3B30 !important; }

/* Fahrzeug-Skizze im Greyd-Formular */
.alm-silhouette--greyd { display: grid; justify-items: center; gap: .5rem; margin: .5rem 0 1rem; }
.alm-silhouette--greyd .alm-silhouette__hint { margin: 0; font-size: .875rem; color: #A1A1AA; }
.alm-silhouette--greyd .alm-silhouette__svg { width: 180px; height: auto; }
.alm-silhouette__body { fill: #141416; stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; }
.alm-silhouette__dir { fill: #A1A1AA; font: 600 9px/1 var(--alm-body); letter-spacing: .2em; }
.alm-zone { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .28); stroke-width: 1; cursor: pointer; transition: fill .2s, stroke .2s; }
.alm-zone:hover { fill: rgba(255, 59, 48, .25); stroke: #FF3B30; }
.alm-zone.is-selected { fill: rgba(225, 6, 0, .75); stroke: #FF3B30; }

/* Greyd-Buttons (Core-Button mit Greyd-Stilen) im Autolack-Look */
.alm-site .wp-block-button.is-style-sec .wp-block-button__link,
.alm-site .wp-block-button.is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, .03); color: #F2F2F2; border: 1px solid rgba(229, 229, 229, .45); }

@media (max-width: 781px) {
	.alm-greyd-form .wp-block-columns { flex-direction: column; }
	.alm-greyd-form .img_pnl { width: calc(50% - .5rem) !important; }
}