.scene-05 {
	background-color: var(--wood);
	margin-inline: auto;
	max-width: var(--max-width);
	padding-block: clamp(40px, 4%, 102.4px);
}

.scene-05.background-jahresringe {
	background-position: 300% 30%;
}

.scene-05 .content {
	padding-inline: 10%;
}

.scene-05 .headline-01 {
	color: var(--brown);
	font-size: var(--font-size-250-40);
	font-weight: 500;
	line-height: 1.2;
	margin-right: .3em;
	margin-top: 3%;
	text-align: right;
}

.scene-05 .headline-02 {
	color: var(--black);
	font-size: var(--font-size-100-20);
	line-height: 1.1;
	margin-right: 2em;
	text-align: right;
}

.scene-05 .headline-03 {
	color: var(--brown);
	font-size: var(--font-size-250-40);
	font-weight: 500;
	line-height: 1.1;
	text-align: right;
}

@media (min-width: 800px) {
	.scene-05 .headline-01 {
		margin-left: 1.5em;
		margin-right: auto;
		text-align: left;
	}
	.scene-05 .headline-02 {
		margin-left: 5em;
		margin-right: auto;
		text-align: left;
	}
	.scene-05 .headline-03 {
		margin-left: 1em;
		margin-right: auto;
		text-align: left;
	}
}

.scene-05 .headline-04 {
	color: var(--black);
	font-size: var(--font-size-55-20);
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: clamp(23px, 4%, 102.4px);
	margin-top: clamp(44px, 12%, 307.2px);
}

.scene-05 .wohnung {
	align-items: stretch;
	display: grid;
	margin-bottom: 60px;
}

@media (min-width: 1000px) {
	.scene-05 .wohnung {
		grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	}
}

@media (min-width: 1600px) {
	.scene-05 .wohnung {
		grid-template-columns: minmax(0,1fr) minmax(0,2fr);
	}
}

.scene-05 .wohnung .image-container {
	aspect-ratio: 1600 / 1664;
	position: relative;
}

.scene-05 .wohnung .picture {
	display: block;
	height: 100%;
}

.scene-05 .wohnung .image {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.scene-05 .wohnung .image-container .text-box {
	background-color: white;
	box-sizing: border-box;
	clip-path: polygon(0 0, 100% 0, 90% 80%, 0 100%);
	height: clamp(75px, (100vw - 375px) * (130 - 75) / (2560 - 375) + 75px, 130px);
	font-size: var(--font-size-26);
	font-weight: 500;
	left: 0;
	padding: .7em;
	position: absolute;
	top: 0;
	width: 13em;
}

.scene-05 .text-green {
	background-color: white;
	color: var(--green);
}

.scene-05 .info-container {
	background-color: white;
	display: flex;
	flex-direction: column;
	gap: min(2% + 20px, 60px);
	justify-content: space-between;
	padding: min(2% + 20px, 60px);
	padding-bottom: calc(3 * var(--font-size-22-16));
	position: relative;
}

@media (min-width: 1000px) {
	.scene-05 .info-container {
		padding-top: calc(4 * var(--font-size-22-16));
		padding-bottom: min(2% + 20px, 60px);
	}
}

@media (min-width: 1600px) {
	.scene-05 .info-container {
		display: grid;
		grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	}
}

.scene-05 .info-container .button-details {
	background-color: var(--green-border);
	border: 0;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 1em 100%);
	color: white;
	cursor: pointer;
	font-family: 'Cresta';
	font-size: var(--font-size-22-16);
	padding: .6em 3em .6em 1.8em;
	position: absolute;
	transform: translateY(50%);
	right: 0;
}

@media (min-width: 1000px) {
	.scene-05 .info-container .button-details {
		bottom: auto;
		top: 0;
		transform: none;
	}
}

.scene-05 .info-container .button-details::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M 4 0 L 4 4 L 0 4 L 0 5 L 4 5 L 4 9 L 5 9 L 5 5 L 9 5 L 9 4 L 5 4 L 5 0 Z' fill='%23fff'/%3E%3C/svg%3E");
	content: '';
	display: block;
	height: 1.2em;
	position: absolute;
	right: .8em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.2em;
}

.scene-05 .info-container .description {
	color: var(--brown);
	font-size: var(--font-size-80-22);
	font-weight: 500;
	line-height: 1.2;
}

@media (min-width: 1000px) {
	.scene-05 .info-container .description {
		font-size: min((100vw - 1000px) * (80 - 26) / (2560 - 1000) + 26px, 80px);
	}
}

@media (min-width: 1600px) {
	.scene-05 .info-container .description {
		grid-column: 1/3;
	}
}

.scene-05 .info-container .room-container {
	align-items: flex-end;
	display: flex;
	font-size: var(--font-size-30-16);
	justify-content: center;
}

.scene-05 .info-container .room-container .icon-room-count {
	--size-60-177: clamp(60px, (100vw - 375px) * (177 - 60) / (2560 - 375) + 60px, 177px);
	height: var(--size-60-177);
	margin-inline: 1em;
	width: var(--size-60-177);
}

.scene-05 .info-container .third-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-size: var(--font-size-30-16);
	justify-items: center;
}

.scene-05 .info-container .hightlight-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
}

.scene-05 .info-container .hightlight-container .icon-hightlight {
	--size-70-194: clamp(70px, (100vw - 375px) * (194 - 70) / (2560 - 375) + 70px, 194px);
	height: var(--size-70-194);
	width: var(--size-70-194);
}

.scene-05 .info-container .floor-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
}

.scene-05 .info-container .floor-container .text {
	line-height: 1.2;
	text-align: center;
}

.scene-05 .info-container .floor-container .text .small {
	font-size: .7em;
}

.scene-05 .info-container .floor-container .icon-floor {
	--size-70-194: clamp(70px, (100vw - 375px) * (194 - 70) / (2560 - 375) + 70px, 194px);
	height: var(--size-70-194);
	width: var(--size-70-194);
}

.scene-05 .layer-headline-01 {
	color: var(--green);
	font-size: var(--font-size-26-16);
	font-weight: 500;
	margin-top: min((100vw - 375px) * (50 - 30) / (2560 - 375) + 30px, 50px);
	padding-inline: 10%;
}

.scene-05 .layer-headline-02 {
	color: var(--black);
	font-size: var(--font-size-26-16);
	padding-inline: 10%;
}

.scene-05 .layer-image-grid {
	margin-top: min((100vw - 375px) * (50 - 30) / (2560 - 375) + 30px, 50px);
}

@media (min-width: 1000px) {
	.scene-05 .layer-image-grid {
		aspect-ratio: 2554 / 1000;
		display: grid;
		grid-column-gap: 2%;
		grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
	}
}

.scene-05 .layer-image-small-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-column-gap: 3%;
	padding-block: 6%;
	padding-inline: 10%;
}

@media (min-width: 1000px) {
	.scene-05 .layer-image-small-container {
		grid-column-gap: unset;
		grid-row-gap: 5%;
		grid-template-columns: unset;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
		overflow: hidden;
		padding: 0;
	}
}

@media (min-width: 1000px) {
	.scene-05 .layer-picture-big {
		overflow: hidden;
	}
}

.scene-05 .layer-image-big {
	display: block;
	height: auto;
}

@media (min-width: 1000px) {
	.scene-05 .layer-image-big {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}
}

.scene-05 .layer-picture-small {
	aspect-ratio: 146 / 100;
	border: 1px solid #aaa;
	cursor: pointer;
	font-size: var(--font-size-26-16);
	position: relative;
}

@media (min-width: 1000px) {
	.scene-05 .layer-picture-small {
		aspect-ratio: auto;
	}
}

.scene-05 .layer-image-small {
	/*display: block;
	height: 100%;
	object-fit: cover;
	*/
	box-sizing: border-box;
	display: block;
	height: 100%;
	object-fit: contain;
	padding: 5%;
}

.scene-05 .layer-image-small-figcaption {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 17 4.5'%3E%3Cdefs%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='120%25' height='120%25'%3E%3CfeOffset result='offOut' in='SourceAlpha' dx='0' dy='0'/%3E%3CfeColorMatrix result='matrixOut' in='offOut' type='matrix'%0Avalues='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0' /%3E%3CfeGaussianBlur result='blurOut' in='matrixOut' stdDeviation='.3'/%3E%3CfeBlend in='SourceGraphic' in2='blurOut' mode='normal'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M 2.3 0 L 17 0.2 L 17 4.5 L 0 4.5 Z' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
	bottom: 0;
	position: absolute;
	right: 0;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 100% 120%;
	width: 8em;
	height: 2.5em;
	display: grid;
	align-items: center;
	justify-items: center;
}

.scene-05 .layer-image-small-figcaption-text {
	padding-left: .8em;
	padding-top: .4em;
}

@media (min-width: 1200px) {
	.scene-05 .layer-image-small-figcaption {
		grid-template-columns: auto auto;
		width: 10em;
	}

	.scene-05 .layer-image-small-figcaption::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344.33 351.13'%3E%3Cg style='fill:none;stroke:%23000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;'%3E%3Cellipse transform='matrix(0.7071 -0.7071 0.7071 0.7071 -61.5438 148.5799)' cx='148.58' cy='148.58' rx='141.08' ry='141.08'/%3E%3Cline x1='247.93' y1='254.73' x2='336.83' y2='343.63'/%3E%3Cline x1='148.58' y1='97.18' x2='148.58' y2='199.98'/%3E%3Cline x1='199.98' y1='148.58' x2='97.18' y2='148.58'/%3E%3C/g%3E%3C/svg%3E%0A");
		background-position: center;
		background-repeat: no-repeat;
		content: '';
		height: 1.5em;
		margin-right: .3em;
		margin-top: .5em;
		width: 1.5em;
	}

	.scene-05 .layer-image-small-figcaption-text {
		padding-left: 2em;
	}
}

.scene-05 .layer-image-icon {
	display: block;
	height: min((100vw - 375px) * (250 - 150) / (2560 - 375) + 150px, 250px);
}

.scene-05 .layer-image-icon.small {
	height: min((100vw - 375px) * (125 - 75) / (2560 - 375) + 75px, 125px);
}

.scene-05 .layer-info-grid {
	display: grid;
	font-size: var(--font-size-30-14);
	grid-row-gap: 40px;
	padding-block: 10%;
	padding-inline: 10%;
}

@media (min-width: 1000px) {
	.scene-05 .layer-info-grid {
		grid-column-gap: min(5vw, 256px);
		grid-template-columns: auto 22em;
	}
}

.scene-05 .layer-headline-03 {
	color: var(--brown);
	font-size: var(--font-size-80-22);
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 0.7em;
}

.scene-05 .layer-text-01 {
	color: var(--black);
	font-size: var(--font-size-40-16);
	line-height: 1.375;
}

.scene-05 .layer-info-container {
	display: grid;
	font-size: var(--font-size-30-14);
	grid-row-gap: 3em;
}

@media (min-width: 1000px) {
	.scene-05 .layer-info-container {
		grid-column: 2/3;
		grid-row: 1/4;
	}
}

.scene-05 .layer-info-container .layer-room-container {
	align-items: flex-end;
	display: flex;
	justify-content: center;
}

.scene-05 .layer-info-container .layer-room-container .icon-room-count {
	--size-100-177: clamp(60px, (100vw - 375px) * (177 - 100) / (2560 - 375) + 100px, 177px);
	height: var(--size-100-177);
	margin-inline: 1em;
	width: var(--size-100-177);
}

.scene-05 .layer-info-container .layer-double-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: stretch;
}

.scene-05 .layer-info-container .hightlight-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
}

.scene-05 .layer-info-container .hightlight-container .icon-hightlight {
	--size-70-194: clamp(70px, (100vw - 375px) * (194 - 70) / (2560 - 375) + 70px, 194px);
	height: var(--size-70-194);
	width: 100%;
}

.scene-05 .layer-info-container .hightlight-container .text {
	text-align: center;
}

.scene-05 .layer-info-container .hightlight-container .icon-floor {
	--size-90-194: clamp(70px, (100vw - 375px) * (194 - 90) / (2560 - 375) + 90px, 194px);
	height: var(--size-90-194);
	width: 100%;
}

.scene-05 .sichtholzwand {
	transform: scale(1.15);
}

.scene-05 .layer-button-container .button {
	margin-top: 20px;
}

.scene-05 .layer-picture-big-container {
	background-color: #f5f5f5;
	margin-top: calc(1% + 60px);
	padding-block: 5%;
	padding-inline: 10%;
}

.scene-05 .layer-content-grid {
	
}

.scene-05 .layer-content-grid-legende {
	align-items: flex-start;
	background-color: #f5f5f5;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 10%;
	row-gap: 5vw;
	justify-content: space-evenly;
	padding-block: 5%;
	padding-inline: 10%;
	width: 100%;
}

.scene-05 .layer-figure-legende {
	display: grid;
	grid-row-gap: 10px;
	justify-items: center;
	margin: 0;
}

.scene-05 .layer-figcaption-legende {
	font-size: var(--font-size-26-14);
	max-width: 22ch;
	text-align: center;
}

.scene-05 .layer-headline-04 {
	font-size: var(--font-size-30-16);
	font-weight: 500;
}

.scene-05 .layer-content-grid-text {
	padding: 5% 10%;
}

@media (min-width: 1000px) {
	.scene-05 .layer-content-grid {
		background-color: #f5f5f5;
		display: flex;
		gap: 7.7%;
		padding-block: min(5%, 128px);
		padding-inline: 10%;
	}
	
	.scene-05 .layer-content-grid-legende {
		order: 1;
		padding: 0;
	}

	.scene-05 .layer-headline-04 {
		width: max-content;
	}

	.scene-05 .layer-content-grid-text {
		padding: 0;
	}
}