html { font-size: 14px; }
header { position: fixed; width: 100%; top: 0; font-size: 12px; }
header a,
header a:visited,
header a:link { color: #fff; }

.header-contact-bar { display: block; background: radial-gradient(circle, rgba(18, 138, 232, 0.95) 53%, rgba(39, 138, 204, 0.95) 100%); }
.header-contact-bar > div { padding: 10px; color: #fff; font-size: 13px; }
.header-contact-bar > div > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.header-contact-bar a { font-weight: normal; }

.header-main-bar { background: radial-gradient(circle, rgba(0,0,0,0.7) 13%, rgba(64,64,64,0.95) 100%); box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16), 0 0 3px 0 rgba(0,0,0,0.12); }
.header-main-bar > div { display: flex; justify-content: space-between; }
.header-main-bar nav { display: flex; align-items: center; }
.header-main-bar nav ul { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.header-main-bar nav ul li a { color: #fff; padding-right: 10px; border-right-width: 1px; border: solid 0 #888; border-right-width: 1px; }
.header-main-bar nav ul li:last-child a { border: 0; }
.header-main-bar nav ul li a:hover { color: #d2d2d2; }
.header-main-bar button.icon-btn--menu { background: none; margin-right: 15px; }
.header-main-bar button.icon-btn--menu::before { font-size: 28px; line-height: 22px; color: #fff; }
.header-main-bar .mobile-nav-icon { display: none; padding-right: 20px; }

nav.mobile { display: flex; justify-content: end; }
nav.mobile ul { background: rgba(64,64,64,0.95); }
nav.mobile ul a { color: #fff; font-size: 12px; padding: 10px; border: solid 0 #888; border-top-width: 1px; display: block; }
nav.mobile ul a:hover { color: #d2d2d2; }

@media only screen and (max-width: 680px) {
	.header-main-bar nav ul { display: none; }
	.header-main-bar .mobile-nav-icon { display: block; }
}
@media only screen and (min-width: 681px) {
	nav.mobile { display: none; }
}
@media only screen and (max-width: 480px) {
	header img { width: 262px; height: 25px; }
}


.header-visual { background-image: url(/images/visual-header.webp); background-size: cover; background-position: center; position: relative; height: 450px; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); }
.header-visual .wrapper-abs-pos { position: absolute; bottom: 50px; background-color: rgba(57, 57, 57, 0.82); padding: 10px 20px; border-radius: 8px; margin: 10px; }
.header-visual h2 { font-size: 3.7em; color: #fff; }
.header-visual h5 { font-size: 1.5em; color: #fff; border: solid 0 #15b3ff; border-top-width: 1px; padding-top: 5px; margin-top: 5px; font-weight: normal; float: left; color: #dff908; }
@media only screen and (max-width: 992px) {
	.header-visual .wrapper-abs-pos { bottom: 40px; }
	.header-visual { height: 400px; }
	.header-visual h2 { font-size: 3.0em; }
	.header-visual h5 { font-size: 1.3em; }
}
@media only screen and (max-width: 768px) {
	.header-visual .wrapper-abs-pos { bottom: 30px; }
	.header-visual { height: 350px; }
	.header-visual h2 { font-size: 2.3em; }
	.header-visual h5 { font-size: 1.2em; }
}
@media only screen and (max-width: 480px) {
	.header-visual .wrapper-abs-pos { bottom: 20px; }
	.header-visual { height: 300px; }
	.header-visual h2 { font-size: 1.6em; }
	.header-visual h5 { font-size: 1.0em; }
}
.header-visual .overlay { background-color: rgba(25, 25, 25, 0.2); height: 100%; }


.services { border: solid 0 #e1e1e1; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; padding: 20px 0; background: #fdfff9; }
#anchor-services { position: relative; top: -105px; }
@media only screen and (max-width: 480px) {
	#anchor-services { top: -125px; }
}
.services h1 { margin-bottom: 20px; font-size: 1.67em; }
.services p { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.services p.green { color: #4b8b08; }
.services div.split { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.services div.split div { border: solid 0 #90c1ff; border-left-width: 1px; padding-left: 15px; flex: 1; box-sizing: border-box; }
.services div.split div:nth-child(1) { min-width:335px; max-width: 350px; }
.services div.split div:nth-child(2) { min-width:300px; max-width: 330px; }
.services div.split div.service-illustration { border: 0; padding: 0; display: flex; min-width: 330px; }
.services div.split div.service-illustration img { margin: auto; }
.services div.split h3 { margin-bottom: 10px; }
.services ul { list-style: disc; margin-left: 15px; }
.services ul li { padding: 5px; }
@media only screen and (max-width: 480px) {
	.services div.split div:nth-child(1) { min-width:300px; }
	.services div.split div:nth-child(2) { min-width:300px; }
	.services div.split div.service-illustration { min-width: 300px; }
}

.operational-area { border: solid 0 #e1e1e1; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; padding: 20px 0; }
#anchor-operational-area { position: relative; top: -105px; }
@media only screen and (max-width: 480px) {
	#anchor-operational-area { top: -125px; }
}
.operational-area h2 { margin-bottom: 20px; }
.operational-area p { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.operational-area p.blue { color: #35a3d9; }
.operational-area div.split { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 20px; }
.operational-area div.split div { flex: 1; }
.operational-area div.split div:nth-child(1) { min-width: 500px; max-width: -moz-fit-content; max-width: fit-content; }
.operational-area div.split div:nth-child(2) { min-width: 280px; max-width: -moz-fit-content; max-width: fit-content; }
@media only screen and (max-width: 600px) {
	.operational-area div.split div { flex: 1 1 auto; }
	.operational-area div.split div:nth-child(1) { min-width: auto; }
}
.operational-area div.split h3 { margin-bottom: 15px; }
.operational-area div.split .vertical-line { border: solid 0 #90c1ff; border-left-width: 1px; padding-left: 15px; margin-bottom: 20px; }
.operational-area div.split .vertical-line:last-child { margin-bottom: 0; }
.operational-area div.split .vertical-line h5 { margin-bottom: 5px; }
.operational-area img { width: 100%; height: auto; }
.operational-area ul { list-style: disc; margin-left: 15px; }
.operational-area ul li { padding: 5px; }
.operational-area ul li a { font-weight: normal; }

.price-list { border: solid 0 #e1e1e1; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; padding: 20px 0; }
#anchor-price-list { position: relative; top: -105px; }
@media only screen and (max-width: 480px) {
	#anchor-price-list { top: -125px; }
}
.price-list h2 { margin-bottom: 20px; }
.price-list p { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.price-list p.blue { color: #35a3d9; }
.price-list div.flex { display: flex; flex-wrap: wrap; gap: 20px 30px; justify-content: space-between; }
.price-list div.flex > div { flex: 1 1 auto; }
.price-list ul li { padding: 5px 0; border: solid 0 #ccc; border-bottom-width: 1px; }
.price-list ul li span { float: right; margin-left: 15px; }
.price-list ul.price-example li:first-child { text-align: center; }
.price-list ul.price-example li:last-child { font-weight: bold; }
.price-list .price-list-footer { font-size: 12px; margin-top: 15px; font-style: italic; }

.phone { border: solid 0px #f4f4f4; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; text-align: center; color: #fff; background: radial-gradient(circle, #2364cb 20%, #4584e7) repeat scroll 0% 0% rgba(0,0,0,0.1); }
.phone h4 { font-size: 26px; font-weight: normal; margin-bottom: 10px; }
.phone .split { display: flex; justify-content: space-around; gap: 20px; flex-wrap: wrap; padding: 30px 10px; }
.phone .phone-number-wrapper { display: flex; align-items: center; }
.phone .phone-number-wrapper a { border-radius: 8px; background: #b3c70d; padding: 10px; font-size: 24px; color: #fff; }
.phone .phone-number-wrapper a:hover { background: #abbf0c; }
.phone .phone-number-wrapper a.colr-orange { background: #ff7200; }
.phone .phone-number-wrapper a.colr-orange:hover { background: #f36d00; }
.phone .phone-number-wrapper a p:nth-child(1) { font-size: 14px; margin-bottom: 8px; }
.phone .phone-number-wrapper a p span.emergency-phone { color: #d90a0a; font-weight: normal; }
.phone .phone-number-wrapper a p:nth-child(2)::before { font-family: fontawesome; content: '\f095'; color: #fff; font-weight: bold; padding-right: 0.6rem; position: relative; top: 1px; }
.phone .phone-number-wrapper a.colr-orange p span.emergency-phone { color: #036839; }

@media only screen and (max-width: 768px) {
	.phone .split { padding: 20px 10px; }
	.phone h4 { font-size: 1.7em; }
	.phone .phone-number-wrapper a { font-size: 1.6rem; }
}
@media only screen and (max-width: 480px) {
	.phone .split { padding: 10px 10px; }
	.phone h4 { font-size: 1.5em; }
	.phone .phone-number-wrapper a { font-size: 1.3rem; }
}

.automotive-openings { border: solid 0 #e1e1e1; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; padding: 20px 0; }
.automotive-openings h2 { margin-bottom: 20px; }
.automotive-openings h5 { margin-bottom: 5px; }
.automotive-openings p { margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.automotive-openings p:last-child { margin-bottom: 0; }
.automotive-openings p.green { color: #4b8b08; }
.automotive-openings div.split { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 20px; }
.automotive-openings div.split div { flex: 1; }
.automotive-openings div.split div:nth-child(2) { max-width: -moz-fit-content; max-width: fit-content; }
.automotive-openings div.split div.automotive-illustration { border: 0; padding: 0; display: flex; }
.automotive-opening-link a { font-weight: bold; }

@media only screen and (max-width: 935px) {
	.automotive-openings-main div.split div { flex: 1 1 auto; }
	.automotive-openings-main div.split div:nth-child(2) { max-width: none; }
	.automotive-openings-main div.split div.automotive-illustration img { margin: auto; }
}
@media only screen and (max-width: 750px) {
	.automotive-openings div.split div { flex: 1 1 auto; }
	.automotive-openings div.split div:nth-child(2) { max-width: none; }
	.automotive-openings div.split div.automotive-illustration img { margin: auto; }
}
@media only screen and (max-width: 520px) {
	.automotive-openings-main div.split div.automotive-illustration img { width: 100%; height: auto; min-width: 300px; }
}

section.partners { border: solid 0 #e1e1e1; border-top-width: 1px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; padding: 20px 0; }
section.partners h2 { margin-bottom: 20px; }
section.partners p { font-size: 15px; line-height: 1.5; }
section.partners p.blue { color: #35a3d9; }
section.partners .partner-logos { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
section.partners .partner-logos div { height: 100px; width: 150px; }
section.partners .partner-logos div:nth-child(1) { background: url(/images/partner/abus.webp) center / 70% no-repeat; }
section.partners .partner-logos div:nth-child(2) { background: url(/images/partner/bks.webp) center / 70% no-repeat; }
section.partners .partner-logos div:nth-child(3) { background: url(/images/partner/burg-waechter.webp) center / 70% no-repeat; }
section.partners .partner-logos div:nth-child(4) { background: url(/images/partner/keso.webp) center / 70% no-repeat; }
section.partners .partner-logos div:nth-child(5) { background: url(/images/partner/dom.webp) center / 70% no-repeat; }
section.partners .partner-logos div:nth-child(6) { background: url(/images/partner/evva.webp) center / 70% no-repeat; }

footer { background: radial-gradient(circle, #5B5C5E, #2B2F3C) repeat scroll 0% 0% rgba(0,0,0,0.1); border: solid 0px #dddddd; border-top-width: 1px; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.6) inset; color: #ededed; }
footer .background { background-image: url(/images/banner-abstract.webp); }
footer .footer-address-contact { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px; border: solid 0 #ddd; border-bottom-width: 1px; }
footer .footer-address-contact ul li { padding: 5px 0; }
footer .footer-address-contact ul li a { font-weight: normal; color: #fff; }
footer div.flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px; font-size: 11px; }
footer .links ul { display: flex; }
footer .links ul li:last-child a { border: 0; padding-right: 0; margin-right: 0; }
footer .links a { color: #fff; border: solid 0 #5fb4df; border-right-width: 1px; padding-right: 10px; margin-right: 10px; }


.imprint-lightbox-content { width: calc(100vw - 20px); max-width: 700px; min-width: 300px; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 12px; }
.imprint-lightbox-content > div { flex: 1 1 auto; margin: 10px; }
.imprint-lightbox-content .imprint-headline { border: solid 0 #009cde; border-bottom-width: 1px; padding-bottom: 3px; margin-bottom: 15px; }
.imprint-lightbox-content h5 { margin: 15px 0 2px 0; }