/* definition of basecolors */
:root {
  --color-petrol: #004752;
  --color-petrolopacity: #004752dd;
  --color-petrollightcookiebanner: #105762;
  --color-warmbeigegray: #E5D5C9;
  --color-lightbeigegray: #FBF4EF;
  --color-white: #FFFFFF;
  --color-inactive: #999999;
  --color-maritimeapplications: #05406E;
  --color-meltingcastingtech: #9B232C;
  --color-industrial
applications: #4D4849;
  --color-serviceviolett: #5e4877;
  --color-sustainabilitygreen: #36563c;
  --swiper-navigation-color: var(--color-petrol)
}

.gridelement-bgcolor-petrol {
	--swiper-navigation-color: var(--color-warmbeigegray)
}

body {
	margin:0;
	padding:0;
	border:0;

	font-family: 'Outfit';

	color:var(--color-petrol);

	overflow-x: hidden;
}

a {
	color:inherit;
	text-decoration: none;
}

h1 {
	/* Desktop/Headline H1 */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-size: 55px;
	line-height: 120%;
	margin:0 0 0.5em 0;
	padding:0;
}

h2 {
	/* Desktop/Headline H2 */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-size: 44px;
	line-height: 130%;
	/* or 57px */
	margin:0 0 0.2em 0;
	padding:0;
}

h3 {
	/* Desktop/Headline H3 */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-size: 35px;
	line-height: 120%;
	/* identical to box height, or 42px */
	margin:0;
	padding:0;
}

h4 {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	line-height: 130%;
	margin: 0 0 0.3em 0;
	padding: 0;
}

h5 {
	/* Desktop/Headline H5 */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	/* or 23px */
	margin:0;
	padding:0;
}

p {
	/* Desktop/Copytext */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	/* identical to box height, or 26px */
	margin:0 0 1em 0;
	padding:0;
}

@media (max-width:768px) {
	h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 25px;
	}

	h3 {
		font-size: 20px;
	}

	h4 {
		font-size: 17px;
	}

	h5 {
		font-size: 14px;
	}


	p {
		font-size: 17px;
	}
}

#maincontent ul {
	/* Desktop/Copytext */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	/* identical to box height, or 26px */
	margin:0 0 1em 0;
	padding:0;
	list-style-type: none;
}


#maincontent ul li {
	padding-left: 1.5em;
	position: relative;
}

#maincontent ul li::before {
	font-family: 'Font Awesome 6 Free';
	content: '\f00c';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0em;
}

#maincontent ul a:not(.button),
#maincontent p a:not(.button) {
	font-weight: 700;
	position: relative;
}

#maincontent ul a:not(.button):before,
#maincontent p a:not(.button):before {
	content:' ';
	position: absolute;
	left:0;
	right:0;
	bottom:-1px;
	height: 1px;
	background: var(--color-petrol);
}

#maincontent ul a:not(.button):after,
#maincontent p a:not(.button):after {
	content:' ';
	position: absolute;
	left:0;
	right:0;
	bottom:-1px;
	height: 1px;	
	background: linear-gradient(142.55deg, #F39768 0%, #EF9265 18%, #E3865F 37%, #D07155 56%, #B55446 75%, #932F33 95%, #89242E 100%);
	transition:opacity 0.3s ease;
	opacity: 0;
}

#maincontent ul a:not(.button):hover:after,
#maincontent p a:not(.button):hover:after {
	opacity: 1;
}

.label {
	/* Desktop/Label */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 100%;
	text-transform: uppercase;
}

@media (max-width:768px) {
	.label {
		font-size: 14px;
	}
}

figure {
	margin:0;
	padding:0;
}


.frame-space-before-extra-small {	margin-top: 0.5em; }
.frame-space-before-small {	margin-top: 1em; }
.frame-space-before-medium {	margin-top: 2em; }
.frame-space-before-large {	margin-top: 3em; }
.frame-space-before-extra-large {	margin-top: 5em; }

.frame-space-after-extra-small {	margin-bottom: 0.5em; }
.frame-space-after-small {	margin-bottom: 1em; }
.frame-space-after-medium {	margin-bottom: 2em; }
.frame-space-after-large {	margin-bottom: 3em; }
.frame-space-after-extra-large {	margin-bottom: 5em; }


.button {
	border-radius:24px;
	padding: 12px 32px;
	border: 4px solid transparent;


	/* Desktop/Link */
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;

	position: relative;
}

.button-flat {
	padding-top: 4px;
	padding-bottom: 4px;
}

.button:before {
	content:'';
	position: absolute;
	top: -3px;
	bottom: -3px;
	left: -3px;
	right: -3px;
	border-radius:22px;
	background: var(--color-petrol);
	z-index:-1;
	transition:opacity 0.3s ease;	
}


.button:after {
	content:'';
	position: absolute;
	top: -3px;
	bottom: -3px;
	left: -3px;
	right: -3px;
	border-radius:22px;
	background: linear-gradient(142.55deg, #F39768 0%, #EF9265 18%, #E3865F 37%, #D07155 56%, #B55446 75%, #932F33 95%, #89242E 100%);
	z-index:-1;
	opacity: 0;
	transition:opacity 0.3s ease;
}
.button.active:after,
.button:hover:after {
	opacity: 1;
}
.button.active:before,
.button:hover:before {
	opacity: 0;
}

.button-small {
	padding: 8px 24px;
}

.button-primary {
	background: var(--color-petrol);
	color: var(--color-warmbeigegray);
	background-clip: padding-box;
}
.button-primary:before {
	background: var(--color-petrol);
}

.button-secondary {
	background: var(--color-white);
	color: var(--color-petrol);
	background-clip: padding-box;
}
.button-secondary:before {
	background: var(--color-petrol);
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;	
}
.button-secondary:after {
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;	
}



.bgcolor-warmbeigegray .button-secondary,
.gridelement-bgcolor-warmbeigegray .button-secondary {
	background-color: var(--color-warmbeigegray);
}


.bgcolor-sustainabilitygreen .button-secondary,
.gridelement-bgcolor-sustainabilitygreen .button-secondary {
	background-color: var(--color-sustainabilitygreen);
}

.bgcolor-industrial
applications .button-secondary,
.gridelement-bgcolor-industrial
applications  .button-secondary{
	background-color: var(--color-industrial
applications);
}

.bgcolor-meltingcastingtech .button-secondary,
.gridelement-bgcolor-meltingcastingtech  .button-secondary{
	background-color: var(--color-meltingcastingtech);
}

.bgcolor-maritimeapplications .button-secondary,
.gridelement-bgcolor-maritimeapplications  .button-secondary{
	background-color: var(--color-maritimeapplications);
}

.bgcolor-petrol .button-secondary,
.gridelement-bgcolor-petrol  .button-secondary{
	background-color: var(--color-petrol);
}

.bgcolor-violett .button-secondary,
.gridelement-bgcolor-violett  .button-secondary{
	background-color: var(--color-serviceviolett);
}



.button-primary-dark {
	background: var(--color-warmbeigegray);
	color: var(--color-petrol);
	background-clip: padding-box;
}
.button-primary-dark:before {
	background: var(--color-warmbeigegray);
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
}
.button-primary-dark:after {
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
}

.button-secondary-dark {
	background: var(--color-white);
	color: var(--color-warmbeigegray);
	background-clip: padding-box;
}
.button-secondary-dark:before {
	background: var(--color-white);
}

.ce-headline-center {
	text-align: center;
}

.ce-headline-right {
	text-align: right;
}

table.table-lines {
	border-collapse: collapse; 
}

table.table-lines td,
table.table-lines th {
		vertical-align: top;
}

table.table-lines tr {
	border-bottom: 1px solid #4e7d82;
}