@font-face {
  font-family: 'GT-Regular';
  src: url('../fonts/GT-Standard-L-Standard-Regular.woff2') format('woff2'),
	   url('../fonts/GT-Standard-L-Standard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'GT-Bold';
  src: url('../fonts/GT-Standard-L-Standard-Bold.woff2') format('woff2'),
	   url('../fonts/GT-Standard-L-Standard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'GT-Mono';
  src: url('../fonts/GT-Standard-Mono-Standard-Regular.woff2') format('woff2'),
	   url('../fonts/GT-Standard-Mono-Standard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

:root {
	--blau: #1464FF;
	--gruen: #009B32;
	--rot: #FF3232;
	--gelb: #FFD200;
	--grau: #C8C8C8;
	--schwarz: #000000;

	--fontsize-small: 16px;
	--fontsize-base: 32px;
	
	--abstand-gross: 75px;
	--abstand: 30px;
	--abstand-klein: 16px;
	
	--padding:0.5rem 1rem;
	--block-padding:150px;
	--page-margin: 32px;
	
	--wappen-width: 70px;
	
	--header-height: calc(2 * var(--page-margin) + 70px);

	--content-maxwidth:1200px;
	--page-margin-right: calc(var(--wappen-width) + 2 * var(--page-margin));

	--border-radius--box:10px;
	--border-radius--btn:0px;
	--border-radius--image:10px;
	--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:'GT-Bold','Arial',sans-serif;
	
	font-size:var(--fontsize-base);
	line-height:1.1;
	
	/* FOOTER ALWAYS ON BOTTOM */
	min-height:100vh;
	display:flex;
	flex-direction: column;
	justify-content: space-between;	
}
html{
	scroll-behavior: smooth;
}


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

}
h3{
	color:var(--grau);
}

p{
	
}
strong{
	
}


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

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

.btn{
	display:inline-block;
	border-radius: var(--border-radius--btn);
	padding:var(--padding);
	transition: all .2s ease;
	font-size:var(--fontsize-small);
	font-family: 'GT-Mono';
	border:1px solid var(--schwarz)
}
.btn:hover{
	/*background-color:var(--grau);*/
}
.btn--download{
	transition-property: padding-right;
	transition-delay:.2s;
}
.btn--download .icon{
	opacity:0;
	width:1px;
	height:13px;
	display:inline-block;
	transition:width .2s ease, opacity .2s ease, margin-left .2s ease;
	
	/* CLOSE */
	transition-delay:.2s, 0s, .2s;
}
.is-desktop .btn--download:hover{
	padding-right:10px;
	transition-property: padding-right;
	transition-delay:0s;
}
.is-desktop .btn--download:hover .icon{
	opacity:1;
	width:13px;
	margin-left:10px;
	
	/* OPEN */
	transition-delay:0s, .2s, 0s;
}


/* ---------------------------------
	
	LIST
	
-----------------------------------*/

ul li p{
	padding-bottom:0px !important;
}
ul{
	display: block;
	list-style-type: none;
}
.block-text ul{
	padding-bottom: var(--abstand);
}
.block-text li{
	position:relative;
	padding-left:1rem;
}
.block-text li::before{
	content:'';
	display:block;
	position:absolute;
	background:var(--schwarz);
	left:0;
	width:7px;
	height:7px;
	border-radius: 999px;
	
	top:1.1rem;
}



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

.container{
	max-width:1440px;
	margin:0 auto;
}
main{
	padding-top:var(--header-height);
	padding-right: var(--page-margin-right);
}

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




.logo{
	position:fixed;
	left:var(--page-margin);
	top:var(--page-margin);
	width:143px;
	z-index:3;
}
.lang-fr .logo{
	width:153px;
}

.infobox{
	position:fixed;
	top:var(--page-margin);
	left:50%;
	transform: translateX(-50%);
	background-color: white;
	z-index:5;
	text-align: center;
	border:1px solid black;
	font-size:var(--fontsize-small);
	font-family: 'GT-Mono';
	transition:padding-bottom .2s ease;
	transition-delay:.2s;
}
.infobox .btn{
	border:0px;
	display:block;
}
.infobox .btn:hover{
	/*padding-left:1.4rem;
	padding-right:1.4rem;*/
}

.infobox span{
	display:block;
	opacity:0;
	max-height:0px;
	width:0px;
	overflow:hidden;
	padding-left: 10px;
	padding-right: 10px;

	/* CLOSE */
	transition:opacity .2s ease,max-height .2s ease,width .2s ease;
	transition-delay:0s,.2s,.4s;
}
.infobox.is-active{
	padding-bottom:10px;
}
.infobox.is-active span{
	opacity:1;
	max-height:100px;
	width:350px;


	/* OPEN */
	transition:opacity .2s ease,max-height .2s ease,width .2s ease;
	transition-delay:.4s,.2s,0s;
}


.wappen-container{
	position:absolute;
	right:var(--page-margin);
	top:0px;
	width:var(--page-margin-right);
	z-index:4;
	will-change: transform;
	background:white;
	right:0;
	padding:var(--page-margin);
	background:white;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.wappen{
	margin-bottom:var(--abstand-klein);
	position:relative;
	display:block;
}
.wappen:last-child{
	margin-bottom:0px;
}
.wappen img{
	position: relative;
	z-index:3;
}
.wappen span,
.sprach-switch a{
	z-index:2;
	position:absolute;
	left:0px;
	top:0;
	font-size: var(--fontsize-small);
	display:block;
	width:calc(var(--wappen-width) / 2);
	height:calc(var(--wappen-width) / 2);
	display:flex;
	align-items: center;
	justify-content: center;
	border:1px solid black;
	border-right:0px;
	transform:translateX(0);
	transition: transform .2s ease,background-color .2s ease;
	font-family: 'GT-Mono';
	background-color:white;
}
.wappen span:last-child,
.sprach-switch a:last-child{
	top:calc(50% - 1px);
	height:calc((var(--wappen-width) / 2) + 1px);
	transition-delay:.1s;
}
.sprach-switch a.is-active{
	cursor:default;
}
.sprach-switch a:not(.is-active){
	background-color:var(--grau);
}
.sprach-switch a:not(.is-active):hover{
	background-color:white;
}
.is-desktop .wappen:hover span,
.is-desktop .sprach-switch:hover a,
.is-mobile .sprach-switch.is-active a{
	transform:translateX(-100%);
}
.wappen-container .icon{
	display:block;
	width:100%;
	height:100%;
	background-position: center;
	background-size:16px;
}





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

.block{
	margin-bottom:var(--abstand-block);
	border-bottom:1px solid var(--grau);
	padding:var(--block-padding) var(--page-margin);
	padding-left:calc(var(--page-margin) * 3);
}

.block.full-width{
	max-width: 100%;
	margin:0;
	padding-left:0;
	padding-right:0;
}
.block:first-child{
	padding-top: var(--block-padding);
}
.block__inner{
	margin: 0 auto;
	max-width:var(--content-maxwidth);
}
.block.full-width .block__inner{
	max-width:100%;
}

main .block:last-child{
	border-bottom:0px;
}

.titel-rot h2{
	color: var(--rot);
}
.titel-gruen h2{
	color: var(--gruen);
}

.titel-blau h2{
	color: var(--blau);
}

.block-text strong{
	font-family: 'GT-Bold','Arial',sans-serif;
}




/* ---------------------------------
	
	BLOCK: INTRO
	
-----------------------------------*/

.intro{
	min-height:calc(100vh - var(--header-height));
	border-bottom:1px solid var(--grau);
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.intro .block,
.intro .block:first-child{
	padding-top:0px;
	padding-bottom:0px;
	border-bottom:0px;
}

.block-intro{
	/*padding:0;*/
	position:relative;
	/*padding-left: var(--page-margin);
	padding-right: var(--page-margin);*/
}

.block-intro .block__inner{
	padding-right:0px;
	z-index:2;
	position:relative;
}
.intro .block-text{
	height:100%;
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.intro .block-text .block__inner{
	padding-top:var(--abstand-gross);
	padding-bottom:var(--abstand-gross);
	padding-right:10vw;
}


.line{
	height:1px;
	background-color:var(--grau);
	position:absolute;
	left:0px;
	width:100%;
	z-index:1;
}
.line-1{
	top:0px;
}
.line-2{
	top:16.66%;
}
.line-3{
	top:33.33%;
}
.line-4{
	top:50%;
}
.line-5{
	top:66.66%;
}
.line-6{
	top:83.33%;
}
.line-7{
	top:99.9%;
}


/* ---------------------------------
	
	BLOCK: IMAGE & TEXT 
	
-----------------------------------*/

.block-imagetext lottie-player{
	height:auto;
}

.block-imagetext img{
	border-radius: var(--border-radius--image);
}

.block-imagetext__image{
	padding-right:100px;
}

/* ---------------------------------
	
	PAGE: IMPRESSUM
	
-----------------------------------*/

.b-impressum{
  font-family: 'GT-Regular','Arial',sans-serif;;
}
.b-impressum h2{
	font-family: 'GT-Bold','Arial',sans-serif;
}
.b-impressum .block{
	border-bottom:0px;
}
.b-impressum .block-text{
	padding-top:var(--abstand-gross);
}
.impressum-text__top{
	font-size:var(--fontsize-small);
	font-family: 'GT-Mono';
	padding-bottom: 0;
}
.impressum-text__top p{
	padding-bottom:1.2rem;
}


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

footer{
	display:flex;
	flex-direction: column;
	padding:var(--page-margin);
	padding-bottom:0px;
	font-size:var(--fontsize-small);
	gap:var(--grid-gap);
	font-family: 'GT-Mono';
	border-top: 1px solid var(--grau);
	/*background-image:url(/assets/bilder/footer_linien_2.svg);
	background-position:0 0;
	background-repeat: repeat-x;*/
	padding-bottom:33px;
	padding-top:21px;
	padding-right:calc(var(--page-margin-right) + var(--page-margin));
	line-height:1.11;
	
}
.footer-logo{
	width:auto;
	margin-top:16px;
}
.logo-hslu{
	height:36px;
	width:232px;
}

.logo-ige{
	height:54px;
	width:182px;
	margin-top:7px;
}
/* SAFARI FIX */
body.is-safari footer{
	line-height:1.14;
}


.sprach-switch--footer{
	color:var(--grau);
}
.sprach-switch--footer.is-active{
	color:black;
}
footer .grid-item:last-child{
	display:flex;
	flex-direction: column;
	align-items: flex-end;


}


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

@media screen and (max-width: 1430px) {
	.block{
		padding-left:var(--page-margin);
	}
}
@media screen and (max-width: 1230px) {
	.footer__item1{
		grid-column: span 3;
	}
	.footer__item2{
		grid-column: span 4;
	}
	.footer__item3{
		grid-column: span 3;
	}
	.footer__item4{
		grid-column: span 2;
	}
}
@media screen and (max-width:1130px){
	.block-imagetext__image{
		padding-right:var(--abstand);
	}
}
@media screen and (max-width:1000px){
	.intro .block-text .block__inner{
		padding-right:0;
	}

	footer{
		padding-bottom:86px;
		padding-top:22px;
		line-height:1.262;
	}
	footer .grid-item{ grid-column: 1/-1; }
	/* SAFARI FIX */
	body.is-safari footer{
		line-height:129%;
	}
	body.is-safari .footer-inner{
		row-gap: 18px;
		row-gap: 17.6px;
	}

	.footer-inner{
		row-gap:19px;
	}
	footer .grid-item:last-child{
		display:block;
	}
	footer .grid-item:last-child div{
		display:flex;
		flex-direction: row;
		gap:var(--abstand-klein);
	}
	footer .grid-item:last-child div br{
		display:none;
	}
	footer .grid-item:last-child div a:not(.sprach-switch--footer){
		order:1;
		width:100%;
	}
	footer .grid-item:last-child div a.sprach-switch--footer:first-child{
		order:2;
	}
	footer .grid-item:last-child div a.sprach-switch--footer:nth-child(2){
		order:3;
	}

	.footer__item2,
	.footer__item3{
		padding-bottom:10px;
	}

	.logo-hslu,
	.logo-ige{
		margin-top:13px;
	}

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

	:root{
		 --fontsize-base: 22px;
		 --fontsize-small: 14px;
		 --page-margin:16px;
		 --block-padding:50px;

		 --wappen-width: 45px;
	}
	.grid-item{ grid-column: 1/-1; }

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

	/* HYPHENS */
	.block-imagetext__text,
	.block-text{
		hyphens: auto;
		hyphenate-limit-chars: auto 5;
		hyphenate-limit-lines: 2;
	}





	.block__inner{
		padding-right:0px;
	}

	.intro{
		height:auto;
		min-height:auto;
		display:block;
	}

	.block-intro{
		padding-left:15vw;
		padding-right: 15vw;
	}

	.intro .block-text .block__inner{
		padding-top:var(--grid-gap);
		padding-bottom:var(--block-padding);
	}

	.block-imagetext__image{
		padding-left:0px;
		padding-right:0px;
	}
	
	.line-1{
		top:0px;
	}
	.line-2{
		top:8.33%;
	}
	.line-3{
		top:16.66%;
	}
	.line-4{
		top:25%;
	}
	.line-5{
		top:33.33%;
	}
	.line-6{
		top:41.66%;
	}
	.line-7{
		top:50%;
	}
	.line-8{
		top:58.33%;
	}
	.line-9{
		top:66.66%;
	}
	.line-10{
		top:75%;
	}
	.line-11{
		top:83.33%;
	}
	.line-12{
		top:91.66%;
	}
	.line-13{
		top:99.9%;
	}
	
	.wappen-container{
		padding-bottom:70px;
	}

	.wappen-container a:hover span{
		transform:none;
	}
	.wappen-container a.is-active span,
	.wappen-container a.is-active:hover span{
		transform:translateX(-100%);
	}


	

	.infobox{
		top:auto;
		bottom:var(--page-margin);
		left:var(--page-margin);
		width:calc(100vw - 2 * var(--page-margin));
		transform: none;
	}
	.infobox.is-active span{
		width:100%;
	}

	
}
@media screen and (max-width:600px){
	.block-intro{
		padding-left:var(--page-margin);
		padding-right:var(--page-margin);
		padding-right:10vw;
	}
}