/**********/
/* RESETS */
/**********/
* {padding: 0; margin: 0; border: 0;}
html {scroll-behavior: smooth;}
body, html {height: 100%; cursor: default; min-height: 100%;}
body {background-color: #333;}
.clear {float: none; clear: both;}

/* Special-Styles */
sup {vertical-align: super; font-size: smaller;}
.center {text-align: center !important;}
.width-80p {width: 80% !important; height: auto !important; }
.width-100p {width: 100% !important; height: auto !important;}
.margin-top {margin-top: 2em !important;}
.margin-bottom {margin-bottom: 2em !important;}
.padding-top-1em {padding-top: 1em !important;}
.no-margin {margin: 0 !important;}
.no-padding {padding: 0 !important;}
.font-weight-bold {font-weight: bold !important;}
.font-size-1-25em {font-size: 1.25em !important;}
.font-size-0-75em {font-size: 0.75em !important;}
.strong-blue {color: #001a45 !important;}
.blue-bullet {display: block; border-left: 1.35em solid #14527d; padding-left: 0.5em; border-bottom: 1px solid #14527d; padding-bottom: 0.125em;}

/**************/
/* ESSENTIALS */
/**************/
/* Column */
.col4 {float: left; width: 22.7499999%; position: relative; min-height: 1em; margin-right: 3%;}
.col4.last {float: right; margin-right: 0;}
.col3 {float: left; width: 31.99%; position: relative; min-height: 1em; margin-right: 2%;}
.col3.last {float: right; margin-right: 0;}
.col2 {float: left; width: 48%; position: relative; min-height: 1em;}
.col2.last {float: right;}

/* Link and Action-Button */
a {text-decoration: none; cursor: pointer; color: #555;}
.action-button {background:#14527d; padding: 0.75em 1.125em; border-radius: 0.375em; text-decoration:none; color: #fff !important; cursor: pointer;  transition: all 0.5s ease; display: inline-block; font-size: 1em;}
.action-button:hover, .action-button:active, .action-button:focus {background-color: #001A45 !important; color: #fff !important; padding:0.75em 1.5em;}
.action-button strong {color: #fff !important;}

/* Sprungmarken */
.anchor-offset {scroll-margin-top: 100px;}
.anchor-offset-datenschutz {scroll-margin-top: 130px;}

/**********/
/* HEADER */
/**********/
#header-wrapper {height: 6.75em; position: fixed; z-index: 999; width: 100%; top: 0; left: 0; overflow: hidden;}
/* Top Naviagtion */
.navigation-wrapper .company-logo {width: 6em; filter: brightness(0) invert(1); padding: 1.75em;}
.navigation-wrapper {background-color: #14527d;}
.navigation {list-style: none;}
.navigation li {float: left;}
.navigation li a {color: #fff; font-size: 1em; padding: 0 0.5em; display: block;}
.navigation li a:hover, .navigation li a:active, .navigation li a:focus {text-decoration: underline;}
.navigation.quick {position: absolute; right: 2em; top: 1.5em;}
.navigation.solutions {position: absolute; right: 2em; top: 3.5em; border-top: 1px solid #cecece;}
.navigation.solutions li a {font-size: 1.25em; letter-spacing: -1px; margin-top: 0.25em;}
.navigation.solutions li a:hover, .navigation.solutions li a:active , .navigation.solutions li a:focus {text-decoration: underline;}

/******************/
/* VIDEOCONTAINER */
/******************/
#video-container {display: flex; justify-content: center; align-items: center; background-color: #333; overflow: hidden; position: relative; height: auto;}
#video-container video {width: 100%;}
.slogan-wrapper {position: absolute; max-width: 75em; margin: 0 auto; bottom: 20%;}
.company-slogan {font-size: 4em; color: #fff; text-shadow: 1px 1px 2px #444; line-height: 1.25em; text-align: center;}
.jump-down {text-align: center;}
.jump-down a {color: #fff; font-size: 1.5em;}

/*****************/
/* SWIPER SLIDER */
/*****************/
.swiper {transition: height 0.3s ease;}
.swiper-pagination {color: #114f4f !important; bottom: 0em !important;}
.swiper-pagination-bullet {height: 0.75em !important; width: 4em !important; border-radius: initial !important; margin: 0 0.75em !important;}
.swiper-pagination-bullet-active {background-color: #001a45 !important; height: 0.75em !important; width: 4em !important;}
.swiper-button-next {top: 0 !important; color: #333 !important; background-color: #dce2de; padding: 1em; border-radius: 3em; height: 1em !important;	width: 1em !important; right: -1em !important; border: 1px solid #333;}
.swiper-button-prev {left: -1em !important; color: #333 !important; background-color: #dce2de; padding: 1em; border-radius: 3em; height: 1em !important; width: 1em !important; top: 0 !important; border: 1px solid #333;}
.swiper-button-next::after, .swiper-button-prev::after {font-size: initial !important;}

/*****************/
/* SCHMUCKBILDER */
/*****************/
.schmuckbild-1 {background-color: #3081b9 !important; background-image: url('../images/startseite/schmuckbild.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; transition: all 0.5s ease;}
.schmuckbild-2 {background-color: #afd5ec !important; background-image: url('../images/karriere/schmuckbild.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; transition: all 0.5s ease;}
.schmuckbild-3 {background-color: #afd5ec !important; background-image: url('../images/termine/schmuckbild.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; transition: all 0.5s ease;}

/******************/
/* COOKIE-HINWEIS */
/******************/
@keyframes slideInUpRight {from {transform: translate(100%, 100%); opacity: 0;} to {transform: translate(0, 0); opacity: 1;}}
.hinweis-box {position: fixed; bottom: 0; right: 0; background: #013232; color: #fff; padding: 1.25em 1.5em; z-index: 999999; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3); font-size: 1em; width: 17em; display: flex; flex-direction: column; line-height: 1.5em; opacity: 0; transform: translate(100%, 100%); animation: slideInUpRight 1s ease-out forwards;}
.hinweis-box a {color: #A6DCFF !important;}
.hinweis-box a:hover, .hinweis-box a:active, .hinweis-box a:focus {border-bottom: 2px dotted;}
.hinweis-box button {background-color: #fff; padding: 1em; border-radius:6px; text-decoration:none; color: #000 !important; cursor: pointer; transition: all 0.5s ease; margin-top: 1em;}
.hinweis-box button:hover {background-color: #000 !important; color: #fff !important;}

/***************/
/* CONTENTAREA */
/***************/
/* Essentials */
.page .first-wrapper {padding-top: 6.75em;}
.content-wrapper {background-color: #fff;}
.content-wrapper.grey {background-color: #E1FFFF;}
.content {width: 75em; padding: 2.75em 0; margin: 0 auto; position: relative;}
.content.text {padding: 4.75em 0;}
.content .col3 .inner {padding: 0 2em;}
.content .col2 .inner {padding: 0 2em;}
.content img {width: 100%; height: auto; display: block;}

/* TYPO */
.content h1, .content .as-h1 {text-align: center; color: #333; font-size: 2em; margin: 0; text-shadow: 1px 1px 1px #fff;}
.content h1 .smaller, .content .as-h1 .smaller {font-size: 0.75em;}
.content h2 {color: #333; margin-bottom: 0.5em; font-size: 1.5em;}
.content h2.white {color: #fff;}
.content h3 {color: #333; margin-bottom: 0.5em; font-size: 1.35em;}
.content h4 {color: #333; margin-bottom: 0.5em; font-size: 1.135em;}
.content strong {color: #555;}
.content p strong {color: #555;}
.content p {line-height: 1.5em; font-size: 1.135em; margin-bottom: 1em; color: #434343; text-align: justify;}
.content p.smaller {font-size: 0.875em; line-height: 1.25em;}
.content p.smaller.grey {background-color: #f1fcfc; padding: 1em;border: 1px solid #c1dfdf; margin-top: 1px;}
.content table {line-height: 1.5em; font-size: 1.135em; margin-bottom: 1em; color: #434343;}
.content table tr td {padding-right: 1em;}
.content ul {list-style: none; padding-bottom: 1.5em; text-align: left;}
.content ul li {line-height: 1.5em; font-size: 1em; color: #434343; margin-bottom: 0.5em; font-size: 1.135em;}
.content ul.white li {color: #fff;}
.content ul.blue li {color: #001a45;}
.content ul.white.bigger {font-size: 1.35em; margin: 0; padding: 0;}
.content ul.blue.bigger {font-size: 1.35em; margin: 0; padding: 0;}
.content ul.checklist li {display: flex; align-items: flex-start; gap: 0.5em;}
.content ul.checklist li::before {content: "✓"; color: #a2c037; font-weight: bold; font-size: 1.5em;}

/* Links und Action-Button */
.content a {color: #002c57;}
.content a:hover, .content a:active, .content a:focus {color: #005555;}
.content a.link {border-bottom: 2px dotted; transition: all 0.5s ease;}
.content a.link:hover, .content alink:active, .content a.link:focus {border-bottom: 2px solid;}
.content .action-button:hover, .content .action-button:active, .content .action-button:focus {background-color: #fff; color: #7bb33a;}

/* Cards */
.content .card {background:#fdfdfd; border:1px solid #dce2de; padding:16px; border-radius:8px; margin-bottom: 1.5em;}
.content .card ul, .content .card ul.checklist {padding-bottom: 0;}

/*************/
/* INDEX.PHP */
/*************/
/* Logo */
.company-logo-content {width: 15em !important; margin: 0 auto; display: block; margin-bottom: 1em;}
/* Image-Wrapper */
.image-wrapper {text-align: center;}
.image-wrapper.border-line {border: 1px solid #001a45;}
/* Image-Overlay */
#overlay {transition: all 0.5s ease;}
.overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; text-align: center;}
.overlay-content {position: relative; background: #fff; padding: 1em; border-radius: 0.5em; max-width: 80%; max-height: 80%; text-align: center; border: 1px solid #000; box-shadow: 0.125em 0.25em 0.5em #000; overflow: scroll;}
.overlay img {max-width: 85%; max-height: 85%; width: 100%; height: auto; display: inline-block;}
.hidden {display: none;}
/* Effekt für Infoboxen */
.content .scaling-element {transition: all 0.5s ease;}
.content .scaling-element:hover {transform: scale3d(1.05, 1.05, 1);}
/* Elements */
.content .info-boxes {background-color: #001a45; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); border-radius: 0.5em; border: 2px solid #e1ffff;}
.content p.service-company {color: #103d82; text-align: center; margin-top: 0.875em; font-size: 1.75em; line-height: 1em;}
.content p.service-company .smaller {font-size: 0.75em;}
.content .delaval-logo {width: 80%; height: auto; margin: 0 auto; margin-top: 1.5em;}
.content .quality-logo {margin-top: 4em; width: 80%; height: auto;}
.content .img-effects {width: 80%; height: auto; margin: 0 auto; margin-bottom: 1em;}
.content .delaval-online-katalog {transform: rotate(2.25deg); width: auto; margin-top: 1em; margin-bottom: 3em; box-shadow: 0.125em 0.25em 0.5em #4D4D4D; height: 35em; text-align: center; display: inline-block;}
.seo-list strong {padding: 0.5em 0.75em; display: block; background-color: #e1ffff; margin-left: -0.75em; margin-bottom: 0.25em;}

/****************/
/* KARRIERE.PHP */
/****************/
.in-list-button strong {color: #fff !important;}
.in-list-button {background-color: #dce2de; display: block; margin-bottom: 1em; padding: 0.75em; border-radius: 0.5em 0.5em 0 0.5em; font-size: 1.25em; color: #fff !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);}
.in-list-button:hover {background-color: #002828 !important; box-shadow: none;}
.in-button {background-color: #dce2de; display: block; color: #055 !important; padding: 1em 1.25em; border-radius: 0.5em; font-size: 0.875em;}
.in-button:hover, .in-button:active, .in-button:focus {background-color: #001a45; color: #fff !important;}
p.teaser-font-karriere {color: #001a45; font-size: 1.75em !important; line-height: 1.875em; text-align: left; padding-right: 1em;}
p.teaser-font-karriere strong {color: #001a45 !important;}
p.job-content-teaser-text {font-size: 1.25em; line-height: 1.875em;}
p.job-content-teaser-text .highlighted {font-size: 1.25em;font-weight: bold;}

/***************/
/* TERMINE.PHP */
/***************/
.page.termine .image-frame {border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); max-width: 100%;}
.page.termine .image-frame img {display: block; width: 100%; height: auto;}
.page.termine .text h2 {font-size: 1.65em; color: #fff; background-color: #001a45; text-align: center; padding: 0.5em; margin: 0;}
.page.termine .text p.event-data {color: #005555; text-align: center; background-color: #fff; padding: 0.5em; margin: 0;}
.page.termine .text a.action-button {color: #fff; text-shadow: none; font-size: 0.875em; background-color: #116F0C; display: inline-block;}
.page.termine .text strong {font-size: 1.125em;}
.page.termine .event-content {padding: 1em 1.5em; font-size: 1.125em; line-height: 1.5em; background-color: rgba(255, 255, 255, 0.25);}
.page.termine .event-content ul {padding-bottom: 0.5em;}
.page.termine .event-content ul li {color: #fff;}

/**************/
/* FOOTERAREA */
/**************/
#footer-wrapper {background-color: #001A45;}
#footer {width: 75em; margin: 0 auto;}
#footer h2 {color: #fff; margin-bottom: 0.75em; border-bottom: 1px solid; padding-bottom: 0.25em; width: 80%; font-size: 1.25em;}
#footer .navigation {list-style: none; }
#footer .navigation li {margin-bottom: 0.25em; float: none;}
#footer .navigation li a {padding: 0;}
#footer .col4  {padding: 3em 0 5em;}
#footer .col4 img {width: 100%;}
#footer .footer-info {color: #fff; display: block; text-align: right; font-size: 0.875em; padding-right: 0.5em;}
#footer .navigation a {color: #fff; transition: all 0.5s ease;}
#footer .navigation a:hover, #footer .navigation a:active, #footer .navigation a:focus {padding-left: 0.25em; border-left: 0.5em solid #fff; text-decoration: none;}
#footer .company-logo {filter: brightness(0) invert(1); width: 65% !important; float: right; margin-bottom: 0.75em;}
/* To-Top-Navigation */
#bottom-spacer {height: 5em; display: none;}
#to-top {position: fixed; right: 3em; bottom: 3em; display: none; z-index: 999999;}
#to-top a {background-color: #001a45; color: #fff; font-size: 1.75em; padding: 0.5em 0.65em; border-radius: 2em;}
#to-top a:hover, #to-top a:focus, #to-top a:active {background-color: #3876A1; color: #fff; transition: all 0.5s ease;}

/*********/
/* FONTS */
/*********/
h1, h2, h3, h4, h5, h6 {font-family: "Roboto", sans-serif; font-weight: 300;}
.action-button {font-family: "Lato", sans-serif; letter-spacing: 0.1px; font-weight:600;}
.navigation-teaser-wrapper {font-family: "Lato", sans-serif; letter-spacing: 0.1px;}
#header .main-navigation .navigation {font-family: "Roboto", sans-serif;}
.company-slogan, .slogan-wrapper-mobil {font-family: "Roboto", sans-serif; letter-spacing: -1px; font-weight: 300;}
.company-slogan .partner, .slogan-wrapper-mobil .partner {font-weight: 400;}
.company-slogan .locations, .slogan-wrapper-mobil .locations {font-size: 0.65em;}
.content {font-weight: 300; font-family: "Roboto", sans-serif; letter-spacing: 0.1px;}
.navigation {font-family: "Roboto", sans-serif;}
.navigation.solutions {font-family: "Roboto Flex", sans-serif;}
#footer-wrapper {font-family: "Roboto", sans-serif;}
.highlighted {font-family: Lexend;}
.in-list-button strong {font-family: Lexend;}
.hinweis-box {font-family: "Roboto Flex", sans-serif;}
.hinweis-box button {font-weight:600;}
.mobil-navigation {font-family: "Roboto Flex", sans-serif;}

/******************/
/* MOBIL SETTINGS */
/******************/

/* PRESETS */
.mobil-navigation-button {display: none; right: 0; bottom: 0; left: 0; text-align: center; background-color: #001a45; height: 3.75em; position: fixed; z-index: 999999;}
.mobil-navigation-button .button-wrapper {background-color: #001a45; color: #fff; font-size: 1.75em; padding: 0.5em 0.65em; border-radius: 2em; bottom: 0.5em; position: relative;	width: 1em; text-align: center; display: inline-block; cursor: pointer;}
.mobil-navigation {display: none; background-color: #001a45; height: 100%; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999;}
.mobil-navigation {overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
.mobil-navigation::-webkit-scrollbar {display: none;}
.mobil-navigation ul {list-style: none; padding: 3em; margin-bottom: 5em;}
.mobil-navigation ul li a {color: #fff; font-size: 1.5em; margin-bottom: 0.25em; border-bottom: 1px solid #fff; display: block; padding: 0.25em 0.5em;}
.mobil-navigation ul li a:hover, .mobil-navigation ul li a:active, .mobil-navigation ul li a:focus {background-color: #e1ffff; color: #001a45; border-bottom: 1px solid #e1ffff;}

.slogan-wrapper-mobil {display: none; background-color: #14527d; text-align: center;}
.company-slogan-mobil {font-size: 1.35em; color: #fff; padding: 1em;}
.company-logo-content-mobil {width: 80%; margin-top: 1.5em; filter: brightness(0) invert(1);}

@media only screen and (min-width : 0em) and (max-width : 78em)
{
	.content, #footer {width: 60em;}
	.slogan-wrapper {max-width: 60em;}
	.company-slogan {font-size: 2.75em;}
	.content h1, .content .as-h1 {font-size: 1.75em;}
	.content h2 {font-size: 1.25em;}
	.content p, .content table, .content ul li {font-size: 1em;}
	.content .col3 .inner {padding: 0 1em;}
	.company-logo-content {width: 17em !important;}
	.in-list-button {font-size: 1.125em;}
	p.teaser-font-karriere {font-size: 1.5em !important;}
}

@media only screen and (min-width : 0em) and (max-width : 64.75em)
{	
	.content, #footer {width: 45em;}
	.slogan-wrapper {max-width: 45em;}
	.company-slogan {font-size: 2.25em;}
	.content ul li {hyphens: auto; font-size: 1em;}
	.col2 {float: initial; width: initial; margin: initial;}
	.col2.last {float: initial; width: initial;}
	.content.text, .content {padding: 1.5em 2em;}
	.content ul {padding-bottom: 1em;}
	.navigation.solutions li a {font-size: 1.125em;}
	.navigation li a {font-size: 0.875em;}
	.navigation.solutions {top: 3.125em;}
	.content h1, .content .as-h1 {font-size: 1.5em;}
	.action-button {display: block; text-align: center;}
	.action-button .breaker {display: block;}
	#footer h2 {font-size: 1em; width: 95%;}
	.karriere .content ul.white.bigger {margin-bottom: 2em;}
	.swiper .col4 h2 {display: none;}
}

@media only screen and (min-width : 0em) and (max-width : 52em)
{
	.company-logo-content {max-width: 75% !important;}
	.content h1, .content .as-h1 {font-size: 1.25em;}
	.content h2 {font-size: 1.125em;}
	.content.text, .content {padding: 1.25em 1.5em;}	
	.content .scaling-element {transition: initial;}
	.content .scaling-element:hover {transform: initial;}
	.content h2.white, .content ul.white li {color: #434343;}
	.content ul.white li {font-size: 1em;}
	.content .info-boxes {background-color: initial; box-shadow: initial; border-radius: initial; border: initial;}
	.content .col3 .inner {padding: initial;}
	.col3 {float: initial; width: initial; margin: initial; margin-bottom: 1em;}
	.col3.last {float: initial; width: initial; margin-bottom: 0;}
	.info-boxes {height: auto !important;}
	.info-boxes h2 {border: 1px solid #dce2de; background-color: #eff5f1; padding: 0.35em;}
	.schmuckbild {background-image: initial; background-color: #fff !important;}
	.swiper img {width: 100%;}
	.swiper-slide h2 {border: 1px solid #dce2de; background-color: #eff5f1; padding: 0.35em;}
	p.teaser-font-karriere, p.teaser-font-karriere strong {color: #434343 !important;}
	p.teaser-font-karriere, .karriere .content ul.white.bigger {font-size: 1.125em !important}
	.in-list-button {box-shadow: initial;}	
	.page.termine .text strong {color: #434343; font-size: 1em; text-shadow: initial;}
	.page.termine .text p {color: #434343; text-shadow: initial;}
	.page.termine .image-frame {border-radius: initial; box-shadow: initial;}
	.page.termine .text a.action-button {background-color: #055;}	
}

@media only screen and (min-width : 0em) and (max-width : 50em)
{
	body {background-color: #fff;}
	.anchor-offset {scroll-margin-top: initial;}
	.anchor-offset-datenschutz {scroll-margin-top: initial;}
	.mobil-navigation-button {display: block;}
	#to-top a, #to-top a:hover, #to-top a:active, #to-top a:focus {background-color: #001a45;}
	.navigation-wrapper, #footer-wrapper, .content .img-effects {display: none;}
	.content-wrapper.grey {padding-top: initial;}
	.company-slogan {font-size: 1.65em;}
	.action-button .breaker {display: initial;}
	.content {width: auto;}	
	.content .scaling-element:hover {transform: initial;}
	.col4 {float: initial; width: initial; margin: initial; margin-bottom: 1em;}
	.col4.last {float: initial; width: initial;}
	#to-top {right: 0; bottom: 0; left: 0; text-align: center; background-color: #001a45; height: 3.75em;}
	#bottom-spacer {display: block;}
	.swiper-wrapper {margin-bottom: 1.5em;}
	.content p {text-align: left;}
	table tr td {display: block;}
	.swiper-button-next {right: 0.5em !important; top: 0.125em !important; font-size: 0.75em;}
	.swiper-button-prev {left: 0.5em !important; top: 0.125em !important; font-size: 0.75em;}
	.content .delaval-online-katalog {transform: initial; height: auto; width: 100%;}
	.swiper .col4 h2 {display: block;}
}

@media only screen and (min-width : 0em) and (max-width : 24em)
{
	#video-container, #header-wrapper, .company-logo-content {display: none;}
	.slogan-wrapper-mobil {display: block;}
	.padding-top-1em {padding-top: initial;}
	.content ul {padding-bottom: initial;}
	.swiper-pagination-bullet, .swiper-pagination-bullet-active {width: 2em !important;}
	.content .col3 .inner {padding: 0;}
}