/* ===========================================
   VR IMMO – Karten-Design global
   Gilt fuer .immo-final (Immobilienangebote)
   UND fuer Plugin-gerenderte Seiten ohne diese
   Klasse (Agentur- / Makler-Archivseiten).
=========================================== */

:root {
    --vr-blue:   #0d458c;
    --vr-orange: #ff7a1a;
}

/* ===== CARD ===== */
.inx-property-list-item {
    background:    #ffffff !important;
    border-radius: 26px !important;
    overflow:      hidden !important;
    box-shadow:    0 12px 28px rgba(0,0,0,.08) !important;
    max-width:     480px;
    margin:        0 auto;
    transition:    transform .25s ease, box-shadow .25s ease;
}
.inx-property-list-item:hover {
    transform:  translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.13) !important;
}

/* ===== RESET ===== */
.inx-property-list-item__inner,
.inx-property-list-item__content {
    background: transparent !important;
    padding: 0 !important;
    margin:  0 !important;
}

/* ===== IMAGE ===== */
.inx-property-list-item img {
    width:       100%;
    height:      240px;
    object-fit:  cover;
    display:     block;
}

/* ===== BADGE ===== */
.inx-property-label {
    background:    var(--vr-blue) !important;
    color:         #fff !important;
    border-radius: 999px !important;
    padding:       8px 16px !important;
    font-size:     13px !important;
    font-weight:   600 !important;
    position:      absolute !important;
    top:           16px !important;
    right:         16px !important;
}
.inx-property-label:nth-child(2) { display: none !important; }

/* ===== TITLE ===== */
.inx-property-list-item a.inx-link {
    color:       var(--vr-blue) !important;
    font-size:   24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding:     0 !important;
    display:     block;
}

/* ===== META ===== */
.inx-property-list-item__meta {
    margin:         0 24px 14px 24px !important;
    padding:        0 !important;
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    gap:            20px;
}
.inx-property-list-item__meta > * {
    display:     flex;
    align-items: center;
    gap:         0;
}

/* ===== ICONS ===== */
.inx-property-list-item i,
.inx-property-list-item svg {
    color: var(--vr-orange) !important;
    fill:  var(--vr-orange) !important;
}

/* ===== DESCRIPTION WEG ===== */
.inx-property-list-item__description,
.inx-property-list-item p {
    display: none !important;
    height:  0 !important;
    margin:  0 !important;
    padding: 0 !important;
}

/* ===== FEATURES ===== */
.inx-property-list-item__features {
    border-top: 1px solid #eef2f6;
    margin:  14px 24px 0 24px !important;
    padding: 14px 0 0 0 !important;
}

/* ===== PREIS ===== */
.inx-property-price {
    margin:         16px 24px 26px 24px !important;
    font-size:      30px !important;
    font-weight:    800 !important;
    color:          var(--vr-blue) !important;
    letter-spacing: -.5px;
}
.inx-property-price,
.inx-property-price * { background: none !important; }

/* Label – Standard Kaufpreis */
.inx-property-price::before {
    content:       "Kaufpreis";
    display:       block;
    font-size:     11px;
    font-weight:   600;
    color:         #8fa3bf;
    margin-bottom: 6px;
}
/* Label – Mietobjekte */
.inx-property-list-item:has(.inx-oi--vermarktungsart--miete-pacht) .inx-property-price::before {
    content: "Mietpreis";
}

/* ===== SLIDER ===== */
.swiper, .swiper-wrapper, .swiper-slide { background: transparent !important; }

.inx-property-list__slider-dotnav {
    margin-top:     30px !important;
    padding-bottom: 20px !important;
}
.uk-dotnav li a {
    width:         8px;
    height:        8px;
    background:    #cbd5e1 !important;
    border:        none !important;
    outline:       none !important;
    box-shadow:    none !important;
    border-radius: 50%;
    transition:    all .2s ease;
}
.uk-dotnav li.uk-active a {
    background: var(--vr-orange) !important;
    transform:  scale(1.3);
}
.swiper-button-prev,
.swiper-button-next {
    background:    #fff !important;
    border-radius: 50% !important;
    width:         46px !important;
    height:        46px !important;
    box-shadow:    0 6px 18px rgba(0,0,0,.1);
}
.swiper-button-prev:after,
.swiper-button-next:after { color: var(--vr-blue) !important; }