/* =========================================================
   LTR Fahrzeugschaden Upload 5.1.0
   Finales Frontend-Layout: exakt zentrierte Icons + mehr Luft
   ========================================================= */

.ltr-fsu,
.ltr-fsu * {
	box-sizing: border-box;
}

.ltr-fsu {
	--text:#202428;
	--muted:#747c82;
	--border:#dfe3e6;
	--border-strong:#cfd5da;
	--soft:#f7f8f9;
	--orange:#e7772b;
	--orange-soft:#fff6ef;
	--danger:#b42318;

	width:100%;
	margin:34px 0 30px;
	color:var(--text);
	font-family:inherit;
}

/* ---------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------- */

.ltr-fsu__hero {
	display:flex;
	align-items:flex-start;
	gap:18px;
	padding:20px 22px;
	border:1px solid var(--border);
	border-radius:10px;
	background:#fff;
	margin-bottom:34px;
}

.ltr-fsu__hero-icon {
	width:46px;
	height:46px;
	flex:0 0 46px;
	display:grid;
	place-items:center;
	border:1px solid var(--border);
	border-radius:9px;
	background:var(--soft);
	margin-top:2px;
}

.ltr-fsu__hero-icon svg,
.ltr-fsu__drop-icon svg,
.ltr-fsu__zone-icon--simple svg {
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.ltr-fsu__hero-icon svg {
	width:25px;
	height:25px;
}

.ltr-fsu__title {
	margin:0 0 10px!important;
	font-size:clamp(20px,2vw,27px)!important;
	line-height:1.18!important;
	font-weight:650!important;
	color:var(--text)!important;
	letter-spacing:-0.01em;
}

.ltr-fsu__intro {
	margin:0!important;
	max-width:900px;
	font-size:clamp(14px,1.15vw,16px)!important;
	line-height:1.65!important;
	color:var(--muted)!important;
}

/* ---------------------------------------------------------
   Abschnitte
   --------------------------------------------------------- */

.ltr-fsu__section + .ltr-fsu__section {
	margin-top:38px;
}

.ltr-fsu__section-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	margin-bottom:18px;
}

.ltr-fsu__section-head h4,
.ltr-fsu__uploads-title {
	margin:0!important;
	font-size:clamp(17px,1.35vw,20px)!important;
	line-height:1.3!important;
	font-weight:650!important;
	color:var(--text)!important;
}

.ltr-fsu__section-head span {
	font-size:12px;
	line-height:1.4;
	color:var(--muted);
	padding-bottom:2px;
}

.ltr-fsu__zones {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:14px;
}

.ltr-fsu__special-row {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px;
	max-width:700px;
}

/* ---------------------------------------------------------
   Kacheln
   WICHTIG: symmetrisches Padding = Inhalte wirklich mittig.
   Das Plus liegt absolut und beeinflusst die Zentrierung nicht.
   --------------------------------------------------------- */

.ltr-fsu__zone {
	position:relative;
	min-height:176px;
	display:flex!important;
	flex-direction:column;
	align-items:center!important;
	justify-content:center!important;
	gap:14px;
	padding:20px 46px!important; /* links/rechts identisch */
	border:1px solid var(--border)!important;
	border-radius:10px!important;
	background:#fff!important;
	color:var(--text)!important;
	font:inherit!important;
	text-align:center!important;
	cursor:pointer;
	transition:border-color .17s ease, box-shadow .17s ease, transform .17s ease, background .17s ease;
}

.ltr-fsu__zone:hover {
	border-color:var(--border-strong)!important;
	box-shadow:0 6px 18px rgba(20,28,34,.06);
	transform:translateY(-1px);
}

.ltr-fsu__zone.is-active {
	border-color:rgba(231,119,43,.48)!important;
	background:var(--orange-soft)!important;
	box-shadow:0 0 0 2px rgba(231,119,43,.08);
}

.ltr-fsu__zone-icon {
	width:92px;
	height:100px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto!important;
	flex:0 0 auto;
}

.ltr-fsu__zone-icon > svg {
	display:block!important;
	width:86px!important;
	height:96px!important;
	max-width:100%!important;
	max-height:100%!important;
	margin:0 auto!important;
	padding:0!important;
	border:0!important;
	box-shadow:none!important;
	background:transparent!important;
	overflow:visible;
}

.ltr-fsu__zone-icon--simple {
	width:72px;
	height:72px;
}

.ltr-fsu__zone-icon--simple > svg {
	width:56px!important;
	height:56px!important;
	margin:0 auto!important;
}

.ltr-fsu__zone-label {
	display:block;
	width:100%;
	margin:0!important;
	font-size:14px;
	line-height:1.35;
	font-weight:650;
	text-align:center!important;
	color:var(--text);
}

.ltr-fsu__zone-plus {
	position:absolute;
	right:18px;
	top:50%;
	transform:translateY(-50%);
	width:24px;
	height:24px;
	display:grid;
	place-items:center;
	font-size:25px;
	font-weight:300;
	line-height:1;
	color:var(--orange);
	pointer-events:none;
}

.ltr-fsu__zone.is-active .ltr-fsu__zone-plus {
	font-size:0;
}

.ltr-fsu__zone.is-active .ltr-fsu__zone-plus::after {
	content:"✓";
	font-size:17px;
	font-weight:700;
}

/* ---------------------------------------------------------
   Ausgewählte Bereiche / Upload
   --------------------------------------------------------- */

.ltr-fsu__uploads-wrap {
	margin-top:38px;
}

.ltr-fsu__uploads-title {
	margin-bottom:16px!important;
}

.ltr-fsu__uploads {
	display:grid;
	gap:16px;
}

.ltr-fsu__upload-card {
	padding:20px;
	border:1px solid var(--border);
	border-radius:10px;
	background:#fff;
}

.ltr-fsu__upload-card-head {
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:20px;
}

.ltr-fsu__upload-mini-icon {
	width:52px;
	height:58px;
	flex:0 0 52px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--border);
	border-radius:8px;
	background:var(--soft);
	overflow:hidden;
}

.ltr-fsu__upload-mini-icon > svg {
	width:48px!important;
	height:54px!important;
	max-width:100%!important;
	max-height:100%!important;
	margin:0 auto!important;
	display:block!important;
}

.ltr-fsu__upload-meta {
	min-width:0;
	flex:1;
}

.ltr-fsu__upload-kicker {
	font-size:10px;
	line-height:1.2;
	text-transform:uppercase;
	letter-spacing:.08em;
	font-weight:700;
	color:var(--muted);
	margin-bottom:5px;
}

.ltr-fsu__upload-name {
	font-size:clamp(16px,1.2vw,18px);
	line-height:1.35;
	font-weight:650;
	color:var(--text);
}

.ltr-fsu__remove-area {
	width:36px;
	height:36px;
	flex:0 0 36px;
	display:grid!important;
	place-items:center;
	padding:0!important;
	border:1px solid var(--border)!important;
	border-radius:50%!important;
	background:#fff!important;
	color:var(--muted)!important;
	font:inherit!important;
	font-size:22px!important;
	line-height:1!important;
	cursor:pointer;
}

.ltr-fsu__remove-area:hover {
	color:var(--danger)!important;
	border-color:#d8c3c0!important;
}

/* ---------------------------------------------------------
   Dropzone
   --------------------------------------------------------- */

.ltr-fsu__drop {
	position:relative;
	min-height:140px;
	display:flex!important;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:20px;
	border:1px dashed var(--border-strong);
	border-radius:8px;
	background:var(--soft);
	text-align:center;
	cursor:pointer;
	transition:.17s ease;
}

.ltr-fsu__drop:hover,
.ltr-fsu__drop.is-dragover {
	border-color:#aeb6bc;
	background:#f2f4f5;
}

.ltr-fsu__files {
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	opacity:0!important;
	pointer-events:none!important;
}

.ltr-fsu__drop-icon {
	width:29px;
	height:29px;
	margin-bottom:10px;
	color:var(--text);
}

.ltr-fsu__drop-icon svg {
	width:100%;
	height:100%;
}

.ltr-fsu__drop-main {
	font-size:14px;
	font-weight:650;
	line-height:1.4;
	color:var(--text);
}

.ltr-fsu__drop-sub {
	margin-top:6px;
	font-size:11px;
	line-height:1.4;
	color:var(--muted);
}

/* ---------------------------------------------------------
   Bildvorschau
   --------------------------------------------------------- */

.ltr-fsu__preview-wrap {
	margin-top:18px;
}

.ltr-fsu__preview-head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:12px;
	font-size:13px;
	font-weight:650;
	color:var(--text);
}

.ltr-fsu__file-count {
	color:var(--muted);
	font-weight:500;
}

.ltr-fsu__previews {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
}

.ltr-fsu__preview {
	position:relative;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border:1px solid var(--border);
	border-radius:8px;
	background:#eef1f3;
}

.ltr-fsu__preview img {
	display:block!important;
	width:100%!important;
	height:100%!important;
	object-fit:cover!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
}

.ltr-fsu__preview-remove {
	position:absolute;
	top:7px;
	right:7px;
	z-index:2;
	width:30px;
	height:30px;
	display:grid!important;
	place-items:center;
	padding:0!important;
	border:0!important;
	border-radius:50%!important;
	background:rgba(20,20,20,.78)!important;
	color:#fff!important;
	font:inherit!important;
	font-size:18px!important;
	line-height:1!important;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.ltr-fsu__preview-remove:hover {
	background:#111!important;
	transform:scale(1.04);
}

.ltr-fsu__preview-name {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:22px 8px 7px;
	background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));
	color:#fff;
	font-size:10px;
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ---------------------------------------------------------
   Beschreibung
   --------------------------------------------------------- */

.ltr-fsu__desc-label {
	display:block!important;
	margin:18px 0 8px!important;
	font-size:13px!important;
	line-height:1.4!important;
	font-weight:650!important;
	color:var(--text)!important;
}

.ltr-fsu__desc-label span {
	font-weight:400;
	color:var(--muted);
}

.ltr-fsu__desc {
	display:block;
	width:100%!important;
	min-height:80px!important;
	padding:11px 12px!important;
	border:1px solid var(--border)!important;
	border-radius:8px!important;
	background:#fff!important;
	font:inherit!important;
	font-size:14px!important;
	line-height:1.5!important;
	color:var(--text)!important;
	resize:vertical;
	box-shadow:none!important;
}

.ltr-fsu__desc:focus {
	outline:none!important;
	border-color:#aab2b8!important;
	box-shadow:0 0 0 3px rgba(31,37,41,.05)!important;
}

.ltr-fsu__error {
	margin-top:12px;
	padding:10px 12px;
	border-radius:7px;
	background:#fff3f2;
	color:var(--danger);
	font-size:12px;
	line-height:1.45;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width:980px) {
	.ltr-fsu__zones {
		grid-template-columns:repeat(3,minmax(0,1fr));
	}

	.ltr-fsu__previews {
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

/* ---------------------------------------------------------
   Smartphone
   --------------------------------------------------------- */

@media (max-width:700px) {
	.ltr-fsu {
		margin-top:26px;
	}

	.ltr-fsu__hero {
		gap:12px;
		padding:15px;
		margin-bottom:26px;
	}

	.ltr-fsu__hero-icon {
		width:40px;
		height:40px;
		flex-basis:40px;
	}

	.ltr-fsu__title {
		font-size:19px!important;
		margin-bottom:7px!important;
	}

	.ltr-fsu__intro {
		font-size:13px!important;
		line-height:1.55!important;
	}

	.ltr-fsu__section-head {
		margin-bottom:14px;
	}

	.ltr-fsu__section-head h4,
	.ltr-fsu__uploads-title {
		font-size:16px!important;
	}

	.ltr-fsu__section-head span {
		font-size:11px;
	}

	.ltr-fsu__zones,
	.ltr-fsu__special-row {
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:10px;
	}

	.ltr-fsu__zone {
		min-height:144px;
		gap:10px;
		padding:14px 34px!important; /* symmetrisch */
	}

	.ltr-fsu__zone-icon {
		width:72px;
		height:82px;
	}

	.ltr-fsu__zone-icon > svg {
		width:70px!important;
		height:80px!important;
	}

	.ltr-fsu__zone-label {
		font-size:12px;
	}

	.ltr-fsu__zone-plus {
		right:10px;
		font-size:22px;
	}

	.ltr-fsu__upload-card {
		padding:15px;
	}

	.ltr-fsu__drop {
		min-height:122px;
		padding:15px 10px;
	}

	.ltr-fsu__drop-main {
		font-size:13px;
	}

	.ltr-fsu__previews {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.ltr-fsu__desc {
		font-size:13px!important;
	}
}