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

:root {
	--rot: #FF0000;
	--schwarz: #000000;

	--fontsize-small: 16px;
	--fontsize-base: 25px;
	--fontsize-large:50px;
	
	--abstand-gross: 60px;
	--abstand: 30px;
	--abstand-klein: 15px;
	
	--padding:25px 30px;
	--block-padding:30px;
	--nav-padding:20px 30px;

	--border: 2px solid var(--rot);

	--header-height: 100px;

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

	--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: 16px;

	interpolate-size: allow-keywords; 
}

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

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

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

/* ---------------------------------
	
	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;
}

/* ---------------------------------
	
	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');
}


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

h1{
	font-size:var(--fontsize-large);
	padding-bottom:var(--abstand-block);
	color:var(--rot);
	padding:var(--nav-padding);
	border-bottom: var(--border);
}
h1:has(+ .block-accordion) {
    border-bottom:0px;
}

h2{
	font-size:var(--fontsize-base);
	color:var(--rot);
}
h3{
	font-size:var(--fontsize-base);
}

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

strong{
	color:var(--rot);
}


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

a{
	text-decoration: none;
	text-decoration-thickness: from-font;
	color:inherit;
}
.text a:not(.btn){
	/*text-decoration: underline;*/
	transition:color .1s ease;
}
.text a:not(.btn):hover{
	color:var(--rot);
}
.b-glossar .text a{
	color: var(--rot);
}

.btn{
	display:inline-block;
	border-radius: var(--border-radius--btn);
	padding:5px 10px;
	transition: all .2s ease;
	font-size:var(--fontsize-base);
	border:var(--border);
	color:var(--rot);
}
.btn:hover{
	background-color:var(--rot);
	color:white;
}

/* ALTERNATE */
.btn.btn--alternate{
	color:white;
	background-color:var(--rot);
}
.btn.btn--alternate:hover{
	color:var(--rot);
	background-color:white;
}


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

.container{
	max-width:1440px;
	margin:0 auto;
}
main{
	position: fixed;
	inset: calc(var(--border-inset) * 5);     
	overflow: auto;

	z-index:6;
	border:var(--border);
	background-color:white;
}

/* HIDE SCROLLBARS */
main{
	scrollbar-width: none;
	-ms-overflow-style: none;
}
main::-webkit-scrollbar {
  display: none;
}




.content-layer-eins main{
	inset: calc(var(--border-inset) * 1);
}
.content-layer-zwei main{
	inset: calc(var(--border-inset) * 2);
}
.content-layer-drei main{
	inset: calc(var(--border-inset) * 3);
}
.content-layer-vier main{
	inset: calc(var(--border-inset) * 4);
}
.content-layer-fuenf main{
	inset: calc(var(--border-inset) * 5);
}
.nav-is-active main{
	display:none;
}


.text p:not(:last-child){
	padding-bottom:var(--abstand)
}

.border{
	border:var(--border);
	z-index:1;
	position:fixed;
}
.border-1{
	inset:calc(var(--border-inset) * 1);
}
.border-2{
	z-index:2;
	inset:calc(var(--border-inset) * 2);
}
.border-3{
	z-index:3;
	inset:calc(var(--border-inset) * 3);
}
.border-4{
	z-index:4;
	inset:calc(var(--border-inset) * 4);
}
.border-5{
	z-index:5;
	inset:calc(var(--border-inset) * 5);
}
.ecke{
	position:fixed;
	width:140px;
	height:140px;
	background-image:url(/assets/bilder/ecke_desktop.svg);
	background-position:0 0;
	background-repeat: no-repeat;
	background-color:white;
	bottom:0px;
	right:0px;
	z-index:10;
}



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

nav{
	position: fixed;
	inset: calc(var(--border-inset) * 5);     
	overflow: auto;
	z-index:9;
	opacity:0;
	pointer-events: none;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	background-color:white;
	border:var(--border);
	/*transition:all .2s ease;*/
}
nav.is-active{
	opacity:1;
	pointer-events: all;
}
nav a{
	color:var(--rot);
}


.nav__main{

}

.nav__main a{
	font-size:var(--fontsize-large);
	position:relative;
	text-decoration: none;	
	color:var(--rot);
	border-bottom:var(--border);
	display:block;
	padding:var(--nav-padding);
	background-image:url(/assets/bilder/icons/icon_arrow.svg);
	background-repeat: no-repeat;
	background-position: right 40px center;
	transition:opacity .1s ease,transform .1s ease,background-position .15s ease;
	opacity:0;
	transform:translateY(-40px);
}
.nav__main .nav__level-0 a{
	font-size:var(--fontsize-base);
	background-image:none;
}

nav.is-active .nav__main a{
	transform:translateY(0);
	opacity:1;
}
nav.is-active .nav__main a:nth-child(2){
	transition-delay:.12s,.12s,0s;
}
nav.is-active .nav__main a:nth-child(3){
	transition-delay:.24s,.24s,0s;
}
nav.is-active .nav__main a:nth-child(4){
	transition-delay:.36s,.36s,0s;
}

.nav__main a:nth-child(2),
.nav__main a:nth-child(3),
.nav__main a:nth-child(4),
.nav__level-2 a:nth-child(2),
.nav__level-2 a:nth-child(3),
.nav__level-2 a:nth-child(4),
.nav__level-2 a:nth-child(5),
.nav__level-2 a:nth-child(6),
.nav__level-3 a:nth-child(1),
.nav__level-3 a:nth-child(2){
	transition-delay:0s;
}

.nav__level-2 a{
	transition:opacity .1s ease,transform .1s ease,background-color .2s ease,color .2s ease;
	opacity:0;
	transform:translateY(10px);
}
nav.is-active .nav__level-2 a{
	opacity:1;
	transform:translateY(0);
}
.nav__level-2 a:not(:last-child){
	margin-right:var(--abstand-klein);
}
nav.is-active .nav__level-2 a:nth-child(1){
	transition-delay:.4s,.4s,0s,0s;
}
nav.is-active .nav__level-2 a:nth-child(2){
	transition-delay:.5s,.5s,0s,0s;
}
nav.is-active .nav__level-2 a:nth-child(3){
	transition-delay:.6s,.6s,0s,0s;
}
nav.is-active .nav__level-2 a:nth-child(4){
	transition-delay:.7s,.7s,0s,0s;
}
nav.is-active .nav__level-2 a:nth-child(5){
	transition-delay:.8s,.8s,0s,0s;
}





.nav__level-3 a{
	transition:all .2s ease;
	opacity:0;
}
.nav__level-3 a:not(:last-child) {
  margin-right: var(--abstand-klein);
}
nav.is-active .nav__level-3 a{
	opacity:1;
}
nav.is-active .nav__level-3 a:nth-child(1){
	transition-delay:.8s;
}
nav.is-active .nav__level-3 a:nth-child(2){
	transition-delay:.9s;
}



.nav__main a:hover{
	background-position: right 20px center;
}
.nav__bottom{
	display:flex;
	flex-direction: row;
	gap:var(--grid-gap);
	font-size: var(--fontsize-small);
	padding:var(--block-padding);
	padding-bottom:25px;
	align-items: flex-end;
	justify-content: space-between;
}
.nav__level-3{
	padding-right:var(--abstand);
}

.nav-button{
	position:fixed;
	bottom:var(--border-inset);
	right:var(--border-inset);
	cursor:pointer;
	width: 50px;
	height: 50px;
	outline: none;
	border:0px;
	transition:all .2s ease;
	padding:0px;
	background-color:transparent;
}

.nav-button:hover{
	transform:scale3d(1.1,1.1,1);
}

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


.nav-button::after{
	transform:translate(-50%,-50%) rotate(90deg);
}


/* ACTIVE */

.nav-button.is-active{
	transform:rotate(-45deg);
	transition:all .2s ease;
	
}
.nav-button.is-active:hover{
	/*transform:rotate(-45deg);*/
}



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

footer{
	display:flex;
	flex-direction: column;
	background-color: var(--grau);
	padding:var(--page-margin);
	font-size:var(--fontsize-small);
	gap:var(--grid-gap);
}
.footer__block--bottom{
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	gap:var(--grid-gap);
}
.footer__block--bottom div{
	flex:1;
}

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

.b-home main{
	text-align: center;
	color:var(--rot);
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.b-home h1{
	border-bottom:none;
}
lottie-player{
	height:245px;
}
#nav-trigger{
	position:fixed;
	z-index:8;
	inset:0;
}

/* ---------------------------------
	
	SITE: GLOSSAR
	
-----------------------------------*/




/* ---------------------------------
	
	SITE: IMPRESSUM
	
-----------------------------------*/

.block-text--impressum,
.block-text--impressum h2{
	font-size:var(--fontsize-small);
}
.block-text--impressum{
	border-bottom:var(--border);
}
.block-text.block-text--impressum .block__inner{
	display:flex;
	flex-direction: row;
	gap:calc(var(--abstand) * 2);
}

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

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

	:root{
		
	}
		

	
}

@media screen and (max-width: 940px) {
	.nav__level-2{
		display:flex;
		flex-direction: column;
		gap:var(--page-margin);
	}
	.nav__level-2 .btn{
		display:block;
		width: fit-content;
	}
}

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

	:root{
		--fontsize-large:28px;
		--fontsize-base:18px;
		--fontsize-small:15px;

		--border-inset:14px;

		--abstand:16px;
		--block-padding:16px;
		--padding:16px;
		--nav-padding:18px 16px;
	}

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

	/*.btn{
		display:block;
		text-align: center;
	}*/

	.ecke{
		width:106px;
		height:106px;
		background-image:url(/assets/bilder/ecke_mobile.svg);
	}
	/*main{
		padding-bottom:100px;
	}*/
	.block:last-child{
		
	}
	main,
	nav,
	.content-layer-eins main,
	.content-layer-zwei main,
	.content-layer-drei main,
	.content-layer-vier main,
	.content-layer-fuenf main{
		inset:var(--border-inset);
	}
	.b-home.content-layer-fuenf main{
		inset: calc(var(--border-inset) * 5);
		padding-left:var(--block-padding);
		padding-right:var(--block-padding);
	}
	lottie-player{
		height:140px;
	}

	.nav__main a{
		background-image:url(/assets/bilder/icons/icon_arrow_mobile.svg);
		background-position:right 16px center;
	}
	.nav__main a:hover{
		background-position:right 16px center;
	}

	.nav__bottom{
		flex-direction: column;
		align-items: flex-start;
		height:100%;

		padding-bottom:14px;

	}
	.nav__level-2{
		display:block;
	}
	.nav__level-2 a{
		transform:translateY(-10px);
	}
	nav.is-active .nav__level-2 a:nth-child(1){
		transition-delay:.48s,.48s,0s,0s;
	}
	nav.is-active .nav__level-2 a:nth-child(2){
		transition-delay:.6s,.6s,0s,0s;
	}
	nav.is-active .nav__level-2 a:nth-child(3){
		transition-delay:.72s,.72s,0s,0s;
	}
	nav.is-active .nav__level-2 a:nth-child(4){
		transition-delay:.88s,.88s,0s,0s;
	}
	nav.is-active .nav__level-2 a:nth-child(5){
		transition-delay:.1s,.1s,0s,0s;
	}
	
	
	.nav__level-2 .btn:not(:first-child){
		margin-top:var(--abstand)
	}


	.block-text.block-text--impressum{
		padding:0 !important;
	}
	.block-text.block-text--impressum .block__inner{
		flex-direction: column;
		gap:0;
	}

	.block-text.block-text--impressum .grid-item{
		padding:var(--block-padding);
	}
	.block-text.block-text--impressum .grid-item:not(:last-child){
		border-bottom: var(--border);
	}

}