/*
Theme Name: Sequenz 2025
Author: Rolf Fleischmann
Description: Custom client theme
Version: 0.1.0
Tags: base
*/

@font-face {
	font-family: 'SuisseIntl';
	src: url('assets/font/SuisseIntl-Medium.woff2') format('woff2');
	font-display: swap;
	font-style: normal;
	font-weight: 500;
}


@font-face {
	font-family: 'SuisseIntl';
	src: url('assets/font/SuisseIntl-MediumIt.woff2') format('woff2');
	font-display: swap;
	font-style: italic;
	font-weight: 500;
}

:root {
	--textcol: rgba(34, 36, 40, 1);
	--ty-smallest: 0.65rem;
	--ty-small: 0.8rem;
	--ty-medium: 1.2rem;
	--ty-big: 1.75rem;
	--ease: cubic-bezier(.09,.33,.11,1.01);
}

html, body {
	font-family: 'SuisseIntl',sans-serif;
	font-size: 3.6vw;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}

body {
	color: var(--textcol);
	padding: 5.4rem 5vw 5vw 5vw;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	-ms-hyphenate-limit-chars: 8 4 4;
	hyphenate-limit-chars: 8 4 4;
	text-wrap: balance;
}

main {
	min-height: 72.5vh;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--textcol);
	text-decoration-thickness: 0.8px;
	text-underline-offset: 0.2em;
	transition: text-decoration 0.2s var(--ease);
}

a:hover {
	text-decoration-color: transparent;
}



/* page-header */

.page-header {
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	background-color: white;
	transform: translate(0,-5rem);
	transition: transform 0.3s var(--ease);
	height: 4.4rem;
	z-index: 3;
}

.page-header.reveal {
	transform: translate(0,0);
}


.page-header h1 {
	font-size: var(--ty-big);
	margin: 0;
	padding: 5vw;
}

.page-header a,
.page-header a:hover {
	text-decoration-color: transparent;
}

/*
.bounce-logo {
	display:none;
}
*/


/* sections */

.page-section {
	border-top: 1px solid var(--textcol);
	margin-bottom: 4rem;
}

.section-title {
	padding-top: 0.8em;
	margin-bottom: 0.8em;
	font-size: var(--ty-big);
}

.empty-section-title {
	padding-top: 2rem;
}

.page-section .columns {
	margin-bottom: 4rem;
	text-wrap: wrap;
}

.page-section .section-header {
	display:flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}


.page-section .col-2 ul {
	padding-left: 1em;
}

.page-section .col-2 li::before {
	content: '–';
  display: inline;
  margin-right: 0.36em;
  margin-left: -1em;
}


/* expandables */


.expandable-section.open .expandable-button {
	display:none;
}

.expandable-button {
	padding: 0.6rem 1rem;
}

.expandable-button,
.expandable-button:hover,
.expandable-button:active {
	background-color: transparent;
}

.expandable-button img {
	width: 2.4rem;
}



/* home */

.home .page-section .project-list {
	margin-top: 2rem;
}



/* project entries */

.project-entry {
	margin-bottom: 1.6rem;
}

.project-entry .entry-infos {
	padding: 0.5rem 0.9rem;
}

.project-entry .entry-infos span {
	display:block;
	line-height: 1.1;
}

.project-entry .entry-infos .title {
	margin-bottom: 0.5em;
}

.project-entry a {
	text-decoration-color: transparent;
}

.more-projects-list {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2vw;
	align-items: flex-start;
	justify-content: center;
}

.more-project-entry {
	flex-basis: calc(33.333% - 2vw);
}

.more-project-entry .entry-infos {
	display:none;
}

/* hack needed to avoid black pixel lines right and bottom of the video */
.project-entry .vid-frame,
.more-project-entry .vid-frame {
	overflow:hidden;
}
.project-entry video,
.more-project-entry video {
	width: calc(100% + 2px);
	max-width: calc(100% + 2px);
	height: auto;
	filter: grayscale(0); /* force gpu rendering */
}




.plus-more-button {
	color: var(--textcol);
	font-size: var(--ty-big);
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 2rem auto 0 auto;
	opacity: 0;
	transition: opacity 0.3s ease;
	transition-delay: 0.5s;
	pointer-events:none;
}

.plus-more-button.ready {
	pointer-events:auto;
	opacity: 1;
}

.plus-more-button img {
	width: 1.3em;
}



/* other */

.back-button,
.back-button:hover,
.back-button:active {
	background-color: transparent;
	padding: 1rem;
}

.back-button {
	width: 4.4rem;
	margin: 0 -1rem 0 0;
}

.back-button img {
	width: 100%;
}

.img-frame img {
	width: 100%;
	opacity:0;
	transition: opacity 0.3s ease;
}

.img-frame img.lazyloaded {
	opacity: 1;
}

.vimeo-frame img {
	width: 100%;
}



.datenschutz-section .col-2 h2 {
	font-size: var(--ty-big);
	margin-bottom: 0.5em;
	margin-top: 2em;
}

.datenschutz-section .col-2 h3 {
	font-size: 1.3rem;
	margin-bottom: 0.5em;
	margin-top: 2em;
}



	

/* page-footer */

.page-footer {
	border-top: 1px solid var(--textcol);
	padding-top: 1.2rem;
}

.page-footer .footer-address-cols {
	font-size: var(--ty-big);
}

.page-footer .footer-address-cols .col {
	margin-bottom: 1em;
}

.page-footer .insta-logo {
	display:block;
	width: 2.6rem;
}




/* mobile only */
@media only screen and (max-width: 800px) {
	
	.page-header {
		padding: 5vw;
	}
	
	
	.page-header-title {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: white;
	}
	
	
	.wide-col {
		width: calc(100% + 6vw);
		margin-left: -3vw;
	}
	

	/* expandables */

	.expandable-section {
		position: relative;
		margin-bottom: 0;
	}

	.expandable-wrapper {
		max-height: 0;
		overflow:hidden;
		transition: max-height 0.5s ease;
	}


}


/* tablet + desktop */
@media only screen and (min-width: 800px) {
	:root {
		--ty-big: 1.65rem;
	}
	
	html, body {
		font-size: 1.7vw;
	}
	
	body {
		padding: 5.4rem 1.2rem 1.2rem 1.2rem;
		transition: padding 0.3s ease;
	}
	
	.page-template-page-projekte {
		padding-top: 9.4rem;
	}
	
	body.filter-nav-open {
		padding-top: 23rem;
	}

	body.page-template-page-projekte.filter-nav-open {
		padding-top: 26rem;
	}
	
	.page-header {
		display:flex;
		flex-direction: row;
		align-items: flex-start;
		transform: translate(0,-10rem);
		gap: 1.5rem;
		padding: 0.8rem 1.2rem 1.2rem 1.2rem;
	}
	
	
	body.filter-nav-open .page-header {
		transform: translate(0,-27rem);
	}
	
	body.filter-nav-open .page-header.reveal {
		transform: translate(0,0);
	}
	
	
	.page-template-page-projekte .page-header,
	.filter-nav-open .page-header {
		height: 8.6rem;
	}
	
	.page-header h1 {
		padding: 0;
	}
	
	.page-header-title a {
		display:block;
		padding: 0.2em 0.6em 0.14em 0.6em;
		margin-left: -0.6em;
	}

	/*
	.bounce-logo {
		will-change: transform;
		display:block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 6.5rem;
		opacity: 1;
	}

	body:not(.home) .bounce-logo {
		top: 1.2rem;
		right: 1.1rem;
		left: auto;
	}

	.bounce-logo.clicked {
		transition: opacity 0.5s var(--ease);
		opacity: 0;
		pointer-events:none;
	}
	*/
	
	
	/* sections */
	
	.page-section .section-title {
		padding-top: 0;
		margin-top: -0.1em;
	}
	
	.page-section {
		padding-top: 1.2rem;
		transition: border 0.5s ease;
		transition-delay: 0.3s;
	}
	
	.page-template-page-projekte .page-section {
		border-top: none;
	}
	
	.filter-nav-open .page-section {
		border-color: transparent;
		/*transition-delay: 0.3s;*/
	}
	
	.home .page-section {
		padding-top: 1.4rem;
		/*border-color: transparent;*/
	}
	
	.page-template-page-projekte .section-title {
		opacity: 0;
	}
	
	.page-section .columns {
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 1.2rem;
	}
	
	.page-section .col {
		flex-basis: calc(50% - 0.55rem);
	}

	
	.kunde-section .project-list {
		padding-top: 1rem;
	}
	
	
	/* more projects section */
	
	.more-project-entry {
		position: relative;
	}
	
	.more-projects-section .section-title {
		position: absolute;
	}
	
	.more-project-entry {
		flex-basis: calc(33.333% - 0.35rem);
	}
	
	.more-projects-section .more-projects-list {
		width: 60%;
		gap: 0.5rem;
		margin: 0.2rem -0.7rem 0 auto;
	}
	
	.single .plus-more-button,
	.page-template-page-projektkategorie .plus-more-button {
		display:none;
	}
	
	
	/* masonry grid */
	
	.grid.wide-col {
		width: calc(100% + 1.4rem);
		margin-left: -0.7rem;
	}
	
	.grid-sizer,
	.grid-item {
		width: calc(33.333% - 0.3333rem);
	}
	
	.gutter-sizer {
		width: 0.5rem;
	}
	
	.grid-item {
		margin-bottom: 0.5rem;
		opacity: 0;
		transform: translate(0,3rem);
		transition: opacity 0.5s ease, transform 0.5s ease;
		background-color: white;
		pointer-events:auto;
	}
	
	.grid-item.ready {
		opacity: 1;
		transform: translate(0,0);
		pointer-events: auto;
	}
	
	.home .grid-item.ready,
	.page-template-page-projekte .grid-item.ready {
		opacity: 0;
		transform: translate(0,2rem);
		pointer-events: none;
	}
	
	.home .grid-item.ready.added,
	.page-template-page-projekte .grid-item.ready.added {
		opacity: 1;
		transform: translate(0,0);
		pointer-events: auto;
	}
	
	.grid-item .entry-infos,
	.more-project-entry .entry-infos {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display:flex;
		justify-content: center;
		flex-direction: column;
		text-align: left;
		background-color: rgba(235,235,235,0.9);
		opacity: 0;
		transition: opacity 0.5s var(--ease);
		padding: 1.3rem;
	}
	
	.grid-item:hover .entry-infos,
	.more-project-entry:hover .entry-infos {
		opacity: 1;
	}
	
	
	
		/* expandables */

	body.home .expandable-section,
	body.page-template-page-projekte .expandable-section {
		position: relative;
		margin-bottom: 0;
	}

	body.home .expandable-wrapper,
	body.page-template-page-projekte .expandable-wrapper {
		overflow:hidden;
		transition: max-height 0.5s ease;
	}
	
	
	/* other */
	
	.back-button {
		width: 4.2rem;
	}
	

	.datenschutz-section .col-2 h2:first-child {
		margin-top: 0;
	}

	
	
	/* page-footer */
	
	.page-footer {
		position: relative;
	}
	
	.page-footer .footer-address-cols {
		display:flex;
		flex-direction: row;
		gap: 4rem;
		align-items: flex-start;
	}
	
	.footer-address-cols .insta-logo {
		width: 2rem;
		margin-top: -0.1rem;
		margin-left: -1rem;
	}
	
	
}

/* desktop + */
@media only screen and (min-width: 1400px) {
	
	
	html, body {
		font-size: 1.15vw;
	}
	
	.page-template-page-projekte .page-header {
		height: 9.2rem;
	}
	
	body.filter-nav-open {
		padding-top: 13rem;
	}

	body.page-template-page-projekte.filter-nav-open {
		padding-top: 17rem;
	}
	
	body.filter-nav-open .page-header {
		transform: translate(0,-16rem);
	}
	
	
	.page-section .col-2 {
		/*padding-right: 5rem;*/
	}
	
	
	/* grid */

	.grid.wide-col {
		width: calc(100% + 1.6rem);
		margin-left: -0.8rem;
	}

	.grid-sizer,
	.grid-item {
		width: calc(20% - 0.32rem);
	}
	
	.gutter-sizer {
		width: 0.4rem;
	}
	
	.grid-item {
		margin-bottom: 0.4rem;
	}
	
	.more-projects-section .more-projects-list {
		width: 67.8%;
		margin: 0.2rem -0.8rem 0 auto;
	}
	
}


/* desktop + */
@media only screen and (min-width: 2000px) {
	html, body {
		/*font-size: 0.8vw;*/
	}
}