/* ubuntu-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.eot'); /* IE9 Compat Modes */
	src: url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	src: url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.eot'); /* IE9 Compat Modes */
	src: url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.woff') format('woff'), /* Modern Browsers */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/assets/fonts/ubuntu/ubuntu-v20-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/open-sans/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
	src: url('/assets/fonts/open-sans/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/assets/fonts/open-sans/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('/assets/fonts/open-sans/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
		url('/assets/fonts/open-sans/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/assets/fonts/open-sans/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


/** DEFAULTS **/
/*********************************************/

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root {
	--color-accent-rgb: 182 31 41;
	--color-accent: rgb(var(--color-accent-rgb));
	--color-accent-dark: #8c181f;
	--color-accent-darker: #601016;
	--color-accent-on: #fff;
	--color-surface: #fff;
	--color-text: #0e0e0e;
	--color-subtle-grey: #dadada;

	font-family: 'Ubuntu', system-ui;
	font-size: 16px;
	line-height: 1.2;
	color: var(--color-text);
}

::selection {
	background: rgb(var(--color-accent-rgb) / 80%);
	color: #000;
}

body {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

button, .button {
	font-family: 'Open Sans';
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	padding: 10px 20px;
}
button:hover,
.button:hover,
button:focus,
.button:focus {
	text-decoration: none;
}

button [class*=" fa-"],
.button [class*=" fa-"] {
	margin-right: .3em;
}

p {
	margin-bottom: 1em;
}
p:last-child {
	margin-bottom: 0;
}

a {
	text-decoration: none;
	cursor: pointer;
}
a:hover, a:focus {
	text-decoration: underline;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 700;
	white-space: pre-wrap;
	margin-bottom: 1.5rem;
}
h1, .h1 {
	font-size: 52px;
}
h2, .h2 {
	font-size: 34px;
}
h3, .h3 {
	font-size: 24px;
}
h4, .h4 {
	font-size: 20px;
}
h5, .h5 {
	font-size: 18px;
}
h6, .h6 {
	font-size: 16px;
}

h1:last-child, .h1:last-child,
h2:last-child, .h2:last-child,
h3:last-child, .h3:last-child,
h4:last-child, .h4:last-child,
h5:last-child, .h5:last-child,
h6:last-child, .h6:last-child {
	margin-bottom: 0;
}

img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

ul {
	padding-left: .5em;
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
	gap: .5em;
}
ul:last-child {
	margin-bottom: 0;
}

form {
	border: none;
	border-radius: 0;
}

label {
	cursor: pointer;
}

input, textarea, .checkbox-custom {
	font-family: inherit;
	font-size: 1rem;
	border: 1px solid var(--color-subtle-grey);
	border-radius: 3px;
	background: #fff;
	color: var(--color-text);
	display: block;
	width: 100%;
	padding: 9px 49px;
}
input::placeholder, textarea::placeholder {
	color: var(--color-text);
}

.input-container {
	position: relative;
}
.input-container > .icon-before {
	font-size: 1rem;
	color: var(--color-accent);
	position: absolute;
	top: 12px;
	left: 17px;
}
.input-container > .icon-after {
	font-size: 1rem;
	position: absolute;
	top: 12px;
	right: 17px;
}

.icon-required {
	color: #706f6f;
}

.checkbox-label {
	display: flex;
}
.checkbox-label input[type="checkbox"] {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.checkbox-custom {
	flex: 0 0 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	padding: 0;
	margin-right: .875em;
}
input:checked + .checkbox-custom {
	border: 2px solid var(--color-accent);
}
input:checked + .checkbox-custom::before {
	content: '';
	border: solid var(--color-accent);
	border-width: 0 0 2px 2px;
	display: block;
	width: 60%;
	height: 30%;
	margin-bottom: 20%;
	transform: rotate(-45deg);
}
.checkbox-label .icon-required {
	padding-left: 16px;
	padding-right: 18px;
	margin-left: auto;
}

.color-scheme-default {
	background-color: #fff;
	color: var(--color-text);
}
.color-scheme-default a {
	color: var(--color-accent);
}
.color-scheme-default button,
.color-scheme-default .button {
	background: var(--color-accent);
	color: var(--color-accent-on);
}
.color-scheme-default button:hover,
.color-scheme-default .button:hover {
	background: var(--color-accent-dark);
	color: var(--color-accent-on);
}
.color-scheme-default button:active,
.color-scheme-default .button:active {
	background: var(--color-accent-darker);
	color: var(--color-accent-on);
}
.color-scheme-default h1, .color-scheme-default .h1 {
	color: var(--color-accent);
}

.color-scheme-accent {
	background-color: var(--color-accent);
	color: var(--color-accent-on);
}
.color-scheme-accent a {
	color: currentColor;
}
.color-scheme-accent button,
.color-scheme-accent .button {
	background: #fff;
	color: var(--color-accent);
}
.color-scheme-accent button:hover,
.color-scheme-accent .button:hover {
	background: #e6e6e6;
	color: var(--color-accent);
}
.color-scheme-accent button:active,
.color-scheme-accent .button:active {
	background: #ccc;
	color: var(--color-accent);
}
.color-scheme-accent h1, .color-scheme-accent .h1,
.color-scheme-accent h2, .color-scheme-accent .h2,
.color-scheme-accent h3, .color-scheme-accent .h3,
.color-scheme-accent h4, .color-scheme-accent .h4,
.color-scheme-accent h5, .color-scheme-accent .h5,
.color-scheme-accent h6, .color-scheme-accent .h6 {
	color: #fff;
}

.color-scheme-image {
	color: #fff;
}
.color-scheme-image a {
	color: currentColor;
}
.color-scheme-image h1, .color-scheme-image .h1,
.color-scheme-image h2, .color-scheme-image .h2,
.color-scheme-image h3, .color-scheme-image .h3,
.color-scheme-image h4, .color-scheme-image .h4,
.color-scheme-image h5, .color-scheme-image .h5,
.color-scheme-image h6, .color-scheme-image .h6 {
	color: #fff;
}

.no-list {
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0;
}


/** CUSTOM ICONS **/
/*********************************************/

.icon-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 1em;
    height: 1em;
    position: relative;
}
.icon-hamburger > * {
    border-top: 2px solid currentColor;
    width: 100%;
    transition: .1s ease-out;
    transition-property: transform, opacity;
}

.icon-hamburger.cross > :nth-child(1) {
    transform: translateY(.45em) rotate(45deg);
    transform-origin: center;
}
.icon-hamburger.cross > :nth-child(2) {
    opacity: 0;
}
.icon-hamburger.cross > :nth-child(3) {
    transform: translateY(-.45em) rotate(-45deg);
    transform-origin: center;
}


/** LAYOUT **/
/*********************************************/

#mobile-menu-cover {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.section-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-right: 16px;
	padding-left: 16px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1436px;
}

.intro-text {
	text-align: center;
	max-width: 80ch;
	margin-left: auto;
	margin-right: auto;
}

.check-list {
	list-style: none;
}
.check-list > li {
	padding-left: 1.875em;
	position: relative;
}
.check-list > li::before {
	content: '\f058';
	font-family: 'Font Awesome 6 Pro';
	font-weight: 900;
	position: absolute;
	top: 1px;
	left: 0;
}

.horizontal-list {
	display: flex;
	flex-direction: row;
}

.horizontal-list li + li::before {
	content: '|';
	display: inline;
	margin: 0 .3em;
}


/* HEADER */

#header {
	border-bottom: 1px solid var(--color-accent);
	background: #fff;
	width: 100%;
	padding: 10px 0;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
}
#header .section-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}

#logo-container {
	flex: 1;
}

#logo {
	width: 300px;
	max-width: 100%;
	min-width: 0;
	height: auto;
}

#header-menu-opener {
	flex: 0;
	font-size: 2.5rem;
	background: transparent;
	color: inherit;
}

#header-menu-container {
	background: #fff;
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height .1s ease-out;
}

#header-menu {
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: .75em;
}

#header-menu li > * {
	font-size: 1.125rem;
	color: #000;
	border-bottom: 1px solid var(--color-accent);
	display: block;
}
#header-menu li > .active {
	color: var(--color-accent);
}
#header-menu a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

@media screen and (min-width: 1000px) {
	#header-menu-opener {
		display: none;
	}

	#header-menu-container {
		position: static;
		width: auto;
		height: auto;
	}

	#header-menu {
		flex-direction: row;
		padding: 0;
		gap: 1.5em;
	}

	#header-menu li > * {
		border: none;
	}
}


/* MAIN */

#main > section {
	padding: 40px 0;
}

@media screen and (min-width: 700px) {
	#main > section {
		padding: 80px 0;
	}
}


/* HERO */

section#hero {
	padding-bottom: 160px;
}

section#hero .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media screen and (min-width: 700px) {
	section#hero .section-content {
	   grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

section#hero .section-content .image {
	max-height: 360px;
}

@media screen and (min-width: 700px) {
	section#hero .section-content .image {
		display: block;
		height: 100%;
		max-height: 100%;
	}
}

section#hero .section-content .text {
	font-weight: 700;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

section#leistungen {
	padding: 0;
}

section#leistungen .section-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	position: relative;
	top: -80px;
}

@media screen and (min-width: 700px) {
	section#leistungen .section-content {
	   grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 960px) {
	section#leistungen .section-content {
	   grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.service .image {
	max-height: 250px;
	margin-bottom: 1rem;
}


/* UNSERE STAERKEN */

section#unsere-staerken .section-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

#strength-lists {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media screen and (min-width: 1073px) {
	#strength-lists {
	   grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

#assurances {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 1rem;
}

.icon-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.icon-text .icon-container {
	flex: 0 0 90px;
	font-size: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	position: relative;
	z-index: 1;
}

.icon-text .text {
	border: 1px solid var(--color-subtle-grey);
	padding: 65px 20px 20px;
	margin: -45px 0 0;
}

@media screen and (min-width: 700px) {
	.icon-text {
		flex-direction: row;
	}

	.icon-text .text {
		padding: 20px 20px 20px 70px;
		margin: 0 0 0 -45px;
	}
}

#materials {
	background: rgb(var(--color-accent-rgb) / 50%);
	padding: 40px;
	position: relative;
}
#materials::before {
	content: '';
	background: url('assets/images/logo-element.jpg'), var(--color-accent);
	background-blend-mode: darken;
	background-size: cover;
	background-position: center;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#materials .material-list {
	font-size: 1.25em;
	font-weight: 700;
}

@media screen and (min-width: 550px) {
	#materials .material-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row dense;
	}
}

.examples {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media screen and (min-width: 600px) {
	.examples {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media screen and (min-width: 1000px) {
	.examples {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}


/* MASCHINENPARK */

#maschinenpark {
	background: rgb(111 111 111 / 80%);
	position: relative;
}
#maschinenpark::before {
	content: '';
	background: url('assets/images/maschinenpark.jpg');
	background-size: cover;
	background-position: center;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.carousel {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

.carousel-element {
	width: 100%;
	grid-column: 1 / span 2;
}

.carousel-button-prev, .carousel-button-next {
	font-size: 2rem;
	line-height: 1;
}
.carousel-button-prev > i,
.carousel-button-next > i {
	margin: 0;
}

@media screen and (min-width: 560px) and (max-width: 719px), screen and (min-width: 960px) {
	.machine-carousel {
		grid-template-columns: auto 1fr auto;
	}
	
	.carousel-element {
		grid-column: 2;
		order: 2;
	}

	.carousel-button-prev {
		aspect-ratio: 1;
		order: 1;
	}

	.carousel-button-next {
		aspect-ratio: 1;
		order: 3;
	}
}

@media screen and (min-width: 1664px) {
	.machine-carousel {
		grid-template-columns: 1fr;
		position: relative;
	}
	
	.carousel-element {
		grid-column: 1;
	}

	.carousel-button-prev {
		position: absolute;
		right: calc(100% + 40px);
	}

	.carousel-button-next {
		position: absolute;
		left: calc(100% + 40px);
	}
}

.swiper .swiper-slide {
	height: auto;
}

.machine {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.machine .image {
	height: 250px;
}

.machine .title {
	padding: 10px 1rem;
	margin: 0;
}

.machine .type {
	font-weight: 700;
	background: var(--color-subtle-grey);
	padding: 6px 1rem;
}

.machine .details {
	flex: 1;
	padding: 1rem;
}

.machine .details li::before {
	color: #706F6F;
}


/* STELLENANGEBOTE */

#stellenangebote {
	background: rgb(0 0 0 / 50%);
	position: relative;
}
#stellenangebote::before {
	content: '';
	background: url('assets/images/stellenangebote.jpg');
	background-size: cover;
	background-position: center;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.empty-job-list {
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.6;
}
.jobs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media screen and (min-width: 700px) {
	.jobs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.job {
	background-color: rgb(var(--color-accent-rgb) / 80%);
	display: flex;
	flex-direction: column;
	padding: 40px;
}

.job-details {
	display: flex;
	flex-flow: row wrap;
	gap: 1.5em;
	margin-bottom: 1.5rem;
}

.job-detail .icon {
	margin-right: .3em;
}

.job button {
	align-self: flex-start;
	margin-top: auto;
}

#apply-now-button {
	margin-top: 1rem;
}


/* KONTAKT */

#kontakt {
	background: rgb(231 231 231 / 85%);
	position: relative;
}
#kontakt::before {
	content: '';
	background-color: #e7e7e7;
	background-image: url('assets/images/logo-element.jpg');
	background-blend-mode: darken;
	background-size: cover;
	background-position: center;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#contact-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media screen and (min-width: 1000px) {
	#contact-content {
		grid-template-columns: 1fr 1fr;
	}
}

#contact-form {
	background: rgb(255 255 255 / 70%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 25px 20px;
}

#contact-form .title {
	margin: 0;
}

#contact-form button[type="submit"] {
	align-self: flex-start;
	margin-top: auto;
}

#contact-form .user-message {
	padding: 9px 16px;
}

#contact-details {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

@media screen and (min-width: 740px) {
	#contact-details {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 1000px) {
	#contact-details {
		grid-template-columns: 1fr;
	}
}

.contact-detail-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact-detail {
	display: flex;
}

.contact-detail .icon {
	font-size: 2.5rem;
	color: var(--color-accent);
	width: 2.5rem;
	margin-right: 1.5rem;
}

.contact-detail .title {
	margin: 0;
}

.contact-detail .sub-text {
	color: var(--color-accent);
}

#iso-certificate {
	grid-column-start: 1;
	background: rgb(255 255 255 / 70%);
	display: flex;
	gap: 24px;
	padding: 16px;
	flex-wrap: wrap;
}

@media screen and (min-width: 570px) {
	#iso-certificate {
		flex-wrap: nowrap;
	}
}

@media screen and (min-width: 740px) {
	#iso-certificate {
		grid-column-end: 3;
	}
}

@media screen and (min-width: 1000px) {
	#iso-certificate {
		grid-column-end: 1;
	}
}

#iso-certificate .image {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}


/* FOOTER */

#footer {
	padding: 40px 0;
}

#footer .section-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

@media screen and (min-width: 800px) {
	#footer {
		gap: 0;
	}

	#footer .section-content {
		flex-direction: row-reverse;
	}
	
	.copyright-notice {
		text-align: left;
	}
}
	
.copyright-notice {
	text-align: center;
}

/* light-gallery */
.lg-container .lg-icon {
	border-radius: 0;
}

/*General Overrides*/
h1, .h1 {
	font-size: 28px;
}
@media screen and (min-width: 700px) {
	h1, .h1 {
		font-size: 40px;
	}
}
@media screen and (min-width: 1000px) {
	h1, .h1 {
		font-size: 52px;
	}
}

@media print {
	h1, .h1 { font-size: 1.3rem !important; }
	h2, .h2 { font-size: 1.25rem !important; }
	h3, .h3 { font-size: 1.2rem !important; }
	h4, .h4 { font-size: 1.15rem !important; }
	h5, .h5 { font-size: 1.1rem !important; }
	h6, .h6 { font-size: 1.05rem !important; }

	* {
		background: #fff !important;
		color: #000 !important;
	}

	#header {
		border: none;
		position: static !important;
	}

	#header-menu-opener {
		display: none !important;
	}

	#leistungen .section-content {
		grid-template-columns: 1fr 1fr !important;
	}

	.material-list li {
		font-size: 1rem !important;
	}

	#unsere-staerken .examples {
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}

	.carousel-button-prev, .carousel-button-next {
		display: none !important;
	}

	.machine-carousel .swiper-wrapper {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		box-sizing: border-box !important;
		transform: none !important;
	}

	.machine {
		height: auto !important;
		margin: 0 !important;
	}

	.jobs {
		grid-template-columns: 1fr 1fr !important;
	}

	#footer {
		display: none !important;
	}
}