.hero {
	background-size: cover;
	align-self: center;
	position: relative;
	background-position: center center;
}

.hero-home {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-home.webp');
}

.hero-verkauf {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-neumaschinen.webp');
}

.hero-neumaschinen {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-neumaschinen.webp');
}

.hero-gebraucht {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-gebrauchtmaschinen.webp');
}

.hero-service {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-service.webp');
}

.hero-karriere {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-karriere.webp');
}

.hero-langzeit {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-langzeitmiete.webp');
}

.hero-brokk {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-brokk.webp');
}

.hero-brokk-mieten {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero/hero-brokk-mieten.webp');
}

@media (min-width: 768px) {

	.hero-75 {
		height: 60vh;
	}

	.hero-50 {
		height: 40vh;
	}
	
	.hero-30 {
		height: 25vh;
	}

	.hero-h1 {
		font-size: 52px;
		text-shadow: 3px 3px 0px black;
	}

	.hero-h2 {
		font-size: 48px;
		text-shadow: 2px 2px 0px black;
	}

	.hero-h3 {
		font-size: 36px;
		text-shadow: 2px 2px 0px black;
		text-align: center;
	}

}

@media (max-width: 575px) {

	.hero-75 {
		height: 75vh;
	}

	.hero-50 {
		height: 45vh;
	}
	
	.hero-30 {
		height: 25vh;
	}

	.hero-h1 {
		font-size: 38px;
		text-shadow: 3px 3px 0px black;
		margin: 0;
	}

	.hero-h2 {
		font-size: 28px;
		text-shadow: 2px 2px 0px black;
		margin: 0;
	}

	.hero-h3 {
		font-size: 16px;
		text-shadow: 2px 2px 0px black;
		line-height: 1.2em;
		margin: 0;
	}

	.hero-buttons {
		margin-top: 30px;
	}
}


.hero-bottom-small {
	position: absolute;
	bottom: -40px;
}

.hero-bottom-big {
	position: absolute;
	bottom: -30px;
}


.hero-heading {
	color: white;

	/* background-color: var(--bs-primary); */
	padding: 10px;
	font-weight: bolder;
}

.backdrop {
	backdrop-filter: brightness(50%);
	backdrop-filter: blur(2px);
}

.hero-blur {
	background-image: radial-gradient(circle, rgba(2, 26, 63, 0.7) 40%, rgba(2, 12, 49, 0) 75%);
	border-radius: 50%;
	border-width: 5vh;
	min-width: 0 !important;
}