/*
 * KDR — Homepage "Unser Auftrag" section (Startseite, Sektion 5 - Auftrag)
 * Loaded by the kdr child theme (see functions.php).
 * Tinted full-bleed band with a single large rounded top-right corner;
 * heading + copy + two buttons on the left, a 4-photo staggered collage
 * on the right.
 * Targeted via CSS classes set on the Containers/widgets in Elementor's
 * Advanced tab.
 */

.kdr-sec-auftrag {
	background-color: rgba(220, 215, 161, 0.25);
}

.kdr-auftrag-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 48px;
}

.kdr-auftrag-text {
	flex: 1 1 340px;
	max-width: 384px;
}

.kdr-auftrag-heading .elementor-heading-title {
	line-height: 0.86 !important;
}

.kdr-auftrag-body p {
	margin: 0 0 20px;
}
.kdr-auftrag-body p:last-child {
	margin-bottom: 0;
}

.kdr-auftrag-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

/* --- Photo collage: 4 images, staggered two-column masonry ---
   Percentages below come directly from the Figma node positions,
   converted into offsets relative to this wrapper's own bounding box. */
.kdr-auftrag-collage {
	position: relative;
	width: 100%;
	max-width: 488px;
	aspect-ratio: 487.6 / 838.6;
	flex: 1 1 320px;
}

.kdr-auftrag-collage > div {
	position: absolute !important;
	border-radius: 20px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.kdr-auftrag-img-1 {
	left: 0.08%;
	top: 0%;
	width: 57.76%;
	height: 49.16%;
	background-color: #4a5c3a;
}

.kdr-auftrag-img-2 {
	left: 62.76%;
	top: 27.93%;
	width: 36.55%;
	height: 20.3%;
	background-color: #8a97a8;
}

.kdr-auftrag-img-3 {
	left: 41.79%;
	top: 51.09%;
	width: 58.23%;
	height: 48.91%;
	background-color: #293613;
}

.kdr-auftrag-img-4 {
	left: 0%;
	top: 51.09%;
	width: 36.92%;
	height: 21.3%;
	background-color: #c0a35a;
}

@media (max-width: 767px) {
	.kdr-sec-auftrag {
		border-radius: 40px 40px 0 0 !important;
	}
	.kdr-auftrag-row {
		gap: 32px;
	}
	.kdr-auftrag-collage {
		max-width: 340px;
		margin: 0 auto;
	}
}