:root
{
	--swiper-navigation-size: 2em;
	--swiper-theme-color: black;
}


html, body
{
	padding: 0;
	margin: 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 20px;
	font-weight: 500;
	background: #000;
}

a
{
	text-decoration: none;
	color: inherit;
}

.hidden
{
	display:none;
}


.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

header
{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	height: 50px;
	background: #000;
	color: #FFF;
	z-index: 1000;
}

header .logo
{
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -250px;
	width: 500px;
	height: 100px;
	background: #000 url('../images/logo.png') no-repeat center center;
	background-size: 324px;
}

.infobutton
{
	position: absolute;
	top:.2em;
	right:8vw;
	width:8vw;
}

.infobutton.mobile
{
	display:none;
}

.infobutton img
{
	display:block;
	width:100%;
}

body .popup h1
{
	font-size:larger;
}

body .popup
{
	padding:0px;
}

.popup .inner
{
	max-width: 800px;
	width:100%;
}

.popup .inner > *
{
	box-sizing: border-box;
}

.popup .inner .image_text
{
	

	flex-wrap: wrap;
	padding:1em 1.5em;
	overflow: initial;
}

.popup .fancybox-close-small:after
{
	background:black;
	color:white;
}

.popup .image_text .text
{
	width:auto;
	padding:0px;
}

header .spoom
{
	position:absolute;
	top: 1em;
	left: 2em;
	width: 8vw;
}

header .spoom img
{
	width: 100%;
}


header .nav-toggle
{
	position:absolute;
	display: block;
	top: 25px;
	right: 20px;
	margin: 0px 0px 0px 0px;
	font-size:28px;
	padding:0;
	cursor:pointer;
	background:none;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	width:35px;
	height: 40px;
	border: none;
	margin-top: -20px;
}

header .nav-toggle span
{
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #ffffff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

header .nav-toggle span:nth-child(1) { top: 9px; background: #d2aa58; }
header .nav-toggle span:nth-child(2) { top: 18px; }
header .nav-toggle span:nth-child(3) { top: 18px; }
header .nav-toggle span:nth-child(4) { top: 27px; background: #d2aa58;}
header .nav-toggle.open span:nth-child(1) { top: 9px; width: 0%; left: 50%;}
header .nav-toggle.open span:nth-child(2) {  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
header .nav-toggle.open span:nth-child(3) { -webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg); }
header .nav-toggle.open span:nth-child(4) { top: 9px; width: 0%; left: 50%; }

header nav
{
	display: none;
}

header nav.open
{
	position: absolute;
	top: 50px;
	left: 0px;
	right: 0px;
	display: block;
	background: #000;
	padding-top: 50px;
	text-align: center;
}

header nav a
{
	display: inline-block;
	color: #FFF;
	text-align: center;
	line-height: 60px;
	text-decoration: none;
	padding: 0px 20px;
}

header nav a.on
{
	color: #d2aa58;
}


main
{
	background: #f6eedf;
	margin-top: 50px;
}

.headerimage
{
	position: relative;
	padding-top: 48%;
	background-repeat: no-repeat;
	background-size: 100%;
    background-attachment: fixed;
}


.headerimage div
{
	position: absolute;
	left: 5%;
	bottom: 10%;
	padding: 0px 0px 150px 0px;
	color: #FFF;
	font-size: 5em;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	background: url('../images/arrow_down.png') no-repeat bottom left;
	background-size: 180px;
}


/* .image_text */

.image_text
{
    display: flex;
    overflow: auto;
}

.image_text.left
{
    flex-direction: row-reverse;
}


.image_text .image
{
	width: 33.33%;
    flex: 0 1 auto;
	background-size: cover;
	background-position: center center;
}

.image_text .text
{
	width: 66.66%;
    flex: 0 1 auto;
    align-self: center;
    text-align: left;
   	padding: 5vw 12vw;
   	box-sizing: border-box;
}

.image_text.light
{
	background: #f6eedf;
	color: #000;
}

.image_text.light h1
{
	color: #000000;
}

.image_text.medium
{
	background: #d2aa58;
	color: #fff;
}

.image_text.medium h1
{
	color: #FFFFFF;
}

.image_text.dark
{
	background: #000000;
	color: #FFFFFF;
}

.image_text.dark h1
{
	color: #fff;
}

.image_text h1
{
	background: url('../images/symbol.png') no-repeat left 5px;
	background-size: 13px;
	padding-left: 20px;
}

.image_text.medium h1
{
	background-image: url('../images/symbol_b.png');
}


/* Links alt */

.links a
{
	display: block;
	float: left;
	color: #FFF;
	background: #000;
	margin: 20px 20px 0px 0px;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 1em;
}

.links a:hover
{
	background: #666666;
}


/* Links neu */


.links .wrapper
{
	margin:2em 0;
}


.links .items {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}


.links .items a
{
	float: none;
	margin: 0;
}


.links .link::before {
	font-family: FontAwesome;
	content: "\f08e";
}


.links .application::before {
	font-family: FontAwesome;
	content: "\f013";
}

.links .doc::before {
	font-family: FontAwesome;
	content: "\f019";
}




/* .image_title */

.image_title
{
	display: flex;
	overflow: auto;
}

.image_title.left
{
	flex-direction: row-reverse;
}

.image_title .text
{
	flex: 0 1 33.33%;
	text-align: center;
	align-self: center;
}

.image_title .image 
{
	flex: 0 1 66.66%;
}

.image_title .image.video
{
	position: relative;
	padding-top: 37.5%;
}

.image_title .image.video iframe 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image_title .image img
{
	width: 100%;
	display: block;
}

.image_title.light
{
	background: #f6eedf;
	color: #000;
}

.image_title.grey
{
	background: #4d4d4d;
	color: #fff;
}

.image_title.medium
{
	background: #d2aa58;
	color: #fff;
}

.image_title.dark
{
	background: #000000;
	color: #FFFFFF;
}


img.image
{
	width: 100%;
	display: block;
}

/*

.slideshow img
{
	width: 100%;
}

.slideshow div
{
	position: absolute;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	background-color: #000;
	background-size: contain;
	background-position: center center;
	cursor: pointer;
	z-index: 1000;
}

.slideshow .cycle-prev
{
	left: 0px;
	background-image: url('../images/arrow_left.png');
}


.slideshow .cycle-next
{
	right: 0px;
	background-image: url('../images/arrow_right.png');
}

*/

.slideshow .swiper-slide > img
{
	display:block;
	width:100%;
}

.slideshow .swiper-slide > .legend
{
	display: none;
}




/* Angebot */


.offer .houses table,
.facts table
{
	width:100%;
	border-collapse: collapse;
}

.facts tr td:nth-child(2)
{
	text-align: right;
}

.offer .houses table
{
	font-size: .9em;
}

.offer table td,
.offer table th,
.group .facts table td
{
	padding: 5px;
}

.offer .houses table tr[data-fancybox]:hover
{
	cursor:pointer;
}

.text-left
{
	text-align: left;
}

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

.offer .houses table  tr,.group .facts table tr
{
	border-bottom: 1px solid #000;
}

.offer .houses table tr[data-fancybox]:hover,
.offer .houses table tr[data-reference].active
{
	background: #d2aa58;
}

.offer.hasIso .items
{
	display:grid;
	grid-template-columns:1fr .5fr;
	grid-auto-flow:  dense;
}

.offer.hasIso .items .item:last-child > * 
{
	margin:0px auto;
	width: 100%;
	max-width: 822px;
}

.offer.hasIso .items .item:last-child
{
	padding:5vw 2em;
	box-sizing: border-box;
}

.offer.hasIso .items .item:first-child
{
	grid-column-start: 2;
	background: #e9d4ad;
}
.offer.hasIso .iso,
.offer.hasIso .iso [data-iso]
{
	position: -webkit-sticky;
	position: sticky;
	top:0
}

.offer [data-iso] .level 
{
	transition: all .6s ease;
}

.offer [data-iso] .level.open 
{
	transform: translateY(calc(-.5em *  var(--level-active-count)));
}

.offer .offerMobile span
{
	white-space: nowrap;
}

.offer .filters
{
	display:grid;
	grid-template-columns:1fr 1fr ;
	gap:1em;

}
.offer .filter[data-filter-field="rentalpriceincl_m2y"],.offer .filter[data-filter-field="availability_status"]{
	display: none;
}
.offer .houses table tr[data-availability_status = "free"] .availability_status::before {
	font-family: FontAwesome;
	font-weight: 300;
	font-size: .7em;
	content: "\f324";
}

.fancybox__container .group
{
	width: 100%;
	margin:auto;
	max-width: 800px;
}

.offer .filters .checkbox
{
	display:block;
	margin:5px 0;
}

.offer .filters .slider-input
{
	padding:0 8px;
	margin:8px 0;
	height: 10px;
}

.offer .filters .slider-value
{
	font-size:smaller;
}

.offer .filters .slider-value span
{
	white-space: nowrap;
}

.offer .filters .slider-input,
.offer .filters .slider-input .noUi-handle
{
	box-shadow: none;
}

/* Hide markers on slider handles */
.offer .filters .slider-input .noUi-handle::before,
.offer .filters .slider-input .noUi-handle::after
{
	display: none;
}

.offer .filters .slider-input .noUi-connect
{
	background: var(--hover-color);
}

.offer .filters .slider-input .noUi-handle
{
	height: 18px;
	width: 18px;
	top: -5px;
	right: -9px; /* half the width */
	border-radius: 9px;
}

.offer .filters .checkbox
{
	white-space: nowrap;
}

.offer .filtered
{
	display:none;
}


.offer .konfigurator
{
	display: block;
	margin: 0 1em;
}

.grundriss-preview
{
	display: block;
	margin-top: 2em;
}

.grundriss-preview img {
	display: block;
	width: 100%;
	
}




.fancybox__content
{
	max-width:100%;
	width: 800px;
}


.fancybox__slide.has-image .fancybox__content
{
	width: 100%;
}







.gallery a
{
	position: relative;
	display: block;
	width: 33.33%;
	float: left;
	padding-top: 18%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	transition: all .2s ease-in-out;
}

.gallery a:hover
{
	background-size: 105%;
}

.gallery a span
{
	display: block;
	position: absolute;
	left: 3%;
	bottom: 3%;
	background: #000;
	color: #FFF;
	font-size: .5em;
	padding: .5em 1em;
}


.contactform
{
    display: flex;
    overflow: auto;
}


.contactform .image
{
	width: 33.33%;
    flex: 0 1 auto;
	background-size: cover;
	background-position: bottom center;
}

.contactform .formular
{
	width: 33.33%;
    flex: 0 1 auto;
	padding: 4vw 4vw;
	box-sizing: border-box;
	color: #d2aa58;
}

input[name=Email_Address]{display:none !important;}

.contactform .formular form
{
	color: #000;
	margin-top: 1em;
}

.contactform address
{
	width: 33.33%;
    flex: 0 1 auto;
	background: #e9d4ad;
	padding: 4vw 4vw;
	box-sizing: border-box;
	font-style: normal;
	color: #d2aa58;
}


.contactform address strong,
.contactform .formular strong
{
	color: #000;
}


.contactform .field
{
	display: block;	
	width: 100%;
	padding: 5px;
	border: 0px;
	background: #fdfbf8;
	margin: 12px 0px;
	box-sizing: border-box;
	font-size: .9em;
}

.contactform button
{
	background: #d2aa58;
	border: 0px;
	padding: .8em 1.2em;
	font-size: .9em;
}

.contactform button:hover
{
	background: #000;
	color: #FFF;
}

.contactform .error
{
	color: red;
}

.contactform label.error
{
	font-size: 0.8em;
}


#timetable
{
	 display: flex;
}

#timetable .part
{
	width: 50%;
    flex: 0 1 auto;
	color: #FFF;
}

#timetable .head
{
	padding: 1em 2em 1em 6.5em;
	text-transform: uppercase;
}

#timetable .part.train 
{
	background: #007fc7;
}

#timetable .part.bus 
{
	background: #1695d4;
}

#timetable .part.train .head
{
	background: #1d1d1b url('../images/train.png') no-repeat 2em center;
	background-size: 4em;
}

#timetable .part.bus .head
{
	background: #333333 url('../images/bus.png') no-repeat 2em center;
	background-size: 4em;
}

#timetable .inner
{
	padding: 1em 2em;
}

#timetable .line_title
{
	float: left;
	padding: .5em .5em .5em 0em;
	font-size: 2em;
	font-weight: bold;
}

#timetable .gleis
{
	position: relative;
	border: 1px solid #FFF;
	float: left;
	padding: .5em .9em;
	font-size: 2em;
	font-weight: bold;
	border-radius: 6px;
	margin-right: 20px;
}

#timetable .gleis span
{
	display: block;
	position: absolute;
	left: 5px;
	top: 5px;
	font-size: .25em;	
	
}

#timetable .line
{
	background: #FFF;
	color: #000;
	float: left;
	padding: .5em;
	font-size: 2em;
	font-weight: bold;
}

#timetable .abfahrt
{
	float: right;
	position: relative;
	font-size: 2.5em;
	font-weight: bold;
}

#timetable .abfahrt div
{
	display: block;
	position: absolute;
	top: -20px;
	font-size: .25em;
}

#timetable .part.train .abfahrt span
{
	display: inline-block;
	background: #1695d4;
	padding: 5px;
}

#timetable .part.bus .abfahrt span
{
	display: inline-block;
	background: #007fc7;
	padding: 5px;
}


.cd-handle 
{
  	height: 100px;
	width: 100px;
 	margin-left: -45px;
	margin-top: -50px; 
  	background: #d2aa58 url("/images/pfeile.svg") no-repeat center center;
} 
		
.cd-resize-img
{
	border-right: 8px solid #000;
}

.cd-handle.draggable 
{
  background-color: #000;
}

footer nav
{
	background: url('../images/logo.png') no-repeat center center;
	background-size: auto 15%;
}

footer nav a
{
	display: block;
	color: #FFF;
	text-decoration: none;
	width: 33.3%;
	float: left;
	text-align: center;
	line-height: 100px;
	font-size: 1.5em;
	text-transform: uppercase;
	margin: 80px 0px;
}

footer nav a.on
{
	color: #d2aa58;
}

footer .panels
{
	display: flex;
}

footer .panels a
{
	flex: 1 1 200px;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	height: 500px;
	position: relative;
	color: #FFF;
}

footer .panels a:after {
	content: ' ';
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.6);
}

footer .panels a.on:after ,
footer .panels a:hover:after 
{
	content: none;
}
 

footer .panels a p
{
	position: absolute;
	bottom: 10%;
	left: 10%;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

footer .panels a small
{
	display: block;
	font-size: .5em;
	margin-top: 10%;
	transition: all 1s ease 0s;
}


footer address
{
	background: #333333;
	color: #FFF;
	text-align: center;
	font-style: normal;
	font-size: 12px;
	padding: 100px 20px;
	line-height: 30px;
}

footer address img
{
	width: 330px;
	margin: -5px 15px;
}

footer address a
{
	color: #FFF;
	text-decoration: none;
}




/* Desktop */
@media (min-width: 1280px)  {


	header nav a:hover
	{
		background: #666666;
	}
	
	footer nav a:hover span,
	footer nav a.on span
	{
		background: #666666;
		color: #FFF;
		border: 10px solid #666666;
	}

	
}


@media (max-width: 1400px)  
{

	.headerimage div
	{	
		padding: 0px 0px 100px 0px;
		font-size: 3em;
		background-size: 120px;
	}
	

	.image_text .text
	{
		padding:5% 10%;
	}
}


@media (max-width: 1284px) 
{

	html, body
	{
		font-size: 18px;
	}
	.offer .house table
	{
		font-size: .8em;
	}
	header nav.open
	{
		border-bottom: 1px solid #FFF;
	}
	
	header nav a
	{
		display: block;
		line-height: 60px;
		border-top: 1px solid #FFF;
	}

	.contactform .image
	{
		display: none;
	}
	
	.contactform .formular,
	.contactform address
	{
		width: 50%;
	    
	}

	.image_text h1
	{
		background-size: 10px;
		padding-left: 18px;
	}
	

	footer nav
	{
		background: url('../images/logo.png') no-repeat center center;
		background-size: auto 20%;
	}
	
	footer nav a
	{
		margin: 40px 0px;
	}	
	
	footer .panels
	{
		display: none;
	}
	
	footer address
	{
		padding: 20px;
	}
	
	footer address img
	{
		width: 200px;
		display: block;
		margin: 10px auto;
	}

	.image_text .text{
		padding:5% 8%;
	}
	

}


@media (max-width: 1070px) 
{
	

	

	html, body
	{
		font-size: 16px;
	}
	
	header .logo
	{
		margin-left: -125px;
		width: 250px;
		height: 65px;
		background-size: 162px;
	}
	
	header nav.open 
	{
	    position: absolute;
	    top: 50px;
	    left: 0px;
	    right: 0px;
	    display: block;
	    background: #000;
	    padding-top: 20px;
	    text-align: center;
	}	
	
	
	.image_text h1
	{
		background-size: 8px;
		padding-left: 14px;
	}
	
	
	footer nav a
	{
		font-size: 15px;
	}
		
	.infobutton
	{
		width:90px;
		height:90px;
		right:70px;
	}

	
	
	header .spoom
	{
		width: 90px;
	}
		
	
}

@media (max-width: 960px) 
{
	.offer .house table
	{
		font-size: 1em;
	}
	
	.offer .house .optional{
		display: none;
	}
	.offerMobile
	{
		display:block;
		font-size:.8em;
		line-height: 1.2em;
	}

	.offerMobile span { white-space: nowrap; }
}
@media (max-width: 800px) 
{
	
	header .logo
	{
		margin-left: -125px;
		width: 250px;
		height: 65px;
		background-size: 162px;
	}
	
	.headerimage div
	{	
		padding: 0px 0px 60px 0px;
		font-size: 2em;
		background-size: 70px;
	}

	.image_text,
	.image_title,
	.image_text .text,
	.image_text .image,
	.image_title img,
	#timetable,
	#timetable .part
	{
		display: block;
		width: 100%;
	}
	
	.image_text .image
	{
		padding-top: 80%;
	}
	
	
	.image_title .image.video {
    	padding-top: 56.5%;
	}
	

	
	footer nav
	{
		background: none;
		padding: 10px 0px;
	}
	
	footer nav a
	{
		line-height: 35px;
		float: none;
		width: 100%;
		margin: 0px;
	}
		
}


@media (max-width: 600px) 
{
	
	.popup .inner .image_text
	{
		padding:1.8em 1.5em;
	}

	html, body
	{
		font-size: 15px;
	}
	
	header .spoom 
	{
		display: none;
	}
	
	.headerimage div
	{	
		padding: 0px 0px 20px 0px;
		font-size: 1.3em;
		background-size: 20px;
	}
	
	
	.gallery a
	{
		width: 50%;
		padding-top: 25%;
	}
	
	.contactform
	{
		display: block;
	}

	.contactform .formular,
	.contactform address
	{
		width: 100%;
	    
	}
	/*
	.slideshow > div
	{
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
	*/
	.cd-handle 
	{
	  	height: 50px;
		width: 50px;
	 	margin-left: -21px;
		margin-top: -25px; 
	 } 
	
	.cd-handle.draggable 
	{
	  background-color: #000;
	}

	.infobutton:not(.mobile)
	{
		display:none;
	}
	
	.infobutton.mobile
	{
		display:block;
		position: static;
		width:100%;
		height:auto;
		padding:0px;
		display: flex;
		justify-content: center;
	}
	
	.infobutton.mobile img
	{
		width: 100px;
		height:100px;
		right:auto;
		margin:20px 20px;
	}

}
@media (max-width: 540px) 
{
	
	.image_text .text,.offer.hasIso .items .item:last-child{
		padding:5vw;
	}

	.headerimage
	{
		padding-top: 43%;
	}
	.offer.hasIso .items .item:first-child{
		display: none;
	}
	.offer.hasIso .items .item:last-child{
		width: 100%;
	}
	.offer.hasIso .items{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 400px) 
{
	
	html, body
	{
		font-size: 12px;
	}
	
	
	.image_text h1
	{
		background-size: 6px;
		padding-left: 10px;
	}
	
	.gallery a
	{
		width: 100%;
		padding-top: 50%;
	}
}