/* Import */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local(''),
		url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'),
		url('../fonts/poppins-v20-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local(''),
		url('../fonts/poppins-v20-latin-600.woff2') format('woff2'),
		url('../fonts/poppins-v20-latin-600.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local(''),
		url('../fonts/poppins-v20-latin-700.woff2') format('woff2'),
		url('../fonts/poppins-v20-latin-700.woff') format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: local(''),
		url('../fonts/poppins-v20-latin-900.woff2') format('woff2'),
		url('../fonts/poppins-v20-latin-900.woff') format('woff');
}

/* Global */
:root {
	--color-green: #005f09;
	--color-light: #eff6ea;
	--color-text: #1d1d1b;
	--color-white: #ffffff;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Poppins', var(--bs-body-font-family);
	font-size: 1.125rem;
	color: var(--color-text);
	line-height: 1.5;
	hyphens: none;
	overflow-x: hidden;
}
body > div:last-of-type {
	visibility: hidden !important;
	display: none !important;
}

/* Backgrounds */
.bg-green {
	background-color: var(--color-green);
}
.bg-light {
	background-color: var(--color-light) !important;
}

/* Navigation */
.navbar-toggler:focus {
	box-shadow: none;
}
.navbar-brand img {
	width: 180px;
}
#menu .navbar-nav a:not(.btn-contact) {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	margin-top: .25rem;
	color: var(--color-text);
	padding-bottom: .25rem;
	border-bottom: 2px solid transparent;
}
#menu .navbar-nav a:hover, #menu .navbar-nav a:active, #menu .navbar-nav a.active{
	border-color: var(--color-green);
	transition: background-color .3s;
}

/* Text */
.text-black {
	color: var(--color-text) !important;
}
.txt-green {
	color: var(--color-green);
}
strong {
	color: var(--color-green);
}
/* Headlines */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-weight: 600;
	color: var(--color-green);
}
.display {
	font-weight: 700;
	font-size: clamp(2rem, 5vw + 0.5rem, 4.5rem);
	line-height: 1.1;
	color: var(--color-green);
}
.section-title {
	text-transform: uppercase;
	color: var(--color-text);
	letter-spacing: 0.25rem;
	font-size: 1.25rem;
	font-weight: 600;
}
h1, .h1 {
	font-size: clamp(2rem, 5vw + 0.5rem, 4.25rem);
}
h2, .h2 {
	font-size: clamp(1.75rem, 5vw + 0.5rem, 3.375rem);
}
h3, .h3 {
	font-size: clamp(1.5rem, 1.85vw + 1rem, 2.25rem);
}
h4, .h4 {
	font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
}
.subline {
	font-size: 1.25rem !important;
	line-height: 1.5;
}

/* Links */
a {
	text-decoration: none;
}
a:hover, a:focus {
	color: var(--color-green);
	border-color: transparent;
}
footer a, .contact a {
	border-bottom: 2px solid transparent;
	transition: all .3s;
}
footer a:hover, footer a.active, footer a:focus, .contact a:hover, .contact a:focus {
	border-color: #fff;
}

/* Paddings */
.pb-6 {
	padding-bottom: 6rem;
}

/* Images*/
.fit-cover {
	object-fit: cover;
}

/* Image Grid */
.image-grid .middle-col .col-6, .image-grid .middle-col .col-12 {
	height: calc(50% - .25rem);
}

/* Splide */
#splide01-list p {
	margin-bottom: 0;
}
.splide__list  {
	height: auto !important;
}
.splide__track--draggable.splide__track--draggable {
	user-select: auto;
	-webkit-user-select: auto;
}
.btn-prev, .btn-next, .bs-btn-prev, .bs-btn-next {
	padding: .5rem;
	border: 2px solid var(--color-green);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .3s;
	background-color: transparent;
	height: 56px;
	width: 56px;
}
.btn-prev:hover, .btn-next:hover, .bs-btn-prev:hover, .bs-btn-next:hover {
	background-color: rgba(255, 255, 255, 0.178);
}

/* Utilities */
.custom-border {
	border: 5px solid #fff;
}
.rotate-right {
	transform: rotate(5deg);
}
.rotate-left {
	transform: rotate(-5deg);
}
/* Scale effect */
.effect-scale {
	transition: all .2s;
}
.effect-scale:hover, .effect-scale:focus {
	transform: scale(1.02);
}

/* Buttons */
.btn {
	box-shadow: none !important;
}
.btn-primary, .btn-primary:visited {
	background-color: var(--color-green);
	border: .125rem solid var(--color-green);
	border-radius: 50px;
	color: var(--color-white);
	font-size: 1.125rem;
	font-weight: 500;
	padding: .375rem .375rem .375rem 1.5rem;
	transition: all .3s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: #fff !important;
	border-color: var(--color-green);
	color: var(--color-green) ;
}
.btn-primary:hover span,
.btn-primary:focus span,
.btn-primary:active span {
	background-color: var(--color-green) !important;
}
.btn-primary svg, .btn-primary span {
	transition: all .3s;
}
.btn-primary:hover svg,
.btn-primary:focus svg,
.btn-primary:active svg {
	fill: #fff;
}
.btn-contact, .btn-submit {
	padding: .75rem 1.5rem !important;
	color: #fff;
	background-color: var(--color-green);
	border: 2px solid transparent;
	border-radius: 50px;
	transition: all .3s;
}
.btn-contact:hover, .btn-contact:focus, .btn-submit:hover, .btn-submit:focus, .btn-submit:active {
	border-color: var(--color-green);
	background-color: transparent;
	color: var(--color-green);
	transition: all .3s;
}
.btn-circle-wrap {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.btn-circle {
	height: 130px;
	width: 130px;
	border-radius: 50%;
	transition: transform .4s;
	border: 4px solid #fff;
}
.btn-circle:hover {
	transform: scale(1.2) rotate(15deg);
	transition: transform .4s;
}
.circle-txt {
	font-size: 1rem;
	line-height: 1.1;
}

/* Sections */
#warum-saliu {
	position: relative;
}
#warum-saliu::before {
	content: "";
	position: absolute;
	height: 5rem;
	top: -5rem;
	width: 100%;
	background-color: var(--color-light);
	border-top: 1rem solid var(--color-green);
	z-index: -1;
}
.section-divider {
	border-top: 1rem solid var(--color-green);
}

/* Testimonials */
svg.quote {
	top: -30px;
	left: 25px;
	fill: var(--color-green);
}
.testimonial {
	font-size: 1rem;
	border-color: var(--color-green) !important;
}


/* Cards */
.card img {
	width: 50px;
	margin-bottom: 1rem;
}
.card-text {
	font-size: 1rem;
}
.card-title {
	font-size: 1.25rem;
	color: var(--color-green);
}
.txt-small {
	font-size: 12px;
}

/* Kontakt Formular */
.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: var(--color-text);
	box-shadow: 0 0 0 .25rem rgba(95,95,94,.2);
}
.form-check-input:checked {
	background-color: var(--color-green);
	border: 0;
}
.form-control {
	border-radius: 0 !important;
}
a.mehr-link { 
	color: var(--color-green) !important;
}
/* Animation */
@keyframes bottom {
	from { opacity: 0; transform: translateY(3rem); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes top {
	from { opacity: 0; transform: translateY(3rem); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes left {
	from { opacity: 0; transform: translateY(3rem); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes right {
	from { opacity: 0; transform: translateY(3rem); }
	to { opacity: 1; transform: translateY(0); }
}

/* ------- Media Queries min-width------ */
@media (min-width: 576px) {
	#warum-saliu::before{
		height: 4rem;
		top: -4rem;
		border-top: 1rem solid var(--color-green);
	}
	.section-divider {
		border-top: 1rem solid var(--color-green);
	}
}

@media (min-width: 768px) {
	body {
		font-size: 1.125rem;
	}
	.navbar-brand img {
		width: 200px;
	}
	h1, .h1 {
		font-size: 2.5rem;
		font-weight: 700;
	}
	h2, .h2 {
		font-size: 2rem;
	}
	h3, .h3 {
		font-size: 1.75rem;
	}
	h4, .h4 {
		font-size: 1.5rem;
	}
	#warum-saliu::before {
		height: 6.5rem;
		top: -6.5rem;
		border-top: 1.5rem solid var(--color-green);
	}
	.section-divider {
		border-top: 1.5rem solid var(--color-green);
	}
}

@media (min-width: 992px) {
	.navbar-brand img {
		width: 230px;
	}
	h1, .h1 {
		font-size: 3rem;
		font-weight: 700;
	}
	h2, .h2 {
		font-size: 2.5rem;
	}
	h3, .h3 {
		font-size: 2rem;
	}
	.subline {
		font-size: 1.75rem !important;
	}
	#warum-saliu::before {
		height: 14rem;
		top: -14rem;
		border-top: 2rem solid var(--color-green);
	}
	.section-divider {
		border-top: 2rem solid var(--color-green);
	}
	.mb-6 {
		margin-bottom: 6rem !important;
	}
	.mt-6 {
		margin-top: 6rem !important;
	}
	.my-6 {
		margin-bottom: 6rem !important;
		margin-top: 6rem !important;
	}
	.pb-6 {
		padding-bottom: 6rem !important;
	}
	.pt-6 {
		padding-top: 6rem !important;
	}
	.py-6 {
		padding-bottom: 6rem !important;
		padding-top: 6rem !important;
	}
	.pb-7 {
		padding-bottom: 12rem !important;
	}
	.pt-7 {
		padding-top: 12rem !important;
	}
	.py-7{
		padding-top: 12rem !important;
		padding-bottom: 12rem !important;
	}
	@keyframes bottom {
		from { opacity: 0; transform: translateY(3rem); }
		to { opacity: 1; transform: translateY(0); }
	}
	@keyframes left {
		from { opacity: 0; transform: translateX(-5rem); }
		to { opacity: 1; transform: translateX(0); }
	}
	@keyframes right {
		from { opacity: 0; transform: translateX(5rem); }
		to { opacity: 1; transform: translateX(0); }
	}
	@keyframes top {
		from { opacity: 0; transform: translateY(-3rem); }
		to { opacity: 1; transform: translateY(0); }
	}
}
@media (min-width: 1400px) {
	#splide01-track {
		overflow: visible !important;
	}
}

@media (max-width: 981px) {
	/* Referenzen-Startseite */
	.ref-img img { 
		height: 250px;
	}
}

/* Hamburger-Icon */
.hamburger {
	padding: 0;
	display: inline-block;
	cursor: pointer;
	line-height: 1;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
	background-color: var(--color-green);
}
.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: var(--color-green);
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before {
	top: -10px;
}
.hamburger-inner::after {
	bottom: -10px;
}
.hamburger--spin .hamburger-inner {
	transition-duration: 0.22s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
	transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
	transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Lazyloading & Animation */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 1s;
}
.no-js .lazyload {
	display: none;
}
.lazy {
	opacity: 0;
}
.entered {
	transition: opacity 1s, transform .2s;
	opacity: 1;
}

#loader {
	display: flex;
	z-index: 5000;
}
.no-js #loader {
	display: none;
}
#loader::after {
	animation: loader 1s infinite;
	border: .5rem solid transparent;
	border-radius: 50%;
	border-top: .5rem solid var(--color-green);
	content: "";
	display: block;
	height: 4rem;
	width: 4rem;
	z-index: 5001;
}
@keyframes loader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}