/*
Theme Name: Fieldsets
Version: 2.6 2024
*/


/* fonts */

@font-face {
	font-family: 'Syne';
	src: url('assets/fonts/Syne-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Syne';
	src: url('assets/fonts/Syne-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Syne';
	src: url('assets/fonts/Syne-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}



/* basics / resets */

html {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 1.7vw;
	
	--blau: #4a7cb5;
	--gruen: #56957c;
	--cyan: #4f94a8;
	--orange: #eea831;
	
	--highlight-color: var(--blau);
	
	--content-offset: 2em;
	--page-margin: 4.5em;
	--footer-height: 3.755em;
	
	--large-clip: polygon(0 0, 100% 0, 100% calc(100% - 9em), calc(100% - 14em) 100%, 0 100%);
	--box-clip: polygon(0 0, 100% 0, 100% calc(100% - 7em), calc(100% - 10.85em) 100%, 0 100%);
	

	--teaser-clip: polygon(0 0, 100% 0, 100% calc(100% - 10em), calc(100% - 15.5em) 100%, 0 100%);
	
	--no-clip: polygon(0 0, 100% 0, 100% calc(100% - 0.001px), calc(100% - 0.001px) 100%, 0 100%);
	
}

@media (min-width: 1600px) {
	html {
		font-size: 27px;
	}
}


@media (max-width: 1299px) {
	html { font-size: 1.8vw; --page-margin: 3.5em; --footer-height: 4.25em; }
}
@media (max-width: 999px) {
	html { font-size: 2.75vw; --page-margin: 2em; }
}
@media (max-width: 511px) {
	html {
		font-size: 3.6vw;
	
		--box-clip: polygon(0 0, 100% 0, 100% calc(100% - 7.6em), calc(100% - 14.5em) 100%, 0 100%);


		--large-clip: polygon(0 0, 100% 0, 100% calc(100% - 7.2em), calc(100% - 11.2em) 100%, 0 100%);
	
	}
}



body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: 'Syne', sans-serif;
	font-size: 1em;
	background-color: white;
	color: #000;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

* {
	-webkit-tap-highlight-color: transparent;
}


.theme-projektentwicklung {
	--highlight-color: var(--gruen);
}
.theme-immobilienmanagement {
	--highlight-color: var(--orange);
}
.theme-objektplanung {
	--highlight-color: var(--cyan);
}

main > .fullwidth:first-child {
	position: relative;
	z-index: 1;
}

main > .fullwidth:first-child .content-text::before {
    display: block;
    margin-bottom: 2em;
        margin-top: -2.75em;
    width: 3.6em;
    height: 3.6em;
    background: white center center no-repeat;
    background-size: 90% auto;
    margin-left: 0.1em;
}

@media (max-width: 719px) {
	main > .fullwidth:first-child .content-text::before {
		font-size: 0.85em;
	}
}


.theme-projektentwicklung main > .fullwidth:first-child .content-text::before {
		content: "";
	background-image: url("assets/images/icon-proj.svg");
}
.theme-immobilienmanagement main > .fullwidth:first-child .content-text::before {
		content: "";
	background-image: url("assets/images/icon-immo.svg");
}
.theme-objektplanung main > .fullwidth:first-child .content-text::before {
		content: "";
	background-image: url("assets/images/icon-obj.svg");
}


::-moz-selection {
	background: #333;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #333;
	color: #fff;
	text-shadow: none;
}

form {
	margin: 0;
	padding: 0;
}

table, td, input, textarea, select {
	font-family: inherit;
	font-size: 1em;
}

img, iframe {
	border: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}
.content-text a:not(.button-link) {
	text-decoration: underline;
}


/* page */

#page {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
	
	min-height: 100vh;
}

main {
	-webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
	
	padding-top: 3em;
	box-sizing: border-box;
	
	    width: 100%;
    overflow: hidden;
}


/* header */

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
	height: 4.25em;
	background-color: white;
	box-sizing: border-box;
	z-index: 1000;
	
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	
	transition: height 0.25s ease;
}

header .wrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: calc(100% - var(--page-margin) - var(--page-margin) );
}


@media (min-width: 1600px) {
	header  .wrap  {
		max-width: 49.5em;
	}
}




#logo {
	display: block;
	width: 15em;
    height: auto;
	transition: width 0.25s ease;
}
#logo img {
	width: 100%;
    height: auto;
}

html.ready body:not(.at-top) header {
	height: 3em;
}
html.ready body:not(.at-top) #logo {
	width: 10em;
}




#lang-select a {
	font-size: 0.83rem !important;
	display: inline !important;
	padding: 0 !important;
	font-weight: 500 !important;
}
#lang-select {
	position: absolute;
	top: 50%;
	right: var(--page-margin);
	transform: translateY(-50%);
}

@media (max-width: 1299px) {
	#lang-select {
		right: 4.75rem;
	}
}



#menu-button {
	position: absolute;
	top: 0;
	right: -0.1em;
	width: 2.75em;
	height: 100%;

	transition: opacity 0.25s ease, width 0.25s ease;
}
#menu-button span {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	top: calc(50% - 0.5em);
	font-size: 0.8em;
	font-weight: bold;
	transition: opacity 0.25s ease;
}

.primary-menu-open #menu-button {
	    width: 1.5em;
}

#menu-button::after {
	content: "";
	position: absolute;
	top: calc(50% - 1em);
	left: calc(50% - 1em);
	width: 2em;
	height: 2em;
	background: url("assets/images/close.svg") center center no-repeat;
	background-size: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
	font-size: 0.45rem;
}

.primary-menu-open #menu-button span {
	opacity: 0;
}
.primary-menu-open #menu-button::after {
	opacity: 1;
}



#home-intro-with-news {
	z-index: 20;
	position: relative;
	padding-right: calc(var(--page-margin) * 2);
	
}
#home-intro-with-news .content-slider .ratio {
	padding-top: 54.25% !important;
}

#home-news {
	background-color: black;
	color: white;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	        z-index: 10;
	width: var(--page-margin);
	clip-path: var(--no-clip);
	transition: width 0.4s ease, clip-path 0.4s ease, max-height 0.4s ease, height 0.4s ease;	
}

#home-news1
{
	display:none!important;
}


.slider-type-hero-slider .swiper-wrapper,
.hero {
	clip-path: var(--large-clip);
}

.hero {
	min-height: 26em;
}

.slider-type-default-slider img {
	clip-path: var(--box-clip);
}

.darken-image img {
	opacity: 0.7;
}
.darken-image {
	background-color: black;
}


.bg-black {
	background-color: black;
	color: white;
}
.bg-highlight {
	background-color: var(--highlight-color);
	color: white;
}


.bg-projektentwicklung {
	background-color: var(--gruen);
	color: white;
}
.bg-immobilienmanagement {
	background-color: var(--orange);
	color: white;
}
.bg-objektplanung {
	background-color: var(--cyan);
	color: white;
}



.bg-gray {
	background-color: #E9E9EA;
}

#news-button {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--page-margin);
}

#news-button::before {
content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5em;
    height: 2em;
    background: url("assets/images/arrow-l.svg") center center no-repeat;
    background-size: 0.8em auto;
	transition: transform 0.25s ease;
}
.news-open #news-button::before {
	transform: scaleX(-1);
}

#news-title {
	position: absolute;
	left: calc(var(--page-margin) / 2);
	top: 50%;
	width: 1px;
	height: 1px;
	transform: rotate(-90deg);
	pointer-events: none;
	transition: margin 0.4s ease;
}
#news-title strong {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.3em;
}

#news {
	position: absolute;
    top: 5em;
    left: 4em;
    width: 38em;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.news-open #news {
	opacity: 1;
}
body:not(.news-open) #news,
body:not(.news-open) #news .hover-text {
	pointer-events: none !important;
}



@media (max-width: 999px) {
	#home-news {
		bottom: auto;
		max-height: 100%;
	}
	
	#news {
		position: static;
        margin: 5em 4em 3em 4em;
        width: calc(100vw - 8em);
	}


	#news-title {
		top: 14em;
		left: var(--page-margin);
	}
	
	
	#home-intro-with-news {
		position: relative;
		padding-right: calc(var(--page-margin) * 2.5);
	}
	#news-button,
	#home-news {
		width: calc(var(--page-margin) * 2);
	}
	
	.news-open #home-news {
		width: 100vw;
		height: var(--page-height);
		max-height: var(--page-height);
		/*clip-path: var(--large-clip);*/
	}
	
	.news-open #home-intro-with-news .slider-type-hero-slider {
		transform: translateX(-100vw);
	}
	
}

#home-intro-with-news .slider-type-hero-slider {
	transition: transform 0.4s ease;		
}

@media (min-width: 1000px) {

	.news-open #home-intro-with-news .slider-type-hero-slider {
		transform: translateX(-38em);
	}
	
	.news-open #home-intro-with-news #home-news {
		width: calc(41em + var(--page-margin));
		/*clip-path: var(--large-clip);*/
	}
	
	.news-open #news-title {
		margin-left: -1em;
	}
}


.news-date {
	display: block;
	padding-bottom: 0.25em;
	font-size: 0.85rem;
	font-weight: normal;
}
.news-teasers .hover-text {
   padding-top: 0 !important;
   pointer-events: all;
}
.news-link {
	padding-top: 0.5em;
	display: block;
}
.news-link-dummy {
	padding: 0.65em 0;
	display: block;
	text-decoration: underline;
	font-weight: normal;
}



#home-animation-section .content-text {
	display: none;
}




.teaser-image {
	position: relative;
}
.teaser-image a {
	z-index: 1;
}
.teaser-image a > span {
	clip-path: var(--no-clip);
	transition: clip-path 0.25s ease;
}
.teaser-image:hover  a > span {
	clip-path: var(--teaser-clip);
}

.teaser-image a,
.teaser-image span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.teaser-image span {
	font-size: 0.75em;
}

.teaser-image::after {
	content: "";
	position: absolute;
	right: 0.5px;
	bottom: 0.5px;
	width: 3.6em;
	height: 3.6em;
	background: black url("assets/images/plus.svg") center center no-repeat;
	background-size: 52% auto;
	z-index: 0;
	pointer-events: none;
	font-size: 0.35em;
}

.hover-text {
    position: absolute;
    right: 1px;
    bottom: 2.5em;
    font-weight: bold;
    width: 9em;
    text-align: right;
    z-index: 0;
    pointer-events: none;
    font-size: 0.75em;
}

.page-teasers .hover-text {
	position: static;
	width: 95%;
	text-align: left;
	font-weight: bold;
	padding-top: 1em;
    padding-bottom: 0.5em;
}

.content-slider .hover-text {
	right: 1.5em;
	bottom: -0.1em;
}


.center-text {
	margin: 0 auto;
    max-width: 30em;
}

.vr-icon strong {
    padding-top: 3.6em;
    min-width: 6em;
    background: url("assets/images/vr.svg") top center no-repeat;
    background-size: 5em auto;
}

.headline-pattern,
.headline-pattern-thin {
	position: relative;
}

.headline-pattern .pattern,
.headline-pattern-thin .pattern {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--page-margin) * -1);
	width: calc(50% + var(--page-margin));
	height: 8em;
	background: url("assets/images/muster-thin.svg") right top no-repeat;
	background-size: 100% auto;
	pointer-events: none;
}

@media (max-width: 511px) {
	.headline-pattern .pattern,
	.headline-pattern-thin .pattern {
			right: -17vw;
	}
	.headline-pattern-thin .pattern {
		background-image: url("assets/images/muster.svg");
	}
}

.headline-pattern .pattern {
	background-image: url("assets/images/muster.svg");
}

.text-pattern-below::after {
	content: "";
    display: block;
    margin-top: 2em;
    margin-left: calc(var(--page-margin)* -1);
    width: calc(50vw - 1em);
    background: url("assets/images/muster.svg") left top no-repeat;
    background-size: 100% auto;
    transform: scaleX(-1);
    aspect-ratio: 3 / 1;
}


@media (min-width: 1000px) {
	.desktop-content-to-columns .column {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.desktop-content-to-columns .column > div {
		width: calc((100% - 1.3em) / 2);
	}
	
	.desktop-content-to-columns .content-text {
		box-sizing: border-box;
        padding-right: 2em;
	}
}
@media (max-width: 999px) {
	.desktop-content-to-columns .column > div + div {
		margin-top: 2em;
	}
}


#timeline {
	--box-clip: polygon(0 0, 100% 0, 100% calc(100% - 9.3em), calc(100% - 15.25em) 100%, 0 100%);
}

.timeline-sep {
    background-color: black;
    display: block;
	margin: 0.8em auto;
    width: 0.75em;
    height: 9em;
}

@media (max-width: 999px) {
	.timeline-sep {
	 	height: 5em;
	}
}




#project-list img {
	transition: transform 0.25s ease-out;
}
#project-list .teaser-image:hover img {
	transform: scale(1.2);
}


/* footer */

footer::before {
	content: "";
	display: block;
	height: var(--footer-height);
	background: url("assets/images/muster.svg") left center repeat-x;
	background-size: auto 100%;
}

.footer-outer-wrap {
		background-color: #000;
	color: white;
}

footer .wrap {
	position: relative;

	padding: 2.75em 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	margin: 0 auto;
	max-width: calc(100% - var(--page-margin) - var(--page-margin) );
}


@media (min-width: 1600px) {
	footer  .wrap  {
		max-width: 49.5em;
	}
}


footer ul,
footer li {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
}

#footer-logo {
	display: block;
	width: 8.5em;
}
#footer-logo img {
	width: 100%;
	height: auto;
}

#footer-menu {
	width: 100%;
    text-align: right;
    padding-top: 1em;
	font-size: 0.8em;
	transform: translateY(1.5em);
}
#footer-menu li + li {
	padding-left: 2em;
}

#footer-logo-wrap {
	width: 25%;
}

footer strong {
	color: var(--blau);
}
footer .content-text a {
	text-decoration: none !important;
}

.footer-social-col img {
	display: inline-block;
	margin-top: 0.1em;
	margin-left: 0.1em;
}
.footer-social-col {
	text-align: right;
}


@media (max-width: 999px) {
	#footer-logo-wrap {
		width: 100%;
	}
	footer .content-text {
		width: 45%;
		padding-top: 3.5em;
		padding-bottom: 2em;
	}
	footer .footer-social-col {
		padding-top: 1em;
		text-align: left;
	}
	#footer-menu {
		padding-top: 0;
	}
}



.timeline-text {
	--timeline-width: 13.5rem;
	max-width: 45em;
    margin: 0 auto;
}


@media (max-width: 719px) {
	.timeline-text {
		--timeline-width: 10rem;
	}
}
@media (max-width: 719px) {
	.timeline-text {
		--timeline-width: 8rem;
		margin-left: -1em;
    	margin-right: -1em;
	}
}


.timeline-text .content-text {
    margin-left: var(--timeline-width);
    margin-bottom: 3em;
    position: relative;
    padding: 0.6em 1em 1em 1em;
    box-sizing: border-box;
    background-color: #E9E9EA;
}

.timeline-text .content-text h2 {
    position: absolute;
    left: calc(0.44em - var(--timeline-width));
    top: calc(0.2em + 1px);
    	line-height: 1.25em;
    color: white;
    z-index: 1;
    font-size: calc(var(--timeline-width)* 0.17);
    text-align: center;
    width: 2.7em;
    font-variant-numeric: lining-nums;
}
@media (max-width: 1023px) {
	.timeline-text .content-text h2 {
		top: calc(0.2em + 2px);
	}
}


.timeline-text .content-text::before {
	content: "";
	position: absolute;
	left: calc(var(--timeline-width) * -1);
	top: 0;
	height: calc(100% + 3em);
	width: var(--timeline-width);
	background: url("assets/images/timeline.svg") top left no-repeat;
	background-size: calc(var(--timeline-width) * 0.86) auto;
}



/* breakpoints */

.mobile-only {
	display: none;
}

@media (max-width: 999px) {
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: block;
	}
}


@media (max-width: 719px) {
	.teaser-image .ratio {
		padding-top: 75% !important;
	}
	
	.slider-type-default-slider {
		min-height: 16em;
	}
	
}
@media (max-width: 511px) {
	#lightbox-close {
		font-size: 1.15em;
	}
	
	.swiper-button-white {
		background-size: 80% auto !important;
	}
	.swiper-button-next {
		right: -0.25em !important;
	}

	.content-slider .swiper-pagination-bullet + .swiper-pagination-bullet {
		margin-top: 1em !important;
	}

}

@media (min-width: 1600px) {
	.slider-type-hero-slider {
		max-height: 30em;
	}
}


.hover-test {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 1px;
	pointer-events: none;
	z-index: 10;
	transition: height 0.5s ease;
}

a:hover .hover-test {
	height: 12px;
}

.teaser-image,
.teaser-image a {
	-webkit-touch-callout: none;
}


@media (max-aspect-ratio: 5 / 4) {
	#primary-menu nav {
		justify-content: flex-start;
		padding-top: 6.25em;
	}
}


@media (min-width: 1000px) {
	.column:first-child:not(:last-child) > .content-text {
		max-width: 90%;
	}
}



.news-teasers .hover-text a {
	text-decoration: none;
}

@media (min-width: 720px) {
	.single-projekt .news-teasers > .content-image:first-child {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		column-gap: 1.3em;
		margin-bottom: 3.5em;
		margin-top: 1em;
	}
	.single-projekt .news-teasers > .content-image:first-child > .hover-text {
			margin-top: -0.9em;
	}
	.single-projekt .news-teasers > .content-image:first-child > div {
		width: 100%;
	}

	.single-projekt .news-detail-text {
		display: block !important;
		font-weight: normal;
	}
}