/*
=========================================
Immobilien Grid - Corporate Design Final Fine Tuning v14
=========================================
*/

:root{
    --ig-text:#1A252A;
    --ig-text-light:rgba(26,37,42,.68);
    --ig-accent:#f49864;
    --ig-primary:#B18A5A;
    --ig-accent-faded:#f8c1a2;
    --ig-sage:#a2a68f;
    --ig-border:#d9ddda;
    --ig-border-dark:#1A252A;
    --ig-background:#ffffff;
    --ig-box:#f4f5f3;
    --ig-radius:0;
}

#ig-results,
.ig-filters,
.ig-load-more-wrapper{
    font-family:"Figtree", Arial, sans-serif;
    color:var(--ig-text);
}

#ig-results *,
.ig-filters *,
.ig-mobile-filters *,
.ig-load-more-wrapper *{
    box-sizing:border-box;
}

/*
===========================
Grid
===========================
*/

.ig-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:44px;
}

@media(max-width:767px){
    .ig-grid{
        grid-template-columns:1fr;
        gap:34px;
    }
}

/*
===========================
Card
===========================
*/

.ig-card{
    background:var(--ig-background);
    border:none;
    border-radius:0;
    overflow:hidden;
    box-shadow:10px 10px 0 var(--ig-accent);
    color:var(--ig-text);
    transition:transform .22s ease, box-shadow .22s ease;
}

.ig-card:hover{
    transform:translateY(-8px);
    box-shadow:10px 10px 0 var(--ig-sage);
}

/*
===========================
Bild
===========================
*/

.ig-card__image{
    display:block;
    position:relative;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:var(--ig-box);
    border-radius:0;
}

.ig-card__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease, filter .45s ease;
}

.ig-card:hover .ig-card__image img{
    transform:scale(1.045);
    filter:saturate(1.04) contrast(1.03);
}

/*
===========================
Status Badge
===========================
*/

.ig-card__badge{
    position:absolute;
    top:18px;
    left:18px;
    background:#444;
    color:#fff;
    padding:9px 14px;
    border:0;
    border-radius:0;
    box-shadow:none;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ig-card__badge--verkauft,
.ig-card__badge--vermietet{
    background:#D73C2C;
    color:#fff;
}

.ig-card__badge--reserviert{
    background:#F4A825;
    color:#fff;
}

.ig-card__badge--verfügbar,
.ig-card__badge--verfuegbar,
.ig-card__badge--verfugbar{
    background:#3A8F5A;
    color:#fff;
}

/*
===========================
Content
===========================
*/

.ig-card__content{
    padding:30px;
}

.ig-card__location{
    color:var(--ig-accent);
    font-size:13px;
    font-weight:800;
    line-height:1.3;
    margin:0 0 8px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.ig-card__title{
    margin:0 0 14px;
    color:var(--ig-text);
    font-size:36px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.035em;
}

.ig-card__title a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}

.ig-card__title a:hover{
    color:var(--ig-accent);
}

.ig-card__price{
    color:#A2A68F;
    font-size:22px;
    font-weight:700;
    line-height:1.25;
    margin:0 0 30px;
}

@media(max-width:767px){
    .ig-card__content{
        padding:24px;
    }

    .ig-card__title{
        font-size:30px;
    }

    .ig-card__price{
        font-size:20px;
    }
}

/*
===========================
Facts
===========================
*/

.ig-card__facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:30px;
}

.ig-card__fact{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:13px;
    border:1px solid var(--ig-border);
    border-radius:0;
    background:var(--ig-box);
}

.ig-card__icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ig-sage);
    border-radius:0;
    color:var(--ig-text);
    background:rgba(162,166,143,.36);
}

.ig-card__icon svg{
    width:20px;
    height:20px;
    display:block;
}

.ig-card__fact-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.ig-card__fact-label{
    color:var(--ig-text-light);
    font-size:12px;
    font-weight:300;
    line-height:1.2;
}

.ig-card__fact-value{
    color:var(--ig-text);
    font-size:14px;
    font-weight:700;
    line-height:1.25;
    overflow-wrap:anywhere;
}

@media(max-width:480px){
    .ig-card__facts{
        grid-template-columns:1fr;
    }
}

/*
===========================
Besonderheiten
===========================
*/

.ig-card__specials{
    margin:0 0 30px;
    padding:13px;
    border:1px solid var(--ig-border);
    border-radius:0;
    background:var(--ig-box);
    box-shadow:none;
}

.ig-card__specials-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:13px;
}

.ig-card__specials-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ig-sage);
    border-radius:0;
    color:var(--ig-text);
    background:rgba(162,166,143,.36);
}

.ig-card__specials-icon svg{
    width:20px;
    height:20px;
    display:block;
}

.ig-card__specials-label{
    color:var(--ig-text-light);
    font-size:12px;
    font-weight:300;
    line-height:1.2;
}

.ig-card__specials-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ig-card__special-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 11px;
    border:1px solid var(--ig-sage);
    border-radius:0;
    background:rgba(162,166,143,.18);
    color:var(--ig-text);
    font-size:13px;
    font-weight:700;
    line-height:1.15;
}

/*
===========================
Excerpt
===========================
*/

.ig-card__excerpt{
    color:#1A252A;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
}

.ig-card__excerpt p{
    margin-top:0;
    margin-bottom:0;
}

/*
===========================
Buttons
===========================
*/

.ig-card__button,
#ig-load-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:1rem;
    border:2px solid var(--ig-accent);
    border-radius:0;
    background:var(--ig-accent);
    color:#fff;
    cursor:pointer;
    font-family:"Figtree", Arial, sans-serif;
    font-size:1rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:.05rem;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    box-shadow:none;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ig-card__button{
    width:100%;
    margin-top:28px;
}

.ig-card__button:hover,
#ig-load-more:hover{
    background:var(--ig-sage);
    border-color:var(--ig-sage);
    color:#fff;
    box-shadow:none;
    transform:none;
}

.ig-card__button:focus-visible,
#ig-load-more:focus-visible,
.ig-filter-button:focus-visible,
.ig-select-filter__select:focus-visible,
.ig-mobile-filter__select:focus-visible,
.ig-filter-reset:focus-visible{
    outline:3px solid var(--ig-text);
    outline-offset:3px;
}

/*
===========================
Filter
===========================
*/

.ig-filters{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:center;
    gap:14px 18px;
    width:100%;
    margin:0 auto 44px;
    text-align:left;
}

.ig-filter-group{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    width:100%;
}

.ig-filter-button{
    appearance:none;
    border:0;
    border-radius:0;
    background:#fff;
    color:var(--ig-text);
    cursor:pointer;
    font-family:"Figtree", Arial, sans-serif;
    font-size:1rem;
    font-weight:700;
    line-height:1.1;
    padding:1rem;
    text-transform:uppercase;
    letter-spacing:.05rem;
    box-shadow:none;
    transition:background-color .18s ease, color .18s ease;
}

.ig-filter-button:hover{
    background:var(--ig-sage);
    color:#ffffff;
    box-shadow:none;
    transform:none;
}

.ig-filter-button.active{
    background:var(--ig-accent);
    color:#fff;
    box-shadow:none;
}

.ig-filter-button.active:hover{
    background:var(--ig-sage);
    color:#fff;
    box-shadow:none;
    transform:none;
}

.ig-filter-reset{
    appearance:none;
    border:1px solid #ffffff;
    border-radius:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    font-family:"Figtree", Arial, sans-serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.05rem;
    line-height:1.1;
    padding:1rem;
    text-transform:uppercase;
    box-shadow:none;
    opacity:0;
    pointer-events:none;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}

.ig-filter-reset.is-visible{
    opacity:1;
    pointer-events:auto;
}

.ig-filter-reset:hover{
    background:transparent;
    border-color:var(--ig-sage);
    color:#ffffff;
}

.ig-filter-reset:active,
.ig-filter-reset.is-active{
    background:transparent;
    border-color:var(--ig-accent);
    color:#ffffff;
}

.ig-filter-reset:disabled{
    cursor:default;
}

.ig-filter-reset__icon{
    display:inline-block;
    font-size:1.15em;
    line-height:1;
    transform:translateY(-.02em);
}

@media(max-width:767px){
    .ig-filter-button{
        padding:1rem;
        font-size:1rem;
    }
}


.ig-desktop-select-filters{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:flex-end;
    gap:14px;
    width:auto;
}

.ig-select-filter{
    display:flex;
    flex-direction:column;
    gap:7px;
    width:320px;
    max-width:100%;
    margin:0;
    text-align:left;
}

.ig-select-filter__label{
    color:#ffffff;
    font-family:"Figtree", Arial, sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.05rem;
    line-height:1.1;
    text-transform:uppercase;
}

.ig-select-filter__select-wrap{
    position:relative;
    display:block;
    width:100%;
}

.ig-select-filter__select-wrap::after{
    content:"";
    position:absolute;
    right:1rem;
    top:50%;
    width:.55rem;
    height:.55rem;
    border-right:2px solid var(--ig-text);
    border-bottom:2px solid var(--ig-text);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
}

.ig-select-filter__select{
    appearance:none;
    width:100%;
    border:0;
    border-radius:0;
    background:#ffffff;
    color:var(--ig-text);
    cursor:pointer;
    font-family:"Figtree", Arial, sans-serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.05rem;
    line-height:1.1;
    padding:1rem 2.8rem 1rem 1rem;
    text-transform:uppercase;
    box-shadow:none;
}

.ig-select-filter__select:hover{
    background:var(--ig-sage);
    color:#ffffff;
}

.ig-select-filter__select.is-active{
    background:var(--ig-accent);
    color:#ffffff;
}

.ig-select-filter__select.is-active:hover{
    background:var(--ig-sage);
    color:#ffffff;
}

.ig-select-filter__select-wrap:hover::after,
.ig-select-filter__select-wrap.is-active::after{
    border-color:#ffffff;
}

.ig-filter-group--vermarktung,
.ig-filter-group--objektart{
    display:none;
}

.ig-filter-group--ort{
    width:auto;
    max-width:100%;
    margin-top:0;
    justify-content:flex-start;
    align-items:flex-end;
}

.ig-filter-group__label{
    flex:0 0 100%;
    color:#ffffff;
    font-family:"Figtree", Arial, sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.05rem;
    line-height:1.1;
    text-align:left;
    text-transform:uppercase;
}

.ig-mobile-filters{
    display:none;
}

@media(max-width:767px){
    .ig-filters{
        flex-direction:column;
        align-items:center;
        gap:0;
        margin-bottom:34px;
        text-align:left;
    }

    .ig-desktop-select-filters,
    .ig-filter-group{
        display:none;
    }

    .ig-mobile-filters{
        display:flex;
        flex-direction:column;
        gap:14px;
        width:100%;
        max-width:420px;
        margin:0 auto;
    }

    .ig-filter-reset{
        width:100%;
        max-width:420px;
        margin-top:14px;
    }

    .ig-mobile-filter{
        display:flex;
        flex-direction:column;
        gap:7px;
        width:100%;
        margin:0;
        text-align:left;
    }

    .ig-mobile-filter__label{
        color:#ffffff;
        font-family:"Figtree", Arial, sans-serif;
        font-size:.78rem;
        font-weight:700;
        letter-spacing:.05rem;
        line-height:1.1;
        text-transform:uppercase;
    }

    .ig-mobile-filter__select-wrap{
        position:relative;
        display:block;
        width:100%;
    }

    .ig-mobile-filter__select-wrap::after{
        content:"";
        position:absolute;
        right:1rem;
        top:50%;
        width:.55rem;
        height:.55rem;
        border-right:2px solid var(--ig-text);
        border-bottom:2px solid var(--ig-text);
        transform:translateY(-65%) rotate(45deg);
        pointer-events:none;
    }

    .ig-mobile-filter__select{
        appearance:none;
        width:100%;
        border:0;
        border-radius:0;
        background:#ffffff;
        color:var(--ig-text);
        cursor:pointer;
        font-family:"Figtree", Arial, sans-serif;
        font-size:1rem;
        font-weight:700;
        letter-spacing:.05rem;
        line-height:1.1;
        padding:1rem 2.8rem 1rem 1rem;
        text-transform:uppercase;
        box-shadow:none;
    }

    .ig-mobile-filter__select:hover{
        background:var(--ig-sage);
        color:#ffffff;
    }

    .ig-mobile-filter__select.is-active{
        background:var(--ig-accent);
        color:#ffffff;
    }

    .ig-mobile-filter__select.is-active:hover{
        background:var(--ig-sage);
        color:#ffffff;
    }

    .ig-mobile-filter__select-wrap:hover::after,
    .ig-mobile-filter__select-wrap.is-active::after{
        border-color:#ffffff;
    }

    .ig-mobile-filter__select:focus-visible{
        outline:3px solid var(--ig-accent);
        outline-offset:3px;
    }
}

/*
===========================
Load More
===========================
*/

.ig-load-more-wrapper{
    display:flex;
    justify-content:center;
    text-align:center;
    margin-top:46px;
}

#ig-load-more{
    min-width:260px;
}

#ig-load-more.is-loading{
    cursor:wait;
    background:var(--ig-sage);
    border-color:var(--ig-sage);
    box-shadow:none;
    opacity:.75;
}

/*
===========================
Keine Ergebnisse
===========================
*/

.ig-empty-message,
.ig-grid > p{
    grid-column:1 / -1;
    margin:0;
    padding:22px 24px;
    color:#ffffff;
    font-family:"Figtree", Arial, sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1.4;
    text-align:center;
    border:1px solid rgba(255,255,255,.55);
    border-radius:0;
    background:rgba(255,255,255,.08);
}

/*
===========================
Loading Animation
===========================
*/

#ig-results{
    position:relative;
}

.ig-loading-overlay{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    background:transparent;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
}

#ig-results.is-loading .ig-loading-overlay{
    opacity:1;
    visibility:visible;
}

#ig-results .ig-grid{
    transition:opacity .2s ease;
}

#ig-results.is-loading .ig-grid{
    opacity:.42;
}

.ig-spinner{
    width:42px;
    height:42px;
    border:4px solid rgba(177,138,90,.25);
    border-top-color:var(--ig-primary);
    border-radius:50%;
    animation:ig-spin .75s linear infinite;
}

@keyframes ig-spin{
    to{
        transform:rotate(360deg);
    }
}


/* Reset-Button: gezielte Outline-Variante */
.ig-filters .ig-filter-reset,
.ig-widget .ig-filter-reset,
button.ig-filter-reset{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.45rem !important;
    min-height:50px !important;
    padding:1rem !important;
    border:2px solid #ffffff !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#ffffff !important;
    cursor:pointer !important;
    font-family:"Figtree", Arial, sans-serif !important;
    font-size:1rem !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    letter-spacing:.05rem !important;
    text-align:center !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    box-shadow:none !important;
    transform:none !important;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease !important;
}

.ig-filters .ig-filter-reset:hover,
.ig-widget .ig-filter-reset:hover,
button.ig-filter-reset:hover{
    border-color:#a2a68f !important;
    background:transparent !important;
    color:#ffffff !important;
    box-shadow:none !important;
    transform:none !important;
}

.ig-filters .ig-filter-reset:active,
.ig-filters .ig-filter-reset.is-active,
.ig-widget .ig-filter-reset:active,
.ig-widget .ig-filter-reset.is-active,
button.ig-filter-reset:active,
button.ig-filter-reset.is-active{
    border-color:#f49864 !important;
    background:transparent !important;
    color:#ffffff !important;
    box-shadow:none !important;
    transform:none !important;
}

.ig-filters .ig-filter-reset__icon,
.ig-widget .ig-filter-reset__icon,
button.ig-filter-reset .ig-filter-reset__icon{
    display:inline-block !important;
    font-size:1.15em !important;
    line-height:1 !important;
    color:inherit !important;
    transform:translateY(-.02em) !important;
}


/* Reset-Button im unteren Aktionsbereich neben "Weitere Immobilien anzeigen" */
.ig-load-more-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
}

.ig-load-more-wrapper .ig-filter-reset{
    display:none !important;
    margin:0 !important;
}

.ig-load-more-wrapper .ig-filter-reset.is-visible{
    display:inline-flex !important;
}

.ig-filters .ig-filter-reset{
    display:none !important;
}

@media(max-width:767px){
    .ig-load-more-wrapper{
        gap:.8rem;
    }

    .ig-load-more-wrapper #ig-load-more,
    .ig-load-more-wrapper .ig-filter-reset{
        width:100%;
        max-width:360px;
    }
}