/*
 * KDR — Homepage "Willkommen" section (Startseite, Sektion 1)
 * Loaded by the kdr child theme (see functions.php).
 * Two-column intro: layered arch photo on the left (gold accent shape
 * peeking behind a rounded-top image), heading + copy on the right.
 * Targeted via CSS classes set on the Containers/widgets in Elementor's
 * Advanced tab.
 */

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

.kdr-s1-visual {
	position: relative;
	width: 100%;
	max-width: 407.62px;
	aspect-ratio: 407.62 / 472;
	flex: 0 0 auto;
}

/* Gold accent shape — sits behind the photo, exposed on the left edge
   and in thin slivers above/below it. Rounded on the exposed (top-left)
   corner only, matching the arch silhouette. */
.kdr-s1-accent {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 50.06%;
	height: 100%;
	background-color: #c0b648;
	border-radius: 200px 0 0 0;
}

.kdr-s1-photo {
	position: absolute !important;
	left: 5.06%;
	top: 4.45%;
	width: 94.94%;
	height: 91.1%;
	border-radius: 200px 200px 0 0;
	overflow: hidden;
	background-color: #dcd9c4;
	background-size: cover;
	background-position: center;
}

.kdr-s1-text {
	flex: 0 1 384px;
	max-width: 384px;
	min-width: 280px;
}

.kdr-s1-heading {
	max-width: 384px;
}

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

.kdr-s1-body {
	max-width: 384px;
	margin-top: 32px;
}

@media (max-width: 767px) {
	.kdr-willkommen {
		gap: 32px;
	}
	.kdr-s1-visual {
		max-width: 280px;
		margin: 0 auto;
	}
}