html {
  scroll-behavior: smooth;
  color-scheme: light;
  height: 100%;
}
body {
}
.page-template-page-light {
	background-color: var(--isWhite);
	color: var(--isBlack);
}
.post-template-default,
.page-template-page-homepage,
.page-template-page-dark,
.post-template-default section {
	background-color: var(--isBlack);
	color: var(--isWhite);
}
.post-template-default section {
	position: relative;
	padding: 3.8em .5em 8.4em .5em;
	z-index: 3;
}
.col-desktop {
	display: none;
}
@media only screen and (min-width: 800px) {
	.post-template-default section {
		padding: 3.8em .5em 7.2em .5em;
	}
	.col-desktop {
		display: block;
	}
}
@media only screen and (min-width: 1600px) {
	.post-template-default section {
		padding: 3.8em .5em 6em .5em;
	}
}
header {
	position: fixed;
	top: 1em;
	z-index: 999;
}
header.header {
	left: 1em;
}
header.work {
	left: calc((100% - 1em)/12*8 + 1em);
}
header.info {
	left: calc((100% - 1em)/12*10 + 1em);
}
.page-template-page-light header,
.isScrolled100.page-template-page-homepage header {
	color: var(--isBlack);
}
.page-template-page-homepage header,
.page-template-page-dark header,
.post-template-default header {
	color: var(--isWhite);
}
footer {
	position: fixed;
	left: 1em;
	z-index: 999;	
}
footer.footer {
	bottom: 3.4em;
}
footer.legal {
	bottom: 2.2em;
}
footer.copyright {
	bottom: 1em;
}
@media only screen and (min-width: 800px) {
	footer.footer {
		bottom: 2.2em;
	}
	footer.legal,
	footer.copyright {
		left: calc((100% - 1em)/12*8 + 1em);
	}
	footer.legal {
		bottom: 2.2em;
	}
}
@media only screen and (min-width: 1600px) {
	footer.footer,
	footer.legal {
		bottom: 1em;
	}
	footer.copyright {
		left: calc((100% - 1em)/12*10 + 1em);
	}
}
.page-template-page-light footer,
.isScrolled.page-template-page-homepage footer {
	color: var(--isBlack);
}
.page-template-page-homepage footer,
.page-template-page-dark footer,
.post-template-default footer {
	color: var(--isWhite);
}
.page-template-page-light .entry-content,
.page-template-page-dark .entry-content {
	position: relative;
	z-index: 1;
	padding: 6em .5em;
}
.row-c {
	display: flex;
	flex-wrap: wrap;
}
.col {
	margin: .5em;
	width: calc(100%/12*12 - 1em);
	flex-grow: 0;
	flex-shrink: 0;
}
.col-c {
	width: 100%;
	height: 100%;
}
.col-c {
	width: 100%;
	height: 100%;
}
.osterei {
	max-width: 100%;
}
.osterei img {
	display: block;
	width: 100%;
	height: auto;
}
@media only screen and (min-width: 800px) {
	.col-4 {
		width: calc(100%/12*4 - 1em);
	}
}
.page-template-page-homepage .entry-header,
.post-template-default .entry-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
}
.page-template-page-homepage .entry-header .abdecker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: rgba(0,0,0,.4);
}
.single-format-standard .entry-header .abdecker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	z-index: 2;
	background-color: rgba(0,0,0,.4);
}
.page-template-page-homepage .entry-header img,
.post-template-default .entry-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-template-page-homepage .entry-content,
.post-template-default .entry-content {
	position: relative;
	z-index: 2;
	padding: 6em 1em;
	height: calc(100vh - 12em);
}
.puzzle {
	position: relative;
	z-index: 3;
	background-color: var(--isWhite);
	overflow: hidden;
	display: flex;
	padding: 3.8em 0 8.4em 0;
}

.puzzle-i {
	display: flex;
	margin: -1px;
	width: calc(100% + 2px);
}
.puzzle-c {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 2em);
	justify-content: center;
	padding: 0 1em;
}
.puzzle .image {
    width: calc(50% - 2px);
	height: auto;
	margin: 1px;
	cursor: pointer;
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
}
.puzzle .image img {
	transition: all 0.4s ease-in-out;
	cursor: pointer;
	width: 100%;
	height: auto;
	display: block;
	margin-top: auto;
}
.puzzle .image:hover img {
	filter: grayscale(100);
}
@media only screen and (min-width: 800px) {
	.puzzle {
		padding: 3.8em 0 7.2em 0;
	}
}
@media only screen and (min-width: 1600px) {
	.puzzle {
		padding: 3.8em 0 6em 0;
	}
}



#fader {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	background-color: #000;
}
#fader img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
#fader img:last-child {
	display: block;
	
}




.galerie {
	position: relative;
	z-index: 3;
	background-color: var(--isBlack);
	display: flex;
	width: 100%;
	overflow: hidden;
}
.galerie-i {
	display: flex;
	margin: -.5px;
	width: calc(100% + 1px);
}
.galerie-c {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.galerie img {
	flex-grow: 0;
	flex-shrink: 0;
	margin: .5px;
	height: auto;
	display: block;
}
.galerie img.is100 {
	width: calc(100% - 1px);
}
.galerie img.is50 {
	width: calc(50% - 1px);
}


@media (orientation: landscape) {
  .header-galerie-hoch {
	  display: none;
  }
}

@media (orientation: portrait) {
  .header-galerie {
	  display: none;
  }
}


.marquee {
	--gap: 0px;
	position: absolute;
	left: 0;
	top: calc(100vh - 15em - var(--emXL));
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}		
@media only screen and (min-width: 800px) {
	.marquee {
		top: calc(100vh - 9em - var(--emXL));
	}
}
/* Pause on hover */
.marquee:hover .marquee__content {
	animation-play-state: paused !important;
}	
.marquee__content {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
}	
@keyframes scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}		
/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
	.marquee__content {
		animation-play-state: paused !important;
	}
}		
/* Enable animation */
.marquee__content {
}		
/* Reverse animation */
.marquee--reverse .marquee__content {
	animation-direction: reverse;
}		
/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
	animation-play-state: paused;
}		
/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
	max-width: fit-content;
}		
/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
	position: absolute;
	top: 0;
	left: 0;
}		
/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
	animation-name: scroll-abs;
}		
@keyframes scroll-abs {
	from {
		transform: translateX(calc(100% + var(--gap)));
	}
	to {
		transform: translateX(0);
	}
}	


					.entry-header-c {
						width: 100%;
						height: 100%;
						position: relative;
					}
					.entry-header img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					.entry-header .header-galerie {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						background-color: #000;
					}
					.entry-header .header-galerie img  {
						opacity: 0;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						animation-name: headerFader;
						animation-iteration-count: infinite;
					}
					.entry-header .header-galerie-hoch img  {
						opacity: 0;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						animation-name: headerFader1;
						animation-iteration-count: infinite;
					}