:root{
	--c-blue: #002554;
	--c-lightblue: #00ADEE;
	--c-grey: #EDEDEE;
}
body.page .obj_head {
	padding-top: 0;
	padding-bottom: 0;
}

.obj_head{
	padding:0; 
	display: grid; 
	grid-template-columns: 50% 50%; 
	background-color: var(--c-blue);
	margin-bottom: 3em; 
	
	min-height: 33vw;
	
	
	& .obj_gallery.owl-carousel{
		display: flex;
		opacity: 0; 
		padding-block: 2em;
		padding-left: 2em;
		box-sizing: border-box;
			
		&.owl-carousel.owl-loaded {
			display: flex;
			opacity: 1; 
		}
		
		& .owl-stage-outer{
			display: flex; 
		}
		& .owl-stage{
			display: flex; 
		}
		
		& .owl-item{
			display: flex; 
			
		}
		
		& .item{
			width: 100%; 
			height: 100%; 
			position: relative; 
			
			& button{
				cursor: pointer; 
				border: none; 
				background: transparent; 
			}
			
			& img{
				position: absolute; 
				inset: 0; 
				width: 100%; 
				height: 100%; 
				object-fit: contain; 
				object-position: top center; 
			}
		}
		
		& .owl-nav{
			position: absolute; 
			right: 1.5em; 
			top: 3.5em;
			display: flex; 
			gap: 1em; 
			
			&.disabled{
				display: none; 
			}
			
			& button.owl-prev,
			& button.owl-next{
				height: 4em;
				width: 4em;
				padding: 1em;
				cursor: pointer;
				background: url(../images/arrow_right.svg) no-repeat;
				background-size: 3em 3em; 
				background-color: white;
				background-position: center center;
				border-radius: 0;
				margin: 0;
				
				&>span{
					display: none; 
				}
			}
			& button.owl-prev{
				transform: scaleX(-1);
			}
		}
		@media(max-width: 959px){
			padding: 20px; 		
			& .owl-nav{
				right: calc(20px + 1.5em);
				top: calc(20px + 1.5em);
			}
			& .item{
				height: 66vw;
				
				& img{
					object-position: center center; 
				}
			}			
			
		}
	}
	

	&>.obj_info {
		background-color: #002554;
		position: relative;
		flex-direction: column;
		justify-content: space-between;
		align-items: start;
		padding: 5em;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		gap: 1em;
		color: white;
		& h1 {
			margin-bottom: 0;
			font-size: 2em;
			color: white;
			@media(max-width: 600px) {
				font-size:1.5em;
			}
		}

		& .buyrent {
			color: white;
			font-family: 'CooperHewitt-Medium',sans-serif;
			letter-spacing: 2px;
			font-size: 12pt;
			line-height: 1.5;
			text-transform: uppercase;
		}

		& .btn {
			color: #00ADEE;
			font-family: 'CooperHewitt-Medium',sans-serif;
			letter-spacing: 2px;
			font-size: 12pt;
			line-height: 1.5;
			text-transform: uppercase;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		@media(max-width:1439px){
			
			padding: 2em;
		}
		@media(max-width:959px){
			
			padding: 10px 20px 20px;
		}

	}
	
	@media(max-width:959px){
		display: flex; 
		flex-direction: column; 
	}
}




.obj_energie{
	margin-block: 3em; 
	padding: 0;
	
	& .main_frame>div{
		display: flex; 
		
		@media(max-width: 767px){
			flex-direction: column; 
			gap: 1em; 
		}
	}
	& .leftside{
		width: 50%; 
		padding-right: 5em; 
		box-sizing: border-box;
		@media(max-width: 767px){
			width: 100%; 
			padding-right: 0;
		}
	}
	& .rightside{
		width: 50%; 
		padding: 2em 0 1em 2em;
		box-sizing: border-box;
		position: relative; 
		color: white; 
		&:has(>div:empty) {
			display: none; 
		}
		
		& h3{
			color: white; 
			font-size: 12pt;
			line-height: 1.5;
			text-transform: uppercase;
			font-family: 'CooperHewitt-Medium', sans-serif;
			letter-spacing: 2px;
			margin-bottom: 0.5em;
		}

		@media(max-width: 767px){
			width: 100%; 
		}
	}
	& .rightside:before{
		content: ""; 
		background-color: var(--c-lightblue);
		height: 100%;
		width: 100vw; 
		position: absolute; 
		left: 0; 
		z-index: -1;
		top:0;
	}

	& .energieskala{
		width: 100%; 
		padding: 1em 1em 1em 0.25em;
		
		& .farbskala{
			width: 100%;
			/*
			background: linear-gradient(90deg,#78af52,#f1e821 40%,#faa514 70%,#e34717 100%);
			height: 5px; 
			*/
		}
	}
	& .klassen{
		display: grid; 
		justify-content: space-between; 
		background: linear-gradient(90deg,#78af52,#f1e821 40%,#faa514 70%,#e34717 100%);
		grid-template-columns: 30fr 20fr 25fr 25fr 30fr 30fr 40fr 50fr 1fr;
		
		
		&>span{
			width: 1em; 
			text-align: center; 
			justify-self: center;
		}
	}


	& .werte{
		display: flex; 
		justify-content: space-between; 
		margin: 0 0 0 0;
		
		&>span{
			width: 2em; 
			text-align: center; 
			@media only screen and (max-width: 1023px) {
				font-size: 0.8em;
			}
		}
	}
	& .marker{
		display: flex;
		align-items: flex-end;
		position: relative; 
		&>i{
			transform: translateX(-50%);
			margin-bottom: 4px; 
		}
		&>span{
			line-height: 1.3;
		}

		&.invert>span{
			position: absolute; 
			right: calc(100% + 1em); 
			position: absolute;
			right: calc(100% + 0.5em);
			white-space: nowrap;
			text-align: right;
		}
	}
		
	&:has(.rightside>div:empty):has(.leftside:empty){
		display: none; 
	}
}



.obj_shortfacts{
	padding: 0; 
	margin-block: 3em; 
	
	
	& h2{
		margin-bottom: 1em; 
	}
	
}

& .factwrapper{
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(100px, min(244px, 66vw)));
	
	& h3{
		font-size: 12pt;
		line-height: 1.5;
		text-transform: uppercase;
		font-family: 'CooperHewitt-Medium', sans-serif;
		letter-spacing: 2px;
		margin-bottom: 0.5em; 
	}
	&>div{
		
	}
}
.obj_deschigh{
	padding-block:  3em; 
	background-color: var(--c-blue); 
	color: white; 
	
	&>div>div{
		display: flex; 
		gap: 2em; 
		
		&>div{
			flex-basis: 50%; 
			flex-grow: 1; 
		}
		
		@media(max-width: 767px){
			flex-direction: column; 
		}
	}
	
	& h2{
		color: white; 
		margin-bottom: 1em; 
	}
	& h3{
		color: white; 
	}
}


& .btn {
	color: #00ADEE;
	font-family: 'CooperHewitt-Medium',sans-serif;
	letter-spacing: 2px;
	font-size: 12pt;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

.obj_kontakt{
	padding-block: 3em; 
	background-color: var(--c-grey);
	
	& h2{
		margin-bottom: 0.5em; 
	}
	
	& .fields{
		display: flex; 
		flex-direction: column; 
		gap: 1em; 
	}
	
	& .input_col2_thin>input:has(+input){

	}
	& .input_col2_thin:has(input+input){
		display: flex;
		gap: 20px;
	}
	& textarea, 
	& input{
		
		max-width: 100%;
	}
	& .checkboxfield {
		display: flex; 
		gap: 0.5em; 
		
		&>input{
			flex-shrink: 0; 
		}
	}
	& label{
		cursor: pointer; 
	}
	
	& .btn-back{
		margin-top: 3em;
		display: inline-block;
	}
	
	.formrow{
		display: grid; 
		gap: 1em; 
		grid-template-columns: 2fr 1fr; 
		
		@media(max-width: 768px){
			display: flex; 
			flex-direction: column-reverse; 
		}
	}
}


input[type=submit]{
	background-color: white; 
}