@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("../fonts/CircularXXWeb-Book.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Book";
  src: url("../fonts/CircularXXWeb-Book.woff2") format("woff2");
}



:root {
	--color-main: black;
	--color-secondary: #868686;
	--color-light: #eeeeee;
	
	--fontsize-small:14px;
	--fontsize-base: 18px;
	--fontsize-large:30px;
	
	--abstand: 40px;
	--abstand-double: calc(var(--abstand)*2);
	--abstand-half: calc(var(--abstand) / 2);
	--header-height: 40px;
	--sidebar-width:300px;
	
	--grid: 12;
	--grid-gap: 20px;
	--grid-gap-double: calc(var(--grid-gap) * 2);
	
	
	--border-radius:4px;
	
	--home-image-rows: 2;
}


html{
	scroll-behavior: smooth;
}


body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:white;
	color:var(--color-main);
	
	font-size:var(--fontsize-base);
	line-height:1.2;
	
	font-family: 'CircularXXWeb-Book', sans-serif;
	letter-spacing: normal;

}

body.no-scroll{
	overflow-y:hidden;
}


.t-archiv a::after,
.block-table a::after,
.icon-arrow{
	font-family: "Inter", sans-serif;
	font-family: "Inter", sans-serif !important;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}


h1{
	/*font-size: var(--fontsize-large);*/
	/*opacity:0;*/
}
h2{
	
}

h3{
	
}

a{
	text-decoration: none;
	text-decoration-thickness: from-font;
	transition:all .2s ease;
	color:inherit;
}
main a:hover{
	color:var(--color-secondary);
}

a.btn{
	display:inline-block;
	border-radius: var(--border-radius);
	background-color:var(--color-light);
	padding:5px 10px
}
a.btn:hover,
a.btn.act{
	background-color:var(--color-main);
	color:white;
}
a.btn-small{
	font-size:var(--fontsize-small);
}

.hidden-desktop{
	display:none;
}
.text-large{
	font-size:var(--fontsize-large);
}


/* ---------------------------------
	
	ANIMATION
	
-----------------------------------*/

/*@keyframes fadeIn {
  0% { opacity: 0;top:30px }
  100% { opacity: 1;top:0px; }
}
.fadeIn{
	position:relative;
	animation: fadeIn 0.5s;
	opacity:0;
	animation-fill-mode: forwards;
}*/


/* ---------------------------------
	
	GENERAL LAYOUT STUFF
	
-----------------------------------*/

.container{
	max-width:1920px;
	margin:0 auto;
}
.container-wide{
	max-width:100%;
}


.sidebar{
	position:fixed;
	left:0px;
	top:0;
	bottom:0;
	width:var(--sidebar-width);
	padding:var(--grid-gap);
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.sidebar-top{
	
}
.logo{
	white-space: nowrap;
}
.sidebar-footer{
	color:var(--color-secondary);
	text-transform: uppercase;
}
.sidebar-footer a{
	transition:color .2s ease;
}
.sidebar-footer a.act,
.sidebar-footer a:hover{
	color:var(--color-main);
}
nav{
	/*margin-top:100px;*/
	
}
main{
	padding:var(--grid-gap);
	padding-bottom:var(--abstand-double);
	margin-left:var(--sidebar-width);
	min-height:100vh;
	width:calc(100% - var(--sidebar-width));
	max-width:2000px;
}
.b-home main{
	max-width:100%;
}

.contentblock{
	padding-bottom:var(--abstand);
}
.s-detail article.contentblock-introtext{
	padding-bottom:var(--grid-gap-double);
}


table{
	
}
table tr td:first-child{
	width:15%;
	min-width:100px;
	/*max-width:160px;*/ /* TODO */
	padding-right:20px;
}
table tr td{
	border-bottom:1px solid black;
	padding:5px 0;
}
table tr:first-child td{
	border-top:1px solid black;
}


.s-overview-portrait .grid-item{
	grid-column: span 4;
}
.s-overview-landscape .grid-item{
	grid-column: 1 / -1;
}

.s-overview-landscape figure{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}
.s-overview-landscape figure img{
	grid-column: span 10;
}
.s-overview-landscape figure figcaption{
	grid-column: span 2;
	position:sticky;
	top:var(--grid-gap);
	align-self: start;
}


/* BILDFORMATE */
.s-overview-portrait img{
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.s-overview-landscape img{
	aspect-ratio: 5 / 3;
	object-fit: cover;
}


.s-malerei-detail .grid-item:not(.grid-9){
	grid-column: 1 / -1;
}
.s-malerei-detail figure{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}
.s-malerei-detail figure img{
	grid-column: span 9;
}
.s-malerei-detail figure figcaption{
	grid-column: span 3;
	position:sticky;
	top:var(--grid-gap);
	align-self: start;
}


.s-detail article{
	padding-bottom:var(--grid-gap);
}


/* IFRAME */

.block-type-video figure{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.block-type-video figure iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.s-images img{
	height:100%;
	object-fit: cover;
}



.s-pagenav{
	display:flex;
	justify-content: space-between;
}
.s-pagenav a,
.s-pageanv span{
	flex: 1 1 0;
	  width: 0;
}
.pagenav-left{
	text-align: left;
}
.pagenav-middle{
	text-align: center;
}
.pagenav-right,
.s-pagenav a:last-of-type{
	text-align: right;
}



/* ---------------------------------
	
	GRID SETUP
	
-----------------------------------*/

.grid-container{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
	/*padding:var(--abstand) 0;*/
}
.grid-1{ grid-column: span 1; }
.grid-2{ grid-column: span 2; }
.grid-3{ grid-column: span 3; }
.grid-4{ grid-column: span 4; }
.grid-5{ grid-column: span 5; }
.grid-6{ grid-column: span 6; }
.grid-7{ grid-column: span 7; }
.grid-8{ grid-column: span 8; }
.grid-9{ grid-column: span 9; }
.grid-10{ grid-column: span 10; }
.grid-11{ grid-column: span 11; }
.grid-12{ grid-column: span 12; }
.grid-13{ grid-column: span 13; }
.grid-14{ grid-column: span 14; }
.grid-15{ grid-column: span 15; }
.grid-16{ grid-column: span 16; }
.grid-17{ grid-column: span 16; }
.grid-18{ grid-column: span 16; }
.grid-19{ grid-column: span 16; }
.grid-20{ grid-column: span 16; }
.grid-21{ grid-column: span 16; }
.grid-22{ grid-column: span 16; }
.grid-23{ grid-column: span 16; }
.grid-all{ grid-column: 1/-1; }


/* ---------------------------------
	
	HEADER / NAV
	
-----------------------------------*/

header{
	position:fixed;
	z-index:9;
	top:0;
	left:0;
	width:100%;
	height:var(--header-height);
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:0 var(--grid-gap);
}

nav ul{
	
}
nav ul li{

}

nav:hover ul a,
.b-subpage nav ul a{
	color:var(--color-secondary);
}
nav ul li a:hover{
	color:var(--color-main);
}
nav ul li a{
	display:flex;
	align-items: center;
}

/* NAV AKTIVZUSTAND */
nav ul li a.act{
	color:var(--color-main);
	/*padding-left:15px;*/
}
nav ul li a.act::before{
	/*content:'';
	display:inline-block;
	border:1px solid var(--color-main);
	width:10px;
	height:10px;
	border-radius: 9999px;
	margin-right:5px;*/
}

h1,.logo{
	display:block;
	margin-bottom:120px;
}

.mobile-nav-toggle{
	display: none;
}


.nav-header{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	display:none;
}

.langswitch-mobile{
	display:none;
	font-size:var(--fontsize-base);
	text-transform: uppercase;
	padding-top:5px;
}
.langswitch-mobile a{
	font-size:var(--fontsize-base);
	display:inline;

}


/* ---------------------------------
	
	SITE: HOME
	
-----------------------------------*/

/*.b-home .sidebar ul,
.b-home .sidebar-footer{
	opacity:0;
	animation: fadeIn 0.5s;
	animation-delay:1s;
	animation-fill-mode: forwards;
}*/
.home-grid-item{
	max-height:calc((100vh - 3 * var(--grid-gap)) / var(--home-image-rows) );
	height:calc((100vh - 3 * var(--grid-gap)) / var(--home-image-rows) );
}
.fadeInHome{
	opacity:0;
	transform-origin: center;
}
.hidden{
	display:none;
}


.home-grid-item a,
.home-grid-item figure{
	display:block;
	height:100%;
}
.home-grid-item img{
	height:80%;
	width:80%;
	
	height:100%;
	width:100%;
	object-fit: contain;
}

	
.home-grid-item figure{
	position:relative;
	display:flex;
	align-items: center;
	justify-content: center;
}
.home-grid-item img{
	z-index:2;
	opacity:1;
	transition:opacity .2s ease;
}

.home-grid-item figcaption{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	left:0px;
	width:100%;
	text-align: center;
	z-index:1;
	opacity:0;
	transition:opacity .2s ease;
}

/* VARIABLE SIZE */
.home-grid-item:nth-child(2n+0) figure img{
	transform: scale(.6)
}
.home-grid-item:nth-child(5n+0) figure img{
	transform: scale(.8)
}


/* HOVER */
.home-grid-item a:hover img{
	opacity:0;
}
.home-grid-item a:hover figcaption{
	opacity:1;
}


/* ---------------------------------
	
	SITE: AKTUELL
	
-----------------------------------*/

.s-aktuell .grid-container{
	grid-template-columns: repeat(var(--grid), 1fr);
	grid-auto-rows: auto;
	row-gap:120px;
	padding-bottom: var(--abstand-double);
}

.s-aktuell h2{
	font-size:var(--fontsize-large);
	margin-bottom:var(--abstand-half);
	margin-top:var(--abstand-half);
}

.contentblock .grid-item.item-aktuell:first-child{
	padding-right:0px;	
}
.item-aktuell a{
	display:block;
}
.item-aktuell span{
	display:block;
	margin-top:var(--abstand-half);
	color:var(--color-secondary);
}

.item-aktuell:nth-child(1){
	grid-column-start: 1;
	grid-column-end: span 5;
	
	grid-row-start: 1;
	grid-row-end: span 2;
}
.item-aktuell:nth-child(2){
	grid-column-start: 8;
	grid-column-end: span 4;
	
	grid-row-start: 2;
	grid-row-end: span 2;
}

.item-aktuell:nth-child(3){
	grid-column-start: 3;
	grid-column-end: span 4;
	
	grid-row-start: 3;
	grid-row-end: span 2;
}




/* ---------------------------------
	
	SITE: MALEREI
	
-----------------------------------*/

.b-malerei h1{
	display:none;
}

.s-overview .overview-item{
	/*transition:opacity .2s ease;*/
}
.s-overview:hover .overview-item{
	/*opacity:.5;*/
}
.s-overview .overview-item:hover{
	/*opacity:1;*/
}

.s-malerei-overview figcaption{
	padding-top:5px;
}
.s-malerei-overview .icon-arrow{
	transition: padding .2s ease;
}
.s-malerei-overview .overview-item:hover .icon-arrow{
	padding-left:10px;
}

.malerei-detail-container{
	scroll-margin-top: var(--grid-gap);
}

/* ---------------------------------
	
	SITE: PROJEKTE
	
-----------------------------------*/

.block-type-image,
.block-type-image figure{
	height:100%;
}
.block-type-image figure{
	position:relative;
}
.block-type-image figcaption{
	/*padding-top:5px;
	padding-bottom: 15px;*/
	position:absolute;
	bottom:0px;
	background-color:white;
	padding:3px 0;
	width:100%;
	font-size: var(--fontsize-small);
}

article.s-detail-zusatzinfos{
	padding-top:calc(var(--abstand-double) - var(--grid-gap));
}
.s-images-wrapper{
	padding-top:calc(var(--abstand-double) - var(--grid-gap));
}
.t-zusatzinfos tr td:first-child{
	width:20%;
	padding-right:var(--grid-gap);
}

/* ---------------------------------
	
	SITE: ARCHIV
	
-----------------------------------*/

.t-archiv td{
	padding-bottom:0px;
	padding-top:0px;
}
.t-archiv tr td:first-child,
.t-archiv tr:last-child td{
	border-bottom:0px;
}
.t-archiv:last-child tr:last-child td:last-child{
	border-bottom:1px solid black;
}
.t-malerei td,.t-malerei tr td:first-child{
	border-bottom:1px solid black;
	padding-right:0;
}
.t-malerei tr:first-child td{
	border-top:1px solid black;
}
.t-archiv a,
.block-table a{
	display:block;
	position:relative;
	padding-bottom:5px;
	padding-top:5px;
}
.block-table a{
	padding-bottom:0px;
	padding-top:0px;
}
.block-table td{
	padding-bottom:5px;
	padding-top:5px;
}
.t-archiv a::after,
.block-table a::after{
	content:'->';
	display:block;
	position:absolute;
	right:0px;
	top:0px;
	opacity:0;
	transition:opacity .2s ease;
	padding-bottom:5px;
	padding-top:5px;
}
.block-table a::after{
	padding-top:0px;
}
.t-archiv a:hover::after,
.block-table a:hover::after{
	opacity:1;
}
/*.t-archiv:hover a{
	opacity:.5;
}
.t-archiv:hover a:hover{
	opacity:1;
}*/

.archiv-filter{
	padding-bottom: var(--abstand-half);
}
.archiv-filter a{
	margin-right:5px;
	margin-bottom:5px;
}



/* ---------------------------------
	
	SITE: KONTAKT
	
-----------------------------------*/

.contentblock .grid-item:first-child{
	padding-right:var(--abstand);
}

.grid-9 .block:not(:first-child){
	padding-top:var(--grid-gap);
}
.grid-9 .block-type-text{
	font-size:var(--fontsize-large);
}

.s-kontakt .grid-3 .block-type-text{
	position: sticky;
	top:var(--grid-gap);
}



/* ---------------------------------
	
	FOOTER
	
-----------------------------------*/


footer{
	text-align: right;
	padding:var(--grid-gap);
	margin-left: var(--sidebar-width);
	text-align: center;
}
body.hideFooter footer{
	display:none;
}



/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/


@media screen and (max-width: 1200px) {
	:root{
		--sidebar-width:250px;
	}
	.s-detail-intro .grid-9,
	.malerei-detail-container .grid-9{
		grid-column: 1 / -1;
	}
}


/* MOBILE */

@media screen and (max-width: 950px) {
	
	:root{
		--fontsize-base: 16px;
		--fontsize-large:25px;
		
		--abstand: 25px;
		
		--header-height: 70px;
	}	
	
	.hidden-desktop{
		display:block;
	}
	
	h1,
	.b-malerei h1,
	h1.hidden-desktop{
		display:none;
	}
	h2{
		margin-bottom:0px;
		font-size:var(--fontsize-base);
	}
	
	.sidebar{
		bottom:auto;
		right:0px;
		position:static;
		width:100vw;

		padding:0;
		justify-content: center;
		display:block;
	}
	.sidebar-top{
		padding:var(--grid-gap);
		display:flex;
		align-items: flex-start;
		justify-content: space-between;
		
		/*align-items: center;*/
	}
	.logo{
		margin:0;
		height:30px;
		line-height:30px;
	}
	.nav-header{
		display:flex;
	}
	.nav-header h2{
		text-align: right;
	}
	
	.langswitch-mobile{
		display:block;
	}
	
	
	
	
	
	
	.mobile-nav-toggle{
		display: block;
		text-align: right;
		-webkit-tap-highlight-color: transparent;
		width:20px;
		height:30px;
		position:relative;
		margin-left:10px;
	
	}

	.mobile-nav-toggle::before,
	.mobile-nav-toggle::after{
		content:'';
		display:block;
		height:2px;
		width:20px;
		left:50%;
		background:black;
		position:absolute;
		top:50%;
		transform: translateY(-150%) translateX(-50%);
		transition:all .2s ease;
	}
	.mobile-nav-toggle::after{
		transform: translateY(150%) translateX(-50%);
	}
	
	
	/* NAV OFFEN */
	nav.is-active .mobile-nav-toggle::before{
		transform: translateY(-50%) translateX(-50%) rotate(45deg);
	}
	nav.is-active .mobile-nav-toggle::after{
		transform: translateY(-50%) translateX(-50%) rotate(-45deg);
	}
	nav.is-active{
		padding-bottom:30px;
	}
	nav.is-active .mobile-nav-toggle span:last-child{
		display:inline-block;
	}
	nav.is-active .mobile-nav-toggle span:first-child{
		display:none;
	}
	nav.is-active ul{
		display:block;
		max-height: 500px;
		transition: max-height 0.5s ease-in;
	}
	
	
	
	
	
	
	nav ul a{
		font-size:var(--fontsize-large);
	}
	
	
	nav h2{
		transition:opacity .2s ease;
	}
	nav.is-active h2{
		opacity:0;
	}
	
	.sidebar-footer{
		display:none;
	}
	
	
	nav{
		transition: all 0.15s ease-out;
	}
	nav ul{
		max-height: 0;
		transition: max-height 0.15s ease-out;
		overflow: hidden;
	}
	
	
	main{
		display:block;
		width:100%;
		margin-left:0;
		padding-top:0px;
	}
	
	.home-grid-item figcaption{
		opacity:0;
	}
	
	/* MOBILE HOVER RESET */
	.home-grid-item a:hover img,
	.s-overview:hover .overview-item{
		opacity:1 !important;
	}
	
	
	.s-overview{
		row-gap: var(--grid-gap-double);
	}
	
	
	
	footer{
		padding:var(--grid-gap);
		margin-left: 0;
		text-align: center;
	}
}


@media screen and (max-width: 767px) {
	
	:root{
		--fontsize-base: 15px;
		--fontsize-large:23px;
	}	
	h1{
		/*font-size:var(--fontsize-large);*/
	}
	
	/* VARIABLE SIZE */
	.home-grid-item:nth-child(2n+0) figure img{
		transform: none;
	}
	.home-grid-item:nth-child(5n+0) figure img{
		transform: none;
	}
	.home-grid-item:nth-child(3n+0) figure img{
		transform: scale(.6)
	}
	.home-grid-item:nth-child(2n+0) figure img{
		transform: scale(.8)
	}
	
	
	/* HOME HOVER */
	.home-grid-item a:hover img{
		opacity:1;
	}
	.home-grid-item a:hover figcaption{
		opacity:0;
	}

	
	.s-aktuell .grid-container{
		display:block;
	}
	.item-aktuell{
		padding-bottom:var(--abstand-double);
	}
	.s-aktuell .grid-container{
		padding-bottom:0px;
	}
	
	
	
	.grid-item,
	.s-overview-landscape figure img,
	.s-overview-landscape figure figcaption{
		grid-column: 1/-1 !important;
	}
	.s-overview-landscape figure,
	.s-malerei-detail figure{
		row-gap:5px;
	}
	.s-overview figcaption{
		font-size:var(--fontsize-large);
	}
	
	.s-home-grid .grid-item{
		grid-column:span 6 !important;
	}
	
	
	.b-malerei h1{
		opacity:1;
	}

	.s-images img{
		height:auto;
	}
	.s-images figcaption{
		position:static;
		background-color:none;
		padding-bottom:0px;
	}
	
	.s-kontakt .grid-3 .block-type-text{
		position: static;
	}

	
	


}

@media screen and (max-width: 500px) {
	:root{
		--home-image-rows: 3;
	}	
	
	.grid-item,
	.s-malerei-detail figure img,
	.s-malerei-detail figure figcaption{
		grid-column: 1/-1;
	}
	
	.home-grid-item{
		max-height: calc((100svh - 2 * var(--header-height)) / var(--home-image-rows) );
		height: calc((100svh - 2 * var(--header-height)) / var(--home-image-rows) );
	}
	
	.contentblock .grid-item:first-child{
		padding-right:0px;
	}
	
	.s-detail article{
		/*padding-bottom:var(--grid-gap-double);*/
	}
	article.s-detail-zusatzinfos{
		padding-top: var(--grid-gap);
	}
	.s-images-wrapper{
		padding-top: var(--grid-gap);
	}
	.s-detail article.malerei-detail-container{
		padding-bottom: var(--grid-gap-double);
	}
	
	table tr td:first-child{
		width:15%;
		min-width:80px;
		/*max-width:160px;*/ /* TODO */
		padding-right:20px;
	}
	.hide-mobile{
		display:none;
	}
	
	
}


@media screen and (max-width: 380px) {
	/*.s-pagenav span{
		display:none;
	}*/
	.t-archiv tr td:first-child{
		min-width:50px;
	}
}