@font-face {
  font-family: 'ESSchwarzweiss-Regular';
  src: url('../fonts/ESSchwarzweiss-Regular.eot');
  src: url('../fonts/ESSchwarzweiss-Regular.eot?#iefix') format('embedded-opentype'),
	   url('../fonts/ESSchwarzweiss-Regular.woff2') format('woff2'),
	   url('../fonts/ESSchwarzweiss-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'ESSchwarzweiss-Semibold';
  src: url('../fonts/ESSchwarzweiss-Semibold.eot');
  src: url('../fonts/ESSchwarzweiss-Semibold.eot?#iefix') format('embedded-opentype'),
	   url('../fonts/ESSchwarzweiss-Semibold.woff2') format('woff2'),
	   url('../fonts/ESSchwarzweiss-Semibold.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

:root {
	--schwarz: #141414;
	--weiss: #FFFFFF;
	--rot: #B15B4A;
	--blau: #779FAF;
	--grau: #998C87;

	--fontsize-small: 15px;
	--fontsize-base: 24px;
	--fontsize-large:48px;
	
	--abstand-gross: 60px;
	--abstand: 30px;
	--abstand-klein: 15px;
	
	--padding:12px;
	--block-padding:20px;

	--header-height-home: 160px;
	--header-height: 73px;

	--page-margin: 20px;
	--content-maxwidth:1200px;

	--width-logo-architektur:345px;
	--width-logo-niederberger:366px;
	--leftcol-width: calc(100vw - 3*var(--page-margin) - var(--width-logo-niederberger));

	--border-radius--box:0px;
	--border-radius--btn:0px;
	--border-radius--image:0px;
	--box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.06);

	--grid: 12;
	--grid-gap: 20px;

	interpolate-size: allow-keywords; 
	overscroll-behavior: none;
}

body {
	--color-main: var(--weiss);
	--color-alternate: var(--schwarz);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:var(--color-main);
	color:var(--color-alternate);
	font-family:'ESSchwarzweiss-Regular','Arial',sans-serif;
	
	font-size:var(--fontsize-base);
	line-height:1.16;
	
	/* FOOTER ALWAYS ON BOTTOM */
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction: column;
	justify-content: space-between;

	
}

/* DARK MODE */
body.dark{
	--color-main: var(--schwarz);
	--color-alternate: var(--weiss);
}

.b-home.dark .logo-head .logo-svg{
	fill: var(--color-alternate);
}
.b-home .logo-head{
	mix-blend-mode: difference;
}
body.dark .logo-nav{
	mix-blend-mode: normal;
}
body.dark .logo-nav .logo-svg{
	fill: var(--color-alternate);
}


/* ---------------------------------
	
	ELEMENT FADE IN
	
-----------------------------------*/

.will-animate{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 0.8s ease, filter 0.8s ease;
  filter: blur(10px);
}
.will-animate.inview {
  opacity: 1;
  transform: translateY(0);
   filter: blur(0px);
}

/* ---------------------------------
	
	UTILITY / HELPER CLASSES
	
-----------------------------------*/

body.no-scroll{
	overflow-y:hidden;
}
.mobile-only{
	display:none;
}
.desktop-only{
	display:block;
}
.valign-center{
	align-items: center;
}
.ratio-1-1{
	aspect-ratio: 1/1;
}
.ratio-2-3{
	aspect-ratio: 3/2;
}
.ratio-3-2{
	aspect-ratio: 3/2;
}
.ratio-2-1{
	aspect-ratio: 2/1;
}
.ratio-1-2{
	aspect-ratio: 2/1;
}

img.landscape{
	object-fit: cover;
	aspect-ratio: 3/2;
}
img.portrait{
	object-fit: cover;
	aspect-ratio: 2/3;
}
img.square{
	object-fit: cover;
	aspect-ratio: 1/1;
}


.safe-top{
	display:none;
}


/* ---------------------------------
	
	ICONS
	
-----------------------------------*/

.icon{	
	display:inline-block;
	background-repeat:no-repeat;
	background-size:contain
}
.icon-arrow-down{
	background-image:url('/assets/bilder/icons/arrow_down.svg');
}
.icon-arrow-right{
	background-image:url('/assets/bilder/icons/arrow_right.svg');
}
.icon-phone{
	background-image:url('/assets/bilder/icons/phone.svg');
}
.icon-mail{
	background-image:url('/assets/bilder/icons/mail.svg');
}


.icon-arrow{
	width:95px;
	position:relative;
}
.icon-arrow__inner{
	position:relative;
	display:flex;
	justify-content: flex-end;
	width:70%;
	transition:width .2s ease;
}
.icon-arrow__inner svg{
	height: 24px;
}
.project-list__item:hover .icon-arrow__inner,
.page-navigation__next:hover .icon-arrow__inner{
	width:100%;
}
.icon-arrow__inner::after{
	content:'';
	height:1px;
	/*width:100%;*/
	background-color: var(--color-alternate);
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0px;
	right:1px;
}
.icon-arrow svg{
	display:block;
}
.icon-arrow path{
	stroke: var(--color-alternate);
}


/* ---------------------------------
	
	TYPOGRAPHY
	
-----------------------------------*/

h1{
	font-size:var(--fontsize-large);
	padding-bottom:var(--abstand-block);
	line-height:1;
}
h2{
	font-size:var(--fontsize-large);
}
h3{
	font-size:var(--fontsize-base);
}

h4{
	font-size:var(--fontsize-small);
}
.text-small{
	font-size: var(--fontsize-small);
}
.text-medium{
	font-size: var(--fontsize-base);
}
.text-large{
	font-size: var(--fontsize-large);
}

strong{
	font-weight:bold;
}


/* ---------------------------------
	
	LINKS / BUTTONS
	
-----------------------------------*/

a{
	text-decoration: none;
	text-decoration-thickness: from-font;
	color:inherit;
}
.text a:not(.btn){
	text-decoration: underline;
}

.btn{
	display:inline-block;
	border-radius: var(--border-radius--btn);

	padding:0.5rem 1rem;
	font-size:var(--fontsize-base);
	border:1px solid var(--color-alternate);
}
.btn:hover{
	color:var(--color-main);
	background-color:var(--color-alternate);
}

a.hover-rot,
a.hover-blau,
a.hover-grau{
	transition:color .2s ease;
}
a.hover-rot:hover{
	color:var(--rot) !important;
}
a.hover-blau:hover{
	color:var(--blau) !important;
}

a.hover-grau:hover{
	color:var(--grau) !important;
}



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

.container{
	max-width:1440px;
	margin:0 auto;
}
.container--narrow{
	margin:0 auto;
	width:80%; /* TODO */
}

main{
	padding:0 var(--page-margin);
	margin-top:calc(var(--header-height) + 50px);
	padding-bottom:0;
}
/*main:has(+ footer){
	padding-bottom:0px;
}*/

.text{
	display:flex;
	flex-direction: column;
	gap:var(--block-padding);
}

.smaller-onScroll{
	transition: transform 0.8s ease;
	 transform-origin: top left;
}
.smaller-onScroll.text-small{
	font-size:var(--fontsize-large);
	transform: scale(0.31);
}

/* ---------------------------------
	
	HEADER / LOGO
	
-----------------------------------*/

header{
	position:fixed;
	top:0;
	left:0;
	height:var(--header-height);
	width:100%;
	padding:0 var(--page-margin);
	background-color: var(--color-main);
	display:flex;
	gap:var(--grid-gap);
	flex-direction: row;
	align-items: center;
	z-index:2;
}
.b-home header{
	background-color:transparent;
	pointer-events: none;
}


.header__left{
	width:var(--leftcol-width);
}
.header__right{
	font-size:var(--fontsize-small);
}
.logo{
	max-height:37px;
}
.logo-svg{
	fill: var(--color-main);
}
body.nav-is-active .logo{
	position:fixed;
}


/* ---------------------------------
	
	NAVIGATION
	
-----------------------------------*/

nav{
	position:fixed;
	inset:0;
	opacity:0;
	pointer-events: none;
	padding:var(--page-margin);
	padding-bottom:10px;
	display:flex;
	justify-content: space-between;
	flex-direction: column;
	transition:opacity .2s ease;
	transition-delay:0s;
	background-color: var(--color-main);
	padding-top: calc(var(--header-height-home) - 18px);


	z-index:3;
}
nav.is-active{
	opacity:1;
	pointer-events: all;
	transition-delay:0s;
}
nav .logo{
	display:block;
	mix-blend-mode: difference;
}
nav .logo svg{
	width:100%;
}
nav .logo-architektur{
	width:var(--width-logo-architektur);
	position:fixed;
	top:var(--page-margin);
	left:var(--page-margin);
}
nav .logo-niederberger{
	width:var(--width-logo-niederberger);
	position:fixed;
	top:123px;
	right:var(--page-margin);
}
.nav__person{
	font-size:var(--fontsize-small);
	position:fixed;
	right:var(--page-margin);
	top:0;
	width:var(--width-logo-niederberger);
	height: var(--header-height);
	display: flex;
	flex-direction: row;
	align-items: center;
}


.nav__main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.nav__main a{
	display:block;
	font-size:var(--fontsize-large);
	width:100%;
	border-bottom:1px solid var(--color-alternate);
	text-transform: uppercase;
	padding-top:var(--padding);
	padding-bottom:var(--padding);
	transition:padding .2s ease;
}
.nav__main a:hover{
	padding-left:35px;
}
.nav__main a:first-child{
	border-top:1px solid var(--color-alternate);
}
.nav__main div{
	width:100%;
}
.nav__colorScheme-toggle{
	padding-bottom:var(--block-padding);
}

.nav__bottom{
	padding:var(--padding) 0;
}
.nav__bottom a{
	font-size:var(--fontsize-small);
}
footer.footer-nav{
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
}


.nav-button{
	position:fixed;
	cursor:pointer;
	right:var(--page-margin);
	top:var(--page-margin);

	width: 60px;
	height: 28px;
	outline: none;
	border:0px;
	transition:all .2s ease;
	padding:0;

	background-color:transparent;

	z-index:4;
}


.nav-button span,
.nav-button span::before,
.nav-button span::after{
	content:'';
	display:block;
	position:absolute;
	height:1px;
	width:100%;
	top:50%;
	transform-origin: center;
	background-color: var(--color-alternate);
	transition:transform .2s ease;
}




.nav-button span::before{
	transform:translateY(-13px);
}
.nav-button span::after{
	transform:translateY(13px);
}

/* HOVER */
.nav-button:hover span::before{
	transform:translateY(-17px);
}
.nav-button:hover span::after{
	transform:translateY(17px);
}


/* ACTIVE */

.nav-button.is-active span{
	background-color:var(--color-main);
}
.nav-button.is-active span::after{
	transform:translateY(0px) rotate(45deg);
}
.nav-button.is-active span::before{
	transform:translateY(0px) rotate(-45deg);
}


.colorScheme-toggle{
	display:flex;
	justify-content: flex-start;
	border:1px solid var(--color-alternate);

	width:36px;
	height:18px;
	position:relative;
}
.colorScheme-toggle::after{
	content:'';
	display:block;
	width:12px;
	height:12px;
	left:2px;
	top:2px;
	background-color:var(--color-alternate);
	position:absolute;
	transition:all .2s ease;
}

.colorScheme-toggle.is-active::after{
	
	left:20px;
}


/* ---------------------------------
	
	HOME
	
-----------------------------------*/


.b-home .header__left,
.b-impressum .header__left{
	opacity:0;
}
.b-home main{
	margin-top:0px;
	height:100vh;
	padding:0px;
}

.block-homeGrid{
	gap:var(--grid-gap);
	padding-left:var(--page-margin);
	padding-right:var(--page-margin);
}


.b-home .logo,
.b-impressum .logo{
	position:fixed;
	/*mix-blend-mode: difference;*/
	z-index:2;
	pointer-events: none;
}
.b-impressum .logo{
	pointer-events: all;
}

.b-home .logo-architektur,
.b-impressum .logo-architektur{
	position:fixed;
	width:var(--width-logo-architektur);
	top:var(--page-margin);
	left:var(--page-margin);
}
.b-home .logo-niederberger,
.b-impressum .logo-niederberger{
	position:fixed;
	width:var(--width-logo-niederberger);
	top:123px;
	right:var(--page-margin);
}



.horizontal-scroll {
  display: flex; 
  overflow-x: auto;
  height: 100%;
	scrollbar-width: none; /* Firefox */
}
.horizontal-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge */
}

:root{
	--homeSpalten: 4;
	--homeGaps: calc(var(--homeSpalten) - 1);
}

.column {
  /*flex: 0 0 calc(100% / 4);*/
  flex: 0 0 calc((100% - var(--homeGaps)*var(--grid-gap)) / var(--homeSpalten));
  height: 100%;                
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  gap:var(--grid-gap);
  box-sizing: border-box;

}

.column.valign-top{
	align-items: flex-start;
}
.column.valign-top_safe{
	align-items: flex-start;
	padding-top:var(--header-height);
}
.column.valign-center{
	align-items: center;
}
.column.valign-bottom{
	align-items: flex-end;
}
.column.valign-bottom_safe{
	align-items: flex-end;
	padding-bottom:90px;
}

.home-teaser{
	display:block;
}

.home-teaser figure{
	position:relative;
}
.home-teaser figure img{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	transition: filter .2s ease;
}
.home-teaser:hover figure img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}



.home-teaser figcaption{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	transform: translateY(calc(100% + 10px));
	opacity:0;
	font-size:var(--fontsize-small);
	transition:opacity .2s ease;
	/*display:none;*/
}
.home-teaser figcaption.align_top{
	bottom:auto;
	top:0;
	transform: translateY(calc(-100% - 10px));
}
.home-teaser:hover figcaption{
	opacity:1;
}

/* Optional: Hide scrollbar on Webkit browsers */
.horizontal-scroll::-webkit-scrollbar {
  display: none;
}


/* ---------------------------------
	
	INDEX LIST / JOURNAL LIST
	
-----------------------------------*/

.project-list{
	
}
.project-list__item{
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);
	border-bottom:1px solid var(--color-alternate);
	padding:var(--grid-gap) 0;
}
.project-list__item:first-child{
	border-top:1px solid var(--color-alternate);
}
.item-images{
	width:var(--leftcol-width);
}

.item-text{
	flex:1;
	font-size: var(--fontsize-small);
	position:relative;
}


.page-navigation{
	font-size: var(--fontsize-small);
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	gap:var(--grid-gap);
	border-top:1px solid var(--color-alternate);
	padding-top:var(--block-padding);
	margin-top:var(--abstand-gross);
}
.page-navigation__left{

}
.page-navigation__right{
	width:var(--width-logo-niederberger);
}
a.page-navigation__next{
	position:relative;
	display:block;
}

.project-item__column .icon-arrow,
a.page-navigation__next .icon-arrow{
	position:absolute;
	bottom:0;
	right:0;
}


/* ---------------------------------
	
	INDEX DETAIL / JOURNAL DETAIL
	
-----------------------------------*/


.journal-detail header,
.index-detail header{
	height: auto;
	align-items: flex-start;
	padding-top:9px;
	background-color:transparent;
}

.journal-detail h1,
.index-detail h1{
	position:fixed;
	top:10px;
	left:var(--page-margin);
	mix-blend-mode: difference;
	color:var(--weiss);
	z-index:2;
}
.journal-detail .header__right,
.index-detail .header__right{
	padding-top:10px;
}


.journal-detail main{
	margin-top: calc(var(--header-height) + 164px);
}
.index-detail main{
	margin-top: calc(var(--header-height) + 122px + var(--page-margin));
}




/* ---------------------------------
	
	PORTRAIT
	
-----------------------------------*/

.b-portrait main{
	max-height:calc(100vh - (var(--header-height) + 50px));
	height:calc(100vh - (var(--header-height) + 50px));
	padding-bottom:var(--page-margin);
}
.b-portrait main .block,
.b-portrait main .block__inner{
	height:100%;
}
.b-portrait footer.footer-main{
	display:none;
}

/* ---------------------------------
	
	IMPRESSUM
	
-----------------------------------*/

.b-impressum main{
	margin-top: calc(var(--header-height-home) + 60px);
	font-size:var(--fontsize-small);
}

.b-impressum .logo-head.logo-architektur{
	mix-blend-mode: difference;
}
.b-impressum .logo-head.logo-architektur .logo-svg{
	fill: var(--weiss);
}
.impressum-wrapper{
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);
	align-items: flex-start;
	justify-content: space-between;
}
.impressum-wrapper section:first-child{
	max-width:900px;
}
.b-impressum .block-text strong{
	font-weight:normal;
	color:var(--grau);
}
.text-impressum--zusatz{
	display:flex;
	flex-direction: column;
	gap:var(--block-padding);
	min-width:var(--width-logo-niederberger);
	position:sticky;
	top: calc(var(--header-height-home) + 60px);
}
.b-impressum nav.is-active .logo{
	z-index:3;
	pointer-events: all;
}

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

footer{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;

	padding:var(--page-margin);
	padding-top:var(--abstand-gross);
	padding-bottom:10px;
	font-size:var(--fontsize-small);
	gap:var(--grid-gap);
}

body.b-home footer{
	width:100%;
	mix-blend-mode: difference;
	color:var(--weiss);
	transform: translateZ(0);
}
body.b-home footer.footer-main{
	position:fixed;
	z-index:2;
	bottom:0;
	left:0;
	padding-top:0;
}

body.b-home footer a{
	transition:none !important;
}
body.b-home footer:hover{
	mix-blend-mode: normal;
	color:var(--color-alternate);
}



.footer-kontakt{
	width:var(--width-logo-architektur);
	padding-bottom:7px;
}
.footer-kontakt__row{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer__right{
	font-size: var(--fontsize-large);
}
.footer-logo{
	aspect-ratio: 358 / 77;
	background-image:url(/assets/bilder/logo_architekturniederberger_light.svg);
	background-size:contain;
	background-repeat: no-repeat;
	margin-bottom:15px;
}
body.dark .footer-logo{
	background-image:url(/assets/bilder/logo_architekturniederberger.svg);
}
.footer-nav .footer-logo{
	display:none;
}
.link-telefon{
	letter-spacing:0.01em;
}



/* ---------------------------------
	
	BLOCK: GENERELL
	
-----------------------------------*/

.block{
	margin-bottom:var(--abstand-block);
	/*padding:var(--block-padding) 0;*/
	padding-bottom:var(--block-padding);
}
.block.full-width{
	max-width: 100%;
	margin:0;
	padding-left:0;
	padding-right:0;
}
.block:first-child{
	padding-top: 0px;
}
.block:last-child,
.block:last-of-type{
	padding-bottom: 0px;
}
.block__inner{
	margin: 0 auto;
	/*max-width:var(--content-maxwidth);*/
}
.block.full-width .block__inner{
	max-width:100%;
}
.block:last-of-type{
	
}


/* ---------------------------------
	
	BLOCK: IMAGE ROW
	
-----------------------------------*/

.block-imageRow{
	padding-top:0;

}
.grid-container.grid-12{
	width:100%;
}
.imageRow-container{
	margin:0;
}
.imageRow-container img,
.imageRow-container video{
	width:100%;
}

/* GRIDS */
.grid-container.grid-1{ grid-template-columns: repeat(1, 1fr); }
.grid-container.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-container.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-container.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-container.grid-5{ grid-template-columns: repeat(5, 1fr); }
.grid-container.grid-6{ grid-template-columns: repeat(6, 1fr); }
.grid-container.grid-7{ grid-template-columns: repeat(7, 1fr); }
.grid-container.grid-8{ grid-template-columns: repeat(8, 1fr); }
.grid-container.grid-9{ grid-template-columns: repeat(9, 1fr); }
.grid-container.grid-10{ grid-template-columns: repeat(10, 1fr); }
.grid-container.grid-11{ grid-template-columns: repeat(11, 1fr); }
.grid-container.grid-12{ grid-template-columns: repeat(12, 1fr); }

/* ALIGN RIGHT */
.imageRow-container.grid-1.align-right{ grid-column: 12 / span 1; }
.imageRow-container.grid-2.align-right{ grid-column: 11 / span 2; }
.imageRow-container.grid-3.align-right{ grid-column: 10 / span 3; }
.imageRow-container.grid-4.align-right{ grid-column: 9 / span 4; }
.imageRow-container.grid-5.align-right{ grid-column: 8 / span 5; }
.imageRow-container.grid-6.align-right{ grid-column: 7 / span 6; }
.imageRow-container.grid-7.align-right{ grid-column: 6 / span 7; }
.imageRow-container.grid-8.align-right{ grid-column: 5 / span 8; }
.imageRow-container.grid-9.align-right{ grid-column: 4 / span 9; }
.imageRow-container.grid-10.align-right{ grid-column: 3 / span 10; }
.imageRow-container.grid-11.align-right{ grid-column: 2 / span 11; }
.imageRow-container.grid-12.align-right{ grid-column: 1 / span 12; }

/* ALIGN CENTER */
.imageRow-container.grid-2.align-center{ grid-column: 6 / span 2; }
.imageRow-container.grid-4.align-center{ grid-column: 5 / span 4; }
.imageRow-container.grid-6.align-center{ grid-column: 4 / span 6; }
.imageRow-container.grid-8.align-center{ grid-column: 3 / span 8; }
/*.imageRow-container.grid-9.align-center{ grid-column: 2 / span 9; }*/
.imageRow-container.grid-10.align-center{ grid-column: 2 / span 10; }







.image-landscape_l{
	aspect-ratio: 3 / 2;
	object-fit:cover;
}
.image-landscape_m{
	aspect-ratio: 3 / 2;
	object-fit:cover;
}
.image-landscape_s{
	aspect-ratio: 3 / 2;
	object-fit:cover;
}
.image-portrait_l{
	aspect-ratio: 2 / 3;
	object-fit:cover;
}	
.image-portrait_m{
	aspect-ratio: 2 / 3;
	object-fit:cover;
}
.image-portrait_s{
	aspect-ratio: 2 / 3;
	object-fit:cover;
}

/* ---------------------------------
	
	BLOCK: INDEX TEXT 
	
-----------------------------------*/

.block-indexText{
	padding-bottom:0;
	padding-top:var(--abstand-gross);
}
.block-indexText .block__inner{
	display:flex;
	flex-direction: row;
	gap:var(--block-padding);
	justify-content: space-between;
}
.indexText__maintext{
	display:flex;
	flex-direction: column;
	gap:var(--block-padding);
	width:100%;
	padding-right:10%;
	max-width:1000px;
}
.indexText__infos{
	display:flex;
	flex-direction: column;
	gap:var(--block-padding);
	min-width:var(--width-logo-niederberger);
	max-width:var(--width-logo-niederberger);
}

.indexText__infos strong{
	font-weight:normal;
	color:var(--grau);
}

/* ---------------------------------
	
	BLOCK: AKKORDEON 
	
-----------------------------------*/

.block-accordion .block__inner{
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);
	align-items: flex-end;
	/*max-height:calc(100vh - (var(--header-height) + 50px));*/
}
.accordion__accordion{
	flex:1;
}
.accordion__image{
	flex:1;
	height:100%;
}
.accordion__image img{
	height:100%;
	object-fit:cover;
}


.block-accordion__box{
	background-color:var(--lila);
	border-radius: var(--border-radius--box);
}
.block-accordion__box:last-child{
	border-bottom:1px solid var(--color-alternate);
}

.block-accordion__header{
	padding:var(--padding) 0;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-top:1px solid var(--color-alternate);
	cursor:pointer;
	font-size:var(--fontsize-large);
	text-transform: uppercase;
}
.block-accordion__header i{
	display:block;
	width:32px;
	height:16px;
	transform:rotate(0deg);
	background-image:url(/assets/bilder/icons/arrow_down_accordion_light.svg?v=2);
	background-size:contain;
	background-repeat:no-repeat;
	transition:transform .2s ease;
}
.dark .block-accordion__header i{
	background-image:url(/assets/bilder/icons/arrow_down_accordion.svg);
}

.block-accordion__content{
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease 0.1s;
	overflow:hidden;
}
.block-accordion__content div{
	overflow:hidden;
	transition: all .2s ease;
	padding:0;
	padding-top:0px;
	padding-bottom:0px;
	
}

/* ACTIVE */
.is-active .block-accordion__content{
	opacity: 1;
	grid-template-rows: 1fr;
}
.is-active .block-accordion__content div{
	padding:var(--padding) 0;
}
.is-active .block-accordion__header{
	
}
.is-active .block-accordion__header i{
	transform:rotate(180deg);
}


/* ---------------------------------
	
	BLOCK: IMAGE 
	
-----------------------------------*/

.block-image img{
	border-radius: var(--border-radius--image);
}
/* ---------------------------------
	
	BLOCK: VIDEO
	
-----------------------------------*/

.block-video video{
	width:100%;
	display:block;
}

/* ---------------------------------
	
	BLOCK: TEXT 
	
-----------------------------------*/

.block-text__buttons{
	padding-top:var(--block-padding);
}


/* ---------------------------------
	
	BLOCK: VIDEO 
	
-----------------------------------*/

.block-video iframe{
	width:100%;
	height:auto;
	aspect-ratio: 16/9;
}


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

@media screen and (min-width: 2500px) {
	:root{
		--homeSpalten: 5;
	}
}

@media screen and (max-width: 1100px) {
	:root{
		--homeSpalten: 3;
	}
}
@media screen and (max-width: 1000px) {

	.teaser-image.column-3{
		display:none;
	}
	.teaser-image.grid-4{
		grid-column: span 6;
	}

}

@media screen and (max-width: 800px) {

	:root{
		--grid: 4;
		--page-margin:16px;
	}

	/* UTILITY CLASSES */
	.mobile-only{
		display:block;
	}
	.desktop-only{
		display:none;
	}

	.btn{
		display:block;
		text-align: center;
		font-size:var(--fontsize-small);
	}

	main{
		margin-top:var(--header-height);
	}
	h1{
		font-size: var(--fontsize-base);
	}
	.smaller-onScroll.text-medium{
		font-size: var(--fontsize-small);
	}

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

	.b-home header{
		background-color:var(--color-main);
	}
	
	.header__left{
		display:none;
	}

	.journal-detail .header__left,
	.index-detail .header__left{
		display:block;
		position:fixed;
		top:var(--header-height);
	}


	
	.index-detail header, .journal-detail header,
	.index-detail .nav-button, .journal-detail .nav-button,
	.index-detail .nav-button, .journal-detail .nav-button{
		mix-blend-mode: normal;
	}



	/* ---------------------------------
	
		NAV
		
	-----------------------------------*/
	nav{
		padding-top:var(--header-height);
		justify-content: space-between;
	}
	nav .logo{
		display:none;
	}
	.nav__person{
		position:static;
		height:auto;
		display:block;
		font-size: var(--fontsize-small);
		position:fixed;
		top:19px;
		left:var(--page-margin);
	}
	nav footer.mobile-only{
		padding-left:0;
		padding-right:0;
		display:flex;
		padding-bottom:0px;
	}
	.nav__bottom{
		display:flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.nav-button{
		top:20px;
	}
	.nav__main a:hover{
		padding-left:0;
	}


	/* ---------------------------------
	
		HOME
		
	-----------------------------------*/
	.b-home main{
		height: auto;
		padding-top:var(--header-height);
		padding-bottom: var(--block-padding);
	}
	.horizontal-scroll{
		height: auto;
		flex-direction: column;
		overflow:visible;
	}
	.column{
		flex: 1;
		height: auto;
		gap:var(--grid-gap);
		display:grid;
		grid-template-columns: repeat(var(--grid), 1fr);
		column-gap: var(--grid-gap);
		row-gap: var(--grid-gap);
	}
	.home-teaser figure img{
		filter:none;
	}

	.logo-architekturniederberger{
		position:fixed;
		bottom:var(--page-margin);
		left:var(--page-margin);
		max-height:none;
		width:calc(100vw - 2*var(--page-margin));
	}
	.logo-architekturniederberger img{
		width:100%;
		/*object-fit: contain;*/
	}

	body.b-home footer.footer-main{
		position:static;
	}


	/* LINKS */
	.column.mobileSize-small.mobileAlign-left .home-teaser{ grid-column: span 2; transform:translateX(calc(var(--page-margin) * -1)); }
	.column.mobileSize-medium.mobileAlign-left .home-teaser{ grid-column: span 3; transform:translateX(calc(var(--page-margin) * -1)); }
	.column.mobileSize-large.mobileAlign-left .home-teaser{ grid-column: span 4; transform:translateX(calc(var(--page-margin) * -1)); }

	/* LINKS ABSTAND */
	.column.mobileSize-small.mobileAlign-left_safe .home-teaser{ grid-column: span 2; }
	.column.mobileSize-medium.mobileAlign-left_safe .home-teaser{ grid-column: span 3; }
	.column.mobileSize-large.mobileAlign-left_safe .home-teaser{ grid-column: span 4; }

	/* RECHTS */
	.column.mobileSize-small.mobileAlign-right .home-teaser{ grid-column: 3 / span 2; transform:translateX(var(--page-margin)); }
	.column.mobileSize-medium.mobileAlign-right .home-teaser{ grid-column: 2 / span 3; transform:translateX(var(--page-margin)); }
	.column.mobileSize-large.mobileAlign-right .home-teaser{ grid-column: 1 / span 4; transform:translateX(var(--page-margin)); }

	/* RECHTS ABSTAND */
	.column.mobileSize-small.mobileAlign-right_safe .home-teaser{ grid-column: 3 / span 2; }
	.column.mobileSize-medium.mobileAlign-right_safe .home-teaser{ grid-column: 2 / span 3; }
	.column.mobileSize-large.mobileAlign-right_safe .home-teaser{ grid-column: 1 / span 4; }

	/* MITTE */
	.column.mobileSize-small.mobileAlign-center .home-teaser{ grid-column: 2 / span 2; }
	.column.mobileSize-medium.mobileAlign-center .home-teaser{ grid-column: 1 / span 3; }
	.column.mobileSize-large.mobileAlign-center .home-teaser{ grid-column: 1 / span 4; }

	.column.valign-bottom_safe,
	.column.valign-top_safe{
		padding-bottom:0;
		padding-top:0;
	}

	.block-homeGrid{
		
	}
	.b-home.light .footer-kontakt a,
	.b-home.light .link-telefon{
		color:var(--color-alternate);
	}

	
	/* ---------------------------------
	
		JOURNAL / INDEX LIST
		
	-----------------------------------*/
	.icon-arrow__inner{
		width:100%;
	}
	.item-images .project-item__column:not(:first-child){
		display:none;
	}
	.project-list__item{
		flex-direction: column;
	}
	.item-images{
		display:block;
		width:100%;
	}
	.project-list__item:first-child{
		border-top:0;
		padding-top:0;
	}
	.project-item__column .icon-arrow{
		position:absolute;
		right:0;
		bottom:0;
	}

	/* ---------------------------------
	
		JOURNAL / INDEX DETAIL
		
	-----------------------------------*/

	.journal-detail header,
	.index-detail header{
		/*position:static;
		padding-bottom:var(--block-padding);*/
		height:var(--header-height);
		background-color:var(--color-main);
	}
	.journal-detail h1,
	.index-detail h1{
		padding-bottom:var(--block-padding);
		position:static;
		mix-blend-mode: normal;
		color:var(--color-alternate);
	}
	.imageRow-container{
		display:flex;
		flex-direction: column;
		gap:var(--grid-gap);
	}
	.index-detail main,
	.journal-detail main{
		margin-top: var(--header-height);
	}
	.container--narrow{
		width:100%;
	}
	.block-text__text{
		font-size:var(--fontsize-small);
	}
	.block-imageRow{
		display:block;
	}

	.imageRow-container div{
		display:block;
	}

	.imageRow-container .image-landscape_s,
	.imageRow-container .image-portrait_s{
		grid-column: span 2;
		grid-column: span 4;
	}
	.imageRow-container .image-landscape_m,
	.imageRow-container .image-portrait_m{
		grid-column: span 3;
		grid-column: span 4;
	}
	.imageRow-container .image-landscape_l,
	.imageRow-container .image-portrait_l{
		grid-column: span 4;
	}
	.block-indexText{
		padding-top:0;
	}
	.block-indexText .block__inner{
		flex-direction: column;
	}

	.page-navigation{
		margin-top:0px;
		margin-top:var(--block-padding);
	}
	a.page-navigation__next .icon-arrow{
		display:none;
	}
	.page-navigation__right{
		width:auto;
	}
	.indexText__infos{
		width:100%;
		min-width:100%;
		padding-bottom:var(--block-padding);
	}
	.indexText__maintext{
		padding-right:0;
		max-width:100%;
	}


	/* ---------------------------------
	
		PORTRAIT
		
	-----------------------------------*/
	.b-portrait main{
		max-height: none;
		height:auto;
		padding-bottom:0px;
	}
	.block-accordion .block__inner{
		flex-direction: column-reverse;
		align-items:flex-start;
	}
	.accordion__image{
		width:100%;
		height:auto;
	}
	.accordion__image img{
		height:auto;
		width:100%;
		aspect-ratio: 3/4;
	}
	.block-accordion__content{
		font-size: var(--fontsize-small);
	}
	

	.block-text__buttons{
		display:flex;
		flex-direction: column;
		gap:var(--block-padding);
	}
	.block-accordion__header{
		font-size:var(--fontsize-base);
	}

	.b-portrait footer{
		display:flex;
		
	}

	/* ---------------------------------
	
		IMPRESSUM
		
	-----------------------------------*/

	.b-impressum main{
		margin-top:var(--header-height);
	}
	.impressum-wrapper{
		flex-direction: column-reverse;
	}
	.text-impressum--zusatz{
		position:static;
		top:auto;
		min-width: auto;
	}
	

	
	/* ---------------------------------
	
		FOOTER
		
	-----------------------------------*/
	footer{
		flex-direction: column-reverse;
		align-items: normal;
		
	}
	.b-home .footer-main .footer-logo{
		opacity:0;
		
	}
	
	
	#mobile-logo-home {
		position: fixed;
		bottom: var(--page-margin); 
		left:var(--page-margin);
		width:calc(100vw - 2 * var(--page-margin));
		transform:translateY(60px);
		opacity:0;
		pointer-events: none;
		transition: opacity 0.5s ease, transform 0.5s ease;
		z-index: 2;
		margin-bottom:0;
		bottom:20px;
		height:auto;
	}
	#mobile-logo-home.footer-logo--visible {
		opacity: 1;
		pointer-events: auto;
		transform:translateY(0);
	}
	#mobile-logo-home.footer-logo--stopped{
		opacity: 1;
		pointer-events: auto;
		transform:translateY(0);
	}
	

	




	body.b-home footer{
		position:static;
		mix-blend-mode: normal;
		/*flex-direction:column;*/
	}
	body.b-home footer.footer-main{
		flex-direction:column;
	}
	body.b-home footer.footer-main .footer__right{
		display:flex;
		gap: 15px;
		flex-direction:column-reverse;
	}
	body.b-home footer.footer-main .footer-kontakt{
		padding-bottom:0px;
	}
	
	body.b-home nav footer{
		padding-bottom:0;
	}
	.home-teaser figcaption{
		display:none;
	}
	.footer-kontakt{
		width:100%;
	}



	/* ---------------------------------
	
		SAFARI DYNAMIC ISLAND FIX
		
	-----------------------------------*/
	
	@supports (-webkit-touch-callout: none) {
		@media screen and (max-device-width: 1024px) {
			
			.safe-top {
				display:block;
				height:5px;
				background: var(--color-main);
				position: fixed;
				top: 0;
				left:0;
				z-index:10;
				width:100%;
			}
			


		}
	}
	
	
}

@media screen and (max-width: 403px) {

	.link-telefon{
		font-size: 11.9vw;
		  white-space: nowrap;
	}

	

}