/* =====================================================================
   DM Trucks – Verkaufsformular
   ===================================================================== */
.sell-section{ padding:70px 0 50px; }

/* Infospalte */
.sell-intro{ background:#f4f7fa; border-left:3px solid #228dcb; padding:25px; margin-bottom:30px; }
.sell-intro-img{ display:block; width:100%; max-width:280px; margin:0 auto 20px; }
.sell-intro h3{ font-size:22px; line-height:1.35; color:#242424; margin-bottom:12px; }
.sell-intro p{ font-size:15px; line-height:1.7; color:#444; margin-bottom:15px; }
.sell-intro .list-style-three{ margin-bottom:15px; }
.sell-intro .sell-phone{ margin:0; font-size:15px; }
.sell-intro .sell-phone a{ color:#228dcb; font-size:18px; font-weight:500; }

/* Formular */
.sell-section .contact-form{ padding:30px; }
.sell-section .contact-form .form-group > label{
	display:block; font-size:15px; font-weight:500; color:#242424; margin-bottom:6px;
}
.sell-section .contact-form .optional{ font-weight:400; color:#888; }
.sell-section .contact-form .form-group textarea{ height:140px; padding-top:12px; line-height:1.6; }
.sell-section .contact-form input.error,
.sell-section .contact-form textarea.error{ border-color:#d93025 !important; }
.sell-section .field-error{ color:#d93025; font-size:13px; margin:6px 0 0; }

/* Spam-Falle */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Upload-Feld */
.upload-zone{
	position:relative; border:2px dashed #228dcb; border-radius:4px;
	background:#f4f9fd; text-align:center; padding:28px 16px;
	transition:background .2s, border-color .2s;
}
.upload-zone:hover, .upload-zone.drag{ background:#e3f1fa; }
.upload-zone.error{ border-color:#d93025; background:#fdf1f0; }
.upload-zone input[type="file"]{
	position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2;
}
.upload-zone input[type="file"]:focus-visible + .upload-zone-inner{ outline:2px solid #228dcb; outline-offset:6px; }
.upload-zone-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.upload-icon{ font-size:34px; line-height:1; }
.upload-zone-inner strong{ font-size:16px; color:#242424; font-weight:500; }
.upload-hint{ font-size:13px; color:#666; line-height:1.5; }

/* Vorschaubilder */
.upload-previews{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin:12px 0 0; padding:0; list-style:none; }
.upload-previews:empty{ display:none; }
.upload-previews li{ position:relative; border:1px solid #dde3e8; border-radius:4px; overflow:hidden; background:#fff; }
.upload-previews img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#eef2f5; }
.upload-previews li.no-preview img{ visibility:hidden; }
.upload-previews li.no-preview::before{ content:"\1F5BC"; position:absolute; top:22%; left:0; right:0; text-align:center; font-size:28px; }
.upload-previews .file-name{ display:block; font-size:11px; color:#555; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upload-previews .remove{
	position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%;
	border:0; background:rgba(0,0,0,.7); color:#fff; font-size:20px; line-height:28px; cursor:pointer; padding:0;
}
.upload-previews .remove:hover{ background:#d93025; }

/* Datenschutz-Checkbox */
.checkbox-label{ display:flex !important; gap:10px; align-items:flex-start; font-weight:400 !important; font-size:14px !important; line-height:1.6; cursor:pointer; }
.checkbox-label input{ flex:none; width:20px; height:20px; margin-top:2px; accent-color:#228dcb; }
.checkbox-label input.error{ outline:2px solid #d93025; outline-offset:1px; }
.checkbox-label a{ color:#228dcb; text-decoration:underline; }

/* Status & Absenden */
.form-status{ font-size:15px; line-height:1.5; margin-bottom:12px; }
.form-status:empty{ display:none; }
.form-status.error{ color:#d93025; background:#fdf1f0; border-left:3px solid #d93025; padding:10px 14px; }
.form-status.busy{ color:#1a73a8; background:#e3f1fa; border-left:3px solid #228dcb; padding:10px 14px; }
.sell-section .contact-form button[disabled]{ opacity:.6; cursor:wait; }
.required-hint{ font-size:13px; color:#888; margin:12px 0 0; }

/* Erfolgsmeldung */
.sell-success{ text-align:center; padding:40px 10px; }
.sell-success-icon{
	display:inline-block; width:64px; height:64px; line-height:64px; border-radius:50%;
	background:#228dcb; color:#fff; font-size:32px; margin-bottom:18px;
}
.sell-success h3{ font-size:24px; color:#242424; margin-bottom:12px; }
.sell-success p{ font-size:16px; color:#444; max-width:480px; margin:0 auto 25px; line-height:1.7; }

/* Smartphone */
@media only screen and (max-width:767px){
	.sell-section{ padding:40px 0 30px; }
	.sell-section .contact-form{ padding:20px 15px; }
	.sell-section .contact-form button[type="submit"]{ width:100%; }
	.sell-intro{ padding:20px; }
	.upload-previews{ grid-template-columns:repeat(3, 1fr); }
}