@font-face{
	font-family: "Roboto";
	src: url("../../../components/fonts/Roboto-Regular.woff2") format("woff2"),
	url("../../../components/fonts/Roboto-Regular.woff") format("woff"),
	url("../../../components/fonts/Roboto-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: 400;
	font-display: fallback;
}
@font-face{
	font-family: "Roboto";
	src: url("../../../components/fonts/Roboto-Bold.woff2") format("woff2"),
	url("../../../components/fonts/Roboto-Bold.woff") format("woff"),
	url("../../../components/fonts/Roboto-Bold.ttf") format("truetype");
	font-weight: normal;
	font-weight: 700;
	font-display: fallback;
}
@font-face{
	font-family: "Roboto";
	src: url("../../../components/fonts/Roboto-Italic.woff2") format("woff2"),
	url("../../../components/fonts/Roboto-Italic.woff") format("woff"),
	url("../../../components/fonts/Roboto-Italic.ttf") format("truetype");
	font-style: italic;
	font-style: 400;
	font-display: fallback;
}
@viewport {
	width: device-width;
	zoom: 1; /* user-zoom:fixed; */
}
* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	box-sizing: border-box;
}
:root {
	--font: rgb(80,80,80);
	--font_light: rgb(243,246,244);
	--fontdark:rgb(12,14,20);
	--nav-color: rgb(220,220,220);
	--nav-hover-color: rgb(253,25,28);
	--button-default: rgb(232,2,5);
	--button-hover: rgb(253,25,28);
	--trance-red: rgba(253,25,28,0.7);
	--green: rgb(22,154,44);
	--green_hover: rgb(35,189,60);
	--white: rgb(255,255,255);
	--even: rgb(243,243,243);
	--bg: rgb(36,36,36);
	--bgtrans9: rgba(36,36,36,0.9);
	--bgblack8: rgba(36,36,36,0.8);
	--bgtrans7: rgba(36,36,36,0.7);
	--bgtrans5: rgba(36,36,36,0.5);
	--bgtrans1: rgba(36,36,36,0.1);
	--border: rgb(228, 228, 228);
	--boxshadow: rgba(0,0,0,0.1);
	--yellow: rgb(253,255,213);
	--darkyellow: rgb(239, 173, 77);
	--darkyellowhover: rgb(255,181,75);
	--eavesbrd: rgb(206,205,173);
	--fieldset: rgb(229,240,232);
	--traceyellow: rgba(253,255,213,0.03);
	--traceyellowbrd: rgba(206,205,173,0.3);
	--trancewhite9: rgba(255,255,255,0.9);
	--trancewhite5: rgba(255,255,255,0.5);
	--trancewhite2: rgba(255,255,255,0.2);
	--trancewhite1: rgba(255,255,255,0.1);
	--trancewhite05: rgba(255,255,255,0.05);
}
html, body {
	width: 100%;
	height: auto;
	font-family: "Roboto";
	font-size: 16px;
	font-weight: 400;
	line-height: 150%;
	color: var(--font);
	background: var(--background);
}
body { overflow-x: hidden; }
body > .main { position: relative; }
h1 { font-family: "Roboto"; font-size: 51px; font-weight: 900; }
h3 { font-family: "Roboto"; font-size: 36px; font-weight: 600; }
h4 { font-family: "Roboto"; font-size: 24px; font-weight: 600; }
.section h3 { margin-bottom: 36px; }
.section h4 { margin-bottom: 26px; text-transform: uppercase }

h5 { margin-bottom: 1rem; font-family: "Roboto"; font-size: 20px; font-weight: 600; }
p {
	padding-bottom: 1rem;
}
a { text-decoration: none; color: var(--button-default) }
a:hover { color: var(--button-hover) }
img { display: block }
.main ol,
.main ul { padding-bottom: 1rem; }
.main ul ul,
.main ol ol,
.main ol ol {
	padding-top: 20px;
}
.main ol li,
.main ul li { padding-bottom: 1rem; }
.main ol li:last-child,
.main ul li:last-child { padding-bottom: 0; }
.btn {
	position: relative;
	width: auto;
	height: auto;
	padding: 15px;
	color: var(--white);
	line-height: normal;
	background: var(--button-default);
	transition-duration: 0.4s;
	animation-duration: 0.4s;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
}
#offer_whatsapp.btn { background: var(--green); }
.btn:hover { color: var(--white); background: var(--button-hover); }
.btn::after {
	content: "GO";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	line-height: normal;
	background: var(--button-hover);
	transition-duration: 0.4s;
	animation-duration: 0.4s;
	transition-property: all;
	transform: translate3d(-100%,0,0);
	z-index: 10;
}
.btn:hover::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
#offer_whatsapp.btn:hover,
#offer_whatsapp.btn::after { background: var(--green_hover); }

input { outline: none }
.form-control:focus {
	background-color: var(--white);
	outline: 0;
	box-shadow: 0 0 0 .25rem var(--trance-red);
}
.btn:hover {
	background: var(--button-hover)
}
.pd-10 { padding: 10px 0; }
.pd-20 { padding: 20px 0; }
.pd-30 { padding: 30px 0; }
.pd-40 { padding: 40px 0; }

figure a,
figure a img {
	width: 100%; height: auto;
}

table {
	width: 100%;
	margin-bottom: 15px;
	font-size: 0.9em;
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
}
table th,
table td {
	padding: 15px;
	vertical-align: top;
	border: 1px solid var(--border);
}
table tbody > tr:nth-child(2n+1) > td,
table tbody > tr:nth-child(2n+1) > th {
  background-color: var(--even);
}
.section.dark table tbody > tr:nth-child(2n+1) > td,
.section.dark table tbody > tr:nth-child(2n+1) > th {
	background: var(--trancewhite1);
}

.main blockquote.note {
	padding: 15px;
	background-color: var(--yellow);
	border: 1px solid var(--eavesbrd);
	border-radius: 4px
}
.main blockquote.note ul { margin-bottom: 0; padding-bottom: 0; }
.main blockquote.note ul li { margin-bottom: 10px }
.main blockquote.note ul li:last-child { margin-bottom: 0px }
.main blockquote.note p { margin: 0; padding: 0; }

.hidden { display: none }
form.appointment label.lable {
	display: block;
	padding-bottom: 5px;
	color: var(--white);
}
#header #top {
	margin: 0;
	padding: 0 30px;
	width: 100%;
	height: 60px;
	max-width: none;
	background: var(--bgtrans9);
	transition: all 0.5s;
}
#header .section.mainnav { padding: 0 30px; }
.scrolled #header #top { height: 0; visibility: hidden; overflow: hidden;  }
.scrolled #header { box-shadow: 0px 0 18px rgba(0,0,0,0.4); }
#header #top .container { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
#header #top .simplesearch-search-form .form-floating { display: grid; grid-template-columns: auto 46px; gap: 10px }
#header #top .simplesearch-search-form .form-floating .submit { padding: 0 }
#header #top input#search.form-control { padding: 10px; height: auto; min-height: auto; line-height: normal; color: var(--white); background: var(--font); border: 0; outline: none; }
#header #top input#search.form-control:focus { box-shadow: 0 0 0 .15rem var(--button-default) ; }
.header .sitename { margin: 0; padding: 10px 0 }
.header .sitename a.logo { display: block; width: 100px; height: auto; }
.header .sitename a.logo img { display: block; width: 100%; height: auto; }
.header .sitename figcaption.title {
	display: none
}
#header-nav button.navbar-toggler {
	height: auto;
	padding: 15px;
	color: var(--white);
	border: 0;
	box-shadow: none;
}
#bdNavbar { background: var(--bg) }
#bdNavbar.offcanvas .offcanvas-body ul.navbar-nav { margin-right: 20px;}
#bdNavbar.offcanvas .offcanvas-header figure.sitename a.navbar-brand { padding: 20px; }
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav { margin-right: 0; }
#bdNavbar.offcanvas.show .offcanvas-header { width: 100%; height: auto; transition: all 0.7s; }
#bdNavbar.offcanvas.show .offcanvas-header figure.sitename { padding: 0 }
#bdNavbar.offcanvas.show .offcanvas-header figure.sitename,
#bdNavbar.offcanvas .offcanvas-header figure.sitename a.navbar-brand,
#bdNavbar.offcanvas .offcanvas-header figure.sitename a.navbar-brand .img { display: block; margin: 0; transition: all 0.7s; }
#bdNavbar.offcanvas .offcanvas-header .btn.close {
	position: fixed;
	top: 10px;
	right: 10px;
	color: var(--white);
	z-index: 999;
}
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li { display: block; margin: 0 0 5px; padding-right: .5625rem; padding-left: .5625rem; }
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li ul.dropdown-menu.show { margin: 10px 0; padding: 10px 0; background: var(--bgtrans7); border: 0; border-radius: 0; }
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav > li.current,
#bdNavbar.offcanvas .offcanvas-body ul.navbar-nav li.current ul.dropdown-menu li.current span.nav-link.current { padding-right: .5625rem; padding-left: .5625rem; background: var(--button-default) }


#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li a.nav-link,
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li.current span.nav-link.current {
	display: inline-block;
	padding: 10px 15px;
}
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li .nav-link.current{ display: inline-block; }
#bdNavbar.offcanvas.show .offcanvas-body ul.navbar-nav li button.dropdown-toggle {
	float: right;
	padding: 10px 20px;
}
#bdNavbar.offcanvas.show .offcanvas-body a.shop {
	display: block;
}
.scrolled #header {
	background: var(--bgtrans9);
	box-shadow: 0px 0 18px var(--boxshadow);
	transition: all 0.3s ease-in-out 0s;
}
#top button.call {
	padding: 10px;
	font-size: 15px;
	color: var(--white);
	background-color: transparent;
	transition: all 0.3s ease-in-out 0s;
	border: 0;
	border-radius: 4px 4px 4px 4px;
}
.modal-header {
	color: var(--white);
	background: var(--button-default)
}
#protection.modal .inner_content h3 { font-size: 24px }
#protection.modal .inner_content h4 { font-size: 18px }
#protection.modal .inner_content p {
  font-size: 14px;
  line-height: 130%;
}
.modal-footer {
	background: #F3F3F3
}
.navmenu > ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}
.navmenu > ul > li {
	white-space: nowrap;
	padding: 10px 14px;
}
.navmenu ul.navi li.current {
	color: var(--white);
	background: var(--button-default);
	border-radius: 4px;
}
.navmenu ul li a { display: block; }
.navmenu > ul > li > a::before,
.footer-links > ul.footernav > li > a::before {
	content: "";
	position: absolute;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--nav-hover-color);
	visibility: hidden;
	width: 0px;
	transition: all 0.3s ease-in-out 0s;
}
.navmenu ul { list-style: none; }
.navmenu li { position: relative; }
.navmenu ul li a { color: var(--nav-color); }
.navmenu a:hover::before,
.navmenu li:hover > a::before,
.navmenu .active::before,
.footer-links > ul.footernav > li a:hover::before,
.footer-links > ul.footernav > li:hover > a::before {
	visibility: visible;
	width: 100%;
}
ul.navbar-nav li:hover > a,
ul.navbar-nav .active,
ul.navbar-nav .active:focus {
	color: var(--white);
}
ul.navbar-nav a,
ul.navbar-nav a:focus,
ul.navbar-nav li.current a.current,
.footer-links ul.footernav li.currwnt a.current {
	color: var(--white);
}
ul.navbar-nav li:hover > a,
ul.navbar-nav .active,
ul.navbar-nav .active:focus {
	color: var(--white);
}
ul.navbar-nav li.dropdown ul.dropdown-menu { background: var(--bg); opacity: 0; }
ul.navbar-nav li.dropdown ul.dropdown-menu.show { opacity: 1; }
ul.navbar-nav li.dropdown.flex { display: flex; flex-direction: row; flex-wrap: nowrap }

ul.navbar-nav li.dropdown button.dropdown-toggle { width: auto; padding: 0 5px; text-align: center; color: var(--white); background: transparent; border: 0; border-radius: 4px; transition: 0.3s }
ul.navbar-nav li.dropdown button.dropdown-toggle:hover { background: var(--trance-red); }
ul.navbar-nav li.dropdown button.dropdown-toggle::after { margin-right: .255em; }
ul.navbar-nav li.dropdown li span.current,
ul.navbar-nav li.dropdown .dropdown-menu li a { display: block; padding: 10px 15px; white-space: collapse; }
ul.navbar-nav li.dropdown .dropdown-menu li a:hover { background: var(--button-hover); }
ul.navbar-nav li.dropdown a.dropdown-toggle .dropdown-toggle::after { padding-left: 5px; }
ul.navbar-nav li.dropdown .dropdown-menu li,
ul.navbar-nav li.dropdown .dropdown-menu li span.current { border-radius: 0 }
ul.navbar-nav li.current span.nav-link.current,
ul.navbar-nav li.dropdown.current span.nav-link.current { color: var(--white) }
.main .teaser.section,
.main .subteaser.section,
.main .subteaser2.section {
	display: grid;
	position: relative;
	width: 100%;
	background-color: var(--bg);
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	place-content: center;
	scroll-margin-top: 0px;
	overflow: clip;
}
.main .teaser.section { padding: 200px 30px 120px; }
body.subpage #teaser.teaser.section { display: block }
body.subpage #teaser.teaser.section .content h4 { margin: 0; }
.teaser.section .container .row .content,
.subteaser.section .container .row .content,
.subteaser2.section .container .row .content { color: var(--white); }
.section .container .row .content p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}
.subpage .teaser.section { min-height: 50vh; }
.teaser.section .background,
.subteaser.section .background,
.subteaser2.section .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.main .leistungsmessung.section.dark { background-color: var(--bg); }
.main .leistungsmessung.section.dark .container .row h3 { color: var(--white) }
.main .leistungsmessung.section.dark .container .row .center { padding: 30px; }
.main .leistungsmessung.section.dark .container .row .center p,
.main .leistungsmessung.section.dark .container .row .column p,
.main .leistungsmessung.section.dark .container .row .center ul li,
.main .leistungsmessung.section.dark .container .row .column ul li { color: var(--white); }
.main .leistungsmessung.section.dark .container .row .column { padding: 30px }
.main .leistungsmessung.section.dark .container .row .column figure { float: right }
.main .leistungsmessung.section.dark .container .row .column figure a,
.main .leistungsmessung.section.dark .container .row .column figure a img { display: block; width: 100%; height: auto; }

.teaser { position: relative }
.teaser .container {
	position: relative;
	z-index: 2;
}
.teaser.section .overlay,
.subteaser.section .overlay,
.subteaser2.section .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bgblack8);
	z-index: 0
}
.subpage .teaser.section h1 {
	font-size: 60px;
	color: var(--white);
}
.header ul.social-links { margin-bottom: 0; padding-left: 0; padding-bottom: 0; justify-content: end; gap: 5px; }
.header ul.social-links.d-md-flex.align-items-center li { padding-bottom: 0; list-style: none }
.header ul.social-links.d-md-flex.align-items-center li a.link { padding: 10px 5px; transition: transform .5s; opacity: 0.5; }
.header ul.social-links.d-md-flex.align-items-center li a.link:hover { opacity: 1; transform: scale(1.5); }
.header ul.social-links.d-md-flex.align-items-center li a.link.whatsapp { color: rgb(37, 211, 102) }
.header ul.social-links.d-md-flex.align-items-center li a.link.twitter { color: rgb(29, 161, 242) }
.header ul.social-links.d-md-flex.align-items-center li a.link.facebook { color: rgb(24, 119, 242) }
.header ul.social-links.d-md-flex.align-items-center li a.link.instagram { color: rgb(254, 218, 117) }
.header ul.social-links.d-md-flex.align-items-center li a.link.linkedin { color: rgb(0, 119, 181) }
.about {
	padding: 60px 30px;
	color: var(--fontdark);
	background: var(--white);
}
.statistics {
	padding: 60px 30px;
	background: var(--blackblue);
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	z-index: 1;
}
/** breadcrumbs **/
#breadcrumbs.section { padding: 10px 30px; background: var(--white) }
#breadcrumbs.section ul.breadcrumbs.container {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	margin-bottom: 0;
	padding: 0;
}
#breadcrumbs.section ul.breadcrumbs.container li { padding-bottom: 0; list-style: none; line-height: normal }
#breadcrumbs.section ul.breadcrumbs.container li::after { content: "/" }
#breadcrumbs.section ul.breadcrumbs.container li:last-child::after { content: "" }
#breadcrumbs.section ul.breadcrumbs.container li a,
#breadcrumbs.section ul.breadcrumbs.container li span.current { display: inline-block; padding: 5px 10px; font-size: 90%; color: #787878 }
#breadcrumbs.section ul.breadcrumbs.container li span.current { font-weight: 600 }

.main section.section {
	width: 100%;
	padding: 60px 30px
}

/* -------------------------------------------------------- contentimg */
.first.section .wrap { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.first.section .wrap .item { max-width: 300px; max-height: 300px; overflow: hidden; transition: all 0.3s; }
.first.section .wrap .item:hover { box-shadow: 0px 14px 8px -8px rgba(0, 0, 0, 0.37); transform: scale(1.2); z-index: 9 }
.first.section .wrap .item figure { margin: 0; }
.first.section .wrap .item figure a { display: block; width: 100%; }
.first.section .wrap .item figure a .img { display: block; width: 300px; height: 300px; object-fit: cover; }

.contentimg,
.trasdata_img {
	position: relative;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0px 24px 11px -13px rgba(0, 0, 0, 0.37);
	overflow: hidden;
}
.contentimg .img,
.trasdata_img .img {
	width: 100%;
	height: auto;
	border-style: none;
}

/* -------------------------------------------------------- performance home */
.main .performance.light { background: var(--white); }
.main .performance.light h3,
.main .performance.light h4,
.main .performance.light p { color: var(--font); }
.main .performance.dark { background: var(--bg) }
.main .performance.dark h3,
.main .performance.dark h4,
.main .performance.dark p { color: var(--white); }
#dynonmax.dynonmax .container .row .center { text-align: center }
.performance .container .performanceitems {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.performance .container .performanceitems .item {
	position: relative;
	min-height: 280px;
	padding: 0;
	text-align: center;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-justify-content: center;
	justify-content: center;
	border: 1px solid var(--button-default);
	border-radius: 4px;
	overflow: hidden;
}
.performance .container .performanceitems .item:hover {
	border-color: var(--button-hover);
	box-shadow: 0 0 0 .15rem var(--trance-red);
}
.performance .container .performanceitems .item a {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 999
}
.performance .container .performanceitems .item .wrap {
	display: grid;
	align-content: center;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-repeat:no-repeat;
	background-position: top;
	transition: all 0.5s;
}
.performance .container .performanceitems .item .wrap::before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; right: 0; bottom: 0; left: 0;
	content: "";
	background: var(--bgtrans5);
	backdrop-filter: blur(5px);
	transition: all 0.5s;
	z-index: 1;
}
.performance .container .performanceitems .item:hover .wrap::before {
	backdrop-filter: blur(0px);
}

.performance .container .performanceitems .item .wrap .icon,
.performance .container .performanceitems .item .wrap .title {
	display: grid;
	height: 100%;
	color: var(--white);
	justify-content: center;
	z-index: 9;
}
.performance .container .performanceitems .item .wrap .icon { align-items: center; }
.performance .container .performanceitems .item .wrap .title { align-items: start; text-transform: uppercase; }

/* -------------------------------------------------------- gearbox Getriebe home */
.gearbox.light { background: var(--white); }
.gearbox.light h3,
.gearbox.light h4, { color: var(--font); }
.gearbox.light p { color: var(--font); }
.gearbox.dark { background: var(--bg) }
.gearbox.dark h3,
.gearbox.dark h4,
.gearbox.dark p { color: var(--white); }
.price.section .container .row .center,
.gearbox .container .row .center,
.software .container .row .center,
.software .container .row .center,
.softwareupdate .container .row .center,
.wheelrim .container .row .center,
.service_timeline .container .row .center,
.brakedisc.section .container .row .center,
.key.section .container .row .center { text-align: center }

.badge-right {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0; right: 0;
	display: inline-block;
	text-align: center;
	transform: rotate(90deg);
	overflow: hidden;
	z-index: 35;
}
.badge_inner {
	margin: 30px 0 0;
	font-size: 16px;
	color: var(--white);
	background: var(--button-default);
	transform: translateY(-50%) translateX(-50%) translateX(30px) rotate(-45deg);
}
.badge_inner p { padding: 0; }

/* -------------------------------------------------------- statistics home */
.main .statistics.light { background: var(--white); }
.main .statistics.light h3,
.main .statistics.light h4,
.main .statistics.light p { color: var(--font); }
.main .statistics.dark { background: var(--bg) }
.main .statistics.dark h3,
.main .statistics.dark h4,
.main .statistics.dark p { color: var(--white); }

.subpage .main .statistics h3,
.subpage .main .statistics h4,
.subpage .main .statistics p { text-align: center; }

.main .counter {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	padding-left: 0;
	grid-column: 20px;
	gap: 10px;
}
.subpage .main .counter { grid-template-columns: repeat(4, 1fr); }
.main .statistics .counter .item {
	display: grid;
	grid-template-rows: 1fr 1fr ;
	width: 100%;
	height: 100%;
	border-right: 1px solid var(--trancewhite1);
}
.main .statistics .counter .item:last-child { border-right: 0; }
.main .statistics .counter .item .calc,
.main .statistics .counter .item .text { display: block; height: 100%; text-align: center; line-height: normal; }
.main .statistics .counter .item .calc { font-size: 65px; color: var(--button-default) }
.main .statistics .counter .item .text { font-size: 16px; }
.main .statistics.light .counter .item .text { color: var(--font); }
.main .statistics.dark .counter .item .text { color: var(--white); }

/* -------------------------------------------------------- slider */
.main .slider.light { background: var(--white); }
.main .slider.light h3,
.main .slider.light h4,
.main .slider.light p { color: var(--font); }
.main .slider.dark { background: var(--bg) }
.main .slider.dark h3,
.main .slider.dark h4,
.main .slider.dark p { color: var(--white); }

.main .rslides { padding: 0; margin: 0 auto !important; position: relative; list-style: none; overflow: hidden; width: 100%; max-width: 690px; padding: 0; margin: 0; }
.main .rslides li { list-style: none; -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
.main .rslides li:first-child { position: relative; display: block; float: left; }
.main .rating { display: flex; flex-wrap: nowrap; justify-content: center; padding-bottom: 12px; }
.main .rating i { display: block; padding: 5px; color: var(--button-default) }
.main .rslides li .name,
.main .rslides li .comment { display: block; text-align: center }
.main .rslideswrap { position: relative; margin: 0 auto; max-width: 690px }
.main .rslides_tabs { display: flex; margin: 0; padding: 0; flex-wrap: nowrap; justify-content: center; }
.main .rslides_tabs li { list-style: none }
.main .rslides_nav.rslides1_nav { position: absolute; top: 30%; }
.main .rslides_nav.rslides1_nav.prev { float: left; left: -20px; }
.main .rslides_nav.rslides1_nav.next { float: right; right: -20px; }
.main .rslideswrap ul.rslides li.item p,
.main .rslideswrap ul.rslides li.item h5.name { text-align: center; font-weight: 400 }
.main .rslideswrap ul.rslides li.item p { font-style: italic; }

/* -------------------------------------------------------- key */
/* dark */
.main .key.section.dark { background: var(--bg); }
.main .key.section.dark h3,
.main .key.section.dark h4 { color: var(--white); }
.main .key.section.dark p { color: var(--trancewhite5); }
/* light */
.main .key.section.light { background: var(--white); }
.main .key.section.light h3,
.main .key.section.light h4,
.main .key.section.light p { color: var(--bg); }

/* -------------------------------------------------------- filter */
.procedure.section .row .wrap,
.flipbox.section .row .wrap {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.procedure.section .row .wrap .box,
.flipbox.section .row .wrap .box {
	background-color: transparent;
	height: 360px;
	border: 1px solid transparent;
	perspective: 1000px;
}
.procedure.section .row .wrap .inner,
.flipbox.section .row .wrap .inner  {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}
.procedure.section .row .wrap .box:hover .inner,
.flipbox.section .row .wrap .box:hover .inner {
	transform: rotateY(180deg);
}
/* Position the front and back side */
.flipbox.section .row .wrap .front,
.flipbox.section .row .wrap .back,
.procedure.section .row .wrap .front,
.procedure.section .row .wrap .back {
	display: grid;
	align-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 20px;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	border-radius: 4px;
}
.procedure.section .row .wrap .front p,
.flipbox.section .row .wrap .front p,
.procedure.section .row .wrap .back p,
.flipbox.section .row .wrap .back p {
	margin: 0;
	padding: 0;
}
/* Style the front side (fallback if image is missing) */
.procedure.section .row .wrap .front,
.flipbox.section .row .wrap .front { background-color: var(--button-default); color: var(--white); }
/* Style the back side */
.procedure.section .row .wrap .back,
.flipbox.section .row .wrap .back { background-color: var(--bg); color: var(--white); transform: rotateY(180deg); }
.procedure.section .row .wrap .box .inner .flipbox.front .flipbox_icon,
.flipbox.section .row .wrap .back .inner .flipbox.front .flipbox_icon { margin-bottom: 20px; }
.procedure.section .row .wrap .box .inner .flipbox.front .flipbox_icon .fa-solid,
.flipbox.section .row .wrap .box .inner .flipbox.front .flipbox_icon .fa-solid { font-size: 40px; line-height: normal; }
.procedure.section .row .wrap .box .inner .flipbox.front .flipbox_title,
.flipbox.section .row .wrap .box .inner .flipbox.front .flipbox_title { font-size: 24px; }

.main .flipbox.section .container .row .center h3 { text-align: center }

/* -------------------------------------------------------- services */
.main .services.section.dark { background: var(--bg); }
.main .services.section.dark h3,
.main .services.section.dark h4 { color: var(--white); }
.main .services.section.dark p { color: var(--trancewhite5); }

/* -------------------------------------------------------- accordion */
.ui-accordion .ui-accordion-header {
	padding: 1em;
	background: var(--bs-gray-100);
	border: 1px solid #eee;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
}
.ui-accordion .ui-accordion-header:hover,
.ui-accordion .ui-accordion-header.ui-state-active { color: var(--white); background: var(--button-hover); }
.ui-accordion .ui-accordion-header .icon { float: right }
.ui-accordion .ui-accordion-header .icon .fa-chevron-down { display: block }
.ui-accordion .ui-accordion-header .icon .fa-chevron-up { display: none; }
.ui-accordion .ui-accordion-header.ui-state-active .icon .fa-chevron-down { display: none }
.ui-accordion .ui-accordion-header.ui-state-active .icon .fa-chevron-up { display: block }

/* -------------------------------------------------------- expertiese partikel + process */
.main .expertiese.section ul li { list-style: none }
.main .expertiese.section .container .row .center h3 { text-align: center; }
.main .expertiese.section .container .row ul li i { color: var(--button-default) }
/* dark */
.main .expertiese.section.dark,
.main .process.section.dark,
.main .notes.section.dark,
.main .enhancement.section.dark,
.main .obd.section.dark,
.main .trasdata.section.dark,
.main .eddybrake.section.dark,
.main .benefits.section.dark,
.main .list.section.dark,
.main .advantage.section.dark,
.main .consumption.section.dark,
.main .fuelcosts.section.dark { background: var(--bg); }
.main .expertiese.section.dark h3,
.main .process.section.dark h3,
.main .notes.section.dark h3,
.main .enhancement.section.dark h3,
.main .obd.section.dark h3,
.main .eddybrake.section.dark h3,
.main .fuelcosts.section.dark h3,
.main .consumption.section.dark h3,
.main .expertiese.section.dark h4,
.main .process.section.dark h4,
.main .enhancement.section.dark h4,
.main .benefits.section.dark h4,
.main .eddybrake.section.dark h4,
.main .notes.section.dark h4,
.main .list.section.dark h4,
.main .fuelcosts.section.dark h4,
.main .consumption.section.dark h4,
.main .consumption.section.dark h5,
.main .advantage.section.dark h5 { color: var(--white); }
.main .obd.section.dark h3,
.main .trasdata.section.dark h3,
.main .trasdata.section.dark h4,
.main .benefits.section.dark h3,
.main .advantage.section.dark h3,
.main .obd.section.dark h4,
.main .advantage.section.dark h4,
.main .list.section.dark h3 { color: var(--button-default); }
.main .expertiese.section.dark p,
.main .notes.section.dark p,
.main .obd.section.dark p,
.main .trasdata.section.dark p,
.main .benefits.section.dark .container .row .column ul.benefits_items li .inner p,
.main .eddybrake.section.dark p,
.main .list.section.dark p,
.main .obd.section.dark ul li,
.main .expertiese.section.dark ul li,
.main .trasdata.section.dark ul li,
.main .process.section.dark ul li,
.main .list.section.dark ul li,
.main .consumption.section.dark ul li,
.main .advantage.section.dark ul li { color: var(--white); }
.main .process.section.dark p,
.main .enhancement.section.dark p,
.main .consumption.section.dark p,
.main .advantage.section.dark p { color: var(--trancewhite5); }
.main .process.section.dark .container .row blockquote.note,
.main .enhancement.section.dark .container .row .mininote { background: var(--traceyellow); border-color: var(--traceyellowbrd); }
.main .process.section.dark .container .row blockquote.note p { color: var(--trancewhite5) }
.main .enhancement.section .container .row .mininote p,
.main .enhancement.section .container .row .mininote .icon_wrap .fa-solid { color: var(--yellow) }
.main .advantage.section .row ul.lists_items li.item .inner .icon_wrap i { margin-right: 10px; color: var(--green); }
/* .accordion */
.main .notes.section.dark .accordion h4 { background: var(--trancewhite1); border-color: var(--trancewhite2) }
.main .notes.section.dark .accordion h4:hover,
.main .notes.section.dark .accordion h4.ui-state-active { background: var(--button-default) }
/* light */
.main .expertiese.section.light,
.main .notes.section.light,
.main .process.section.light { background: var(--white); }
.main .expertiese.section.light h3,
.main .process.section.light h3,
.main .notes.section.light h3,
.main .expertiese.section.light h4,
.main .process.section.light h4,
.main .notes.section.light h4,
.main .expertiese.section.light p,
.main .process.section.light p,
.main .notes.section.light p,
.main .expertiese.section.light ul li,
.main .process.section.light ul li { color: var(--bg); }
.main .process.section .container .row .center { text-align: center }

/* -------------------------------------------------------- frequently asked questions */
.main .notes.section .container .row .center > h3 { text-align: center }

.mininote {
	display: grid;
	grid-template-columns: 40px 1fr;
	padding: 15px 20px 15px 10px;
	font-size: 14px;
	line-height: 150%;
	background: var(--yellow);
	border: 1px solid var(--eavesbrd)
}
.mininote .icon_wrap .fa-solid { line-height: normal }
.mininote p { margin: 0; }

/* -------------------------------------------------------- timeline */
#timeline { padding: 100px 30px; background: var(--bg); }
#timeline h3 { color: var(--white); text-align: center }
/* The actual timeline (the vertical ruler) */
.main-timeline { position: relative; }

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	margin-left: 0;
	background-color: var(--button-default);
}

/* Container around content */
.timeline { position: relative; background-color: inherit; width: 50%; }
/* The circles on the timeline */
.timeline::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: var(--white);
  border: 1px solid var(--button-default);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
/* Place the container to the left */
.left { padding: 0px 40px 20px 0px; left: 0; }
.main-timeline .timeline.left .card p.text-muted { padding-left: 32px; padding-top: 20px; margin-bottom: 0; }

/* Place the container to the right */
.right { padding: 0px 0px 20px 40px; left: 50%; }
.main-timeline .timeline.left .card .text-muted,
.main-timeline .timeline.right .card .text-muted {
	padding-left: 32px;
	padding-top: 20px;
	margin-bottom: 0;
}

/* Add arrows to the left container (pointing right) */
.left::before {
	content: " ";
	position: absolute;
	top: 18px;
	right: 31px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
	z-index: 1;
}

/* Add arrows to the right container (pointing left) */
.right::before {
	content: " ";
	position: absolute;
	top: 18px;
	left: 31px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
	z-index: 1;
}

/* Fix the circle for containers on the right side */
.right::after { left: -12px; }

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.main-timeline::after { left: 31px; }

	/* Full-width containers */
	.timeline { width: 100%; padding-left: 70px; padding-right: 25px; }

	/* Make sure that all arrows are pointing leftwards */
	.timeline::before {
		left: 60px;
		border: medium solid var(--white);
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--white) transparent transparent;
	}
	/* Make sure all circles are at the same spot */
	.left::after,
	.right::after {
		left: 18px;
	}
	.left::before { right: auto; }
	/* Make all right containers behave like the left ones */
	.right { left: 0%; }
}
/* -------------------------------------------------------- ende timeline */

/* -------------------------------------------------------- service > serviceart */
.serviceart.section {
	background: var(--bg);
}
.serviceart .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: space-around;
	gap: 10px;
	height: 100%;
	padding: 0;
	border-style: none;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0px 13px 20px -13px var(--bgtrans5);
	background: var(--white);
}
.serviceart.section .container .row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.serviceart.section .container .row .col .serviceart_item {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border: 1px sold var(--button-default);
	transition: all 0.5s;
}
.serviceart.section .container .row .col .serviceart_item .wrap {
	display: grid;
	position: relative;
	align-content: start;
	grid-template-rows: auto;
	align-items: center;
	width: 100%;
	height: 100%;
	gap: 10px;
	padding: 30px;
	background: var(--bgtrans7);
	border: 1px solid var(--button-default);
	border-radius: 4px;
	backdrop-filter: blur(5px);
	transition: all 0.5s;
	overflow: hidden;
}
.serviceart.section .container .row .col:hover .serviceart_item { border-color: var(--nav-hover-color); }
.serviceart.section .container .row .col:hover .serviceart_item .wrap {
	background: var(--bgtrans5);
	backdrop-filter: blur(0px);
}
.serviceart.section .container .row .col .serviceart_item .wrap a { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 99; }
.serviceart.section .container .row .col .serviceart_item .wrap .description { padding-bottom: 15px; }
.serviceart .item .feature-icon { height: auto; margin-bottom: 20px; }
.serviceart .item .feature-icon .fa-solid { font-size: 60px; display: block; height: 64px; width: 64px; margin: 0 auto; line-height: normal; color: var(--white) }
.serviceart .item h5 { margin-bottom: 15px; color: var(--white) }
.serviceart .item p { margin: 0; padding: 0; font-size: 14px; color: var(--white) }


/* -------------------------------------------------------- service timeline */
.service_timeline.section .container .row > .center { padding-bottom: 20px; }
.service_timeline .featurelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 }
.service_timeline .featurelist .list_item { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 0 }
.service_timeline .featurelist .list_item .listicon .fa-regular { line-height: normal }
.service_timeline .featurelist .list_item .listcontent h4 { margin-bottom: 15px }
.service_timeline .featurelist li { list-style: none }
.service_timeline .container .row ul li h4 { color: var(--button-default) }

/* dark */
.main .service_timeline.section.dark { background: var(--bg); }
.main .service_timeline.section.dark h3,
.main .service_timeline.section.dark h4 { color: var(--white); }
.main .service_timeline.section.dark p { color: var(--trancewhite5); }
/* light */
.main .service_timeline.section.light { background: var(--white); }
.main .service_timeline.section.light h3,
.main .service_timeline.section.light h4,
.main .service_timeline.section.light p { color: var(--bg); }

/* price label */
.main .price.section { padding: 100px 30px }
.main .price.section .container .row:first-child .center { padding-bottom: 20px }
.main .price.section .container .row .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.main .price.section.dark .container .price_item { height: 100%; border-radius: 4px; box-shadow: 0px 12px 13px -9px; border-radius: 8px; overflow: hidden }
.main .price.section.light .container .price_item { height: 100%; border-radius: 4px; box-shadow: 0px 12px 13px -9px; border-radius: 8px; overflow: hidden }
.main .price.section .container .row .price_item .wrap { display: grid; grid-template-rows: 190px auto auto; padding: 0 }
.main .price.section .container .row .price_item .wrap .feature-icon { padding: 5px 0; line-height: normal; }
.main .price.section .container .row .price_item .wrap .feature-icon i { line-height: normal }
.main .price.section .container .row .price_item .wrap .title { padding: 40px 0; color: var(--white); background: linear-gradient(to bottom,  rgb(216,2,2) 0%,rgb(232,2,5) 100%); }
.main .price.section .container .row .price_item .wrap .title h4 { margin-bottom: 0; text-transform: none; font-size: 26px; font-weight: 400; }
.main .price.section .container .row .price_item .wrap .note { margin: 0; padding: 5px 0; min-height: 30px; line-height: normal; }
.main .price.section .container .row .price_item .wrap .price { background: var(--white); }
.main .price.section .container .row .price_item .wrap .price p { margin: 0; padding: 20px 0; color: var(--font); font-size: 60px; font-weight: 600; line-height: normal; }
.main .price.section .container .row .price_item .wrap .price p i.fa-solid { display: inline-block; line-height: normal; }
.main .price.section .container .row .price_item .wrap .mwst { padding: 30px 0; background: transparent }
.main .price.section .container .row .price_item .wrap .mwst .offer_whatsapp { width: 90%; padding: 15px; background: var(--green); }
.main .price.section .container .row .price_item .wrap .mwst .btn.offer_whatsapp::after { line-height: 175%; background: rgb(5, 172, 32) }
.main .price.section .container .row .price_item .wrap .mwst p { margin: 0; padding: 20px 0; line-height: normal; }
.main .price.section .container .row .price_item .wrap .mwst ul { margin: 0; padding: 0; }
.main .price.section .container .row .price_item .wrap .mwst ul li { list-style: none }
.main .price.section .container .row .price_item .wrap .mwst h4,
.main .price.section .container .row .price_item .wrap .mwst h5 { margin: 0; text-transform: none }
/* price dark */
.main .price.section.dark { background: var(--bg); }
.main .price.section.dark .container .row .center h3,
.main .price.section.dark .container .row .center h4 { color: var(--white); }
.main .price.section.dark .container .row .center { text-align: center; color: var(--font); }
.main .price.section.dark .container .price_item { background: var(--white); }
/* price light */
.main .price.section.light { background: var(--white); }

.price.section .container .row .wrap { padding: 30px 0 0; }
#appointment.modal .booking_form { padding: 0; box-shadow: none }
#appointment.modal .booking_form label.lable { padding: 5px 10px; text-align: left; color: var(--font) }
#appointment.modal .booking_form #emailHelp.col-form-label { padding: 5px 10px; font-size: 14px; font-style: italic; color: inherit }
#appointment.modal .booking_form #emailHelp.col-form-label .mark { border-bottom: 1px solid var(--button-default) }
#appointment.modal .booking_form form.appointment .confirm .form-group .form-check .form-check-label { color: var(--font); text-align: left }

.service_timeline.section.dark ul.featurelist li.list_item .listicon .icon_wrap {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	background: var(--green);
	border-radius: 4px;
}
.service_timeline.section.dark ul.featurelist li.list_item .listicon .icon_wrap i { vertical-align: text-top; color: var(--white);}

.main .diesel.section { background: var(--bg); }
.main .diesel.section h3,
.main .diesel.section h4,
.main .diesel.section p { color: var(--white) }
.main .diesel.section .container .row .center { text-align: center }

.main .wheelrim.section.light { background: var(--white); }
.main .wheelrim.section.light h3,
.main .wheelrim.section.light h4,
.main .wheelrim.section.light p { color: var(--font) }
.main .wheelrim.section.dark { background: var(--bg); }
.main .wheelrim.section.dark h3,
.main .wheelrim.section.dark h4,
.main .wheelrim.section.dark p { color: var(--white) }

.main .gallery.section.dark { background: var(--bg) }
.main .gallery.section.dark h3,
.main .gallery.section.dark h4 { color: var(--white) }
.main .gallery.section.dark p { color: var(--trancewhite5) }
.main .gallery.section .container .row .wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 20px 0;
}
.main .gallery.section .container .row .center h3,
.main .gallery.section .container .row .center h4,
.main .gallery.section .container .row .center p { text-align: center; }
.main .gallery.section .container .row .wrap li.item { width: 100%; list-style: none; padding: 0; }
.main .gallery.section .container .row .wrap li.item figure a { display: block; width: 316px; height: 316px; overflow: hidden; }
.main .gallery.section .container .row .wrap li.item figure a img { display: block; width: 100%; height: auto; }
.main .gallery.section .container .row .wrap li.item figure { margin: 0 }
.main .gallery.section .container .row .wrap li.item figure figcaption { display: none }

.main .overview.section .container .row ul.feature_list li.item,
.main .serviceoverview.section .container .row ul.feature_list li.item {
	display: flex;
	padding-bottom: 0;
	align-items: top;
	text-align: left;
	list-style: none
}
.main .overview.section .container .row ul.feature_list li.item .icon_wrap,
.main .serviceoverview.section .container .row ul.feature_list li.item .icon_wrap {
	margin-right: 20px;
	padding-left: 20px;
	border-left: 1px solid red;
}
.main .overview.section .container .row ul.feature_list li.item .icon_wrap .icon_framebox,
.main .serviceoverview.section .container .row ul.feature_list li.item .icon_wrap .icon_framebox {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	margin-left: -50px;
	padding: 5px;
	background: var(--button-default);
	border-radius: 4px;
	overflow: hidden;
}
.main .serviceoverview.section .container .row ul.feature_list li.item .icon_wrap .icon_framebox {
	width: 40px;
	height: 40px;
	margin-left: -40px;
	border-radius: 50%;
}
.main .overview.section .container .row ul.feature_list li.item .icon_wrap .icon_framebox i,
.main .serviceoverview.section .container .row ul.feature_list li.item .icon_wrap .icon_framebox i {
	display: inline-block;
	line-height: normal;
	color: var(--white);
	vertical-align: middle;
}
.main .overview.section .container .row ul.feature_list li.item .description { padding-top: 16px }

.main .eddybrake.section .container .row table.eddybrake_data { width: 100%; border: 1px dashed var(--border); }
.main .eddybrake.section .container .row table.eddybrake_data th,
.main .eddybrake.section .container .row table.eddybrake_data td { padding: 10px; color: var(--white); border: 1px dashed var(--border); }
.main .eddybrake.section .container .row table.eddybrake_data th.col { background: var(--button-default); }
.main .eddybrake.section .container .row table.eddybrake_data td { font-size: 14px }
.main .eddybrake.section .container .row table.eddybrake_data tr.even { background: var(--trancewhite05) }
.main .eddybrake.section .container .row table.eddybrake_data tr.odd { background: var(--trancewhite1) }

.galleryw1,
.motodyno_gallery.section .gallery,
.galleryw4.section .container .wrap,
.quality_gallery.section .container .wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
	align-items: stretch;
	gap: 10px;
}
.galleryw1 .item,
.motodyno_gallery.section .gallery .item,
.galleryw4.section .container .wrap .item,
.quality_gallery.section .container .wrap .item { max-height: 200px; overflow: hidden; transition: all 0.3s; }
.galleryw1 .item:hover,
.motodyno_gallery.section .gallery .item:hover,
.galleryw4.section .container .wrap .item:hover,
.quality_gallery.section .container .row .wrap .item:hover { box-shadow: 0px 14px 8px -8px rgba(0, 0, 0, 0.37); transform: scale(1.2); z-index: 9 }
.galleryw1 .item figure,
.motodyno_gallery.section .gallery .item figure,
.galleryw4.section .container .wrap .item figure,
.quality_gallery.section .container .row .wrap .item figure { margin: 0; }
.galleryw1 .item figure a,
.motodyno_gallery.section .gallery .item figure a,
.galleryw4.section .container .wrap .item figure a,
.quality_gallery.section .container .row .wrap .item figure a { display: block; width: 100%; }
.galleryw1 .item figure a .img,
.motodyno_gallery.section .gallery .item figure a .img,
.galleryw4.section .container .wrap .item figure a .img,
.quality_gallery.section .container .row .wrap .item figure a .img { display: block; width: 100%; height: 200px; object-fit: cover; }
.motodyno_gallery.section .gallery .item figure > figcaption,
.galleryw4.section .container .wrap .item figure > figcaption,
.quality_gallery.section .container .row .wrap .item figure > figcaption { display: none }

.motodyno.section.dark { background: var(--bg) }
.motodyno.section.dark h3 { color: var(--button-default) }
.motodyno.section.dark h4,
.motodyno.section.dark h5,
.motodyno.section.dark table th { color: var(--white); }
.motodyno.section.dark p,
.motodyno.section.dark ul li,
.motodyno.section.dark table td { color: var(--trancewhite5); }
.motodyno.section.dark ul { padding-top: 10px }
.motodyno.section ul li { padding-bottom: 0 }
.motodyno.section.dark table { width: 100% }
.motodyno.section.dark table th,
.motodyno.section.dark table td { padding-bottom: 5px; }
.motodyno.section.dark .pricebox { margin: 20px 0; padding: 60px 30px 40px 30px; background: rgb(34, 34, 35); background-image: url("../../../images/motorrad.webp"); background-repeat: no-repeat; background-position: right bottom; border-right: 4px; }
.motodyno.section.dark .pricebox p.price { margin: 0; padding-bottom: 5px; font-size: 36px; line-height: normal; color: var(--white); }
.motodyno.section.dark .pricebox p.small { font-size: 20px; color: var(--white); }

.video.section.dark { background: var(--bg) }
.video.section.dark .container .row .center { text-align: center }
.video.section.dark .container .row .center .video { width: 100%; height: auto; }


.quality.section.dark { background: var(--bg); }
.quality.section.dark .container h3,
.quality.section.dark .container h4 { color: var(--white); padding-top: 20px; }
.quality.section.dark .container p,
.quality.section.dark .container ol li,
.quality.section.dark .container ul li { color: var(--trancewhite5); font-size: inherit }
.quality.section.dark .container ol li::marker { font-size: 21px; color: var(--white) }
.quality.section.dark .container ol,
.quality.section.dark .container ul { padding-top: 15px; }
.quality.section.dark .container ol > li:first-line { font-size: 21px; font-weight: 600; color: var(--white) }
.quality.section.dark .container .row ol li:last-child,
.quality.section.dark .container .row ol li:last-child ul,
.quality.section.dark .container ol li:last-child { padding-bottom: 0; }


/* -------------------------------------------------------- timeline */

ul.timeline-3 { list-style-type: none; position: relative; }
ul.timeline-3:before {
	display: inline-block;
	position: absolute;
	left: 29px;
	width: 1px;
	height: 100%;
	content: " ";
	background: var(--button-default);;
	z-index: 400;
}
ul.timeline-3 > li { margin: 20px 0; padding-left: 20px; }
ul.timeline-3 > li:before {
	display: inline-block;
	position: absolute;
	left: 20px;
	width: 20px;
	height: 20px;
	content: " ";
	background: white;
	border-radius: 50%;
	border: 1px solid var(--button-default);
	z-index: 400;
}
.main .benefits.section .container .row .column ul.benefits_items { columns: 2; gab: 10px }
.main .trasdatap.section .container .row ul.icon_list_items li,
.main .gearboxsw.section .container .row ul.gearboxsw_list li.item,
.main .benefits.section .container .row .column ul.benefits_items li.item,
.main .list.section .container .row ul.ists_items li.item,
.main .warranty.section .container .row ul.ists_items li.item,
.main .consumption.section .container .row ul.consumption_advantages_list li.item,
.main .advantage.section .container .row ul.lists_items li.item { list-style: none; }
.main .trasdatap.section .container .row ul.icon_list_items li .inner,
.main .gearboxsw.section .container .row ul.gearboxsw_list li.item .inner,
.main .benefits.section .container .row ul.benefits_items li .inner,
.main .list.section .container .row ul.ists_items li.item .inner,
.main .advantage.section .container .row ul.lists_items li.item .inner,
.main .warranty.section .container .row ul.ists_items li.item .inner,
.main .consumption.section .container .row ul.consumption_advantages_list li.item .inner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.main .trasdatap.section .container .row ul.icon_list_items li .inner .icon_wrap,
.main .gearboxsw.section .container .row ul.gearboxsw_list li.item .inner .icon_wrap,
.main .benefits.section .container .row ul.benefits_items li .inner .icon_wrap,
.main .list.section .container .row ul.ists_items li.item .inner .icon_wrap,
.main .warranty.section .container .row ul.ists_items li.item .inner .icon_wrap,
.main .warranty.section .container .row ul.ists_items li.item .inner .icon_wrap,
.main .consumption.section .container .row ul.consumption_advantages_list li.item .inner .icon_wrap { margin-right: 10px; }
.main .trasdatap.section .container .row ul.icon_list_items li .inner .icon_wrap i,
.main .gearboxsw.section .container .row ul.gearboxsw_list li.item .inner .icon_wrap i,
.main .benefits.section .container .row ul.benefits_items li .inner .icon_wrap i,
.main .warranty.section .container .row ul.ists_items li.item .inner .icon_wrap i,
.main .consumption.section .container .row ul.consumption_advantages_list li.item .inner .icon_wrap i { color: var(--button-default) }
.main .list.section .container .row ul.ists_items li.item .inner .icon_wrap i,
.main .warranty.section .container .row ul.ists_items li.item .inner .icon_wrap i,
.main .consumption.section .container .row ul.consumption_advantages_list li.item .inner .icon_wrap i { color: var(--green) }

.main .benefits.section .container .row .column ul.benefits_items li.item .inner p,
.main .gearboxsw.section .container .row ul.gearboxsw_list li.item .inner p,
.main .list.section .container .row ul.ists_items li.item .inner p,
.main .warranty.section .container .row ul.ists_items li.item .inner p,
.main .warranty.section .container .row ul.ists_items li.item .inner p,
.main .advantage.section .container .row ul.lists_items li.item .inner p,
.main .consumption.section .container .row ul.consumption_advantages_list li.item .inner p { margin: 0; padding: 0; }

.pageID_14 .main .subteaser2.section { padding: 100px 30px; }
.pageID_14 .main .subteaser2.section .container .row .content h3 { margin: 0; }

.main .warranty.section.dark .container .row h3 { color: var(--button-default) }

.main .calculate.section {}
.main .calculate.section .calculater .mb-3 .form-label { display: block; padding: 10px 0; font-family: "Roboto"; font-size: 17px; }
#berechnen .mb-3 .input {
	width: 100%;
	padding: 0.5rem 1rem;
	border: solid 1px var(--border);
	border-radius: 8px;
	transition: all .3s;
}
#berechnen .wrap button.reset {
	color: var(--white);
	background-color: var(--darkyellow);
	border-style: none;
	border-radius: 4px;
}
#berechnen .wrap button.reset::after { background-color: var(--darkyellowhover); }
#berechnen fieldset.fieldset { padding: 15px; border-radius: 8px; background: var(--fieldset) }
.main .calculate.section .container .row .column figure.contentimg figcaption {
  position: absolute;
  width: 100%;
  padding: 5px 8px;
  bottom: 0;
  font-size: 13px;
  text-align: right;
  color: var(--white);
  background: var(--bgtrans5);
  z-index: 999;
  left: 0;
}
#output .modal-dialog .modal-content .modal-header h3.modal-title.fs-5 { margin-bottom: 0; }
.result_field { width: 100% }
.result_field th,
.result_field td { padding: 10px 0; border-bottom: 1px solid var(--bs-modal-footer-border-color); }
.result_field tr:last-child th,
.result_field tr:last-child td { border-bottom: 0; }
.result_field td { text-align: right; font-weight: 900 }

/* -------------------------------------------------------- fuelcosts */
.fuelcosts_wrap { border-radius: 15px; overflow: hidden; margin-bottom: 20px; }
.fuelcosts_data { width: 100%; }
.fuelcosts_data th,
.fuelcosts_data td { padding: 10px; border: 1px solid var(--border); background: var(--white); }
.fuelcosts_data thead th.header {
	padding: 30px;
	font-size: 36px;
	font-weight: 600;
	color: var(--white);
	background-color: var(--button-default);
	border-style: none;
}
.fuelcosts_data thead th { border-color: transparent }
.fuelcosts_data thead th.definition {
	color: var(--white);
	background-color: var(--button-default);
}
.fuelcosts.section.dark .fuelcosts_data tbody tr.even th,
.fuelcosts.section.dark .fuelcosts_data tbody tr.even td { background: #F3F3F3 }
.fuelcosts.section.dark .fuelcosts_data tbody tr.odd th,
.fuelcosts.section.dark .fuelcosts_data tbody tr.odd td { background: var(--white) }
.fuelcosts.section.dark .fuelcosts_data tbody tr:last-child td { font-weight: 900 }
.fuelcosts.section.dark .fuelcosts_data tfoot { border-radius: 0 0 15px 15px }
.fuelcosts.section.dark .fuelcosts_data tfoot .value { font-weight: 900 }

.main .consumption.section .container .row .column table.data {
	width: 100%;
	margin: 20px 0 40px;
	border: none;
}
.main .consumption.section .container .row .column table.data tbody tr th,
.main .consumption.section .container .row .column table.data tbody tr td {
	padding: 10px;
	color: var(--white);
	font-weight: 600;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.main .consumption.section.dark .container .row .column table.data tbody tr th,
.main .consumption.section.dark .container .row .column table.data tbody tr td {
	border-color: var(--font);
}
.main .consumption.section .container .row .column table.data tbody tr:last-child th,
.main .consumption.section .container .row .column table.data tbody tr:last-child td { border-bottom: 0 }
.main .consumption.section .container .row .column table.data tbody tr th:last-child,
.main .consumption.section .container .row .column table.data tbody tr td:last-child { border-right: 0 }
.main .consumption.section .container .row .column table.data tbody tr th:first-child,
.main .consumption.section .container .row .column table.data tbody tr td:first-child { border-left: 0 }
.main .consumption.section .container .row .column table.data thead tr th {
	padding: 10px;
	color: var(--white);
	font-weight: 600;
	border: 0
}
.main .consumption.section .container .row .column table.data th { font-weight: 600; }
.main .consumption.section .container .row .column table.data td { font-weight: 400; }

.main .consumption.section .container .row .column > figure {
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 auto;
}
.main .consumption.section .container .row .column > figure figcaption { display: none }
.main .consumption.section .container .row .column h4 { text-align: center }

.main .faq_button.section .container .row .column .wrap { text-align: center }

.standorte.section .container .location_overview ul.locations {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
.standorte.section .container .location_overview ul.locations li.box { list-style: none }
.standorte.section .container .location_overview ul.locations li.box .inner,
.standorte.section .container .location_overview ul.locations li.box .inner figure { position: relative; }
.standorte.section .container .location_overview ul.locations li.box .inner figure:hover a { box-shadow: 0 0 2px var(--button-hover); }
.standorte.section .container .location_overview ul.locations li.box .inner figure a { display: flex; justify-content: center; width: 100%; max-width: 400px; height: 400px; border-radius: 4px; overflow: hidden; }
.standorte.section .container .location_overview ul.locations li.box .inner figure a img { display: block; height: 100%; width: auto; object-fit: cover; transition: all 0.5s; }
.standorte.section .container .location_overview ul.locations li.box .inner figure:hover a img { transform: scale(1.25); }
.standorte.section .container .location_overview ul.locations li.box .inner figure figcaption {
	position: absolute;
	left: 0;
	top: 10%;
	width: 100%;
	padding: 4%;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 0 2px var(--font);
	color: var(--white);
	z-index: 99;
}
.standorte.section .container .location_overview ul.locations li.box .inner .description {
	position: absolute;
	bottom: 0px;
	padding: 20px;
	color: var(--white);
	background: var(--bgtrans5);
	z-index: 99;
}
.standorte.section .container .location_overview ul.locations li.box .inner .description p { margin: 0; padding: 0 }
.section .container .row .btnwrap { text-align: center }

.iframe {
	width: 100%;
	height: auto;
	min-height: 900px;
	border: 0;
}

/* -------------------------------------------------------- googlemaps */
.googlemaps {
	width: 100%;
	height: 450px;
	border: 0;
}

.sitemap ul { padding-top: 20px }

#btn-back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	z-index: 9999;
}

#emailHelp p { color: var(--font); font-size: 13px; font-style: italic }
.form-check-label { font-size: 14px; line-height: normal }
#cfContact:hover { background: var(--button-hover); box-shadow: 0 0 8px var(--button-hover) }

#appointment.appointment.section.light .container .row .booking_form { background: var(--fieldset); padding: 15px; border-radius: 8px; }
#appointment.appointment.section.light .container .row .booking_form form.appointment .form-control { padding: 10px; height: auto; min-height: auto; line-height: normal; color: var(--font); border: 1px solid var(--border); outline: none; }
#appointment.appointment.section.light .container .row .booking_form form.appointment .form-control:focus { box-shadow: 0 0 0 .15rem var(--button-default) ; }
#appointment.appointment.section.light .container .row .booking_form form.appointment #emailHelp { font-size: 13px; font-style: italic; color: var(--font) }
#appointment.appointment.section.light .container .row .booking_form form.appointment .app label.lable { color: var(--font) }

.confirm.checkbox { margin: 0; padding: 20px 0 0 }
.confirm.checkbox .form-check-label { color: var(--trancewhite5); }
#appointment.appointment.section.light form.appointment .confirm.checkbox .form-group .form-check label.form-check-label { color: var(--font) }

#agb.modal .modal-dialog .modal-content .modal-body .inner_content .address { padding: 0 20px; }
#agb.modal .modal-dialog .modal-content .modal-body .inner_content ol { padding-left: 2.5rem; }
#agb.modal .modal-dialog .modal-content .modal-body .inner_content ol li { padding-bottom: 10px; }
#agb.modal .modal-dialog .modal-content .modal-body .inner_content ol ul { padding-top: 10px; }
#agb .button_wrapper .reset.column { text-align: right; }


/* -------------------------------------------------------- Footer */
.footer {
	display: block;
	width: 100%;
	height: auto;
	background-image: url("../../../images/footerbg.webp");
	background-repeat:  no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}
.footer .row > * { margin-top: 0 }
.footer .overlay {
	background-color: var(--bgtrans9);
}
.footer .container { padding-top: 30px; padding-bottom: 0px; }
.footer .container .row { margin: 0 }
.footer .footer-about h5,
.footer .footer-links h5 {
	padding-bottom: 4px;
	color: var(--button-default);
	text-transform: uppercase;
}
.footer .container .row .footer-links .openinghours p.note {
	font-size: 18px;
	font-weight: 600
}
.footer ul.footernav { display: block; font-size: 13px; }
.footer .address .list-items { padding-left: 0; }
.footer ul.footernav li a,
.footer .address,
.footer .footer-links {
	font-size: 13px;
	color: #DADADA;
}
.footer ul.footernav li { padding: 5px 0 }
.footer ul.footernav li a { display: block; padding: 0 0 3px; position: relative }
.footer ul.footernav li a:hover { color: var(--white); }
.footer .footer-links ul { padding-left: 0 }
.footer ul.footernav li,
.footer .footer-links ul li { list-style: none; }
.footer .footer-links .btn_wrap .btn { width: 100%; }
.footer .footer-links .btn_wrap .btn .fa-solid { padding-left: 5px; }
.footer .copy { font-size: 13px; color: #757575; text-align: center }

.booking_info { padding: 15px 0 }
.address { margin: 20px 0; }
.address ul.list-items { padding-left: 0; }
.address ul.list-items li.list-item { list-style: none; padding-bottom: 7px }
.address ul.list-items li.list-item .list-icon .fa-solid { color: rgb(218, 0, 65); padding-right: 5px }

.teaser.section .container .row .booking_form {
	padding: 30px;
	background-color: var(--bgtrans7);
	border-radius: 15px;
	box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
}
form .text-center button.btn {
	padding: 15px 10px;
	color: var(--white);
	background: var(--button-default);
}
form .text-center button.btn:hover {
	background: var(--button-hover);
}
form #emailHelp { text-align: left; color: rgba(255,255,255,0.7); }
form #emailHelp.col-form-label { display: block; text-align: left; font-size: 13px; font-style: italic; }
form #emailHelp.form-text.dark { color: var(--font) }