/* CSS Document */

@charset "UTF-8";

/*Allgemein
**********************************************/
html, body{
	height: 100%;
}
html { 
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
}
body{
	position: relative;
	font-family: 'zurich-regular', Helvetica, sans-serif;
	font-size: 100%;
	line-height: 165%;
	-moz-hyphens: auto;
  	 -o-hyphens: auto;
   	-webkit-hyphens: auto;
   	-ms-hyphens: auto;
   	hyphens: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: black;
}
body.bg-white{
	background-color: white;
}

@font-face {
    font-family: 'zurich-roman';
    src: url('frank-fonts/zurich-roman.eot');
    src: url('frank-fonts/zurich-roman.eot?#iefix') format('embedded-opentype'),
         url('frank-fonts/zurich-roman.woff') format('woff'),
         url('frank-fonts/zurich-roman.ttf') format('truetype'),
         url('frank-fonts/zurich-roman.svg#zurich-roman') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'zurich-bold';
    src: url('frank-fonts/zurich-bold.eot');
    src: url('frank-fonts/zurich-bold.eot?#iefix') format('embedded-opentype'),
         url('frank-fonts/zurich-bold.woff') format('woff'),
         url('frank-fonts/zurich-bold.ttf') format('truetype'),
         url('frank-fonts/zurich-bold.svg#zurich-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ionicons';
    src: url('frank-fonts/ionicons.eot');
    src: url('frank-fonts/ionicons.eot?#iefix') format('embedded-opentype'),
         url('frank-fonts/ionicons.woff') format('woff'),
         url('frank-fonts/ionicons.ttf') format('truetype'),
         url('frank-fonts/ionicons.svg#ionicons') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1.sig{
	width: 0;
	height: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0;
	line-height: 0;
	color:#FFFFFF;
	text-indent: -9999px;
}
h1{
	font-size: 2.4em;
	font-weight: normal;
	color: #000;
	line-height: 1.15em;
	margin: 0 0 0.3em 0;
}
h2{
	font-family: 'zurich-roman', sans-serif;
	font-size: 3rem;
	line-height: 126%;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto 2rem auto;
	transition: 0.4s ease;
}
h3{
	font-family: 'zurich-roman', sans-serif;
	font-size: 1.8rem;
	line-height: 126%;
	font-weight: normal;
	margin: 1rem 0 0.6rem 0;
	transition: 0.4s ease;
}
h4{
	font-family: 'zurich-roman', sans-serif;
	font-size: 1.5rem;
	font-weight: normal;
	margin: 1.2em 0 0.6em 0;
	transition: 0.4s ease;
}
h5{
	font-family: 'zurich-roman', sans-serif;
	font-size: 1.2rem;
	font-weight: normal;
	text-align: center;
	margin: 1.2em 0 0.6em 0;
	transition: 0.4s ease;
}
p{
	padding: 0 0 1rem 0;
	margin: 0;
}
img{
	width: 100%;
	height: auto;
}
.clearfix{
	clear: both;
}
.first{
	padding-top: 0 !important;
}

/*links
**********************************************/
a:link{
	text-decoration: none;
	color: #6f6f6f;
}
a:visited{
	text-decoration: none;
	color: #6f6f6f;
}
a:hover{
	text-decoration: none;
	opacity: 0.6;
	transition: 0.4s ease;
}
a:active{
	text-decoration: none;
	color: #6f6f6f;
}

/* Navigation 
**********************************************/

.use-hover li:hover ul{
	display: block;
}
.impressum{
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: auto;
	color: #fff;
}
.impressum ul{
	list-style: none;
	line-height: 165%;
	padding: 0;
}
.impressum ul li{
	position: relative;
	width: auto;
	white-space: nowrap;
	margin: 0;
	padding-left: 36px;
}
.impressum ul li a{
	display: block;	
	color: #fff;
	line-height: 150%;
	text-align: right;
	right: 0;
}
.impressum ul li.current{color: #ccc;}

/* Start-Bild
**********************************************/
.start-window{
	position: relative;
	clear: both;
}
.leitbild{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(bilder/IMG_6354_bearb_2400.jpg) no-repeat;
	-webkit-background-position: center;
	-moz-background-position: center;
	-o-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;	
	-o-background-size: cover;	
	background-size: cover;	
}
.start-title{
	position: absolute;
	top: 48%;
	left: 0;
	width: 100%;
	height: auto;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 30;
}
.start-title h2{
	font-size: 3.9vw;
	line-height: 126%;
	color: #fff;
	text-align: center;
}
.desktop{
	display: block;
}
.mobil{
	display: none;
}

/* Layout
**********************************************/
#buehne{
	position: relative;
	top:0;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	margin: 0 auto;
	overflow: hidden;
}
body.rechtliches #buehne{
	margin: 0 auto -180px;
}
.startbild{
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	padding-bottom: 54%;
	background: url(bilder/Aussen01_bearb_2400.jpg) no-repeat;
	-webkit-background-position: center;
	-moz-background-position: center;
	-o-background-position: center;
	background-position: center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;	
	-o-background-size: cover;	
	background-size: cover;	
}
h3.mietkosten{
	margin-top: 0;
}
.article{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;	
	padding-top: 1rem;
	clear: both;
}
.article:last-of-type{
	padding-bottom: 3vw;
}
body.rechtliches .article:last-of-type{
	top: 15px;
	margin-bottom: 240px;
}
.bg-black{
	background-color: #000;
	opacity: .8;
}
.bg-white{
	background-color: #fff;
}
.content-wrapper{
	position: relative;
	width: 70%;
	max-width: 1500px;
	height: auto;
	padding-top: 3rem;
	margin: 0 auto;
	transition: 0.4s ease;
}
.content{
	position: relative;
	text-align: center;
	height: auto; 
}
.distance{
	padding-bottom: 3vw;
}
.content-wrapper-col50{
	position: relative;
	padding: 0 24%;
	clear: both;
	transition: 0.4s ease;
}
.bg-black .content,
.bg-black h3,
.bg-black ul{
	color: #fff !important;
}
.bg-black h3{
	padding-top: 2rem;
}
.bg-white .content,
.bg-white ul{
	color: #000;
}
.content-wrapper .col50-left ul,
.content-wrapper .col50-right ul{
	margin-top: 2rem;
}
.content h2{
	position: relative;
	text-align: center;
	transition: 0.4s ease;
}

table{
	border-collapse: collapse;
	margin: 0 0 1rem 0;
}
tr{
	width: auto;
}
td{
	vertical-align: top;
	white-space: nowrap;
	padding: 0 12px 0 0;
}
td.price{
	text-align: right;
}
.button-kontakt{
	position: relative;
	display: table;
	top: 2.4rem;
	width: auto;
	text-align: center;
	color: #fff;
	padding: 9px 30px;
	border: 3px solid #e3000f;
	margin: 1.5rem auto 4.2rem;
	transition: 0.6s ease;
	cursor: pointer;
}
.button-kontakt a{
	color: rgba(255,255,255,1);
	transition: 0.6s ease;
}
.button-kontakt a:hover{
	color: rgba(255,102,102,1);
	transition: 0.6s ease;
}
.button-kontakt:hover{
	color: rgba(255,102,102,1);
	transition: 0.6s ease;
}
.col50-left,
.col50-right{
	position: relative;
	width: calc(50% - 2.4vw);
	float: left;
	transition 0.4s ease;
}
.col50-left{
	border-right: 2.4vw solid transparent;
	border-left: 0;
}
.col50-right{
	border-left: 2.4vw solid transparent;
	border-right: 0;
}
.fuss{
	position: relative;
	bottom: 0;
	width: 100%;
	padding-bottom: 1.5rem;
	transition: 0.4s ease;
}
.fuss .inh{
	position: relative;
	top: 1rem;
	left: 0;
	width: 84%;
	height: auto;
	padding: 0 0 18px;
	margin: 0 auto;
	transition: 0.4s ease;
}
.fuss .inh ul{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: 0.4s ease;
	float: left;
}
.fuss .inh ul li{
	line-height: 150%;
	color: #fff;
}
.fuss .inh ul li a{
	color: #fff;
}
ul.bullets,
ul.chevron{
	list-style: none;
	margin: 0 0 1.5rem 0;
	padding-left: 1.5rem;
}
ul.bullets li,
ul.chevron li{
	position: relative;
	padding-left: 0;
   	text-indent: -1rem;
}
ul.bullets li:before,
ul.chevron li:before{
	position: relative;
	font-family: ionicons;
	top: 0;	
	padding-right: 0.6rem;
	margin-left: -0.4rem;
}
ul.bullets li:before{
	font-size: 1.5rem;
	content:"\002b";
	color: #999;
}
ul.chevron li:before{
	content:"\f125";
	font-size: 1rem;
	color: #999;
}
span.rot{
	color: #e3000f;	
}
.arrow-up-white,
.arrow-up-black{
	position: absolute;
	top: -24px;
	left: 50%;
	width: 0; 
	height: 0; 
	border-left: 48px solid transparent;
	border-right: 48px solid transparent;
	border-bottom: 48px solid;	
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
  }
.arrow-up-white{
	border-bottom-color: white;
}
.arrow-up-black{
	border-bottom-color: black;
}

/* Icons
------------------------------------*/
.ion-phone,
.ion-fax,
.ion-iphone,
.ion-mail,
.ion-earth,
.ion-arrow-back{
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ion-phone,
.ion-fax,
.ion-iphone,
.ion-mail,
.ion-earth,
.ion-arrow-back{
	font-family: ionicons;
	text-align: center;
	color: #fff;
}
.ion-arrow-back{
	text-align: center;
}
.bg-white .ion-phone,
.bg-white .ion-mail{
	color: #666;
}
.ion-phone:before{
	position: relative;
	content: "\f2d2";	
	top: 0.2rem;
	font-size: 1.5rem;
	padding-right: 15px;
}
.ion-fax:before{
	position: relative;
	content: "\f21a";	
	top: 0.1rem;
	font-size: 1.35rem;
	padding-right: 15px;
}
.ion-iphone:before{
	position: relative;
	content: "\f1fa";	
	top: 0.15rem;
	font-size: 1.5rem;
	padding: 0 21px 0 4px;
}
.ion-mail:before{
	position: relative;
	content: "\f132";	
	top: 0.15rem;
	font-size: 1.5rem;
	padding-right: 15px;
}
.ion-earth:before{
	position: relative;
	content: "\f276";	
	top:0.1rem;
	font-size: 1.35rem;
	padding-right: 12px;
}
.ion-arrow-back:before{
	position: relative;
	content: "\f2ca";	
	color:#999;
	top: 0.1rem;
	font-size: 1.8rem;
	transition: 0.4s ease;
}

/* Impressum, datenschutz
**********************************************/

ol{
	position: relative;
	padding-left: 21px;
	margin: 0.3rem 0 1.2rem;	
}
ol li{
	margin-left: 0.45rem;
}


/*Immo Slider
**********************************************/
.immo-galerie{
	position: relative;
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding-bottom: 7.5vw;
	transition: 0.4s ease;
}
.flumen {
	position: relative;
  	display: flex;
  	overflow: hidden;
  	-webkit-overflow-scrolling: touch;
}
.flumen.no-flexbox {
    display: block;
    width: auto;
    white-space: nowrap;
}
.flumen .flumen-slide {
  flex-shrink: 0;
}
.flumen.no-flexbox .flumen-slide {
    display: inline-block;
}
.immo-slider{
	position: relative;
  	display: flex;
	top: 60px;
	width: 100%;
  	overflow: hidden;
  	-webkit-overflow-scrolling: touch;
}
.immo-slider > div{
	position: relative;
 	flex-shrink: 0;
	width: 45vw;
  	max-width: 900px;
	min-width: 120px;
	height: 30vw;
  	max-height: 600px;
  	background: white;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	margin: 0 6px;
	transition: 0.4s ease;
}

/* Venobox
--------------------------------------------------------------*/
.zoom-image{
	position: relative;
	width: 100%;
	height: auto;
	background-color: white;
	z-index: 30;
}
.vbox-close{
	width: 66px !important;
	height: 66px !important;
	font-size: 2.4rem !important;
	background-color: transparent !important;
	color:rgb(102, 102, 102) !important;
	transition: 0.6s ease;
}
.vbox-close:hover{
	color:rgb(180, 180, 180) !important;
	transition: 0.6s ease;
}
.vbox-next span{
	border-top-color: rgb(102, 102, 102);
	border-right-color: rgb(102, 102, 102);
	transition: 0.6s ease;
}
.vbox-next span:hover{
	border-top-color: rgb(204, 204, 204);
	border-right-color: rgb(204, 204, 204);
	transition: 0.6s ease;
}
.vbox-prev span{
	border-top-color: rgb(102, 102, 102);
	border-right-color: rgb(102, 102, 102);
	transition: 0.6s ease;
}
.vbox-prev span:hover{
	border-top-color: rgb(204, 204, 204);
	border-right-color: rgb(204, 204, 204);
	transition: 0.6s ease;
}
.vbox-title{
	background-color: rgba(255, 255, 255, 0.85)!important;
}
img.vbox-figlio{
	width: 100%;
	max-width: 1200px;
	height: auto;
}
.venobox-high img.vbox-figlio{
	width: 100%;
	max-width: 900px !important;
	height: auto;
}
.vbox-container{
	padding: 0;
}
.vbox-child img{
	max-height: 90vh;
	width: auto;
}

/* bg-banner
------------------------------------*/
.bg-banner{
	position: relative;
	width: 100%;
	height: 30vw;
	margin-top: 3rem;
	transition: 0.4s ease;
}

/* Impressum, datenschutz
**********************************************/
.back{
	position: absolute;
	top: 18px;
	left: 10%;
	width: 30px;
	height: 30px;
	z-index: 100;
	transition: o.4s ease;
}
p.dat{
	line-height: 1.65rem;
	transition: 0.4s ease;
}
ol{
	position: relative;
	padding-left: 1rem;
	margin: 0.3rem 0 1.2rem;	
}



@media only screen and (min-width: 2400px) {

body{
		font-size: 125%;
}

/* Layout
**********************************************/


}

@media only screen and (max-width: 2400px) {

body{
		font-size: 125%;
}

/* Layout
**********************************************/


}

@media only screen and (max-width: 2100px) {
	
body{
		font-size: 120%;
}

/* Navigation 
**********************************************/


/* Layout
**********************************************/


}

@media only screen and (max-width: 1800px) {

body{
		font-size: 111%;
}

/* Navigation 
**********************************************/

/* Layout
**********************************************/


/* Kontakt
**********************************************/

}

@media only screen and (max-width: 1650px) {

/* Layout
**********************************************/	


}

@media only screen and (max-width: 1500px) {
	
body{
	font-size: 108%;
}
h2{
	font-size: 2.55rem;
}
h3{
	font-size: 1.65rem;
}

/* Navigation 
**********************************************/


/* Layout
**********************************************/

.bg-banner{
    height: 420px;
}

/* Impressum, Datenschutz
**********************************************/
ol{
	padding-left: 0.75rem;
}


}

@media only screen and (max-width: 1350px) {

h2{
	font-size: 2.1rem;
}	

/* Layout
------------------------------------*/
.content-wrapper {
	width: 84%;
}
.content-wrapper-col50 {
	padding: 0 18%;
}
.back{
	left: 8%;
}

/*Immo Slider
**********************************************/
.immo-galerie {
	padding-bottom: 135px;
}

}

@media only screen and (max-width: 1200px) {

body{
	font-size: 100%;
}
h3{
	font-size: 1.5rem;
}
h4{
	font-size: 1.2rem;
}

/* Layout
**********************************************/
.bg-black h3 {
	padding-top: 1rem;
}
.content-wrapper .col50-left ul, 
.content-wrapper .col50-right ul {
		margin-top: 1.5rem;
}
.bg-banner{
    height: 390px;
}
.fuss{
	padding-bottom: 0.6rem;
}
.fuss .content-wrapper{
	padding-top: 1.5rem;
}
.fuss .inh {
	top: 0;
}

}


@media only screen and (max-width: 960px) {
	

/* Layout
**********************************************/
.content-wrapper {
	padding-top: 1.8rem;
}
.content-wrapper-col50 {
	padding: 0 9% 0 12%;
}
.arrow-up-white, 
.arrow-up-black {
	top: -18px;
	border-left: 36px solid transparent;
	border-right: 36px solid transparent;
	border-bottom: 36px solid;
}
.arrow-up-white{
	border-bottom-color: white;
}
.arrow-up-black{
	border-bottom-color: black;
}

/* Impressum, Datenschutz
**********************************************/
p.dat{
	line-height: 1.5rem;
}

}


@media only screen and (max-width: 840px) {

h2{
	font-size: 1.95rem;
}		

/* Layout
**********************************************/

.bg-banner{
    height: 330px;
}


}

@media only screen and (max-width: 780px) {


/* Layout
**********************************************/
.content-wrapper-col50 {
	padding: 0 3% 0 6%;
}


/* Impressum, Datenschutz
**********************************************/

}

@media only screen and (max-width: 660px) {
	
h3{
	font-size: 1.35rem;
}
h4{
	font-size: 1.2rem;
}
	
/* Navigation 
**********************************************/


/* Layout
**********************************************/
.bg-banner{
    height: 300px;
}
.content-wrapper-col50 {
	width: 84%;
	padding: 0;
	margin: 0 auto;
}
#miete .col50-right{
	left: 12%;
}


/* Impressum / Datenschutz
**********************************************/


}

@media only screen and (max-width: 600px) {
	
/* Layout
**********************************************/
.bg-banner{
    height: 270px;
}

}

@media only screen and (max-width: 540px) {

/* Layout
**********************************************/
.col50-left,
.col50-right{
	width: 100%;
	margin: 0 auto;
	clear: left;
}
.col50-left{
	border-right: 0;
	margin-bottom: 1.2rem;
}
.col50-right{
	border-left: 0;
}
.col50-right ul{
	margin-bottom: 0;
}
.col50-text{
	position: relative;
	left: 9%;
	width: 87%;
}
table{
	margin: 0 auto 1.5rem;
}
#miete .col50-right{
	left: 0;
	text-align: center;
}
	
}

@media only screen and (max-width: 480px) {


/*Layout
**********************************************/
.immo-galerie {
	padding-bottom: 120px;
  }

.bg-banner{
    height: 240px;
}

/* Impressum / Datenschutz
**********************************************/

.ion-arrow-back:before{
	font-size: 1.35rem;
}

}

@media only screen and (max-width: 450px) {
	
/*Layout
**********************************************/
.desktop{
	display: none;
}
.mobil{
	display: block;
}
.start-title h2{
	font-size: 7.5vw;
}

/* Impressum / Datenschutz
**********************************************/
body.rechtliches .article .content-wrapper:nth-of-type(2n){
	padding-top: 1rem;
}


}

@media only screen and (max-width: 420px) {

.fuss .content{
	width: 90%;
	margin: 0 auto;
}
}

@media only screen and (max-width: 390px) {
	
h2{
	font-size: 1.5rem;
}
	
/* Layout
**********************************************/
.content-wrapper,
.content-wrapper-col50 {
	width: 90%;
}
.col50-text{
	position: relative;
	left: 6%;
	width: 93%;
}
.back{
	left: 5%;
}

/* Impressum / Datenschutz
**********************************************/

}

@media only screen and (max-width: 375px) {

/* Layout
**********************************************/
.col50-text{
	position: relative;
	left: 6%;
	width: 90%;
}


/* Impressum / Datenschutz
**********************************************/

}