:root{
	--green:#008143;
	--lightgreen:#9cb438;
	--lightgreen-2:#d1d6cd;
	--lightgreen-3:#f0f5ec;
	--lightgreen-3-trans:rgba(139,178,113,.2);
	--lightgreen-4:#f7fbf4;
	--darkgreen:#084734;
	--grey:#646963;
	
	--border-rad-xs:2px;
	--border-rad-s:4px;
	
	--max-width-xs:400px;
	--max-width-s:560px;
	--max-width-m:640px;
	--max-width-l:1200px;
	
	--font-size-normal:1rem;
	--font-size-large:clamp(1.4rem, 2vw, 1.75rem);
	--font-size-h1:clamp(2rem, 3.5vw, 2.85rem);
	
	--btn-color:var(--green);
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: local("Be Vietnam Pro"),
       url("fonts/BeVietnamPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: "Be Vietnam Pro";
  src: local("Be Vietnam Pro"),
       url("fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: "Be Vietnam Pro";
  src: local("Be Vietnam Pro"),
       url("fonts/BeVietnamPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: local("Be Vietnam Pro"),
       url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}


@font-face {
  font-family: "Be Vietnam Pro";
  src: local("Be Vietnam Pro"),
       url("fonts/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
html{
	scroll-behavior:smooth;
}
*{
	padding:0;
	margin:0;
}
body{
	font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 300;
    line-height: 1.6;
	color:var(--darkgreen);
	font-size:var(--font-size-normal);
}
h1, h2, h3, h4{
	margin-bottom:1em;
	line-height:1.4;
}

h1, .h1{
	font-size:var(--font-size-large);
	text-transform:uppercase;
	flex:1;
	hyphens:auto;
	text-wrap:balance;

}
h2, .subhead{
	font-size:var(--font-size-normal);
	font-weight:300;
	display:flex;
	gap:.5em;
	align-items: flex-start;	
}
h2:not(.h1)::before, .subhead::before{
	content:"";
	display:inline-block;
	height:1px;
	width:1.25em;
	background:currentColor;
	margin-top: .66em;
}

h3{
	font-size:var(--font-size-h3);
}
.subhead{
	width:100%;
	margin-bottom:.75em;
}
p{
	margin-bottom:1em;
}
.large{
	font-size:var(--font-size-large);
	font-weight:500;
	line-height:1.3;	
}
a{
	color:var(--green);
	text-underline-offset:2px;
	word-wrap: break-word;
}
a:hover{
	text-decoration:none;
}
/*------------------------------------- button*/
.button{
	display:flex;
	align-items: center;
	width:max-content;
    padding: .75em 2.5em;
    border-radius: 2em;
    line-height: 1;
    font-weight: 300;
	border:1px solid var(--btn-color);
    transition-duration: .2s;
    gap: .5em;
    position: relative;
	background:var(--btn-color);
	font-size:var(--font-size-normal);
	font-family:inherit;
	color:white;
	text-decoration:none;
	margin-top:2em;
	cursor:pointer;
	
	.icon, svg{
		height:1em;
		width:1em;
	}
	.icon svg{
		fill:currentColor;
		transform:scale(1.5);
	}	
}
.button.icon-txt-button{
	padding:.75em 1.5em;
	
	
}
.button.icon-button{
	padding:.75em;
}
.button.highlight{
	--btn-color:var(--lightgreen);
}

.button.menu-toggle{
	background:transparent;
	padding:.75em!important;
	margin-top:0;
	border:none;
	color:inherit;
}
.button.menu-toggle:hover, .button.menu-toggle:focus{
	opacity::6;
}
.menu-toggle.close{
	position:absolute;
	right:20px;
	top:8px;
	margin-top:0;
}

.button:hover, .button:focus{
	--btn-color:var(--darkgreen);
	transform:scale(.975);
}

.button-group{
	display:flex;
	flex-direction:row;
	column-gap:16px;
	row-gap:8px;
	flex-wrap:wrap;
	margin-top:2em;
	
	.button{
		margin-top:0;
	}
}
ul:not(.menu-wrap ul){
	
	margin-bottom:1em;
	list-style-type:none;
	
	li{
		margin-bottom:.25em;
		display:flex;
		flex-direction:row;
		flex-wrap:no-wrap;
		gap:.75em;
	}
	li::before{
		content:"";
		background:var(--lightgreen);
		width:.5em;
		height:.5em;
		display:flex;
		border-radius:.15em;
		aspect-ratio:1/1;
		margin-top:.52em;
		
	}
}

/*----------------------------------- sections*/
section{
	width:100%;
	overflow:hidden;
}
.section-inner{
	width:100%;
	max-width:var(--max-width-l);
	padding:56px 20px;
	margin:auto;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	
}
.txt-block{
	max-width:400px;
	position:relative;
	width:100%;
}
.dark{
	--btn-color:white;
	color:white;
	.button:not(.highlight){		
		background:transparent;
		
	}
	.button:not(.highlight):hover, .button:not(.highlight):focus{
		border-color:var(--lightgreen-3);
	}
	a:not(.button){
		color:var(--lightgreen-3);
	}
	
}
.txt-sec .section-inner{
	flex-direction:column;
	flex-wrap:wrap;
	align-items:flex-start;
	column-gap:clamp(24px, 5vw, 80px);
	
	h1, h2, hgroup{
		margin-right:auto;
		
	}
	
	.txt-block{
		max-width:var(--max-width-m);
	}
}
.img-txt-sec.txt-sec .section-inner{
	flex-direction:row;
	align-items:stretch;
	.txt-block{
		
		padding:40px 0;
	}
	img{
		flex:1;
		object-fit:cover;
		min-width:0;
		border-radius:var(--border-rad-xs);
		
	}
}
/*---------------------------------------- header*/
#header{
	position:fixed;
	z-index:999;
	left:0;
	top:0;
	right:0;
	transition:.3s;
	color:white;
	
	.section-inner{
		padding-bottom:0;
		padding-top:0;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
				
	}	
}
#header.scrolled{
	background:rgba(255,255,255,.9);
	box-shadow:0 0 16px rgba(0,0,0,.1);
	backdrop-filter:blur(8px);
	--webkit-backdrop-filter:blur(8px);
	color:var(--darkgreen);
	
	.logo{
		max-width:72px;
	}
	ul{
		padding:1em 0;
	}
}
.logo{
	max-width:112px;
	width:100%;
	position:absolute;
	top:0;
	transition:.2s;
}
.menu-wrap{	
	ul{
		display:flex;		
		gap:1em;
		list-style-type:none;		
		transition:.2s;
		
		li{
			line-height:1;
		}
		li a{
			text-transform:none;
			font-weight:400;
			color:inherit;
			text-decoration:none;
			letter-spacing:0.5px;
		}	
	}	
}
.desktop-menu-wrap{
	margin-left:auto;
	margin-right:0;
	
	ul{
		flex-direction:row;
		padding: 2em 0;
		gap:0;
		
		li a{
			padding:.5em 1.5em;
			border-radius:2em;
			transition:.2s;
		}
		li a:hover, li a:focus{
			background:var(--lightgreen-3-trans);
		}
	}	
}
.mobile-menu-wrap{
	display:none;
	z-index:99999999;
	padding:20px;
	position:fixed;
	inset:0;
	background:white;
	
	ul{
		flex-direction:column;
		justify-content: flex-end;
		
		li a{
			color:var(--darkgreen);
			font-size:1.5rem;
		}
		li a::before{
			content:"";
			display:inline-block;
			height:1px;
			width:1.25em;
			background:currentColor;
			margin-bottom: .2em;
            margin-right: .25em;
			transition:.3s;
		}
		li a:hover::before{
			width:1.5em;
		}
		
	}
}
.mobile-menu-wrap.active{
	display:flex;
}

/*-------------------------------------- hero*/
#hero{
	background-color:#eee;
	position:relative;
	min-height:180px;
	
	.hero-bg{
		position:absolute;
		inset:0;
		
		background-image:url('img/gear-close-up_.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		overflow:visible;
		-webkit-filter:brightness(.6) hue-rotate(-40deg);
		filter:brightness(.6) hue-rotate(-40deg);
	}
	.section-inner{		
		justify-content:flex-end;
		position:relative;
		min-height:80svh;
	}
	.icons-wrap{
		display:flex;
		flex-direction:row;
		gap:1vw;
		margin-bottom:40px;
		display:none;
	}
	.icon{
		width:clamp(40px,10vw, 154px);
	}	
}
.hero{
	
	h1{
		font-size:var(--font-size-h1);
		text-transform:none;
		font-weight:500;
		text-shadow:0 0 24px var(--darkgreen);
		margin-bottom:.5em;
	}
	.txt-block{
		max-width:var(--max-width-m);
	}
}

footer{
	background:var(--darkgreen);
	color:white;
	font-size:.85rem;
	
	.section-inner{
		padding-top:8px;
		padding-bottom:8px;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		gap:1rem;
	}
	p, a{
		margin:0;
	}
	p{
		margin-right:auto;
	}
	.footer-nav{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		column-gap:1em;
	}
}
/*-------------------------------------- produkte*/
#produkte .section-inner{
	position:relative;
}
.product-item-wrap{
	padding-top:80px;
	overflow:hidden;
}
.product-item{
	background:var(--lightgreen-4);
	border:1px solid var(--lightgreen-3);
	border-radius:var(--border-rad-s);
	padding:16px;
	display:flex;
	flex-direction:column;
	
	img{
		width:100%;
		margin-top:-80px;
		margin-bottom:-80px;
		pointer-events:none;
	}
	h3{
		text-transform:uppercase;
		font-size:var(--font-size-large);
		line-height:1.4;
	}
	.product-inner{
		max-width:480px;
		margin:auto;
		
	}
}
.mb-carousel{
  position: relative;
  overflow: visible;
  width:100%;
}
.mb-carousel:focus-visible{
  outline:none;
}
.mb-carousel-track {
  display: flex;
  gap: var(--carousel-space-between, 16px);
  transition: transform 0.5s ease;
  will-change: transform;
}

.mb-carousel-item {
  flex: 0 0 auto;
  width: var(--carousel-cell-width, 100%);
  transition:0.3s ease;
  align-self:start;
  
  .carousel-item-inner{
	  
  }
}
.mb-carousel.products .mb-carousel-item {
  flex: 0 0 auto;
  width: var(--carousel-cell-width, 100%);
  transition:0.3s ease;
  align-self:start;
  
  .carousel-item-inner{
	  padding-top:80px;
	  overflow:hidden;
  }
}

.mb-carousel-item.in-viewport {
  opacity: 1;
  pointer-events: auto;
}

.products .mb-carousel-item.out-of-viewport {
  opacity: 0.5;
  pointer-events: none;
  
  .product-item{
	  transform:scale(.95);
	  transition:.3s;
  }
}
.mb-carousel[data-hide-outside="true"] .out-of-viewport {
  display: none;
}
.mb-carousel-track {
  cursor: grab;
  user-select: none;
  align-items: center;
}
/*-------------------------------------- unternehmen*/
#geschichte{
	background:var(--lightgreen-4);
	
	.section-inner{
		position:relative;
	}
	
}

.mb-carousel.timeline{
	position:relative;
	margin-top:56px;
	
	.timeline-step{
		position:relative;
		display:flex;
		flex-direction:column;
		align-items: flex-start;
		gap:2em;		
		padding:20px;
		border-radius:var(--border-rad-s);
		
	}
	.step-date{
		min-width:4.5ch;
		font-size: 1.75rem;
        font-weight: 600;
        line-height: 1;
		margin-left: -24px;
		
	}
	.step-marker{
		background:var(--green);
		width:.6em;
		height:.6em;
		border-radius:.2em;
		aspect-ratio:1/1;	
	}
	.step-marker::before{
		content:"";
		font-size:1.75rem;
		height:1px;
		background:var(--green);
		display:block;
		position:absolute;
		left:0;
		right:-16px;
		transform:translateY(.15em);
	}
	.step-desc{
		font-size:.9em;
		line-height:1.4;
	}
	
}
.timeline::before{
	content:"";
	font-size:1.75rem;
	height:1px;
	background:var(--green);
	height:100%;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
}
/*--------------------------------------- lieferanten*/
.supplier-grid{
	display:flex;
	gap:16px;
	max-width:100%!important;
	
	.supplier-item{
		transition:.2s;
	}
	.supplier-item:hover{
		opacity:.8;
	}
}
/*-------------------------------------- kontakt*/
#kontakt{
	.left{
		flex:1;
	}
}
.asp-wrap{
	display:flex;
	flex-direction:column;
	gap:16px;
	width:100%;
	margin-bottom:16px;
	flex:2;	
}
.asp{
    flex:1;
	border-bottom:1px solid var(--lightgreen-2);
	padding:8px 0;
	img{
		max-width:72px;
		aspect-ratio:1/1;	
	}
	.asp-content{
		padding:8px;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;
		flex:1;
		column-gap:40px;
		row-gap:0;
	}
	h4{
		font-size:1.25rem;
		font-weight:500;
		line-height:1.25;
		margin-bottom:.25em;
	}
	span{
		font-size:.9rem;
		margin:.4em 0;
		display:block;
		font-weight:300;
	}	
}

.map{
	width:100%;
	filter:saturate(0);
	margin-top:2em;
}

.contact-wrap{
	background:white;
	position:relative;
		box-shadow:0 0 16px rgba(0,0,0,.05);
}
/*------------------------------------------------- single pages*/
.product-sec, .info-sec{
	min-height:85svh;
}
.product-sec .txt-block, .info-sec .txt-block{
	h2{
		font-weight:500;
		font-size:1.125em;
		margin-top:2em;
	}
	h2::before{
		height:2px;
	}
	h2:first-of-type{
		margin-top:.5em;
	}
}
.download{
	display:flex;
	flex-direction:row;
	align-items: center;
	gap:.5em;
	flex-wrap:no-wrap;
	
	padding:8px 4px;
	border-bottom:1px solid var(--lightgreen-2);
	
	b{
		font-weight:500;
	}
	.button, p{
		margin:0;
	}
	.button{
		margin-left:auto;
	}
}
.download:last-of-type{
	margin-bottom:2em;
}
.img-flex-2-1{
	display:flex;
	flex-direction:row;
	margin:2em 0;
	img{
		border-radius:var(--border-rad-xs);
		width:100%;
	}
}
table{
	width:100%;
	margin:2em 0;
	box-shadow:0 0 8px rgba(0,0,0,.1);
	border-radius:var(--border-rad-s);
	border-spacing:0;
	
	tr:nth-child(even){
		background:var(--lightgreen-4);
	}
	td, th{
		padding:.4em 8px .25em;
		border-bottom:1px solid var(--lightgreen-2);
		text-align:left;
		hyphens:auto;
		font-size:.85rem;
		line-height:1.25;
		
	}
	td:first-child{
		margin-right:2em;
		font-weight:400;
	}
	tr:last-child td{
		border:none;
	}
}
@media screen and (max-width:767px){
	.logo{
		max-width:96px;
	}
	.product-item{
		text-align:center;
		
		img{
			margin-right:auto;
		}
		img.right{
			transform:translateX(10%);
		}
		.product-desc{
			hyphens:auto;
		}
		.button{
			margin:2em auto 1em;
		}
	}
}
@media screen and (min-width:768px){
	.section-inner{
		padding:80px 40px;
	}
	.mobile-menu-wrap{
		padding:16px 40px 40px;
	}
	.menu-toggle.close{
		right:40px;
	}
	.img-txt-sec.txt-sec .section-inner{
		.txt-block{
			max-width:var(--max-width-xs);
		}
	}
	.txt-block{
		max-width:var(--max-width-m);
	}
	
	table{
		td, th{
			font-size:var(--font-size-normal);
			padding:.5em 16px .4em;
		}
	}
	.mb-nav{
		position: absolute;
        right: 40px;
        margin-top: 0;
	}
	.asp{
		display:flex;
		flex-direction:row;
		gap:16px;
		align-items:start;
	}
	.ul-2{
	column-count: 2;
	}
}

@media screen and (max-width:991px){
/*------------------------------------ header*/
	#header .section-inner{
		padding-top:2px;
		padding-bottom:2px;
	}	
	.desktop-menu-wrap{
		display:none;
	}	
	.menu-toggle.open{
		color:inherit;
	}
	.hero.home .section-inner{
		padding-bottom:40px;
	}
	/*------------------------ products*/
	.product-item{	
		img{
			max-width:50%;
			margin-bottom:0;
			margin-left:auto;
		}
		.product-inner{
			max-width:100%;
		}
		.button{
			margin-bottom:1em;
		}
	}
	.mb-carousel.timeline{
		max-width:80%;
	}
	#lieferanten .supplier-grid{
		flex-wrap:wrap;
		justify-content: space-evenly;
	}
	#kontakt{
		.left{
			flex:unset;
			margin-bottom:40px;
		}
		.asp-wrap{
			max-width:100%;
		}
	}
	.map{
		aspect-ratio:2/1;
		object-fit:cover;
		object-position:center center;
		margin-right:-16px;
		margin-left:-16px;
		width:calc(100% + 32px)
	}
}
@media screen and (min-width:992px){	
	.section-inner{
		padding:80px 40px;
	}
	.menu-toggle.open{
		display:none;
	}
	.mobile-menu-wrap{
		display:none;
	}
	.txt-sec .section-inner{
		flex-direction:row;
	}
	.img-txt-sec.txt-sec .section-inner{
		.txt-block{
			max-width:var(--max-width-m);
		}
	}
	#hero{
		.icons-wrap{
			margin-bottom:80px;
		}
	}	
	.product-item{
		flex-direction:row;
		align-items:center;
		padding:16px 40px;
		gap:40px;

		img{
			max-width:50%;
		}
	}
}