/* playfair-display-regular - latin */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display:swap;
	src: local(''),
		 url('https://static.immoserver.ch/fonts/google/bebas-neue-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('https://static.immoserver.ch/fonts/google/bebas-neue-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(''),
			 url('https://static.immoserver.ch/fonts/google/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			 url('https://static.immoserver.ch/fonts/google/roboto-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root
{
	--text-color: black;
	--theme-color: black;
	--hover-color: green;	
	--odd-color: lightgrey;
	--padding-left-right:2rem;
	--padding-top-bottom:3rem;
	--swiper-navigation-size: 3em;
	--swiper-theme-color: white;
	--fancybox-content-color:black;
	--logo-height:clamp(8em, 30vw, 30em);
	--is-iso-level-spacing:-200px;
	--is-iso-level-active-count:1;
	--is-iso-flat-active-filter-color: var(--theme-color);
	
}


body
{
	font-family: 'Bebas Neue', serif;
	font-weight: 200;
	font-style: normal;
	font-size: clamp(16px, 5vw, 22px);
	margin:0;
}

.group .images + .title.element
{
	margin-top:var(--padding-top-bottom);
}

strong
{
	font-weight: 500;
}

.person strong
{
	font-weight: bold;
}

h1
{
	margin:0px;
	font-size: 2.5em;
	line-height: .9em
}

h2
{
	text-align: center;
	margin:0px;
	line-height: .9em;
}

header
{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	z-index: 999;
	background:transparent;
	width: 100%;
}

.logo
{
	display: inline-block;
	height:var(--logo-height);
	top:1em;
	left:var(--padding-left-right);

}

section,div[id]
{
	scroll-margin-top:var(--header-height);
}

header .wrapper
{
	width: 100%;
	margin:0px auto;

	box-sizing: border-box;
}

header .wrapper
{
	display: flex;
	align-content: center;
	justify-content: center;
	height: 100%;
	align-items: center;
}

header nav
{
	display: flex;
	gap:.6em;
	justify-content: center;

}

a
{
	font-weight: 600;
	text-decoration: none;
}

header nav a
{
	font-weight: 400;
	text-decoration: none;
	padding:.4em .4em .2em .4em;
	line-height: 1em;
	text-transform: uppercase;

}

footer nav
{
	display: flex;
	justify-content: center;
}

footer nav a
{
	padding:.2em;
	font-weight: 400;    
}

header nav a.active,header nav a:hover,footer nav a:hover
{
	background:black;
	color:white;
}


header .nav-toggle
{
	display: none;
}


.nav-toggle
{
	font-size:28px;
	padding:0;
	cursor:pointer;
	background:none;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	width:40px;
	height: 40px;
	border:0;
	flex:0 0 auto;
	position: relative;
}

.nav-toggle span
{
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: black;
	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;
}

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


.logo img
{
	display: block;
	height: 100%;
}

a
{
	color:inherit;
}

main > .slideshow:first-child
{
	position: relative;
}

main > .group:first-child >.wrapper
{
	margin-top: 0;
}

main .group > .wrapper
{
	max-width:1200px;
	margin:var(--padding-top-bottom) auto;
}

.group .element ,.news .item,
.popup .slideshow.element
{
	margin:1.5em auto 0 auto;
}


.title,.text,.images,.news .item
{
	/* max-width: 800px; */
	margin-left:auto;
	margin-right: auto;
}

.title + .text.element
{
	margin-top:.8em;
}

.title h1 {
	font-weight: 500;
}

.news h2
{
	text-align: left;
	font-size: 1.2em;
	font-weight: 500;
}

.group > .wrapper,header nav
{
	padding:0 var(--padding-left-right);
}

.box
{
	display: flex;
	flex-direction: column;
}

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

.images .legend
{
	display: none;
}

.persons .group > .wrapper
{
	display: grid;
	grid-template-columns: minmax(0px,auto) minmax(0px,auto);
	justify-content: center;
	gap:2em;
	margin:0 auto;
}

.persons .person.element
{
	margin-top:-1.4rem;
}

.persons
{
	margin:var(--padding-top-bottom) auto ;
}

div:not(.info) > .person
{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap:1em;
}

.company a,
.person a
{
	position: relative;
	display: block;
	box-sizing: border-box;
	transition:all .1s linear;
	font-weight: normal;
}

.person .text2
{
	line-height: 1.05em;
}

.person .icon, .quicklink .icon
{
	position: absolute;
	transform: translateX(-50%);
	left:50%;
	bottom:1.1em;
	width:4.5em;
	pointer-events: none;
	z-index: 100;
}

.person .icon path,.quicklink .icon path
{
	fill:rgba(255, 255, 255, 0.767);
}

.company a:hover,
.person a:hover
{
	transform:scale(1.07);
}

.quicklink
{
	display: flex;
	background: var(--bg-color);
	justify-items: start;
	justify-content: center;
	padding:0 0em; 
	width: 100%;
}

.person h2
{
	margin-bottom: -.5rem;
	display: block;
}

.quicklinks > .quicklink:nth-child(even) .text
{
	order:2;
	padding:calc(var(--padding-left-right) + 2.4em);
}

.quicklinks > .quicklink:nth-child(even) .image
{
	order:1;

}

.quicklink .image
{
	position: relative;
}

.quicklink .image a,.quicklink .image img
{
	display: block;
	width: 100%;
}
.quicklink .text
{
	padding:calc(var(--padding-left-right) + 1.7em) calc(var(--padding-left-right) + .55em) calc(var(--padding-left-right) + 2.3em) 0;
	max-width: 1200px;
	box-sizing: border-box;
	margin:0;
	width: 100%;
}

.quicklink h1
{
	text-transform: uppercase;
	margin-top:0px;
	font-size: clamp(3em, 6vw, 6.3em);
	font-weight: 500;
	margin-bottom: .4em;
	letter-spacing: 1.6px;
	text-wrap: balance;
}

.text .typo,
.quicklink .typo {
	font-family: 'Roboto', sans-serif;
	font-size: clamp(.95em, 1.2vw, 1.2em);
	line-height: 1.35;
}

.quicklink .image
{
	min-height: 100%;
	width: 100%;
	max-width: 600px;
}

.quicklink img
{
	display: block;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	object-fit: cover;
	object-position: center;
}

.quicklink a
{
	font-weight: 600;
	text-decoration: none;
}

.slideshow .legend
{
	display: none;
}

.slideshow img
{
	display: block;
	object-fit: cover;
	object-position: center;
	width: 100%;
	max-height: 100vh;
}

img-comparison-slider
{
	max-width: 100%;
	display: block;
	--divider-width: 6px;
	--divider-color: black;
	--default-handle-width:100px;
}

img-comparison-slider img
{
	width:100%;
	object-fit: cover;
	object-position: center;
	min-height: 100%;
}

img-comparison-slider .handle
{    
	background:black;
	border-radius: 50%;
	height: var(--default-handle-width);
}

.person img
{
	border-radius: 50%;
	width:100%;
	max-width: 280px;
}

.box
{
	background: var(--bg-color);
}


input,
select
{
	margin:0;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
button,
select
{
	box-sizing:border-box;
	font:inherit;
	color:inherit;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
select
{
	display:block;
	width:100%;
	border:1px solid var(--theme-color);
	padding:.25em;
	border-radius: 0;
}

.button,
.contact button:not(.nav-toggle)
{
	background:var(--theme-color);
	border:none;
	color:white;
	padding:.5em 1em;
	white-space: nowrap;
	display: inline-block;
	font-weight:normal;
}

.button.primary,
button.primary
{
	font-weight:bold;
}

select
{
	appearance:none;
	background:none;
}

.contact .items {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
	gap: 4em;
}

.contact .form {
	font-family: 'Roboto', sans-serif;
}

.contact .info {
	display: flex;
	flex-direction: column;
	gap: 3em;
}

.contact .company .logo {
	display: block;
	height: fit-content;
}

.contact .company img {
	width: 100%;
	max-width: 15em;
}

.contact .person img {
	max-width: 200px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.contact .company,
.contact .person {
	font-family: 'Roboto', sans-serif;
}

.contact .form-group
{
	margin-bottom:1em;
}

.contact .form-label
{
	display: block;
	padding-bottom: 0.1em;
}

.contact .form-warning
{
	color:red;
	margin-bottom: .5em;
	margin-top:.25em;
	display:block;
	width:100%;
}

.contact .form-invalid
{
	border-color:red;
}

.contact .selectables
{
	display:flex;
	flex-wrap:wrap;
	gap: 0 1em;
}

.contact .selectables > label
{
	display:flex;
	align-items: center;
	gap:.5em;
}

.contact input[name=Email_Address]{display:none;}

.contact .ajax-loading,
.contact .ajax-error,
.contact .mail.success,
.contact .mail.error
{
	
	background: green;
	padding:3em 1em;
	text-align:center;
	color:white;
}

.contact .ajax-error,
.contact .mail.error
{
	background:red;
}

.contact .ajax-form .ajax-loading,
.contact .ajax-form .ajax-result,
.contact .ajax-form .ajax-error,
.contact .ajax-form.ajax-state-loading form,
.contact .ajax-form.ajax-state-success form
{
	display:none;
}

.contact .ajax-form.ajax-state-loading .ajax-loading,
.contact .ajax-form.ajax-state-success .ajax-result,
.contact .ajax-form.ajax-state-error .ajax-error
{
	display:block;
}

.fancybox__content 
{
	font-size: 1.2rem;
	padding: 0 0 1.5em 0;
}

.popup.fancybox__content
{
	width:50em;
	max-width:100%;
}

.popup .group > .wrapper
{
	padding-top:calc(var(--padding-top-bottom) *.4);
	padding-bottom: var(--padding-top-bottom);
}

.popup .title, .popup .text, .popup .images, .popup .news .item, .popup .contact
{
	max-width: none;
}

.popup .slideshow.element
{
	width: 100%;
	padding:0 var(--padding-left-right);
}

@media(max-width:1800px) {
	header {
		top: 2em;
		transform: none;
	}

	.quicklink .text {
		padding-left: 1em;
	}
}

@media (max-width: 1200px) {
	body
	{
		font-size: 20px;
	}
	
	.fancybox__content 
	{
		padding:1em 0;
		font-size: 1rem;
	}

}

@media (max-width: 1334px) 
{
	.quicklinks > .quicklink .text,.quicklinks > .quicklink:nth-child(even) .text
	{
		padding:2rem var(--padding-left-right);
	}
}

@media (max-width: 1140px) {
	body
	{
		font-size: 19px;
	}
	
	.quicklink .image
	{
		width: 60%;
	}	
	
	body.toggled
	{
		overflow: hidden;
	}
	
}

@media(max-width:900px) {
	.contact .items {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	:root
	{
		--padding-left-right:1.5rem;
		--padding-top-bottom:1.5rem;
	}

	.group .element, .news .item,
	.popup .slideshow.element
	{
		margin:1em auto 0 auto;
	}

	.quicklink
	{
		flex-direction: column;
	}

	.quicklink .image
	{
		width: 100%;
		max-width: 100%;
	}

	.quicklinks > .quicklink:nth-child(even) .image, .quicklink .image
	{
		order:1;
	}

	.quicklinks > .quicklink:nth-child(even) .text, .quicklink .text
	{
		order:1;
	}

	.persons .person.element
	{
		margin-top:-.5rem;
	}

	.title + .text.element
	{
		margin-top: .5em;
	}
	
}

@media (max-width: 560px) {
	
	.fancybox__content .text
	{
		word-break: break-all;
	}

	h2
	{
		font-size: 1.5rem;
	}

	.persons .group > .wrapper
	{
		grid-template-columns: 1fr;
		gap:var(--padding-top-bottom);
	}

	.person img
	{
		max-width: 200px;
	}

	:root{
		--swiper-navigation-size:2em;
	}
	.swiper-button-prev, .swiper-rtl .swiper-button-next{
		left:2px;
	}
	.swiper-button-next, .swiper-rtl .swiper-button-prev{
		right:2px;
	}
}