/*
Theme Name: Leasingaktionen
Author: Leasingaktionen
Author URI: https://leasingaktionen.de/
Version: 1.0.0-la.2
Template: 21-platform
Text Domain: voxel
*/


:root {
    --e-global-typography-primary-font-family: "Jost";
    --e-global-typography-secondary-font-family: "Jost";
    --e-global-typography-text-font-family: "Inter";
    --e-global-typography-accent-font-family: "Inter";
    --e-global-color-accent: #FCC00C;
    --e-global-color-accent-negative: #FF6666;
    --e-global-color-accent-positive: #00B877;
    --c21-global-color-light-grey: #E8E4D6;
    --e-global-typography-text-font-size: 16px;
    --e-global-typography-text-font-weight: 400;
}

@media screen and (max-width: 767px) { .vx-hidden-mobile { display: none !important; } }
@media screen and (min-width: 768px) and (max-width: 1023px) { .vx-hidden-tablet { display: none !important; } }
@media screen and (min-width: 1024px) { .vx-hidden-desktop { display: none !important; } }

.section-content h2,.section-content h3,.section-content h4, .section-content h5 {
    font-size: 24px;
    font-weight: 700;
}
.section-content p {
    margin-bottom: 15px;
}

@media only screen and (max-width: 1023px) {
    .rank-math-breadcrumb a:not(:nth-last-child(3)), .rank-math-breadcrumb span:last-child, .rank-math-breadcrumb .separator {
        display: none;
    }
}


.video-block embed, .video-block iframe, .video-block object, .video-block video {
    margin: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.listing-expired {
    filter: grayscale(70%);
    -webkit-filter: grayscale(70%);
    background: repeating-linear-gradient(-55deg,#f8f8f8,#f8f8f8 10px,rgba(225,224,224,.45) 10px,rgba(225,224,224,.4) 20px) !important;
}

.hero-center .rank-math-breadcrumb div {
    justify-content: center;
}

.wpcf7-spinner {
    visibility: hidden !important;
}

.format figure, .wp-caption{
    max-width: 100%;
}

.hidden-important {
    display: none !important;
}

.breadcrumb-back::before {
    content: "";
    position: absolute;
    width: 105%;
    height: 105%;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.dark-text .breadcrumb-back::before {
    filter: invert(1);
}
/* THG cards: mobile 60/40 overview; desktop profile, information and price. */
.thg-provider-card .thg-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}
.thg-provider-card .thg-card-profile {
    order: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
}
.thg-provider-card .thg-card-logo { width: 2.5rem; height: 2.5rem; }
.thg-provider-card .thg-card-name { min-width: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.thg-provider-card .thg-card-rating { grid-column: 1 / -1; min-width: 0; }
.thg-provider-card .thg-card-rating .ts-popup-component,
.thg-provider-card .thg-card-rating button { max-width: 100%; text-align: left; }
.thg-provider-card .thg-card-price { order: 2; }
.thg-provider-card .thg-card-price-info { margin-top: .375rem; gap: .25rem; }
.thg-provider-card .thg-card-pill {
    display: inline-block;
    max-width: 100%;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.5;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-align: center;
}
.thg-provider-card .thg-card-tariff { font-weight: 700; }
.thg-provider-card .thg-card-info {
    order: 3;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
}
.thg-provider-card .thg-card-info > li + li { margin-top: .375rem; }
.thg-provider-card .thg-card-action { order: 4; grid-column: 1 / -1; min-width: 0; }
.thg-provider-card .thg-card-profile--no-logo { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
    .thg-provider-card .thg-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: .75rem;
    }
    .thg-provider-card .thg-card-profile {
        grid-column: 1;
        grid-row: 1 / span 2;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: .75rem;
    }
    .thg-provider-card .thg-card-logo { width: 3.5rem; height: 3.5rem; grid-row: 1 / span 2; }
    .thg-provider-card .thg-card-name { font-size: 1.25rem; }
    .thg-provider-card .thg-card-rating { grid-column: 2; }
    .thg-provider-card .thg-card-rating .star { width: 1rem; height: 1rem; }
    .thg-provider-card .thg-card-info { order: 2; grid-column: 2; grid-row: 1 / span 2; }
    .thg-provider-card .thg-card-price { order: 3; grid-column: 3; grid-row: 1; }
    .thg-provider-card .thg-card-action { grid-column: 3; grid-row: 2; }
    .thg-provider-card .thg-card-profile--no-logo { grid-template-columns: minmax(0, 1fr); }
    .thg-provider-card .thg-card-profile--no-logo .thg-card-rating { grid-column: 1; }
}

/* Brand defaults also cover widgets with styles generated outside Tailwind. */
:root {
    --e-global-color-primary: #073343;
    --e-global-color-secondary: #186B89;
    --e-global-color-text: #042531;
}
body:not(.wp-admin),
body:not(.wp-admin) input,
body:not(.wp-admin) select,
body:not(.wp-admin) textarea,
body:not(.wp-admin) button {
    font-family: 'Inter', Arial, sans-serif;
}
body:not(.wp-admin) :is(h1, h2, h3, h4, h5, h6, .font-display) {
    font-family: 'Jost', Arial, sans-serif;
}
body:not(.wp-admin) *,
body:not(.wp-admin) *::before,
body:not(.wp-admin) *::after {
    border-radius: 0 !important;
}
/* Default actions retain dark, readable labels across older widget templates. */
body:not(.wp-admin) :is(button, a, [role="button"], .cloak-link).bg-primary-500,
body:not(.wp-admin) .ts-btn-1,
body:not(.wp-admin) .elementor-button,
body:not(.wp-admin) input[type="submit"] {
    background-color: #FCC00C;
    color: #073343 !important;
    fill: currentColor;
}
body:not(.wp-admin) :is(button, a, [role="button"], .cloak-link).bg-primary-500:hover,
body:not(.wp-admin) .ts-btn-1:hover,
body:not(.wp-admin) .elementor-button:hover,
body:not(.wp-admin) input[type="submit"]:hover {
    background-color: #FFCD6E;
    color: #073343 !important;
}
body:not(.wp-admin) :is(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid #073343;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    body:not(.wp-admin) *, body:not(.wp-admin) *::before, body:not(.wp-admin) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Yellow marks the selection; its label stays readable on a light field. */
body:not(.wp-admin) .ts-form .ts-nav .text-primary-500,
body:not(.wp-admin) .ts-filter.ts-filled .ts-filter-text,
body:not(.wp-admin) .ts-filter.ts-filled > span {
    color: #073343 !important;
}

/* Keep the consent heading and local wordmark inside narrow dialogs. */
.brlbs-dialog-logo {
    width: 280px;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

/* Keep the consent launcher from covering the search sheet's bottom actions. */
body:has(.vx-filter-popup, .ts-search-portal:not(.hidden)) .brlbs-cmpnt-widget {
    visibility: hidden !important;
    pointer-events: none;
}

@media (max-width: 639px) {
    .brlbs-cmpnt-dialog-box-header,
    .brlbs-flex:has(> .brlbs-dialog-logo) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    .brlbs-dialog-logo {
        max-width: 100%;
        width: 240px;
        height: auto !important;
        margin-right: 0 !important;
    }
    #BorlabsCookieEntranceA11YHeadline,
    #BorlabsCookiePreferencesA11YHeadline {
        width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Search controls: compact labels, clear selection and a single focus treatment. */
body:not(.wp-admin) .ts-search-widget .ts-filter-wrapper {
    row-gap: 22px;
}

body:not(.wp-admin) .ts-search-widget .ts-form-group > label {
    color: #073343;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding-bottom: 9px;
}

body:not(.wp-admin) .ts-search-widget .ts-form-group > label.text-lg {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    padding-bottom: 0;
}

body:not(.wp-admin) .ts-search-widget .ts-filter,
body:not(.wp-admin) .ts-search-widget input.inline-input {
    min-height: 48px;
    color: #073343;
    background: #fff;
    border-color: rgba(7, 51, 67, .28);
    transition: border-color .15s, background-color .15s;
}

body:not(.wp-admin) .ts-search-widget .ts-filter {
    padding-inline: 14px;
}

body:not(.wp-admin) .ts-search-widget .ts-filter:hover,
body:not(.wp-admin) .ts-search-widget input.inline-input:hover {
    border-color: #073343;
}

body:not(.wp-admin) .ts-search-widget .ts-filter.ts-filled {
    border-color: #073343;
    box-shadow: inset 3px 0 #FCC00C;
}

body:not(.wp-admin) .ts-search-widget .ts-nav {
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(7, 51, 67, .28);
}

body:not(.wp-admin) .ts-search-widget .ts-nav > li {
    flex: 1;
    padding: 0;
    border-right: 1px solid rgba(7, 51, 67, .2);
}

body:not(.wp-admin) .ts-search-widget .ts-nav > li:last-child {
    border-right: 0;
}

body:not(.wp-admin) .ts-search-widget .ts-nav > li.bg-white {
    background: #FCC00C !important;
}

body:not(.wp-admin) .ts-search-widget .ts-nav .ts-item-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 8px;
}

body:not(.wp-admin) .ts-search-widget .ts-nav .ts-item-link p {
    color: #073343;
}

body:not(.wp-admin) .ts-search-widget .inline-terms-wrapper .ts-term-dropdown-list > li {
    border-color: rgba(7, 51, 67, .28);
}

body:not(.wp-admin) .ts-search-widget .inline-terms-wrapper .ts-term-dropdown-list > li.ts-selected {
    color: #073343 !important;
    background: #FCC00C !important;
    border-color: #073343;
}

body:not(.wp-admin) .ts-search-widget .inline-terms-wrapper .ts-term-dropdown-list > li.ts-selected > a {
    color: #073343 !important;
}

/* Popups are shared by the hero search, sidebar filters and mobile filter sheet. */
body:not(.wp-admin) .vx-filter-popup .ts-field-popup {
    color: #073343;
    background: #fff;
    border: 1px solid rgba(7, 51, 67, .28);
    border-top: 3px solid #FCC00C;
    box-shadow: 0 12px 30px rgba(7, 51, 67, .14);
}

body:not(.wp-admin) .vx-filter-popup .ts-sticky-top {
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid rgba(7, 51, 67, .14);
}

body:not(.wp-admin) .vx-filter-popup .ts-input-icon input {
    min-height: 46px;
    color: #073343;
    background: #fff;
    border: 1px solid rgba(7, 51, 67, .28);
}

body:not(.wp-admin) :is(.ts-search-widget, .vx-filter-popup) input::placeholder {
    color: #526870;
    opacity: 1;
}

body:not(.wp-admin) :is(.ts-search-widget, .vx-filter-popup) input:is(:focus, :focus-visible) {
    border-color: #073343 !important;
    outline: 2px solid #073343;
    outline-offset: -2px;
    box-shadow: none !important;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list {
    padding: 6px 8px;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li {
    border-bottom: 1px solid rgba(7, 51, 67, .1);
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li:last-child {
    border-bottom: 0;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li > a {
    min-height: 46px;
    padding: 11px 12px;
    gap: 10px;
    color: #073343;
    font-size: 15px;
    line-height: 1.5;
    transition: background-color .15s;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li > a:hover {
    background: rgba(252, 192, 12, .14);
    color: #073343;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li.ts-selected > a {
    background: rgba(252, 192, 12, .22);
    color: #073343;
    font-weight: 600;
    box-shadow: inset 3px 0 #FCC00C;
}

body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li > a:focus-visible {
    outline: 2px solid #073343;
    outline-offset: -2px;
}

body:not(.wp-admin) .vx-filter-popup :is(.ts-checkbox-container, .ts-radio-container) .checkmark {
    border-color: rgba(7, 51, 67, .45);
}

body:not(.wp-admin) .vx-filter-popup :is(.container-checkbox, .container-radio) input:checked ~ .checkmark {
    background: #FCC00C;
    border-color: #073343;
}

body:not(.wp-admin) .vx-filter-popup .container-checkbox .checkmark:after {
    border-color: #073343;
}

body:not(.wp-admin) .vx-filter-popup .container-radio .checkmark:after {
    background: #073343;
}

body:not(.wp-admin) .vx-filter-popup :is(.active-check, .ts-input-icon > svg) {
    color: #073343;
    fill: currentColor;
}

body:not(.wp-admin) :is(.vx-filter-popup, .ts-search-portal) .ts-popup-controller {
    padding: 12px;
    border-color: rgba(7, 51, 67, .14);
    background: #fff;
    color: #073343;
}

body:not(.wp-admin) .vx-filter-popup .ts-popup-controller > ul.grid {
    gap: 8px;
}

/* Both action variants need explicit contrast against the brand's yellow. */
body:not(.wp-admin) .vx-popup .ts-popup-controller .ts-btn {
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    color: #073343 !important;
    fill: currentColor;
}

body:not(.wp-admin) .vx-popup .ts-popup-controller .ts-btn-1 {
    border: 1px solid rgba(7, 51, 67, .35);
    background: #fff;
}

body:not(.wp-admin) .vx-popup .ts-popup-controller .ts-btn-1:hover {
    background: rgba(7, 51, 67, .06);
    border-color: #073343;
}

body:not(.wp-admin) .vx-popup .ts-popup-controller .ts-btn-2 {
    border: 1px solid #FCC00C;
    background: #FCC00C;
}

body:not(.wp-admin) .vx-popup .ts-popup-controller .ts-btn-2:hover {
    background: #FFCD6E;
    border-color: #073343;
}

body:not(.wp-admin) .ts-back-to-top,
body:not(.wp-admin) .ts-back-to-top :is(span, svg) {
    color: #073343 !important;
    fill: currentColor !important;
}

body:not(.wp-admin) .ts-filter-toggle :is(.ts-filter-count, svg) {
    color: #073343 !important;
    fill: currentColor !important;
}

@media (max-width: 767px) {
    body:not(.wp-admin) .ts-search-portal .ts-popup-controller,
    body:not(.wp-admin) .vx-filter-popup .ts-popup-controller {
        padding: 12px 16px;
    }

    body:not(.wp-admin) .vx-filter-popup .ts-term-dropdown-list > li > a {
        min-height: 50px;
        padding-block: 13px;
        font-size: 16px;
    }
}
