body{
	font-family: var(--typo-font-family);
	color: var(--color-typo-basic);
	font-size:16px;
}

a {color:var(--color-paprika-orange);}
a:hover {text-decoration:none;}
a:before{
	font-family:"FontAwesome";
	font-weight:400;
	margin-right:3px;
	text-decoration:none;
	display: inline-block;
}
a.download::before {content: "\f34a";}
a.external::before {content: "\f08e";}
a.arrow::before    {content: "\f105";}
a.phone::before    {content: "\f879"; margin-right:5px;}
a.mail::before    {content: "\f0e0"; margin-right:5px;}
a.linkedin::before {content: "\f08c"; font-family:"FontAwesomeBrand"; font-size:2rem; margin-right:6px; position:relative; top:6px;}
a.cta{
	background:var(--color-paprika-orange);
	padding:6px 20px;
	color:#fff;
	text-decoration: none;
	border-radius: 20px;
	display: inline-block;
	&:hover{
		background:#d44e27;	
	}
}
h1,.h1{ color:var(--color-primary-green); font-weight:bold; font-size:2.5rem;}
h2,.h2{ color:var(--color-primary-green); font-size:1.75rem; font-weight:bold; margin:1rem 0 0.5rem;}
h3,.h3{ color:var(--color-primary-green); font-size:1.4rem; font-weight:bold; margin:0.5rem 0 0rem;}
h4,.h4{ color:var(--color-primary-green); font-size:1.3rem;}
h5, .h5, .h5 h3{ color:#000; font-weight:bold; font-size:1.1rem; margin: 1rem 0 0.25rem;}
.black{color:#000;}
p{margin:0.75rem 0;}
ul{
	padding-left:20px;
	margin-top:0;
	&.blank{
		list-style-type: none;
		padding-left:5px;
		line-height: 2rem;
	}
}
.center{text-align:center;}
.textmarker{background-color: var(--color-primary-yellow);}
.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pr-1{padding-right:1rem;}
.pr-2{padding-right:2rem;}
.pl-1{padding-left:1rem;}
.pl-2{padding-left:2rem;}
#header {
	position:sticky;
	top:0;
	z-index:999;
	background:#fff;
	/*
	background: linear-gradient(171deg,rgba(255, 255, 255, 1) 185px, var(--color-primary-green) 185px);
	@media screen and (min-width: 80rem) {
		background: linear-gradient(171deg,rgba(255, 255, 255, 1) 50%, var(--color-primary-green) 50%);
		height:175px;
	}
	.inside{
		background:none;
		
		@media screen and (min-width: 80rem) {
			background: linear-gradient(171deg,rgba(255, 255, 255, 1) 175px, var(--color-primary-green) 175px);
		}
	}
	*/
	.flexbox2 {justify-content:space-between; gap:0;}
	.flexbox2 > div {width: calc(50% - 2rem);}
	.logo{
		padding:0.5rem 1rem;
		@media screen and (min-width: 40rem) {
			padding:0.5rem 0;
		}
		img{
			max-width:200px;
			transition: all 0.4s ease;
		}
	}
	/*
	.headernav a.cta{
		padding:3px 0 ;
		text-align:center;
		@media screen and (min-width: 40rem) {
			padding:10px 0 0;
			text-align:right;
		}
		p {margin:0;}
		a{margin:0;}
	}
	*/

	.headernav{
		text-align:right;
		padding-top:20px;
		ul{margin-right:1rem;padding:0;}
		@media screen and (min-width: 40rem) {
			ul{margin-right:0;}
		}
		li{
			list-style-type:none;
			display: inline-block;	
			margin-left:0.2rem;
			a.cta{
				display:inline-block;
				border-radius:40px;
				padding:12px;
				line-height: 0.5rem;
				img {width:24px;}
				span.label{white-space:nowrap;}
				img.close{display:none;}
				
			}
			&.callnow {
				span{display:none;}
				.phone::before {
					content: "";
					margin-right:0;
				}
			}
			@media screen and (min-width: 40rem) {
				&.callnow{
					img{display:none;}
					span{display:inline-block;}
				}
				&.menu{
					display:none;
				}
			}
			@media screen and (max-width: 40rem) {
				&.phone::before {
					content: "";
					margin-right:0;
				}
			}
		}
		#menubtn img {transition: all 0.4s ease;}
		#menubtn img.close{display:none;}
		#menubtn.is-active img.close{display:inline-block;}
		#menubtn img.menu{display:inline-block;}
		#menubtn.is-active img.menu{display:none;}
		/* Bei kleinem Screen Topline
		width:100%;
		order:-1;
		background: var(--color-paprika-orange);
		@media screen and (min-width: 40rem) {
			order:0;
			background: #fff;
		}
		*/
	}
	.burger{
		padding:30px;
		@media screen and (min-width: 40rem) {
			display:none;
		}
	}
	&.scrolled{
		.logo img{
			max-width:150px;
			transition: all 0.4s ease;
			@media screen and (max-width: 40rem) {
				max-width:110px;
			}
		}
	}
}
nav#mainnav{
	transition: max-height 0.35s ease, opacity 0.25s ease;
	text-align: center;
	display:none;
	/*Style Mobile Navi*/
	&.is-active{
		display:block;
		background:#fff;
		border-bottom:1px solid #var(--color-grey-light);
		box-shadow: 4px 4px 10px 0 var(--color-shadow);
		ul{
			margin:0;
			padding:0;
			border-top: 1px solid var(--color-primary-green);
		}
		ul li{
			display: block;
			border-bottom: none;
			margin:0;
			padding:0;
			a {
				color:#000;
				padding:1rem 0;
				display: block;
				width:100%;
			}
			a:hover{background-color:var(--color-grey-light);}
			&.active a{
				background-color:var(--color-primary-green);
				color:#fff;
			}
		}
	}
	@media screen and (min-width: 40rem) {
		text-align: right;
		display: block;
	}
	background:var(--color-primary-green);
	position: fixed;
	z-index:999;
	width:100%;
	ul{margin:0 auto;}
	li{
		color:#fff;
		list-style: none;
		display: inline-block;
		padding:5px 8px 5px;
		margin: 0;
		a{
			color:#fff;
			font-size:1.2rem;
			text-decoration: none;
			@media screen and (max-width: 40rem) {
				font-size:1rem;
			}
		}
		border-bottom:5px solid var(--color-primary-green);
		&.active{
			border-bottom-color: var(--color-yellow-green);
			transition: all 0.4s ease;
		}
	}
}
#footer {
	position: relative;
	background: var(--color-primary-green);
	color:#fff;
	padding:1rem 0 8rem;
	ul{margin-left:0;}
	a, h1, .h1, h2, .h2, h3, .h3, h4, .h4{color:#fff;}
	.footer-statement{
		background-color:var(--color-yellow-green);
		color:#000;
		padding:30px;
		border-radius:20px;
		
		@media screen and (min-width: 64rem) {
			width:66%;
			max-width: 100%;
			position:absolute;
			left:-90px;
			top:130px;
		}
		p{margin:0.3rem 0;}
		&::before {
			content: "\f4d8";
			font-family:"FontAwesome";
			font-weight:400;
			font-size:3rem;
			color:var(--color-primary-green);
			color:#000;
			margin-right:3px;
			text-decoration:none;
			float: left;
			margin-right:1rem;
		}
	}
	#follow-us{
		ul{padding-left:0;}
		li{list-style-type:none;}
	}
}

/*Artikel*/
.mod_article{
	scroll-margin-top:175px;
	scroll-padding-top:175px;
	&.padding{padding:3rem 0 5rem;}
	&.background{
		background-color:var(--color-grey-light);
		box-shadow: 0 0 15px 0 var(--color-grey);
	}
}
.hero{
	background:var(--color-primary-green);
	position: relative;
	h1, p{color:#fff;}
	h2{color:#eee;}
	@media screen and (min-width: 60rem) {
		img{
			position: absolute;
			z-index: 88;
			top:50px;
		}
	}
}

/*Barrierefreie Cards*/
.cardlist2, .cardlist3, .cardlist4, .cardlist5, .cardlist6 {
	.card{
		max-width:550px;
		border:1px solid var(--color-grey);
		position:relative;
		display:flex;
		flex-direction:column;
		box-shadow: 4px 4px 10px 0 var(--color-shadow);
		h2, h3, h4, h5, p, ul{padding-left:0.75rem; padding-right:0.75rem;}
		h2 a::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
		}
		figure{ order:-1;	}
	}
	.product{
		background:#fff;
		h3, h4{
			color:#fff;
			padding:1.5rem;
			margin:0;
			text-align: center;
		}
		h3{
			background:var(--color-primary-green);
			font-size:1.6rem;
		}
		h4{
			background:var(--color-sage-green);
			padding:0.75rem 1rem;
		}
		ul{
			margin-left:0.75rem;
		}
	}
	/*.card:hover {
		transform: scale(1.03);
		transition:.1s;
	}*/
}
#products .cardlist4{
	@media screen and (min-width: 64rem) and (max-width: 90rem) {
		gap:1rem;
		.card.product{width: calc(25% - 0.9rem);
		}
	}
}
#products .content-image{
@media screen and (max-width: 40rem){
		order:-1;
	}
}

#contact{
	.flexbox2 {
		column-gap:6rem;
		justify-content: space-between;
	}
	.flexbox2 .content-text{
		@media screen and (min-width: 40rem) {
			width: calc(50% - 3rem);
		}
	}
	.contactperson{
		h3{margin-top:0;}
		h3 span.subline{color:#000;}
		img {
			border-radius:300px;
			width:100%;
			max-width:200px;
			height:auto;
			border:1px solid var(--color-grey);
			margin-right:1rem;
		}
		@media screen and (max-width: 80rem) {
			figure {float:none;}
		}
	}
}


/*Responsive Seitenbreite*/
#header .inside{
	width:100%;
	margin:0 auto;
	@media screen and (min-width: 40rem) {
		width: 90%;
	}
	@media screen and (min-width: 60rem) {
		width: 80%;
		max-width:80rem;
	}
}

.mod_article .content-container,
nav ul,
#footer .inside{
	width:calc (100% - 2rem);
	margin:0 auto;
	padding:0 1rem;
	@media screen and (min-width: 40rem) {
		width: 90%;
	}
	@media screen and (min-width: 60rem) {
		width: 80%;
		max-width:80rem;
	}
}