@font-face {
  font-family: 'Diatype-Semi-Mono';
  src: url('../fonts/ABCDiatypeSemi-Mono-Regular.woff2') format('woff2'),
	   url('../fonts/ABCDiatypeSemi-Mono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Diatype-Regular';
  src: url('../fonts/ABCDiatype-Regular.woff2') format('woff2'),
	   url('../fonts/ABCDiatype-Regular.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

:root {
	--tuerkis: #73B5BE;
	--schwarz: #000000;
	--weiss: #FFFFFF;

	--fontsize-base: 16px;
	--fontsize-medium: 24px;
	
	--abstand: 15px;

	--page-margin: 32px;
	
	--grid: 12;
	--grid-gap: 16px;

	interpolate-size: allow-keywords; 
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:white;
	color:var(--schwarz);
	font-family:'Diatype-Semi-Mono','Arial',sans-serif;
	
	line-height:1;
}


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

.grid-container{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}
.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-all{ grid-column: 1/-1; }

/* ---------------------------------
	
	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-3-2{
	aspect-ratio: 3/2;
}
.ratio-2-1{
	aspect-ratio: 2/1;
}

.color--blau{
	color:var(--blau);
}
.color--gruen{
	color:var(--gruen);
}
.color--rot{
	color:var(--rot);
}
.color--gelb{
	color:var(--gelb);
}

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

.icon{	
	background-repeat:no-repeat;
	background-size:contain;
}
.icon--download{
	background-image:url('/assets/bilder/icons/arrow_down.svg');
}
.icon--info{
	background-image:url('/assets/bilder/icons/info.svg');
}


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

h1{
	
}
h2{
	font-family: 'Diatype-Regular';
	font-size:var(--fontsize-medium);
}
h3{
	color:var(--grau)
}

p{
	
}
strong{
	
}


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

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


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

.main{
	position:fixed;
	inset:0;
	width:50vw;
	padding:var(--page-margin);
}
.main-left{
	left:0;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.main-left__bottom{
	margin-top:var(--abstand);
}
.main-right{
	background-color: var(--tuerkis);
	left:50vw;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}

.darmli{
	max-width:390px;
	margin-left:calc( var(--page-margin) / 2 * -1  );
}

.logo{
	display:block;
	width:216px;
	pointer-events:none;
}


/* ---------------------------------
	
	BLOCK: TEAM
	
-----------------------------------*/

.block-team{
	display:flex;
	flex-direction: row;
	gap:var(--page-margin);
	padding-bottom:var(--page-margin);
	padding-bottom:60px;
}
.block-team h2{
	padding-top:var(--abstand);
	padding-bottom:var(--abstand);
}
.person-details{
	display:grid;
	grid-template-columns: auto 1fr;

}

.person-details span:nth-child(odd){
	padding-right:10px;
}




/* ---------------------------------
	
	BLOCK: ANGEBOT
	
-----------------------------------*/


ul{
	display: block;
	list-style-type: none;
	margin-top:var(--abstand);
}
li{
	border-top:1px solid var(--schwarz);
	font-size: var(--fontsize-medium);
	font-family: 'Diatype-Regular';
	padding:10px 0;
}
.scroll-container{
	height:100%;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y:scroll;
	overflow-x:hidden;
	
}


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

.main-impressum{
	position:fixed;
	inset:0;
	width:50vw;
	left:50vw;
	z-index:3;
	padding:var(--page-margin);
	background-color: var(--tuerkis);
	transform: translateY(100%);
	opacity:0;
	transition:transform .7s ease-in-out, opacity .1s ease-in-out;
	transition-delay: 0s, 0.7s;
	overflow-y:scroll;


}
.main-impressum.is-active{
	transform: translateY(0);
	opacity:1;
	transition-delay: 0s, 0s;
}
.impressum__top{
	border-bottom:1px solid var(--schwarz);
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);
	padding-bottom:var(--page-margin);
	position: relative;
	padding-right: 30px;
}
.impressum__top div{
	flex:1;
}
.impressum-close{
	position: absolute;
	right: 0;
	top: 0;
	width: 23px;
	height: 23px;
	background-image:url(/assets/bilder/icon_close.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
.impressum-close:hover{
	transform: rotate(90deg);
}

.impressum__bottom{
	padding-top: var(--page-margin);
}
.impressum__bottom p{
	padding-bottom: var(--page-margin);
}

.scroll-container,
.main-right footer{
	transition:opacity .7s ease-in-out;
	opacity:1;
}

body.impressum-is-open .scroll-container,
body.impressum-is-open .main-right footer{
	opacity:0;
}

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

footer{
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);	
	padding-top:var(--page-margin);
	border-top:1px solid var(--schwarz)
}
.footer__block{
	flex:1;
}
.footer__block.footer-oeffnungszeiten{
	display:flex;
	flex-direction: row;
	gap:var(--page-margin);
}
.footer__block{
	flex:1;
}
.footer__block.footer-impressum{
	flex:none;
}

.main-right footer{
	/*position:absolute;
	bottom:0;
	left:var(--page-margin);
	right:var(--page-margin);
	padding-bottom:var(--page-margin);
	background-color:var(--tuerkis);*/
} 
.main-right .footer__block:last-child{
	display:flex;
	align-items: flex-end;
	justify-content: flex-end;
} 


/* ---------------------------------
	
	FADEIN ANIMATIONS
	
-----------------------------------*/

:root {
  --animate-delay: 0.3s;
}

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


@media screen and (max-width: 1180px) {
	:root{
		--page-margin:16px;
		--grid-gap:10px;
	}
	.grid-item{ grid-column: 1/-1; }

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



	.main{
		position:static;
		width:100%;
	}
	.main-left{
		height:calc( 100dvh - var(--angebot-top-height) );
	}
	.main-right{
		padding-top:0px;
	}
	.main-impressum{
		width:100%;
		left:0;
	}


	.main-right .footer__block.footer-impressum{
		flex:1;
	}



	.block-angebot{
		order:1;
		margin-bottom:30px;
	}
	.block-team{
		order:2;
		padding-bottom:30px;
	}
	.darmli{
		
	}

	
	.angebot__top{
		padding-top:var(--page-margin);
		padding-bottom:var(--page-margin);
	}
	ul{
		margin-top:0;
	}

	.footer__block{
		padding:var(--abstand) 0;
	}

	li:last-child{
		border-bottom:1px solid var(--schwarz);
	}

}
@media screen and (max-width:820px){
	.block-team{
		flex-direction: column;
		gap:30px;
	}


	.main-right footer{
		display:block;
		padding-top:0;
	}
	.footer-oeffnungszeiten{
		display:flex;
		gap: var(--grid-gap);
	}
	.footer-oeffnungszeiten div{
		flex: 1;
	}
	.main-right footer div.footer__block:not(:last-child){
		border-bottom:1px solid var(--schwarz);
	}


	.main-right .footer__block:last-child{
		justify-content: flex-start;
		display:block;
		padding-bottom:0px;
	}
}
@media screen and (max-width:500px){
	.impressum__top{
		flex-direction: column;
	}
}
@media screen and (max-height:702px){
	.main-left{
		height:auto;
	}
}