/*********************************content*************************************/ 
div#content {margin-top: 0px; overflow:hidden; min-height: 200px;}

/* GENERAL STYLES AND TOOLS */
#stickyhead .col {text-align: center;} 
.col {text-align:center;}
#mobileBar {display: none;}
#mobileBar a {color: #fff;}
#mobileBar a:hover {color: #333;} 
#mobileBar a span {position: absolute; display:none; background: #f9f9f9; padding: 5%;border: 1px solid #dddddd;bottom: 55px; right: 5%; width: 80%; 
font-family: var(--font3); color: #333; font-size: 13px; border-radius: 4px; z-index:901; box-shadow: 0 0 15px #000;}
#mobileBar a span:before {content: '';position: absolute;bottom: -20px;left: calc(50% - 11px);border: 11px solid transparent;border-bottom-color: #f9f9f9; transform: rotateX(180deg);}
#mobileBar a span.left:before {left:calc(20% - 11px);}
#mobileBar a span.right:before {left:calc(80% - 11px);}			
#mobileBar a:hover span{display:block;}
div.imgPlaceHolder {width: 80%; height: 50vh; margin:0 auto; display:inline-block; background: linear-gradient(14deg, rgba(200,100,70,0.1), rgba(70,100,200,0.1));}

/* SECTION 0 */
body.home #start {
background: linear-gradient(17deg, rgba(128,128,128,0.1), rgba(128,128,128,0.05)), url("../../img/motive/unfall-fahrzeug.webp"); position: relative;  
background-position: 50%; background-repeat: no-repeat; background-size: cover !important; -webkit-background-size: cover !important; 
-moz-background-size: cover !important; text-align:center;}
body.home #start .col {padding: 0;}
body.home #start h1 {word-break: keep-all; white-space: nowrap; color: #fff; filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); font-size: 4rem;}
body.home #start h2 {color: #fff; font-family: var(--font1); filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));}
body.home #start .bgorange{background: var(--second-color); padding:10px 0px; border-top: 1px solid rgba(255,255,255,0.5);}
body.home #start .bgorange a {color: #fff; letter-spacing:unset; font-weight: bold; font-family: var(--font2); letter-spacing: 5px;}
body.home #start .bgorange i.fa {padding-right: 14px; vertical-align: initial;}


/* SIDEBAR */
sidebar{ will-change: min-height;  font-family: var(--font1);}
#sidebar {margin-left: 0px; z-index: 1000;}
.sidebar__inner{ transform: translate(0, 0); /* For browsers don't support translate3d. */ transform: translate3d(0, 0, 0); will-change: position, transform; 
border: 1px solid rgba(0,0,0,0.5); position: absolute; left: -105px; padding: 5px 10px 0px 10px; transform: rotate(-90deg); border-radius: 0px 0px 25px 25px;
 background: linear-gradient(12deg, #ff6b01, #ff6b01); box-shadow: 0 0 10px #999;}
/*.sidebar__inner:hover {background: linear-gradient(12deg, #490000, #750000);}*/
.sidebar__inner:hover {background: linear-gradient(12deg, #F5CC0E, #F5CC0E);} 
.sidebar__inner p{color: #333; padding: 0px;text-align:center;} 
.sidebarExpand p {font-size: 14px; line-height: 25px; text-align:center;color: rgba(255,255,255,0.7);}
.sidebarExpand p b {font-size: 32px; color: var(--second-color);}
.sidebarExpand {position: absolute; left: 0px; margin-top: -80px; display: none; background: rgba(0,0,0,0.9); border-radius: 0px 15px 15px 0px; 
box-shadow: 0px 0px 20px #666; padding: 10px; width: 280px; text-align:center;}
.sidebarExpand .close {position: absolute; right: 10px; padding: 5px;} 
.sidebarExpand p a, 
.sidebarExpand .close a {font-family: var(--font2); color: rgba(255,255,255,0.7); text-decoration:none; letter-spacing:1px;}

/* KFZ GUTACHTEN */
body.home #kfzgutachten {background: linear-gradient(17deg, rgba(0,0,0,0.01), rgba(0,0,0,0.01));}
body.home #kfzgutachten .col-5 p img{margin-top: 5%;}
body.home #kfzgutachten a.bgHover:hover .topic{box-shadow: 0 0 12px #ccc; padding: 10px 0; margin-top: -10px; border-radius: 4px;}
body.home #kfzgutachten .topic h4 {font-size: 1.4rem; line-height: 120%; font-weight: bold; text-transform:uppercase; text-align:left;}
body.home #kfzgutachten .topic p {text-align:left; line-height: 120%;}
body.home #kfzgutachten .topic img {float: left; display:table-cell; padding: 0px 5% 10vh 10%;}

/* SECTION A */
body.home #sectionA {border-bottom: 1px solid #ddd;}
body.home #sectionA h2 {padding-top:30px;}
body.home #sectionA .col-5.box-2 {background: #000; height: 100vh;}
body.home #sectionA p {font-size: 16px; line-height: 20px; margin: 6px; padding: 0px 5%}
body.home #sectionA .buttonwrap {margin-top: 24px;}

body.home #sectionA .slideshow {list-style-type: none;}
/** SLIDESHOW **/
body.home #sectionA .slideshow,
body.home #sectionA .slideshow:after { top: 0;position: relative;width: 100%;height: 100%;left: 0px;z-index: 0;}
body.home #sectionA .slideshow li span { position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;
background-repeat: no-repeat;opacity: 0;z-index: 0;animation: imageAnimation 48s linear infinite 0s;}
body.home #sectionA .slideshow li:nth-child(1) span { background-image: url("../../img/motive/slides/slidemotiv1.webp");}
body.home #sectionA .slideshow li:nth-child(2) span { background-image: url("../../img/motive/slides/slidemotiv2.webp"); animation-delay: 6s;}
body.home #sectionA .slideshow li:nth-child(3) span { background-image: url("../../img/motive/slides/slidemotiv3.webp"); animation-delay: 12s;}
body.home #sectionA .slideshow li:nth-child(4) span { background-image: url("../../img/motive/slides/slidemotiv4.webp"); animation-delay: 18s;}
body.home #sectionA .slideshow li:nth-child(5) span { background-image: url("../../img/motive/slides/slidemotiv5.webp"); animation-delay: 24s;}
body.home #sectionA .slideshow li:nth-child(6) span { background-image: url("../../img/motive/slides/slidemotiv6.webp"); animation-delay: 30s;}
body.home #sectionA .slideshow li:nth-child(7) span { background-image: url("../../img/motive/slides/slidemotiv7.webp"); animation-delay: 36s;}
body.home #sectionA .slideshow li:nth-child(8) span { background-image: url("../../img/motive/slides/slidemotiv8.webp"); animation-delay: 42s;}
@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
body.home #sectionA .no-cssanimations .cb-slideshow li span {opacity: 1;}


/* 24h SERVICE */
body.home #service24 h2 {color: #fff;}
body.home #service24 h3 {color: #000;} 
body.home #service24 {background: linear-gradient(34deg, rgba(0,0,0,0.2), rgba(0,0,0,0.01)30%, rgba(0,0,0,0.01)70%, rgba(0,0,0,0.2)), 
url("../../img/motive/bgMotiv.png"); position: relative;  
background-position:0; background-repeat: no-repeat; background-size: cover !important; -webkit-background-size: cover !important; 
-moz-background-size: cover !important; text-align:center;}
body.home #service24 h5 {font-weight:bold; padding: 0 15%; color: #000; filter: drop-shadow(0 0.0rem 0.20rem rgba(255, 255, 255, 0.5));}
body.home #service24 .col-6 {background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,1.0), rgba(0,0,0,0.9))}
body.home #service24 .col-6 p {text-align:justify; padding: 5px 5%; color: #fff;}
body.home #service24 .col-6 p strong,
body.home #service24 .col-6 p a {color: #fff;}
body.home #service24 .col-6 p .hover-underline-animation::after{background-color: #fff;}
body.home #service24 .col-6 .fa {margin: 6px 6px 0 6px;}

/* RATGEBER */
body.home #ratgeber {background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,1.0), rgba(0,0,0,0.9)); text-align:center;}
body.home #ratgeber h2,
body.home #ratgeber h3 {color: #f9f9f9;}
body.home #ratgeber .col-12 .wrapper {background: linear-gradient(90deg, transparent 20%, rgba(255,128,0,1.8), transparent 80%); padding: 10px 0px 15px 0px;}
body.home #ratgeber .col-4 .wrapper{background: radial-gradient(rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4)); margin: 5%; padding: 5% 5% 5% 10%; border-radius: 25px;
box-shadow: 0 0 12px #ccc;}
body.home #ratgeber h4 {font-weight:bold; margin-bottom: 12px; filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); color: #494949}
body.home #ratgeber ul {font-family: var(--font2); text-align:left; list-style-type:square; margin-left: 25px;}
body.home #ratgeber ul li {filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); font-size: 90%; margin: 7px auto;}

/* UNTERNEHMEN */
body.home #unternehmen {background: linear-gradient(45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.00), rgba(0,0,0,0.05)); padding-top: 3vh;}
body.home #unternehmen h4 {font-weight: bold;}
body.home #unternehmen img.logo {}

/* KONTAKT */
body.home #kontakt { padding-top: 0px; background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url("../../img/motive/bgKontakt.webp");  
position: relative;  background-position: 50%; background-repeat: no-repeat; background-size: cover !important; -webkit-background-size: cover !important; 
-moz-background-size: cover !important; text-align:center;}
body.home #kontakt h3 {margin-bottom: 12px;}
body.home #kontakt .col-6.box-1 {text-align:center;}
body.home #kontakt .col-6.box-1 p,
body.home #kontakt .col-6.box-1 p b,
body.home #kontakt .col-6.box-1 p a{color: rgba(255,255,255,0.9); font-size: 24px; line-height: 32px;}
body.home #kontakt .col-6.box-1 p a {font-weight:normal;}
body.home #kontakt .col-6.box-1 p i{line-height: 37px;}
body.home #kontakt .col-6.box-1 p img {background: #000; padding:5px; border-radius: 10px;}

.prowebform {padding: 50px 10%;}
.prowebform .formTitle label .title{font-family:var(--font1); letter-spacing: 3px; text-align:center;}
.prowebform .toggle span.faq-arrow {float: right; padding-right: 35px;}

/* PARTNER */
body.home #partner {padding: 50px 0; background: linear-gradient(#ff6b01 10%, #fff 10%, #fff 90%, #121212 90%);}
body.home #partner .smallslider {background: white;}
body.home #partner .smallslider img{margin: 0 25px;}


/****** NEW PAGE ELEMENTS *****/
.pe1 {}
.pe2 img,
.pe3 img, 
.pe4 img {display:inline-block; margin:auto; box-shadow: 0 0 14px #ddd;}
.pe4 h2 {margin-bottom: 50px;}
.pe4 img {max-width: 70%;}