/*
Theme Name: Elementor | m-page
Author: m-page | Christopher Born
Author URI: https://m-page.de
Description: Optimiertes Blank-Wordpress Theme für Elementor
Version: 2023
*/








@font-face {font-display: swap; font-family: 'Sulphur Point'; font-style: normal; font-weight: 300; src: url('/wp-content/fonts/sulphur-point/300.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Sulphur Point'; font-style: normal; font-weight: 400; src: url('/wp-content/fonts/sulphur-point/400.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Sulphur Point'; font-style: normal; font-weight: 700; src: url('/wp-content/fonts/sulphur-point/700.woff2') format('woff2');}






html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.4 !important;}
body {background: #F8F8F8; color: #47555b; letter-spacing: 0.75px; word-spacing: -0.2em;}
* {margin: 0; padding: 0; list-style-type: none; font-family: 'Sulphur Point', Century Gothic,AppleGothic,verdana,tahoma; box-sizing: border-box;}
.clear {clear: both;}
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}
.dp-b {display: block;}
.w100 {width: 100%;}
img {border: 0px; height: auto; hyphens: auto;}

@media screen and (max-width : 680px){ .novis680 {display: none;} }


.wrap {width: 100%; margin: 0 auto; max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)); padding: 0 var(--gp1-r) !important;}


p {margin-top: -0.35em; margin-bottom: -0.35em;}

.tac {text-align: center;}

a {text-decoration: none; color: #000; transition: color 0.3s;}
a:hover {color: #000;}

::selection {color: #FFF; background: #333;}

:root {--maxwidth: 2000px;}






/*** FONT SCALES ***/
:root {
--fontsize: clamp(18px, calc(1.25vw + 1.5px), 22px);
--ratio: 1.4;
}

.fs-xl4, .fs-xl4 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl3, .fs-xl3 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl2, .fs-xl2 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));}
.fs-xl1, .fs-xl1 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio)));}
.fs1, .fs1 .elementor-heading-title {font-size: var(--fontsize);}
.fs-xs1, .fs-xs1 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio)));}
.fs-xs2, .fs-xs2 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));}
.fs-xs3, .fs-xs3 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xs4, .fs-xls4 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
:root {
	--fs-xl4: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl3: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl2: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));
	--fs-xl1: calc(var(--fontsize) * (var(--ratio)));
	--fs1: var(--fontsize);
	--fs-xs1: calc(var(--fontsize) / (var(--ratio)));
	--fs-xs2: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));
	--fs-xs3: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xs4: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
}
/***********/








/*** ABSTÄNDE ***/
:root {
--gp1-xl3: 256px;
--gp1-xl2: 128px;
--gp1-xl1: 64px;
--gp1: 32px;
--gp1-xs1: 16px;
--gp1-xs2: 8px;
--gp1-xs3: 4px;

--gp1-r-xl3: calc(var(--gp1-r) * 8);
--gp1-r-xl2: calc(var(--gp1-r) * 4);
--gp1-r-xl1: calc(var(--gp1-r) * 2);
--gp1-r: 32px;
--gp1-r-xs1: calc(var(--gp1-r) / 2);
--gp1-r-xs2: calc(var(--gp1-r) / 4);
--gp1-r-xs3: calc(var(--gp1-r) / 8);
}
@media screen and (max-width : 768px){
:root {--gp1-r: 16px;}
}

.gaps1 {display: flex; flex-direction: column; gap: var(--gp1-r);}
.gaps1-xl1 {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);}
.gaps1-xl2 {display: flex; flex-direction: column; gap: var(--gp1-r-xl2);}
.gaps1-xl3 {display: flex; flex-direction: column; gap: var(--gp1-r-xl3);}
/***********/






/*** TRENNER ***/
.space-xs3 {height: var(--gp1-r-xs3);}
.space-xs2 {height: var(--gp1-r-xs2);}
.space-xs1 {height: var(--gp1-r-xs1);}
.space {height: var(--gp1-r);}
.space-xl1 {height: var(--gp1-r-xl1);}
.space-xl2 {height: var(--gp1-r-xl2);}
.space-xl3 {height: var(--gp1-r-xl3);}
/***********/





/*** VERLÄUFE ***/
:root {
--grd01:linear-gradient(135deg,  #ffffff 50%,#FBFBFB 50%);
}
/***********/






/*** ÜBERSCHRIFTEN ***/
.elementor-heading-title {line-height: 1.4 !important;}

.title1, .title1 .elementor-heading-title {display: block; margin: 0; color: #333333 !important; font-size: var(--fs-xl3); line-height: 1.4 !important; font-weight: 700; hyphens: auto; /*margin-top: -0.31em; margin-bottom: -0.31em;*/ letter-spacing: 0.5px; word-spacing: -0.2em;}
.title1.col1, .title1.col1 .elementor-heading-title {color: #121719 !important;}
.title1.col2, .title1.col2 .elementor-heading-title {color: #92ecff !important;}
.title1.col3, .title1.col3 .elementor-heading-title {color: #FFF !important;}
.col4 {color: #0088ce;}

.title1 .line2 {display: block; font-size: var(--fs1); font-weight: 400; text-transform: uppercase; letter-spacing: 0.7px; word-spacing: -0.2em;}


/*Trennlinien*/
.tline {width: 100%; max-width: 384px; display: block; height: var(--gp1-r-xs3);}
.tline.col1 {background: linear-gradient(to right, rgba(0,136,206,1) 3%,rgba(0,136,206,0) 3%,rgba(0,136,206,0) 7%,rgba(0,136,206,1) 7%,rgba(0,136,206,1) 50%,rgba(0,136,206,0) 100%);}
.tline.col2 {background: linear-gradient(to right, rgba(255,255,255,1) 3%,rgba(255,255,255,0) 3%,rgba(255,255,255,0) 7%,rgba(255,255,255,1) 7%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);}

/*Responsive*/
@media screen and (max-width : 768px){
	.title1, .title1 .elementor-heading-title {font-size: var(--fs-xl2);}
	.tline {max-width: 150px; height: 2px;}
}

.linkanker {position: relative; top: -150px;}
/***********/








/*** NAVIGATION ***/
/* DESKTOP */
@media screen and (min-width : 1025px){
	#nav_space {height: 128px;}
	:root {--navspace: 140px; --navspace_scroll: 100px;}

	#nav_mobile, #mobile_nav {display: none;}

	#nav_desk {background: rgba(0,0,0, 0.00); height: var(--navspace); position: fixed; z-index: 1000; width: 100%; top: 0; left: 0; transition: background-color 0.5s, height 0.5s;}
	#nav_desk.scrolled {background: rgba(255,255,255, 1); box-shadow: 0 1px 2px rgba(0,0,0, .1), 0 2px 5px rgba(0,0,0, .03), 0 5px 10px rgba(0,0,0, .03), 0 10px 30px rgba(0,0,0, .15); height: var(--navspace_scroll);}
	#nav_desk .inner {display: flex; align-items: center; height: 100%;}
	/*Logo*/
	#nav_desk .logo {display: block; height: 100%; width: 260px; transition: all 0.5s;}
	#nav_desk .fill1 {fill: #FFF; transition: all 0.5s;}
	#nav_desk .fill2 {fill: #FFF; transition: all 0.5s;}
	#nav_desk .fill3 {fill: #db2c32;}
	#nav_desk.scrolled .fill1 {fill: #000}
	#nav_desk.scrolled .fill2 {fill: #777}
	#nav_desk.scrolled .logo {width: 180px;}

	#desknav {display: flex; height: 100%; gap: var(--gp1-r-xl1); padding-left: var(--gp1-r-xl1); position: relative; transition: all 0.5s;}
	#desknav > li > a {display: flex; flex-direction: column; gap: 16px; padding: var(--gp1); align-items: center; justify-content: center; height: 100%; color: #FFF; text-transform: uppercase; font-weight: 400; transition: all .4s; font-size: var(--fs1); white-space: nowrap;}
	#desknav > li .chev {transform: rotate(90deg) scaleX(0.55); display: inline-block; margin-left: var(--gp1-r-xs2)}
	#nav_desk.scrolled #desknav {gap: var(--gp1-r); padding-left: var(--gp1-r);}
	#nav_desk.scrolled #desknav > li > a {font-size: var(--fs-xs1)}
	#nav_desk.scrolled #desknav > li > a {color: #222;}
	#nav_desk.scrolled #desknav > li:hover > a {color: #FFF;}
	#desknav > li:hover > a {background: #282828;}

	/*Untermenü*/
	#desknav .submenu {position: absolute; top: var(--navspace); left: 0px; width: 100%; height: auto; min-height: 500px; background: linear-gradient(to bottom, rgba(40,40,40,1) 0%,rgba(20,20,20,1) 100%); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px rgba(0,0,0, .05), 0 2px 5px rgba(0,0,0, .03), 0 5px 10px rgba(0,0,0, .03), 0 10px 30px rgba(0,0,0, .15); opacity: 0; pointer-events: none; transition: all 0.5s; color: #FFF;}
	#nav_desk.scrolled #desknav .submenu {top: var(--navspace_scroll);}
	#desknav > li:hover .submenu {opacity: 1; pointer-events: auto;}
	#desknav .submenu .con {height: 100%; padding: var(--gp1-r); position: relative; z-index: 20;}
	#desknav .submenu a, #desknav .submenu a:hover{color: #FFF;}
	/*Untere Leiste*/
	#desknav .submenu .bar {background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); padding: var(--gp1-r); font-size: var(--fs-xl1); text-transform: uppercase; position: relative; z-index: 20; overflow: hidden;}
	#desknav .submenu .bar span {position: relative; left: -32px; transition: all .4s; color: #333;}
	#desknav > li:hover .submenu .bar span {left: 0px;}
	/*Hintergründe*/
	#desknav .submenu .bg1 {background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%); position: absolute; z-index: 10; width: 100%; height: 100%; top: 0px; left: 0px;}
	#desknav .submenu .bg2 {position: absolute; z-index: 5; width: 100%; height: 100%; top: 0px; left: 0px;}
	#desknav .submenu .bg2 img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: calc(100% + 16px) 50%; transition: all 0.4s;}
	#desknav li:hover .submenu .bg2 img {display: block; object-position: 100% 50%;}

	/*Menü01*/
	.menu01 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1); width: fit-content;}
	.menu01 li a {display: flex; gap: var(--gp1-xs1); justify-content: space-between; align-items: center; color: #DDD; transition: all .3s;}
	.menu01 li:hover a {color: #FFF; text-shadow: 0 0 5px rgba(255,255,255, 0.1), 0 0 10px rgba(255,255,255, 0.1), 0 0 15px rgba(255,255,255, 0.1)}
	.menu01 a span {padding-right: var(--gp1-r-xl1);}
	.menu01 .arr {display: block; width: 12px; height: 12px; border-top: 1.5px solid #FFF; border-right: 1.5px solid #BBB; transform: rotate(45deg); position: relative; left: 0; transition: all .3s;}
	.menu01 li:hover .arr {left: var(--gp1-xs1)}

	/*Submenü Elemente*/
	.nav_contact_overview {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr);}
	.nav_contact_overview > div {font-size: var(--fs-xs1); display: flex; justify-content: flex-start; align-items: center; gap: var(--gp1-r-xs1); background: rgba(0,0,0, 0.25);}
	.nav_contact_overview > div > div {padding: var(--gp1-r-xs1); background: rgba(0,0,0, 0.25); align-self: stretch; display: flex; align-items: center;}
	.nav_contact_overview > div > span {padding-right: var(--gp1-r-xs1);}
	.nav_contact_overview svg {display: block; width: 32px; height: 32px;}
	.nav_contact_overview .s1 {stroke: #FFF; stroke-width: 3.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

	.nav_contactbox {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr);}
	.nav_contactbox > div {background: rgba(0,0,0, 0.25); font-size: var(--fs-xs2); padding: var(--gp1-r-xs2);}
	.nav_contactbox > div > b {text-align: center; display: block; font-size:var(--fs1)}
	.nav_contactbox table {border-spacing: var(--gp1-r-xs2) 0; width: fit-content; margin: auto;}
	.nav_contactbox table td {padding: 2px 4px;}

	.ntitle1 {display: block; color: #FFF; font-weight: 700; text-transform: uppercase;}



	@media screen and (max-width : 1700px){
		#desknav {gap: var(--gp1-r); padding-left: var(--gp1-r);}
		#desknav > li > a {font-size: var(--fs-xs1); padding: var(--gp1-xs1)}
		#nav_desk .logo {background-size: 200px; width: 200px;}
	}
}

/* MOBILE */
@media screen and (max-width : 1024px){
	#nav_space {height: 96px;}
	:root {--navspace: 60px;}
	#nav_desk {display: none;}
	#nav_mobile {background: #FFF; height: var(--navspace); box-shadow: 0 1px 2px rgba(0,0,0, .1), 0 2px 5px rgba(0,0,0, .03), 0 5px 10px rgba(0,0,0, .03), 0 10px 30px rgba(0,0,0, .15); position: fixed; z-index: 1000; width: 100%; top: 0; left: 0;}
	#nav_mobile .inner {display: flex; justify-content: space-between; align-items: center; height: 100%;}
	#nav_mobile .logo {display: block; height: 100%; width: 96px;}
	#nav_mobile .fill1 {fill: #000;}
	#nav_mobile .fill2 {fill: #000;}
	#nav_mobile .fill3 {fill: #db2c32;}

	/*Hamburger Icon*/
	#nav_mobile button {width: 26px; height: 16px; border: none; background: none; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;}
	#nav_mobile button > div {width: 100%; height: 1.5px; background: #333; transition: all .5s; border-radius: 2px;}
	#nav_mobile button.active > div {transform: rotateY(180deg);}

	/*Linkliste*/
	#mobile_nav {position: fixed; z-index: 990; width: calc(100% - var(--gp1-r-xl2)); padding: var(--gp1); height: calc(100% - 60px); top: 60px; left: 0; background: rgba(255,255,255, .95); overflow-y: auto; transform: translate(-100%, 0); transition: transform .4s; backdrop-filter: blur(3px);}
	#mobile_nav.active {transform: translate(0, 0);}
	#mobile_nav ul {display: flex; flex-direction: column; gap: var(--gp1-xs1)}
	#mobile_nav li .first {display: flex; justify-content: space-between; align-items: stretch; gap: 16px; background-color: #333 !important; background-size: cover !important; background-repeat: no-repeat; background-position: right center;}
	#mobile_nav .first > a {color: #FFF; font-size: var(--fs-xl1); padding: var(--gp1); display: flex; align-items: center; width: 100%; overflow: hidden;}
	#mobile_nav .chev {display: flex; justify-content: center; align-items: center; padding: var(--gp1); background: rgba(0,0,0, .3); cursor: cell}
	#mobile_nav .chev b {transform: rotate(90deg) scaleX(0.55); display: inline-block; line-height: 0; margin-left: var(--gp1-r-xs2); color: #FFF; font-size: var(--fs-xl1); pointer-events: none; transition: all .5s;}
	.first.active .chev b {transform: rotate(270deg) scaleX(0.55) !important;}
	#mobile_nav .line {height: 1px; background: #d1d8dd;}
	/*Ebene 2*/
	#mobile_nav .second {display: flex; flex-direction: column; display: none;}
	#mobile_nav .second li {border-bottom: 1px solid #DDD;}
	#mobile_nav .second li:last-child {border-bottom: 0;}
	#mobile_nav .second li > a {display: block; color: #333; padding: var(--gp1-r-xs1) var(--gp1-r)}

	/*BG's*/
	.first[cat="neuwagen"] {background-image: url(/wp-content/uploads/submenu_bg01-r.webp);}
	.first[cat="gebrauchtwagen"] {background-image: url(/wp-content/uploads/submenu_bg02-r.webp);}
	.first[cat="service"] {background-image: url(/wp-content/uploads/submenu_bg03-r.webp);}
	.first[cat="aboutus"] {background-image: url(/wp-content/uploads/submenu_bg04-r.webp);}
	.first[cat="contact"] {background-image: url(/wp-content/uploads/submenu_bg05-r.webp);}

	#nav_darkbg {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 980; background: rgba(0,0,0, 0.5); opacity: 0; pointer-events: none; transition: opacity .4s; cursor: pointer;}
	#nav_darkbg.active {opacity: 1; pointer-events: auto;}

	/*Kontaktdetails*/
	.nav_mob_contact {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(1,1fr);}
	.nav_mob_contact > div {font-size: var(--fs1); display: flex; align-items: center; gap: var(--gp1-r); color: #333;}
	.nav_mob_contact a {color: #333;}
	.nav_mob_contact svg {display: block; width: calc(var(--gp1) - var(--gp1-xs2)); height: calc(var(--gp1) - var(--gp1-xs2));}
	.nav_mob_contact .s1 {stroke: #333; stroke-width: 3.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

	@media screen and (max-width : 680px){
		#mobile_nav {width: calc(100% - var(--gp1-r-xl1)); padding: var(--gp1-xs1);}
		#mobile_nav .first > a {font-size: var(--fs1); padding: var(--gp1-xs1);}
		#mobile_nav .chev {padding: var(--gp1-xs1);}
	}
}
/***********/





/*** QUICK NAVI  ***/
/*DESKTOP*/
#quicknav_desk {position: fixed; z-index: 900; right: 0; top: 50%; transform: translate(calc(100% - var(--gp1-r-xl1) - var(--gp1-r)), -50%); transition: all .5s; padding-left: var(--gp1-r);}
#quicknav_desk:hover {transform: translate(0, -50%);}
#quicknav_desk ul {display: flex; flex-direction: column; gap: var(--gp1-r-xs2); position: relative; z-index: 2;}
#quicknav_desk ul li a {display: flex; align-items: stretch; filter: drop-shadow(0 0 10px rgba(0,0,0, .2);)}
#quicknav_desk .ico {width: var(--gp1-r-xl1); padding: var(--gp1-r-xs1) var(--gp1-r-xs1) var(--gp1-r-xs1); aspect-ratio: 1/1; background: #555; clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 30%);}
#quicknav_desk .ico svg {display: block; width: 100%; fill: none; stroke: #FFF; stroke-width: 3.5px;}
#quicknav_desk .txt {background: #FFF; display: flex; align-items: center; flex-grow: 1;}
#quicknav_desk .txt span {padding: var(--gp1-r-xs1) var(--gp1-r-xl1) var(--gp1-r-xs1) var(--gp1-r-xs1); align-items: stretch; font-size: var(--fs-xs1);}

#quicknav_desk .top {width: 100%; aspect-ratio: 8/1; background: #DBDBDB; clip-path: polygon(5% 100%, 80% 0, 150% 100%);}
#quicknav_desk .end {width: 100%; aspect-ratio: 8/1; background: #DBDBDB; clip-path: polygon(5% 0, 150% 0, 80% 100%);}

@media screen and (max-width : 768px){
	#quicknav_desk {display: none;}
}
/***********/






/*** CLIP PATHES ***/
/*Clip Path 1 Responsive */
.cp01-r {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 80% 100%, 0 calc(100% - 7vw));}
.cp02-r {clip-path: polygon(0 0, calc(100% - var(--gp1-r-xl1)) 0, 100% 25%, calc(100% - var(--gp1-r-xl1)) 100%, 0 100%);}
/***********/






/*** SEITENÜBERGÄNGE ***/
.bgfade01-top {width: 100%; aspect-ratio: 300/35; background: url(/wp-content/uploads/bgfade1-top.svg) center no-repeat; background-size: cover;}
.bgfade01-bot {width: 100%; aspect-ratio: 300/35; background: url(/wp-content/uploads/bgfade1-bot.svg) center no-repeat; background-size: cover;}

.bgfade01-top.left, .bgfade01-bot.left {transform: rotateY(180deg);}
/***********/







/*** HERO ***/
#hero {width: 100%; height: 70vh; background: url(/wp-content/uploads/hero.webp) center no-repeat; background-size: cover; position: relative;}
#hero:after {content:""; width: 100%; height: 300px; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0) 100%); position: absolute; top: 0px; left: 0px;}
@media (orientation: portrait) {
	@media screen and (max-width : 1200px){#hero {height: 50vh;}}
}
@media (orientation: landscape) {
	@media screen and (max-width : 1600px){#hero {height: 55vh;}}
}

.hero_end {position: relative; z-index: -1; filter: drop-shadow(0 6px 3vw rgba(0,0,0, 0.1)) drop-shadow(0 12px 5vw rgba(0,0,0, 0.1));}
.hero_end > div {width: 100%; height: 7vw; background: #F1F1F1; position: absolute; transform: translate(0, calc(-130%)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);}
/***********/






/*** SMALL HERO ***/
.small_hero {width: 100%; height: 80vh; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: relative;}
.small_hero:after {content:""; width: 100%; height: 300px; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0) 100%); position: absolute; top: 0px; left: 0px;}
@media (orientation: portrait) {
	.small_hero {height: 30vh;}
}
@media (orientation: landscape) {
	.small_hero {height: 35vh;}
}
/***********/







/*** HERO BACKGROUNDS ***/
.hero002 {background: url(/wp-content/uploads/hero002.webp);}
@media screen and (max-width : 3000px){.hero002 {background: url(/wp-content/uploads/hero002-3000.webp);}}
@media screen and (max-width : 2000px){.hero002 {background: url(/wp-content/uploads/hero002-2000.webp);}}
@media screen and (max-width : 1000px){.hero002 {background: url(/wp-content/uploads/hero002-1200.webp);}}

.hero003 {background: url(/wp-content/uploads/hero003.webp);}
@media screen and (max-width : 3000px){.hero003 {background: url(/wp-content/uploads/hero003-3000.webp);}}
@media screen and (max-width : 2000px){.hero003 {background: url(/wp-content/uploads/hero003-2000.webp);}}
@media screen and (max-width : 1000px){.hero003 {background: url(/wp-content/uploads/hero003-1200.webp);}}

.hero004 {background: url(/wp-content/uploads/hero004.webp);}
@media screen and (max-width : 3000px){.hero004 {background: url(/wp-content/uploads/hero004-3000.webp);}}
@media screen and (max-width : 2000px){.hero004 {background: url(/wp-content/uploads/hero004-2000.webp);}}
@media screen and (max-width : 1000px){.hero004 {background: url(/wp-content/uploads/hero004-1200.webp);}}

.hero005 {background: url(/wp-content/uploads/hero005.webp);}
@media screen and (max-width : 3000px){.hero005 {background: url(/wp-content/uploads/hero005-3000.webp);}}
@media screen and (max-width : 2000px){.hero005 {background: url(/wp-content/uploads/hero005-2000.webp);}}
@media screen and (max-width : 1000px){.hero005 {background: url(/wp-content/uploads/hero005-1200.webp);}}

.hero006 {background: url(/wp-content/uploads/hero006.webp);}
@media screen and (max-width : 2000px){.hero006 {background: url(/wp-content/uploads/hero006-2000.webp);}}
@media screen and (max-width : 1000px){.hero006 {background: url(/wp-content/uploads/hero006-1200.webp);}}
/***********/






/*** EINLEITUNG ***/
.introduction {text-align: center;}
.introduction p {max-width: 800px; margin: auto;}
.introduction .buttonwrap {width: fit-content; margin: auto;}
/***********/





/*** KONTAKTABSCHNITT ***/
.contactsection img {display: block; width: 100%;}
.contactsection .openingtimes {display: flex; flex-direction: column; gap: var(--gp1-r);}
.contactsection .openingtimes > div > b {margin-bottom: var(--gp1-r-xs1); display: block;}
.contactsection .openingtimes hr {border: 0px; border-top: 1px solid #DDD;}
.contactsection table td {padding-right: var(--gp1-r);}
.contactsection .ozbar {background: #333; color: #FFF; display: flex; gap: var(--gp1-r); justify-content: space-between; padding: var(--gp1-r); margin: 0 var(--gp1-r); transform: translate(0, -50%);}
.contactsection .ozbar a {color: #FFF;}
.contactsection .ozbar > div {display: flex; align-items: center; gap: var(--gp1-r-xs1);}
.contactsection .ozbar > div > div {padding: var(--gp1-xs2); background: #181818;}
.contactsection .ozbar svg {display: block; width: calc(var(--gp1) - var(--gp1-xs2)); height: calc(var(--gp1) - var(--gp1-xs2));}
.ozbar .s1 {stroke: #FFF; stroke-width: 4.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

@media screen and (max-width : 1700px){
	.contactsection .ozbar {padding: var(--gp1-r-xs1);}
	.contactsection .ozbar > div {font-size: var(--fs-xs1);}
	.contactsection .ozbar svg {width: 24px; height: 24px;}
}

@media screen and (max-width : 480px){
	.contactsection .ozbar {flex-direction: column; align-items: flex-start; gap: var(--gp1-r-xs1);}
}
/***********/





/*** SERVICE ABSCHNITT ***/
.servicesection .txt {text-align: right;}

@media screen and (max-width : 900px){
	.servicesection .txt {text-align: left;}
}
/***********/





/*** PROBEFAHRT ABSCHNITT ***/
.testdrive {position: relative;}
.testdrive .inner {width: calc(100% - var(--gp1-r-xl2)); margin-left: var(--gp1-r-xl2); aspect-ratio: 21/9; background: url(/wp-content/uploads/probefahrt.webp) center no-repeat; background-size: cover; position: relative; clip-path: polygon(-100% 0, calc(100% - var(--gp1-r-xl1)) 0, 100% var(--gp1-r-xl2), calc(100% - var(--gp1-r-xl1)) 100%, -100% 100%)}

.testdrive .ttl1 {width: fit-content; padding: var(--gp1) var(--gp1-xl1); background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0.5) 100%); position: relative; top: var(--gp1-r-xl1); left: calc(var(--gp1-r-xl2) * -1); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05); backdrop-filter: blur(5px);}
.testdrive .end {width: 85%; aspect-ratio: 30/2; background: #ededed; margin: auto; clip-path: polygon(0 0, 100% 0, 20% 100%);}

.testdrive .buttonbox {width: calc(100% - var(--gp1-r-xl2)); padding: var(--gp1-r); position: absolute; bottom: var(--gp1-r-xl1); right: var(--gp1-r-xl1); backdrop-filter: blur(6px); background: linear-gradient(135deg,  rgba(230,35,42,0.8) 0%,rgba(230,35,42,0.6) var(--gp1-r-xl3),rgba(230,35,42,0.5) var(--gp1-r-xl3),rgba(230,35,42,0) 100%);}

@media screen and (max-width : 1200px){
	.testdrive .inner {width: calc(100% - var(--gp1-r-xl1)); margin-left: var(--gp1-r-xl1); aspect-ratio: 16/9;}
	.testdrive .ttl1 {padding: var(--gp1-r) var(--gp1-r-xl1); top: var(--gp1-r); left: calc(var(--gp1-r-xl1) * -1);}
	.testdrive .buttonbox {width: calc(100% - var(--gp1-r-xl1)); bottom: var(--gp1-r); right: var(--gp1-r);}
}

@media screen and (max-width : 900px){
	.testdrive .inner {width: calc(100% - var(--gp1-r-xl1)); margin-left: var(--gp1-r-xl1); aspect-ratio: 4/3; clip-path: polygon(-100% 0, calc(100% - var(--gp1-r)) 0, 100% var(--gp1-r-xl1), calc(100% - var(--gp1-r)) 100%, -100% 100%)}
}

@media screen and (max-width : 480px){
	.testdrive .inner {width: 100%; margin-left: 0; aspect-ratio: 1/1;}
}
/***********/





/*** AUTOLOGOS BOXEN ***/
.carlogos {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr); width: 100%; max-width: 1200px; margin: auto;}
.carlogos > div {background: #FFF; padding: var(--gp1-r); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
.carlogos > div img {display: block; width: 100%; pointer-events: none;}

@media screen and (max-width : 480px){
	.carlogos {gap: var(--gp1-r-xs1);}
	.carlogos > div {padding: var(--gp1-r-xs1);}
	.carlogos > div img {margin: 0;}
}
/***********/











/*** NEUWAGEN MARKEN AUSWAHL ***/
.wrap.subaru, .wrap.suzuki, .wrap.kia {display: none;}
.choose_new_cars {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);}
.choose_new_cars > div {display: flex; gap: var(--gp1-r-xl1);}

/*Marken*/
.choose_new_cars .brand {width: 25%; background: var(--grd01); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05); padding: 0 var(--gp1-r-xl1);}
.choose_new_cars .brand > div {background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;}
.choose_new_cars.subaru .brand > div {width: 100%; height: 100%; background: url(/wp-content/uploads/logo-subaru-min.svg);}
.choose_new_cars.suzuki .brand > div {width: 100%; height: 100%; background: url(/wp-content/uploads/logo-suzuki-min.svg);}
.choose_new_cars.kia .brand > div {width: 100%; height: 100%; background: url(/wp-content/uploads/logo-kia-min.svg);}

.choose_new_cars .txt {width: 100%; height: 100%;}

@media screen and (max-width : 1300px){
	.choose_new_cars > div {display: flex; gap: var(--gp1-r);}
	.choose_new_cars .brand {width: 50%; padding: 0 var(--gp1-r);}
}

@media screen and (max-width : 680px){
	.choose_new_cars {text-align: center;}
	.choose_new_cars .buttonwrap {justify-content: center;}
	.choose_new_cars > div {flex-direction: column;}
	.choose_new_cars .brand {width: 100%; padding: var(--gp1-r-xl1)}
	.choose_new_cars .brand > div {height: var(--gp1-r-xl1) !important;}
}
/***********/







/*** MODELL BOXEN ***/
.carsbox {display: grid; gap: var(--gp1-r-xl1); grid-template-columns: repeat(3,1fr); width: 100%; margin: auto;}
.carsbox > div {background: var(--grd01); padding: var(--gp1-r) var(--gp1-r) 0 var(--gp1-r); margin-top: var(--gp1-r-xl2); margin-bottom: var(--gp1-r-xl1); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05); display: flex; flex-direction: column; justify-content: space-between; gap: var(--gp1-r)}
.carsbox > div .carpic {display: block; width: 100%; margin-top: calc(var(--gp1-r-xl2) * -1); aspect-ratio: 21/9; object-fit: contain; object-position: bottom 0;}
.carsbox > div .brand {display: block; width: var(--gp1-xl2); height: var(--gp1); margin: auto; background-size: contain !important;}
.carsbox > div .brand.subaru {background: url(/wp-content/uploads/logo-subaru-min.svg) center no-repeat;}
.carsbox > div .brand.suzuki {background: url(/wp-content/uploads/logo-suzuki-min.svg) center no-repeat;}
.carsbox > div .brand.kia {background: url(/wp-content/uploads/logo-kia-min.svg) center no-repeat;}
.carsbox > div .ttl {display: block; text-align: center; text-transform: uppercase; font-size: var(--fs-xl3); font-weight: bold; letter-spacing: 8px; color: #000; border-bottom: 1px solid #EEE;}
.carsbox > div .buttonwrap {transform: translate(0, 50%); margin: 0 calc(var(--gp1-r-xs1) * -1);}

/*Überschrift*/
.carsbox_ttl {width: 100%; padding: var(--gp1-r); background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
.carsbox_ttl:after {content:""; display: block; width: 100%; height: var(--gp1-r);}
.subaru .carsbox_ttl:after {background: url(/wp-content/uploads/logo-subaru-min.svg) center no-repeat; background-size: contain;}
.suzuki .carsbox_ttl:after {background: url(/wp-content/uploads/logo-suzuki-min.svg) center no-repeat; background-size: contain;}
.kia .carsbox_ttl:after {background: url(/wp-content/uploads/logo-kia-min.svg) center no-repeat; background-size: contain;}

@media screen and (max-width : 1650px){
	.carsbox {gap: var(--gp1-r);}
	.carsbox > div .buttonwrap {gap: var(--gp1-r-xs1); flex-wrap: nowrap;}
}
@media screen and (max-width : 1450px){
	.carsbox {grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width : 950px){
	.carsbox {grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width : 480px){
	.carsbox > div .ttl {font-size: var(--fs-xl2);}
}
@media screen and (max-width : 380px){
	.carsbox .button1 {font-size: var(--fs-xs1);}
}
/***********/












/*** DOPPEL BOX ***/
.dblbox {display: grid; gap: var(--gp1-r-xl2); grid-template-columns: repeat(2,1fr);}
.dblbox .pic {position: relative;}
.dblbox .pic img {object-fit: cover; display: block; width: 100%; height: 100%; position: absolute;}

@media screen and (max-width : 900px){
	.dblbox {grid-template-columns: repeat(1,1fr); gap: var(--gp1-r-xl1);}
	.dblbox .txt {order: 2;}
	.dblbox .pic {position: relative; aspect-ratio: 16/9; order: 1;}
	.dblbox .pic img {object-fit: cover; display: block; width: 100%; height: 100%; position: relative;}
	.dblbox .o1 {order: 1;}
	.dblbox .o2 {order: 1;}
}

/*PICBOX 00*/
.picbox00 {position: relative;}
.picbox00 img {object-fit: cover; display: block; width: 100%; height: 100%; position: absolute; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gp1-r)), 75% 100%, 0 calc(100% - var(--gp1-r)));}

@media screen and (max-width : 900px){
	.picbox00 img {position: relative; aspect-ratio: 16/9;}
}

/*PICBOX 01*/
.picbox01 {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);}
.picbox01 .sub01 {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(1,1fr);}
.picbox01 img {object-fit: cover; display: block; width: 100%; height: 100%;}
.picbox01 .pic1 {clip-path: polygon(var(--gp1-r) 0, 100% 0, 100% 100%, var(--gp1-r) 100%, 0 var(--gp1-r-xl2))}
.flx-c {justify-content: center;}

.picbox01 .ar43 {aspect-ratio: 4/3; overflow: hidden;}
.picbox01 .icobox {aspect-ratio: 4/3; background: linear-gradient(135deg,  #b91e25 0%,#e6232a 100%); padding: var(--gp1-r); display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--gp1-r-xs1); align-items: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 16px), 16px 50%, 0 calc(50% - 16px)); position: relative;}
.picbox01 .icobox .t1 {display: block; text-align: center; color: #FFF; text-transform: uppercase; font-size: var(--fs-xl2); font-weight: 700;}
.picbox01 .icobox .t2 {display: block; text-align: center; color: #000; text-transform: uppercase; font-size: var(--fs-xl1); font-weight: 400;}
.picbox01 .icobox .i1 {width: var(--gp1-r-xl2); height: var(--gp1-r-xl2);}
.picbox01 .icobox .i1 svg {display: block; width: 100%; height: 100%; stroke-width: 3.0px; stroke-linejoin: round;stroke-linecap: round; fill: none;}
.picbox01 .icobox .strokecol1 {stroke: #FFF;}
.picbox01 .icobox .strokecol2 {stroke: #000;}
.picbox01 .icobox:before {content:""; width: 85%; aspect-ratio: 30/2; background: rgba(0,0,0,.1); margin: auto; clip-path: polygon(0 0, 100% 0, 20% 100%); position: absolute; top: 0px;}
.picbox01 .icobox:after {content:""; width: 85%; aspect-ratio: 30/2; background: rgba(0,0,0,.1); margin: auto; clip-path: polygon(0 0, 100% 0, 20% 100%); position: absolute; bottom: 0px; transform: rotate(180deg);}

@media screen and (max-width : 1200px){
	.picbox01 .pic1 {display: none;}
	.picbox01 {grid-template-columns: repeat(1,1fr);}
	.picbox01 .sub01 {clip-path: polygon(var(--gp1-r) 0, 100% 0, 100% 100%, var(--gp1-r) 100%, 0 var(--gp1-r-xl2))}
	.picbox01 .icobox {padding: var(--gp1-r) var(--gp1-r) var(--gp1-r) var(--gp1-r-xl1);}
}

@media screen and (max-width : 900px){
	.picbox01 {grid-template-columns: repeat(1,1fr);}
	.picbox01 .sub01 {clip-path: none;}
	.picbox01 .icobox {padding: var(--gp1-r);}
	.picbox01 .ar43 {aspect-ratio: 21/9;}
	.picbox01 .icobox .i1 svg {stroke-width: 5.0px;}
	.picbox01 .icobox .t1 {font-size: var(--fs-xl1);}
	.picbox01 .icobox .t2 {font-size: var(--fs1);}
}
/***********/








/*UNIVERSAL BOX 01*/
.unibox01 {display: flex; align-items: center; filter: drop-shadow(0 1px 2px rgba(0,0,0, .05)) drop-shadow(0 5px 20px rgba(0,0,0, .03)) drop-shadow(0 10px 80px rgba(0,0,0, .1)); position: relative;}
.unibox01-end1 {width: 50%; aspect-ratio: 30/2; background: #ebebeb; margin-left: var(--gp1-r-xl3); clip-path: polygon(0 0, 100% 0, 20% 100%); transform: translate(0, calc(var(--gp1-r-xl1) * -1)); position: relative; z-index: -1;}
.unibox01-end2 {display: flex; justify-content: flex-end;}
.unibox01-end2:after {content:""; width: 50%; aspect-ratio: 30/2; background: #ebebeb; margin-right: var(--gp1-r-xl3); clip-path: polygon(0 0, 100% 0, 80% 100%); transform: translate(0, calc(var(--gp1-r-xl1) * -1)); position: relative; z-index: -1;}

.unibox01 .txt {width: calc(60% - var(--gp1-r-xl1)); background: #FFF; padding: var(--gp1-r-xl1); margin: var(--gp1-r-xl1) 0;}
.unibox01 .pic {width: calc(40% - var(--gp1-r-xl1)); align-self: stretch; background: #FFF; position: relative;}
.unibox01 .end {width: var(--gp1-r-xl2); align-self: stretch; background: #FFF; margin: var(--gp1-r-xl1) 0;}

.unibox01 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute;}

@media screen and (max-width : 1200px){
	.unibox01 .txt {width: calc(60% - var(--gp1-r)); padding: var(--gp1-r);}
	.unibox01 .pic {width: calc(40% - var(--gp1-r));}
	.unibox01 .end {width: var(--gp1-r-xl1);}
	.unibox01-end1 {margin-left: var(--gp1-r-xl2);}
	.unibox01-end2:after {margin-right: var(--gp1-r-xl2);}
}

@media screen and (max-width : 1000px){
	.unibox01 {flex-direction: column; text-align: center;}
	.unibox01 .txt {width: calc(100%); margin: 0; padding: var(--gp1-r-xl1);}
	.unibox01 .pic {width: 100%; aspect-ratio: 2/1;}
	.unibox01 .end {width: 100%; height: var(--gp1-r-xl1); margin: 0;}
	.unibox01 .buttonwrap {justify-content: center;}
	.unibox01-end1, .unibox01-end2 {display: none;}
}

@media screen and (max-width : 400px){
	.unibox01 .txt {padding: var(--gp1-r);}
}
/***********/








/*UNIVERSAL BOX 02*/
.unibox02 {display: grid; gap: var(--gp1-r-xl1); grid-template-columns: repeat(2,1fr);}
.unibox02 .box {display: flex; filter: drop-shadow(0 1px 2px rgba(0,0,0, .05)) drop-shadow(0 5px 20px rgba(0,0,0, .03)) drop-shadow(0 10px 80px rgba(0,0,0, .1));}

.unibox02 .txt {width: 60%; background: var(--grd01); padding: var(--gp1-r);}
.unibox02 .pic {width: 40%; position: relative;}
.unibox02 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute;}

/*Ausrichtungen*/
.unibox02 .box:nth-child(odd) .txt {text-align: right;}
.unibox02 .box:nth-child(1) .txt, .unibox02 .box:nth-child(2) .txt {margin-top: var(--gp1-r-xl1);}
.unibox02 .box:nth-child(3) .txt, .unibox02 .box:nth-child(4) .txt {margin-bottom: var(--gp1-r-xl1);}
.unibox02 .box:nth-child(3) .txt {text-align: left;}
.unibox02 .box:nth-child(4) .txt {text-align: right;}

/*Clip Pathes*/
.unibox02 .box:nth-child(1) .pic img {clip-path: polygon(0 2vh, 20% 0, 100% 2vh, 100% 100%, 0 100%);}
.unibox02 .box:nth-child(2) .pic img {clip-path: polygon(0 2vh, 80% 0, 100% 2vh, 100% 100%, 0 100%);}
.unibox02 .box:nth-child(3) .pic img {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vh), 80% 100%, 0 calc(100% - 2vh));}
.unibox02 .box:nth-child(4) .pic img {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vh), 20% 100%, 0 calc(100% - 2vh));}

@media screen and (max-width : 1400px){
	.unibox02 {gap: var(--gp1-r);}
	.unibox02 .txt {padding: var(--gp1-r-xs1) var(--gp1-r);}
}

@media screen and (max-width : 1000px){
	.unibox02 {grid-template-columns: repeat(1,1fr);}
	.unibox02 .txt {padding: var(--gp1-r);}

	.unibox02 .box:nth-child(3) .txt, .unibox02 .box:nth-child(4) .txt {margin: var(--gp1-r-xl1) 0 0 0;}
	.unibox02 .box:nth-child(3) .pic img {clip-path: polygon(0 2vh, 20% 0, 100% 2vh, 100% 100%, 0 100%);}
	.unibox02 .box:nth-child(4) .pic img {clip-path: polygon(0 2vh, 80% 0, 100% 2vh, 100% 100%, 0 100%);}
	.unibox02 .box:nth-child(3) .txt {order: 1}	.unibox02 .box:nth-child(3) .pic {order: 2}
	.unibox02 .box:nth-child(4) .txt {order: 2}	.unibox02 .box:nth-child(4) .pic {order: 1}
}

@media screen and (max-width : 480px){
	.unibox02 {gap: var(--gp1-r-xl1);}
	.unibox02 .box {flex-wrap: wrap; gap: 0;}
	.unibox02 .txt {width: 100%; order: 2 !important; margin: 0 !important; text-align: center !important;}
	.unibox02 .pic {width: 100%; order: 1 !important; aspect-ratio: 21/9;}
}
/***********/







/*UNIVERSAL BOX 03*/
.unibox03 {display: flex; filter: drop-shadow(0 1px 2px rgba(0,0,0, .05)) drop-shadow(0 5px 20px rgba(0,0,0, .03)) drop-shadow(0 10px 80px rgba(0,0,0, .1));}

.unibox03 .pic {width: 20%; position: relative;}
.unibox03 .txt {width: 60%; background: var(--grd01); padding: var(--gp1-r); margin-bottom: var(--gp1-r-xl1)}

/*Bilder*/
.unibox03 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute;}
.unibox03 .pic1 img {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vh), 80% 100%, 0 calc(100% - 2vh));}
.unibox03 .pic2 img {clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vh), 20% 100%, 0 calc(100% - 2vh));}


@media screen and (max-width : 1200px){
	.unibox03 .pic1 {width: 40%}
	.unibox03 .pic2 {display: none;}
}

@media screen and (max-width : 480px){
	.unibox03 {flex-direction: column;}
	.unibox03 .pic1, .unibox03 .pic2 {width: 100%; aspect-ratio: 21/9; display: block;}
	.unibox03 .txt {width: 100%; margin-bottom: 0;}
	.unibox03 .pic1 img {clip-path: polygon(0 2vh, 80% 0, 100% 2vh, 100% 100%, 0 100%);}
}
/***********/





/*** KARRIERE SEITE ***/
/*Overview*/
.jobs_overview {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr); margin: auto; max-width: 1400px;}
.jobs_overview > div {background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05); padding: var(--gp1-r);}


.jobs_overview .ht1 {display: block; text-align: center; font-size: var(--fs-xl1);}
.jobs_overview .ttl {display: block; text-align: center; text-transform: uppercase; color: #000; font-size: var(--fs-xl1); font-weight: bold;}
.jobs_overview .ttl small {display: block; text-align: center; text-transform: none; color: #666; font-size: var(--fs1); font-weight: bold;}
.jobs_overview .ht2 {display: block; text-align: center; font-size: calc(var(--fs1) + 4px); font-weight: bold; color: #000;}

.jobs_overview .details {background: radial-gradient(ellipse at center, #f1f1f1 0%,#efefef 100%); margin: 0 calc(var(--gp1-r) * -1); padding: calc(var(--gp1-r-xl1) + var(--gp1-r)) var(--gp1-r); text-align: center; clip-path: polygon(-2px 32px, 20% -2px, 101% 32px, 101% calc(100% - 32px), 80% 100%, -2px calc(100% - 32px));}
.jobs_overview .buttonwrap {justify-content: center;}

@media screen and (max-width : 1200px){
	.jobs_overview {grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width : 768px){
	.jobs_overview {grid-template-columns: repeat(1,1fr);}
}
/***********/










/*** 3ER ICON BOX ***/
.icon3box {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr);}
.icon3box > div {background: var(--grd01); padding: var(--gp1-r); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05); display: flex; flex-direction: column; gap: var(--gp1-r);}
.icon3box > div > span {display: block; text-align: center; text-transform: uppercase; font-weight: bold; font-size: var(--fs-xl1); color: #000;}
.icon3box > div > span span {color: #e6232a;}
.icon3box svg {display: block; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); margin: auto;}
.icon3box .s1 {stroke: #000; stroke-width: 2.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

@media screen and (max-width : 1250px){
	.icon3box {grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width : 680px){
	.icon3box {grid-template-columns: repeat(1,1fr);}
}
/***********/







/*** BUTTONS ***/
.buttonwrap {display: flex; gap: var(--gp1-r-xs1) var(--gp1-r); flex-wrap: wrap;}
.buttonwrap.cnt {justify-content: center;}

.button1 a, .button1 button {display: block; width: fit-content; position: relative; padding: 16px 32px; transition: all .4s; text-align: center; letter-spacing: 1.5px}
.button1 a span {position: relative; z-index: 2;}
.button1 svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .4)); transition: all .4s;}
.button1 a:hover svg, .button1 button:hover svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .7));}



/*Farben*/
.buttoncol1 a, .buttoncol1 button {border: none; background: #333; color: #FFF;}
.buttoncol1 a:hover, .buttoncol1 button:hover {background: #000; color: #FFF;}

.buttoncol2 a, .buttoncol2 button {border: none; background: rgba(255,255,255, 0); box-shadow: inset 0 0 0 2px #FFF; color: #FFF; font-weight: 400;}
.buttoncol2 a:hover, .buttoncol2 button:hover {background: rgba(255,255,255, 1);  box-shadow: inset 0 0 0 2px #FFF; color: #333;}



@media screen and (max-width : 480px){
	.button1 a, .button1 button {padding: 12px 24px;}
}

@media screen and (max-width : 480px){
	.button1 a, .button1 button {padding: 8px 16px;}
}
/***********/











/*** KONTAKT SEITE ***/
/*Overview*/
.contact_overview {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr);}
.contact_overview > div {padding: var(--gp1-r); font-size: var(--fs1); display: flex; justify-content: flex-start; align-items: center; gap: var(--gp1-xs1); background: var(--grd01); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
.contact_overview > div > div {align-self: stretch; display: flex; align-items: center;}
.contact_overview > div > span {display: flex; width: 100%; justify-content: flex-start;}
.contact_overview > div > span, .contact_overview > div > span a {color: #000;}
.contact_overview svg {display: block; width: var(--gp1-r-xl1); height: var(--gp1-r-xl1);}
.contact_overview .s1 {stroke: #000; stroke-width: 3.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

@media screen and (max-width : 1200px){
	.contact_overview svg {width: var(--gp1); height: var(--gp1);}
}

@media screen and (max-width : 1000px){
	.contact_overview {grid-template-columns: repeat(1,1fr);}
}

/*Team*/
.contact_team {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);}
.contact_team > div {display: flex; align-items: center; gap: 0; background: var(--grd01); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
.contact_team .pic {width: 30%; align-self: stretch;}
.contact_team .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
.contact_team .txt {width: 70%; text-align: left; padding: var(--gp1-r);}
.contact_team .name {display: block; font-size: var(--fs-xl2);}
.contact_team .position {display: block; font-weight: 300; font-size: var(--fs1); margin-bottom: -0.31em;	padding: 0px 32px 0px 8px; background: #333; color: #FFF; width: fit-content; clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 50px, 0 100%);}
.contact_team ul {display: flex; flex-direction: column; gap: var(--gp1-r-xs2);}
.contact_team ul li {display: flex; justify-content: flex-start; align-items: center; gap: var(--gp1-r-xs1); color: #000;}
.contact_team ul li a {color: #000;}
.contact_team ul svg {display: block; width: var(--gp1-xs1); height: var(--gp1-xs1);}
.contact_team ul .s1 {stroke: #000; stroke-width: 5.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

@media screen and (max-width : 1100px){
	.contact_team {grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width : 600px){
	.contact_team .name {display: block; font-size: var(--fs-xl1);}
	.contact_team .position {font-size: var(--fs-xs1);}
	.contact_team ul li {font-size: var(--fs-xs1);}
}

/*Anfahrt*/
.gmap {border: none; display: block; width: 100%; aspect-ratio: 21/9; box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
@media (orientation: portrait) {
	@media screen and (max-width : 1000px){.gmap {aspect-ratio: 4/3;}}
}
/***********/








/*** ÜBER UNS SEITE ***/
/*STATISKITEN BOXEN*/
.stats4box {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr);}
.stats4box > div {background: var(--grd01); padding: var(--gp1-r); box-shadow: 0 1px 2px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .02), 0 10px 80px rgba(0,0,0, .05);}
.stats4box > div > div {display: block; text-align: center; text-transform: uppercase; font-weight: bold; font-size: var(--fs-xl3); color: #e6232a;}
.stats4box > div > div > span {color: #000; font-weight: 400;}
.stats4box strong {display: block; text-align: center; text-transform: uppercase; font-weight: bold;}
.stats4box svg {display: block; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); margin: auto;}
.stats4box .s1 {stroke: #000; stroke-width: 2.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

@media screen and (max-width : 1250px){
	.stats4box {grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width : 680px){
	.stats4box {grid-template-columns: repeat(1,1fr);}
}


/*TIMELINE*/
.timeline {display: flex; flex-direction: column; max-width: 1200px; margin: auto;}
.timeline .row {display: flex; margin: -1px 0;}

.timeline .year {font-size: var(--fs-xl3); display: flex; align-items: center; padding: var(--gp1-r-xl1) var(--gp1-r);}
.timeline .center {width: var(--gp1-r-xl2); position: relative;}
.timeline .year, .timeline .txt {width: calc(50% - var(--gp1-r-xl1));}

/*Year*/
.timeline .year span {font-weight: bold;}

/*Text*/
.timeline .txt {padding: var(--gp1-r-xl1) var(--gp1-r); display: flex; flex-direction: column; gap: var(--gp1-r-xs1);}
.timeline .txt strong {display: block; font-weight: bold; text-transform: uppercase; color: #000;}
.timeline .txt p {font-size: var(--fs-xs1);}


/*Mittelpart*/
.timeline .center:after {content:""; display: block; width: 6px; height: 100%; background: #999; position: absolute; z-index: 1; top: 0px; left: 50%; transform: translate(-50%, 0);}
.timeline .center:before {content:""; display: block; width: 32px; height: 32px; background: #db2c32; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.timeline .center > div {width: 32px; height: 6px; background: #999; position: absolute; z-index: 2; top: 50%;}

/*Rechts/Links*/
.timeline .row:nth-child(odd) .year {justify-content: flex-end;}
.timeline .row:nth-child(odd) .center > div {left: 50%; transform: translate(calc(-50% - 32px), -50%);}

.timeline .row:nth-child(even) .txt {text-align: right;}
.timeline .row:nth-child(even) .center > div {right: 50%; transform: translate(calc(50% + 32px), -50%);}

/*Last/First*/
.timeline .row.last .center:after {height: 50%;}
.timeline .row.first .center:after {height: 50%; bottom: 0; top: unset;}

@media screen and (max-width : 768px){
	.timeline .center:after {width: 4px;}
	.timeline .center:before {width: 16px; height: 16px;}
	.timeline .center > div {width: 16px; height: 4px;}
	.timeline .row:nth-child(odd) .center > div {transform: translate(calc(-50% - 16px), -50%);}
	.timeline .row:nth-child(even) .center > div {transform: translate(calc(50% + 16px), -50%);}

	.timeline .year {padding: var(--gp1-r-xl1) 0;}
	.timeline .txt {padding: var(--gp1-r-xl1) 0;}
}

@media screen and (max-width : 460px){
	.timeline .row:nth-child(even) .year {order: 1;}
	.timeline .row:nth-child(even) .center {order: 2;}
	.timeline .row:nth-child(even) .txt {order: 3;}

	.timeline .year {width: calc(30% - var(--gp1-r-xl1));}
	.timeline .txt {width: calc(70% - var(--gp1-r-xl1));}
	.timeline .row:nth-child(even) .center > div {left: 50%; transform: translate(calc(-50% - 16px), -50%);}

	.timeline .row .year {justify-content: flex-end;}
	.timeline .row .txt {text-align: left !important;}

	.timeline .year {font-size: var(--fs-xl2);}
	.timeline .center:after {width: 2px;}
	.timeline .center > div {height: 2px;}
}

@media screen and (max-width : 360px){
	.timeline .year {font-size: var(--fs-xl1);}
}
/***********/











/*** LEISTUNGEN SEITE ***/
/*Overview*/
.services_overview {display: flex; gap: var(--gp1-r-xl2);}

.services_overview .line {width: 1px; align-self: stretch; background: #CCC; flex-shrink: 0;}

.services_overview .services_list ul {display: flex; flex-direction: column; gap: 16px;}
.services_overview .services_list li {padding: var(--gp1-r-xs2) var(--gp1-r-xs1); cursor: pointer; transition: all .4s; display: flex; align-items: center; gap: var(--gp1-r-xs1)}
.services_overview .services_list li div {width: 5px; height: 5px; background: #db2c32; transition: all .4s;}
.services_overview .services_list li span {white-space: nowrap;}
.services_overview .services_list .active {background: #333; color: #FFF;}
.services_overview .services_list .active div {background: #FFF;}

.services_overview .services_details > div {display: none;}

@media screen and (max-width : 1300px){
	.services_overview {gap: var(--gp1-r);}
	.services_overview .services_list li {padding: var(--gp1-xs3) var(--gp1-xs2);}
}

@media screen and (max-width : 768px){
	.services_overview {flex-direction: column;}
	.services_overview .services_list, .services_overview .line {display: none;}
	.services_overview .services_details {display: flex; flex-direction: column; gap: var(--gp1-r-xl2)}
	.services_overview .services_details > div {display: block !important;}
	.services_overview .services_details > div:after {content:""; height: 1px; display: block; width: 100%; background: #CCC; margin-top: var(--gp1-r-xl2);}
	.services_overview .services_details > div:last-child:after {display: none;}
	.services_overview .buttonwrap {justify-content: center;}
}

/***********/






/*** LISTEN ***/
.list1 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);}
.list1 li {display: flex; align-items: center; gap: var(--gp1-r-xs1); margin-left: var(--gp1-r-xs1);}
.list1 li i {display: block; width: 6px; height: 6px; background: #186fab; flex-shrink: 0;}
/***********/







/*** BILDER ***/
.ar21-9 {aspect-ratio: 21/9; object-fit: cover;}
/***********/







/*** FOOTER ***/
footer {background: #080808; color: #BBB; margin-top: var(--gp1-r-xl3);}
footer .wrap {transform: translate(0, calc(var(--gp1-r-xl1) * -1)); margin-bottom: calc(var(--gp1-r-xl1) * -1)}
footer .inner {background: url(/img/footerbg.svg) center no-repeat #161616; background-size: cover; display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr); padding: var(--gp1-r);}
footer .cell {display: flex; flex-direction: column; gap: 32px; padding: var(--gp1-r);}
footer .cell:first-child {background: #202020; justify-content: center;}
footer .flogo {filter:contrast(0%) brightness(2000%); display: block; width: 100%; max-width: 200px;}

.fttl1 {text-transform: uppercase; color:#FFF; font-size: var(--fs-xl1); font-weight: 700;}

.flist1 {font-size: var(--fs-xs1); display: flex; flex-direction: column; gap: var(--gp1-xs1);}
.flist1 li {display: flex; align-items: center; gap: var(--gp1-xs1);}
.flist1 li a {color: #BBB;}
.flist1 li:hover a {color: #FFF;}
.flist1 svg {display: block; width: 20px; height: 20px;}
.flist1 .s1 {stroke: #FFF; stroke-width: 4.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

/*Socials*/
footer .ft_socials {display: flex; gap: var(--gp1-xs1);}
footer .ft_socials svg {display: block; width: 24px; overflow: visible;}
footer .ft_socials svg {fill: none; stroke: #BBB; stroke-width: 4.0px; stroke-linecap: round; transition: all .4s;}
footer .ft_socials svg:hover {stroke: #FFF;}

.flist2 {font-size: var(--fs-xs1); display: flex; flex-direction: column; gap: var(--gp1-xs1);}
.flist2 a {color: #BBB; display: flex; align-items: center; gap: var(--gp1-xs1);}
.flist2 a:hover {color: #FFF;}
.flist2 li a > div {width: 4px; height: 4px; background: #db2c32; transition: all .4s;}
.flist2 li:hover a > div {background: #FFF;}

.lastrow {text-align: center; padding: var(--gp1-r-xs1); font-size: var(--fs-xs1);}
.lastrow a {color: #DDD}
.lastrow a:hover {color: #FFF;}

@media screen and (max-width : 1200px){
	footer .inner {grid-template-columns: repeat(2,1fr);}
	.flist1, .flist2 {font-size: var(--fs1);}
	.fttl1 {font-size: var(--fs-xl1);}
	footer .cell {gap: 16px;}
}

@media screen and (max-width : 900px){
	footer .inner {grid-template-columns: repeat(1,1fr);}
	footer .cell {gap: 8px;}
}
/***********/