@font-face {
	font-family: 'NH';
	src: url('../fonts/NHaasGroteskTXPro-65Md.woff2') format('woff2'),
		url('../fonts/NHaasGroteskTXPro-65Md.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}




:root {
	--color-main: black;
	--color-secondary: #cfdae1;
	
	--fontsize-small:10px;
	--fontsize-base: 16px;
	--fontsize-large:22px;

	--page-margin: 10px;
	
	--grid: 12;
	--grid-gap: 24px;
	--image-gap: 6px;
	--abstand:15px;
	
	--cols: 3;
	--gaps: calc( var(--cols) - 1 );
	
	--border-radius:5px;
	
	--col-width: calc( ((100vw - 2*var(--page-margin)) - (var(--gaps) * var(--grid-gap))) / var(--cols) );
}



body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:white;
	color:var(--color-main);
	font-family:'NH','Arial',sans-serif;
	
	font-size:var(--fontsize-base);
	line-height:1.2;
	
}

body.noScroll{
	overflow-y:hidden;
}






/* ---------------------------------
	
	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 / MENU
	
-----------------------------------*/

header{
	position:fixed;
	z-index:3;
	top:calc( 2 * var(--page-margin) );
	left:calc( 2 * var(--page-margin) );
	width:calc( var(--col-width) - (2 * var(--page-margin)) );
	height:calc(100vh - 4 * var(--page-margin));
	height:calc(100dvh - 4 * var(--page-margin));
	display:flex;
	flex-direction: column
}

.header--head,
.header--content{
	padding:10px;
	background-color:rgba(208,219,225,.7);
	border-radius: var(--border-radius);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.header--head{
	
	margin-bottom:3px;
	display:flex;
	justify-content: space-between;
	cursor:pointer;
}
.header--head a{
	
}

.header--head i{
	height:100%;
	aspect-ratio: 1/1;
	position:relative;
	display:none;
}
.header--head.is-active i{
	display:block;
}
.header--head i span,
.header--head i span::after{
	display:block;
	background:var(--color-main);
	height:1px;
	width:20px;
	position:relative;
	top:50%;
	transform: rotate(45deg);
	transform-origin: center;
}
.header--head i span::after{
	content:'';
	transform: rotate(90deg);
}


.header--content{
	display:none;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	
}

.header--content.open{
	display:block;
}






p+p:not(:first-of-type){
	text-indent: 10%;
}
h2{
	padding-bottom:10px;
}

h2:not(:first-of-type){
	padding-top:30px;
}

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

a.btn{
	display:block;
	border-radius: var(--border-radius);
	background-color:var(--color-main);
	color:white;
	padding:0.8rem 1rem;
	margin-bottom:10px;
}
a.btn:hover{
	color:var(--color-main);
	background-color:white;
}

table{
	font-size: var(--fontsize-large);
	margin:var(--abstand) 0;
}
table tr td:last-child{
	text-align: right;
}
table tr td:last-child p{
	white-space: nowrap;
}
table tr:last-child td{
	padding-top:var(--abstand);
}


.agb{
	padding-top:var(--abstand);
	font-size:var(--fontsize-small);
}


.logo-sach-footer{
	margin-top:var(--abstand);
}

.umlaut{
	color:red;
}


/* ---------------------------------
	
	SITE
	
-----------------------------------*/


main{
	padding:var(--page-margin);
	padding-bottom:calc(var(--page-margin) - var(--image-gap));
}
.column {
  overflow: hidden;
}

.column .inner {
  position: relative;
  will-change: transform;
}



.image{
	margin-bottom:var(--image-gap);
}
.image img{
	width:100%;
	height:100%;
	object-fit: cover;
}
.image-portrait{
	aspect-ratio: 617.333 / 895;
}
.image-landscape{
	aspect-ratio: 617.333 / 442.444;
}
.image-double{
	aspect-ratio: 617.333 / 442.444;
	display:flex;
	gap:var(--image-gap);
}
.image-space{
	aspect-ratio: 617.333 / 442.444;
}

.logo-streifen{	
	position:fixed;
	z-index:2;
	left:calc(var(--page-margin) + var(--col-width) );
	top:-5px;
	width:var(--grid-gap);
	height:100vh;
	height:calc(100dvh + 5px);
	background-image:url(../bilder/logo_sach_neu.svg);
	background-repeat: repeat-y;
}
.logo-streifen-2{	
	left:calc(var(--page-margin) + var(--col-width)*2 + var(--grid-gap) );
}



.tablet-only{
	display:none;
}
.hidden-tablet{
	display:block;
}

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


/* TABLET */
@media screen and (max-width: 1000px) {
	:root{
		--cols: 2;
		/*--fontsize-small:10px;
		--fontsize-base: 16px;
		--fontsize-large:22px;*/
	}
	.grid-item{
		grid-column: span 6;
	}
	
	.logo-streifen-2{	
		display:none;
	}
	.column-3{
		display:none;
	}
	.tablet-only{
		display:block;
	}
	
	.hidden-tablet{
		display:none;
	}
}


/* MOBILE */
@media screen and (max-width: 600px) {
	:root {		
		--fontsize-small:10px;
		--fontsize-base: 16px;
		--fontsize-large:22px;
		
		--page-margin: 6px;
		
				
	}
	.tablet-only{
		display:none;
	}
	.hidden-tablet{
		display:block;
	}
	.column-3{
		display:block;
	}
	
	.grid-item{
		grid-column: 1/-1;
	}
	
	.grid-container{
		row-gap: var(--page-margin);
	}
	
	.logo-streifen{	
		
		top:1px;
		
		height:calc(100dvh - 1px);
		
	}
	
	header{
	
		width:calc( 100vw - (4 * var(--page-margin)) );
	}
	
	.image-double{
		flex-direction: column;
		aspect-ratio: auto;
	}
	.image-double img{
		aspect-ratio: 617.333 / 895;
	}
	
}