/*
Theme Name: RD Autohaus Hebold
Theme URI: https://rundum.digital
Author: tm|rd
Author URI: https://rundum.digital
Description: Ein Gutenberg Theme für Autohaus Hebold
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rd-autohaus-hebold
Tags: 
*/

/* fix theme.json missing support for clamp */
:root {
    --wp--preset--font-size--small: 16px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: clamp(24px, 1.5rem + ((1vw - 0px) * 1.5), 50px);
    --wp--preset--font-size--x-large: clamp(36px, 2.25rem + ((1vw - 3.2px) * 2.486), 71px);
}

html, body{
    word-wrap: break-word;

    /* overflow-x: hidden;
    overflow-y: auto; */

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.google-maps iframe {
    pointer-events: none;
}

.anchor{
    scroll-margin-top: 150px;
}
@media screen and (max-width: 781px) {
    .mobile-no-gap{
        gap: 0;
    }
}

.gsap-pin-spacer,
.gsap-scroll-layer {
  pointer-events: none;
}

/* fix for svg header animation */
.fade-in {
    animation: fadeIn 3s ease-in-out forwards;
    animation-delay:10ms;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* links interstreichen bei hover */
a{
    text-decoration: none;
}
/* a:where(:not(.wp-element-button)) {
    text-decoration: none;
}
a:where(:not(.wp-element-button)):hover {
    text-decoration: underline;
} */

.nav-space{
    margin-top: 10px;
}


/* header cover / logo / naviagtion */
.header-cover-mobile{
    display: block!important;
}
.header-cover-mobile .wp-block-cover__inner-container {
    margin-top: 100px;
}
.custom-logo{
    max-height: 35px;
    width: auto;
}


@media screen and (max-width: 600px) {
    .header-cover-desk{
        display: none!important;
    }

}

@media screen and (min-width: 600.98px) {
    .header-cover-mobile{
        display: none!important;
    }
}


/* Navigation */ 
.logo-nav-bar nav a:hover{
    text-decoration: none;
}
.logo-nav-bar{
    scroll-snap-align: start;
}

@media screen and (min-width: 600.98px) {
    /* Navigation Link Animation nur auf Desktop */
    .logo-nav-bar nav ul li a{
        position: relative;
    }
    .logo-nav-bar nav ul li a::after{    
        content: "";
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: var(--wp--preset--color--custom-dark-grey);
        transition: width 0.5s ease;
    }
    .logo-nav-bar nav ul li:hover a::after{
        width: 100%;
        background-color: var(--wp--preset--color--custom-dark-grey);
    }
    .logo-nav-bar nav ul li:last-of-type{
        border: 1px solid var(--wp--preset--color--custom-dark-grey);
        padding: 5px 30px;
        transition: all 0.5s ease;
    }
    .logo-nav-bar nav ul li:last-of-type:hover{
        border: 1px solid var(--wp--preset--color--custom-dark-grey);
        background: var(--wp--preset--color--custom-dark-grey);
        color: #fff;
    }
    .logo-nav-bar nav ul li:last-of-type:hover a::after{
        width: 100%;
        background-color: #fff;
    }

    a:not(.custom-logo-link) {
        position: relative;
        display: inline-block;
        text-decoration: none;
        color: inherit; 
    }
    
    a:not(.custom-logo-link)::after {
        content: "";
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: var(--wp--preset--color--custom-dark-grey);
        transition: width 0.4s ease;
        pointer-events: none;
    }
    
    a:not(.custom-logo-link):hover::after {
        width: 100%;
    }

    footer a::after {background-color: #fff!important;}

}


/* mobile navigation */
.wp-block-navigation__responsive-container-open svg {
    display: none;
}  
.wp-block-navigation__responsive-container-open::before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url('assets/icons/icon-hamburger.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.wp-block-navigation__responsive-container-close {
    right: 19px;
    top: 14px;
}
.wp-block-navigation__responsive-container-close svg {
    display: none;
}  
.wp-block-navigation__responsive-container-close::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('assets/icons/icon-close.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.wp-block-navigation__responsive-container.is-menu-open{
    background-color: #2F3234!important;
    color: #fff!important;
}
.wp-block-navigation__responsive-container-content{
    align-items: flex-start!important;
}
.wp-block-navigation__responsive-container.is-menu-open ul{
    gap: 30px!important;
    align-items: flex-start!important;
    padding-top: 50px;
    padding-left: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open a{
    font-size: 40px;
}
.wp-block-navigation__responsive-dialog a span{
    font-weight: 500;
}



/* Überschriften & Inhalt */
h2{
    scroll-margin-top: 30px;
    position: relative;
    display: inline-block;
}

h2::before {
    content: "";
    display: block;
    /* width: 100%; */
    height: 1px;
    background-color: black;
    margin-bottom: 24px;

    width: var(--line-width, 0); /* gsap */
    transition: width 0.6s ease-out; /* gsap */
}

@media screen and (max-width: 600px) {
    .wp-block-column > h1{
        font-size: var(--wp--preset--font-size--x-large) !important;
        margin-top: 20px !important;
        margin-bottom: 60px !important;
    } 
    .wp-block-column > h2{
        font-size: var(--wp--preset--font-size--x-large) !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
}

.privacy-impress-text h3, .privacy-impress-text h4, .privacy-impress-text p{
    font-size: var(--wp--preset--font-size--medium)!important;
}

@media screen and (min-width: 1350.98px) {
/* abstand innerhalb der section ausser für :not()  */
    section >*:not(.sbr-feed, .sbr-feed *), .logo-nav-bar, footer >div, footer >div > *{
        padding-left: 35px!important;
        padding-right: 35px!important;
    }
}

@media screen and (max-width: 1350.98px) {
    .logo-nav-bar ul{
        gap: clamp(2px, 5vw, 150px)!important;
    }

    section >*:not(.rd-cars-loop, .wp-block-columns:has(ul.list-arrows), .sbr-feed, .sbr-feed *), .logo-nav-bar, footer >div{
        padding-left: 35px!important;
        padding-right: 35px!important;
    }

    section .wp-block-spacer{
        height: 10px!important;
    }

    /* h2 border deaktivieren */
    section h2::before {
        width: 0;
        display: none;
    }
    /* border 100vw an section */
    section::before {
        content: "";
        display: block;
        
        height: 1px;
        background-color: black;
        margin-bottom: 24px;

        width: var(--line-width, 0); /* gsap */
        transition: width 0.6s ease-out; /* gsap */
    }
    section:first-of-type::before {
        display: none;
    }

    /* service liste mobil */
    ul.list-arrows li{
        padding-left: 60px!important;
        padding-right: 50px!important;
    }
    ul.list-arrows li::before {
        margin-left: 35px;
    }


}

footer >div{
    padding-left: 35px!important;
    padding-right: 35px!important;
}
@media screen and (max-width: 771px) {
    .footer-text{
        gap: 40px;
        padding-bottom: 26px!important; /* gap standard 24px ausgleichen */
        
    }
    .footer-text div.wp-block-group{
        min-height: 0px!important;
        gap: 40px;
    }
    .footer-text div.wp-block-group li:first-child{
        margin-top: 0px!important;
    }
}
@media screen and (max-width: 781px) {
    footer .footer-text .has-small-font-size{
        font-size: var(--wp--preset--font-size--medium)!important;
    }
}

/* GSAP styles */
body:not(.wp-admin).google-maps > div {
    transform-origin: center center; /* gsap */
    scale: 0; /* gsap */
}
.google-maps, .cmplz-placeholder-parent{
    height: 620px;
	min-height: 620px;
    max-height: 620px;
    overflow: hidden;
}

/* service liste / Listen Styles mit Pfeil - CSS Klasse .list-arrows für Listenblock  */
ul.list-arrows {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.list-arrows li {
    position: relative;
    padding-left: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}
ul.list-arrows li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5303 6.53033C11.8232 6.23744 11.8232 5.76256 11.5303 5.46967L6.75736 0.696699C6.46447 0.403806 5.98959 0.403806 5.6967 0.696699C5.40381 0.989593 5.40381 1.46447 5.6967 1.75736L9.93934 6L5.6967 10.2426C5.40381 10.5355 5.40381 11.0104 5.6967 11.3033C5.98959 11.5962 6.46447 11.5962 6.75736 11.3033L11.5303 6.53033ZM0 6V6.75H11V6V5.25H0V6Z' fill='%23F06E00'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.wp-block-list.list-arrows li .li-border {  /* gsap */
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 0;
    background-color: black;
    border-radius: 1px;
}
.wp-block-list.list-arrows li .li-border-bottom {  /* gsap */
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 0;
    background-color: black;
    border-radius: 1px;
}

.wp-block-list.list-arrows li .li-border-right {  /* gsap */
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: 0;
    background-color: black;
    border-radius: 1px;
}
.wp-block-list.list-arrows li .li-border-bottom-right {  /* gsap */
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    width: 0;
    background-color: black;
    border-radius: 1px;
}

@media screen and (max-width: 781px) {
    .mobile-no-gap div:first-of-type .list-arrows li .li-border-bottom{  /* gsap */
        display: none;
    }
}

/* Forminator Styles */
.forminator-guttenberg {
    transform: translateY(350px);  /* gsap */
}
.forminator-guttenberg .anrede-select{
    min-width: 50%;
    max-width: 50%;
}
div.forminator-field:has(.forminator-button-submit){
    border: 1px solid var(--wp--preset--color--custom-dark-grey)!important;
    background-color: #fff!important;
    color:  var(--wp--preset--color--custom-dark-grey)!important;
    padding: 6px 30px!important;
    width: fit-content;
}
div.forminator-field:has(.forminator-button-submit):hover{
    background-color: var(--wp--preset--color--custom-dark-grey)!important;
}
.forminator-button-submit{
    font-size: var(--wp--preset--font-size--medium)!important;
    box-shadow: none!important;
    width: fit-content;
    min-width: 0!important;
    padding: 0!important;
    margin: 0!important;
    transition: all 0.4s ease;
}
.forminator-button-submit::after{    
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--wp--preset--color--custom-dark-grey);
    transition: width 0.4s ease;
}
div.forminator-field:has(.forminator-button-submit):hover .forminator-button-submit{
    color:  #fff!important;
}
div.forminator-field:has(.forminator-button-submit):hover .forminator-button-submit::after{
    width: 100%;
    background-color: #fff;
}

.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-col {
    padding: 0!important;
}
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row, .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row-inside {
    margin: 0!important;
}

.forminator-ui .forminator-row:has(.input-fields){
    gap: 30px;
}
.forminator-ui .forminator-row:has(.input-fields) .forminator-grouped-fields{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media screen and (min-width: 782.98px) {
    .forminator-ui .forminator-row:has(.input-fields) .forminator-grouped-fields .forminator-row:has(.forminator-col-6){
        display: flex;
        gap: 30px;    
    }
}


.forminator-field-textarea .forminator-description{
    display: none!important;
}
.forminator-field-textarea .forminator-textarea{
    min-height: 395px!important;
}
.forminator-ui .forminator-row:has(.forminator-field-consent){
    gap: 30px;
}

.forminator-ui .forminator-field-consent .forminator-label{
    display: none!important;
}

.forminator-ui .forminator-field-consent .forminator-consent__label p{
    margin-top:  30px!important;
    margin-bottom:  30px!important;
}
@media (min-width: 783px) {
    .forminator-ui .forminator-row-last{
        justify-content: flex-end!important;
        
    }
    .forminator-ui .forminator-row-last .forminator-col .forminator-field{
        margin-left: 15px;
    }
}
.forminator-ui .forminator-row-last .forminator-col{
    max-width: 50%;
}




/* rd cars cpt styles */
.rd-cars-loop .rd_cars{
    align-self: start;
    border: 1px solid var(--wp--preset--color--custom-dark-grey);
    padding-bottom: 20px;

    will-change: opacity, transform; /* gsap */
    
}

.rd-cars-loop .rd_cars:hover{
    background-color: var(--wp--preset--color--custom-dark-grey);
    transition: background-color 0.3s ease-in-out;  
}
.rd-cars-loop .rd_cars h3, .rd-cars-loop .rd_cars .entry-content{
    margin: 0 10px 0 20px;
}

.rd-cars-loop .rd_cars h4{
    font-size: 16px;
    font-weight: 400;
}
.rd-cars-loop .rd_cars:hover h3, .rd-cars-loop .rd_cars:hover h4, .rd-cars-loop .rd_cars:hover .entry-content, .rd-cars-loop .rd_cars:hover a, .rd-cars-loop .rd_cars:hover .rd-car-meta-list, .rd-cars-loop .rd_cars:hover .rd-car-meta-list li:not(:last-child)::after, .rd-cars-loop .rd_cars:hover .rd-car-meta-text, .rd-cars-loop .rd_cars:hover .rd-car-meta-text span:not(:last-child)::after {
    color: #fff;
    transition: color 0.3s ease-in-out;
}

.rd-cars-loop .rd_cars .rd-car-meta-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 35px 15px 0 0;
    min-height: 50px;
    padding: 0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--wp--preset--color--custom-dark-grey);
}
.rd-cars-loop .rd_cars .rd-car-meta-list li {
    position: relative;
    white-space: nowrap;    
}
.rd-cars-loop .rd_cars .rd-car-meta-list li:not(:last-child)::after {
    content: '|';
    color: var(--wp--preset--color--custom-dark-grey);
    padding: 0 5px;
}
.rd-car-meta-text{
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 30px;
}
.rd-cars-loop .rd_cars .rd-car-meta-text span:not(:last-child)::after {
    content: ';';
}

.rd-cars-loop .rd_cars .rd-car-price{
    font-size: 30px;
    font-weight: 600;
    margin: 20px 0 30px 0;
}

.rd-cars-loop .rd_cars .rd-car-link{
    font-size: 16px;
    text-decoration: none;
}
.rd-cars-loop .rd_cars .rd-car-link::after {
    display: inline-block;
    content: '';
    position: relative;
    top: 1px;
    left: 10px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5303 6.53033C11.8232 6.23744 11.8232 5.76256 11.5303 5.46967L6.75736 0.696699C6.46447 0.403806 5.98959 0.403806 5.6967 0.696699C5.40381 0.989593 5.40381 1.46447 5.6967 1.75736L9.93934 6L5.6967 10.2426C5.40381 10.5355 5.40381 11.0104 5.6967 11.3033C5.98959 11.5962 6.46447 11.5962 6.75736 11.3033L11.5303 6.53033ZM0 6V6.75H11V6V5.25H0V6Z' fill='%23F06E00'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}

@media screen and (max-width: 600px) {
    .rd-cars-loop .rd_cars{
        background-color: var(--wp--preset--color--custom-dark-grey);
    }
    .rd-cars-loop .rd_cars:hover{
        /* background-color: #fff!important; */
        background-color: var(--wp--preset--color--custom-dark-grey);
    }
    .rd-cars-loop .rd_cars h3, .rd-cars-loop .rd_cars h4, .rd-cars-loop .rd_cars .entry-content, .rd-cars-loop .rd_cars a{
        color: #fff!important;
        transition: color 0.3s ease-in-out;
    }
    .rd-cars-loop .rd_cars:hover h3, .rd-cars-loop .rd_cars:hover h4, .rd-cars-loop .rd_cars:hover .entry-content, .rd-cars-loop .rd_cars:hover a,.rd-cars-loop .rd_cars:hover .rd-car-meta-list ,.rd-cars-loop .rd_cars:hover .rd-car-meta-list li:not(:last-child)::after, .rd-cars-loop .rd_cars:hover .rd-car-meta-text span, .rd-cars-loop .rd_cars:hover .rd-car-meta-text span:not(:last-child)::after{
        /* color: var(--wp--preset--color--custom-dark-grey)!important; */
        color: #fff!important;
    }

    .rd-cars-loop .rd_cars .rd-car-meta-list , .rd-cars-loop .rd_cars .rd-car-meta-list li:not(:last-child)::after, .rd-cars-loop .rd_cars .rd-car-meta-text span, .rd-cars-loop .rd_cars .rd-car-meta-text p span:not(:last-child)::after{
        color: #fff!important;
    }

}


/* load more button plugin style */
.wp-block-button:has(.wp-load-more__button) {
    display: flex;
    position: relative;
    padding-top: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--20);
    padding-left: var(--wp--preset--spacing--50);
    border-radius: 0px;
    border: 1px solid;
    background-color: var(--wp--preset--color--white);
}
.wp-load-more__button {
    position: relative;
    display: inline-block;
    padding: 0;
    background-color: transparent;
    color: var(--wp--preset--color--custom-dark-grey);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
}
.wp-load-more__button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: var(--wp--preset--color--custom-dark-grey);
    transition: width 0.5s ease, background-color 0.5s ease;
}
.wp-block-button:has(.wp-load-more__button):hover .wp-load-more__button::after {
    width: 100%;
}
.wp-block-button:has(.wp-load-more__button):hover {
    background-color: var(--wp--preset--color--custom-dark-grey);
}
.wp-block-button:has(.wp-load-more__button):hover .wp-load-more__button {
    color: var(--wp--preset--color--white);
}
.wp-block-button:has(.wp-load-more__button):hover .wp-load-more__button::after {
    background-color: var(--wp--preset--color--white);
}

@media screen and (max-width: 600px) {
    .wp-block-button:has(.wp-load-more__button) {
        background-color: var(--wp--preset--color--custom-dark-grey);
    }
    .wp-load-more__button {
        color: var(--wp--preset--color--white);
    }
    .wp-load-more__button::after {
        background-color: var(--wp--preset--color--white);
    }
    .wp-block-button:has(.wp-load-more__button):hover {
        background-color: var(--wp--preset--color--white);
    }
    .wp-block-button:has(.wp-load-more__button):hover .wp-load-more__button {
        color: var(--wp--preset--color--custom-dark-grey);
    }
    .wp-block-button:has(.wp-load-more__button):hover .wp-load-more__button::after {
        background-color: var(--wp--preset--color--custom-dark-grey);
    }
}


/* SmashBalloon */
#sb-reviews-container-1 {
    opacity: 0; /* gsap */
}

.sbr-owl-dots {
    margin-top: 25px;
}
.sbr-owl-dot{
    zoom: 0.7!important;
}
.sbr-owl-dot span{
    opacity: .6!important;
}
.sbr-owl-dot.active span{
    width: 35px!important;
    opacity: 1!important;
    transition: width 0.2s ease-in-out;
}
.sbr-owl-stage .sbr-owl-item > .sb-post-item-wrap {
    height: 300px;
}
@media screen and (max-width: 600px) {
    .sb-carousel-wrap{
        padding: 0;
    }
    #sb-reviews-container-1 {
        --column-gutter: 0px!important;
    }
    .sbr-owl-stage-outer{
        background-color: #2F3234;
    }
    .sbr-owl-nav{
        display: none;
    }
}
@media screen and (min-width: 600.98px) {
    .sbr-feed .sb-carousel-wrap{
        padding: 80px 0 0 0 ;
    }
    .sbr-owl-nav{
        display: flex;
        max-width: 250px;
        position: absolute;
        top: -45px;
        left: calc(50% - 35px);
    }
    .sbr-owl-nav .sbr-owl-prev {
        position: relative;
        left: -20px;
    }
    .sbr-owl-nav .sbr-owl-next {
        position: relative;
        right: -20px;
    }
    .sbr_carousel:hover .sbr-owl-nav>div:hover, .sbr_carousel:hover .sbr-owl-nav>div, .sbr_carousel .sbr-owl-nav>div {
        border: 0;
        box-shadow: none;
    }
}

.sb-post-item-wrap {
    display: flex;
    justify-content: center;
}
.sb-post-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.sb-item-provider-icon{ /* via js zu name verschoben */
    display: none;
}
.sb-item-rating {
    justify-content: center;
    margin: 15px 0px 30px 0px!important;
}
.sb-item-name-date{
    display: flex;
}
.sb-item-author-date-ctn {
    text-align: center!important;
    width: fit-content!important;
    padding: 0!important;
    position: absolute;
    bottom: 0px;

    order: 10;
}
.sb-item-author-name{
    line-height: 23px!important;
}
.sb-item-text{
    text-align: center;
}
.sb-post-item::after{
    content: none !important;
    display: none !important;
}
.sb-item-name-date::before {
    content: '';
    display: inline-block;
    min-height: 23px;
    min-width: 22px;
    height: 23px;
    width: 22px;
    
    background-image: url('assets/icons/google-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;

    margin-right: 10px;
}


/* scroll to top style */
#scrollToTop {
    position: fixed;
    bottom: 30px;
    right: 35px;
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}
#scrollToTop svg {
    width: 24px;
    height: 24px;
}
#scrollToTop.show {
    opacity: 1;
    visibility: visible;
}