/*
 * KDR — Homepage "Unsere Kommunität" section (Startseite, Sektion 5)
 * Loaded by the kdr child theme (see functions.php).
 * Same layered arch-photo layout as the Willkommen section, but with a
 * maroon accent instead of gold, and a button under the copy.
 * Targeted via CSS classes set on the Containers/widgets in Elementor's
 * Advanced tab.
 */

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

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

/* Maroon accent shape — sits behind the photo, exposed on the left edge
   and in thin slivers above/below it. */
.kdr-s5-accent {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 50.06%;
	height: 100%;
	background-color: #6c1434;
	border-radius: 200px 0 0 0;
}

.kdr-s5-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: #d8cfc2;
	background-size: cover;
	background-position: center;
}

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

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

.kdr-s5-body {
	max-width: 384px;
	margin-top: 24px;
}

.kdr-s5-button {
	margin-top: 24px;
}

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