/* =========================================================
   EGERT MIETWELT FRONTEND
   ========================================================= */

.egert-mietwelt,
.egert-mietwelt *,
.egert-mietwelt *::before,
.egert-mietwelt *::after {
    box-sizing:border-box !important;
}

.egert-mietwelt {
    --eg-dark:#171b18;
    --eg-deep:#263229;
    --eg-green:#758964;
    --eg-orange:#ed741b;
    --eg-cream:#f5f3ee;
    --eg-text:#626962;

    width:100%;

    background:var(--eg-cream);

    font-family:"Inter",Arial,sans-serif;
}

.egert-mietwelt-inner {
    width:calc(100% - 60px);
    max-width:1350px;
    margin:0 auto;
    padding:95px 0 105px;
}

.egert-mietwelt-head {
    display:grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.85fr);
    align-items:end;
    gap:75px;
    margin-bottom:50px;
}

.egert-mietwelt-kicker {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:17px;

    color:var(--eg-green);

    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.egert-mietwelt-kicker::before {
    content:"";
    width:38px;
    height:2px;
    background:var(--eg-orange);
}

.egert-mietwelt-head h2 {
    margin:0;
    color:var(--eg-dark);

    font-size:clamp(45px,4.7vw,66px);
    line-height:1;
    letter-spacing:-2.7px;
    font-weight:650;
}

.egert-mietwelt-head h2 span {
    color:var(--eg-green);
}

.egert-mietwelt-head > p {
    max-width:470px;
    margin:0;

    color:var(--eg-text);

    font-size:15px;
    line-height:1.75;
}

.egert-mietwelt-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:22px;
}

.egert-mietwelt-card {
    position:relative;
    overflow:hidden;

    background:#fff;

    border:
        1px solid rgba(23,27,24,.11);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.egert-mietwelt-card:hover {
    transform:translateY(-5px);

    border-color:
        rgba(117,137,100,.38);

    box-shadow:
        0 18px 40px rgba(23,27,24,.10);
}

.egert-mietwelt-image {
    width:100%;
    height:300px;

    display:block;

    overflow:hidden;

    background:#e5e9e1;
}

.egert-mietwelt-image img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1);
}

.egert-mietwelt-card:hover
.egert-mietwelt-image img {
    transform:scale(1.025);
}

.egert-mietwelt-placeholder {
    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            rgba(117,137,100,.18),
            rgba(117,137,100,.05)
        );
}

.egert-mietwelt-card-body {
    padding:24px;
}

.egert-mietwelt-type {
    margin-bottom:10px;

    color:var(--eg-orange);

    font-size:9px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.egert-mietwelt-card h3 {
    margin:0;
}

.egert-mietwelt-card h3 a {
    color:var(--eg-dark);

    font-size:22px;
    line-height:1.25;
    letter-spacing:-.5px;
    font-weight:650;

    text-decoration:none;
}

.egert-mietwelt-price {
    margin-top:16px;

    color:var(--eg-text);

    font-size:12px;
}

.egert-mietwelt-price strong {
    color:var(--eg-green);

    font-size:19px;
    font-weight:700;
}

.egert-mietwelt-price span {
    color:#8b918b;
}

.egert-mietwelt-button {
    width:100%;
    min-height:50px;

    margin-top:22px;
    padding:0 17px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    background:var(--eg-deep);

    color:#fff;

    text-decoration:none;

    font-size:12px;
    font-weight:700;

    transition:
        background .22s ease;
}

.egert-mietwelt-button:hover {
    background:var(--eg-orange);
    color:#fff;
}

.egert-mietwelt-empty {
    padding:35px;

    background:#fff;

    border:
        1px solid rgba(23,27,24,.11);

    color:var(--eg-text);
}

@media(max-width:1024px) {

    .egert-mietwelt-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:767px) {

    .egert-mietwelt-inner {
        width:calc(100% - 34px);
        padding:65px 0 70px;
    }

    .egert-mietwelt-head {
        grid-template-columns:1fr;
        gap:22px;
        margin-bottom:34px;
    }

    .egert-mietwelt-head h2 {
        font-size:41px;
    }

    .egert-mietwelt-grid {
        grid-template-columns:1fr;
        gap:15px;
    }

    .egert-mietwelt-image {
        height:265px;
    }

}


/* =========================================================
   EGERT_MIETWELT_FILTER_V142
   ========================================================= */


/* =========================================================
   FILTERBEREICH
   ========================================================= */

.egert-mietwelt-v142 .egert-mietwelt-filter-wrap {
    margin:
        0
        0
        34px !important;

    padding:
        22px
        0 !important;

    border-top:
        1px solid rgba(23,27,24,.12) !important;

    border-bottom:
        1px solid rgba(23,27,24,.12) !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter-label {
    display:flex !important;

    align-items:center !important;

    gap:13px !important;

    margin-bottom:
        15px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter-label > span {
    flex-shrink:0 !important;

    color:
        #7f877f !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1.6px !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter-label > div {
    width:100% !important;

    height:1px !important;

    background:
        rgba(23,27,24,.08) !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filters {
    display:flex !important;

    flex-wrap:wrap !important;

    gap:7px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter {
    min-height:
        46px !important;

    margin:0 !important;

    padding:
        0
        15px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    background:
        transparent !important;

    border:
        1px solid rgba(23,27,24,.16) !important;

    border-radius:
        0 !important;

    color:
        #4f5750 !important;

    cursor:
        pointer !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    line-height:
        1 !important;

    font-weight:
        650 !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter:hover {
    border-color:
        var(--eg-green) !important;

    color:
        var(--eg-green) !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter.is-active {
    background:
        var(--eg-deep) !important;

    border-color:
        var(--eg-deep) !important;

    color:
        #fff !important;
}


.egert-mietwelt-v142 .egert-mietwelt-filter small {
    min-width:
        21px !important;

    height:
        21px !important;

    padding:
        0
        5px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:
        rgba(23,27,24,.07) !important;

    color:
        inherit !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;
}


.egert-mietwelt-v142
.egert-mietwelt-filter.is-active
small {
    background:
        rgba(255,255,255,.13) !important;
}


/* =========================================================
   RESULT BAR
   ========================================================= */

.egert-mietwelt-v142 .egert-mietwelt-result-bar {
    display:flex !important;

    align-items:flex-end !important;

    justify-content:space-between !important;

    gap:25px !important;

    margin-bottom:
        20px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-result-kicker {
    display:block !important;

    margin-bottom:
        4px !important;

    color:
        var(--eg-orange) !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1.4px !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-result-title {
    color:
        var(--eg-dark) !important;

    font-size:
        20px !important;

    line-height:
        1.2 !important;

    font-weight:
        650 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-result-count {
    color:
        #8a918a !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.egert-mietwelt-v142 .egert-mietwelt-card[hidden] {
    display:none !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card {
    display:flex !important;

    flex-direction:column !important;

    min-width:
        0 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-image {
    position:
        relative !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-badge {
    position:
        absolute !important;

    z-index:
        3 !important;

    top:
        13px !important;

    left:
        13px !important;

    padding:
        7px
        9px !important;

    background:
        var(--eg-orange) !important;

    color:
        #fff !important;

    font-size:
        8px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    letter-spacing:
        .8px !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-category {
    position:
        absolute !important;

    z-index:
        2 !important;

    right:
        13px !important;

    bottom:
        13px !important;

    padding:
        7px
        9px !important;

    background:
        rgba(38,50,41,.90) !important;

    color:
        #fff !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1px !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-placeholder {
    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
}


.egert-mietwelt-v142 .egert-mietwelt-placeholder span {
    color:
        var(--eg-green-dark) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1.5px !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-body {
    flex:
        1 !important;

    display:flex !important;

    flex-direction:column !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-topline {
    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:15px !important;

    margin-bottom:
        10px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-type {
    margin:
        0 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-persons {
    color:
        #8d948e !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-subtitle {
    margin:
        11px
        0
        0 !important;

    color:
        var(--eg-text) !important;

    font-size:
        12px !important;

    line-height:
        1.6 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-card-footer {
    display:flex !important;

    align-items:flex-end !important;

    justify-content:space-between !important;

    gap:18px !important;

    margin-top:
        auto !important;

    padding-top:
        22px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-price {
    margin:
        0 !important;
}


.egert-mietwelt-v142 .egert-mietwelt-price > span {
    display:block !important;

    margin-bottom:
        2px !important;

    color:
        #929892 !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase !important;
}


.egert-mietwelt-v142 .egert-mietwelt-price strong {
    font-size:
        20px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-price small {
    color:
        #8b918b !important;

    font-size:
        9px !important;
}


.egert-mietwelt-v142 .egert-mietwelt-button {
    width:
        auto !important;

    min-width:
        112px !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    gap:
        20px !important;
}


/* =========================================================
   FILTER ANIMATION
   ========================================================= */

@keyframes egertMietweltFilterIn {

    from {
        opacity:0;
        transform:
            translateY(10px);
    }

    to {
        opacity:1;
        transform:
            translateY(0);
    }

}


.egert-mietwelt-v142
.egert-card-filter-in {
    animation:
        egertMietweltFilterIn
        .38s
        cubic-bezier(.2,.7,.2,1)
        both !important;
}


/* =========================================================
   EMPTY CATEGORY
   ========================================================= */

.egert-mietwelt-v142 .egert-mietwelt-filter-empty {
    grid-column:
        1 / -1 !important;

    min-height:
        210px !important;

    padding:
        35px !important;

    display:flex !important;

    align-items:center !important;

    gap:25px !important;

    background:
        rgba(255,255,255,.56) !important;

    border:
        1px solid rgba(23,27,24,.10) !important;
}


.egert-mietwelt-v142
.egert-mietwelt-filter-empty[hidden] {
    display:none !important;
}


.egert-mietwelt-v142
.egert-mietwelt-filter-empty-number {
    width:
        70px !important;

    height:
        70px !important;

    flex-shrink:
        0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:
        var(--eg-green) !important;

    color:
        #fff !important;

    font-size:
        28px !important;

    font-weight:
        500 !important;
}


.egert-mietwelt-v142
.egert-mietwelt-filter-empty strong {
    display:block !important;

    color:
        var(--eg-dark) !important;

    font-size:
        19px !important;

    font-weight:
        650 !important;
}


.egert-mietwelt-v142
.egert-mietwelt-filter-empty p {
    margin:
        7px
        0
        0 !important;

    color:
        var(--eg-text) !important;

    font-size:
        12px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px) {

    .egert-mietwelt-v142 .egert-mietwelt-filter-wrap {
        margin-bottom:
            27px !important;
    }


    .egert-mietwelt-v142 .egert-mietwelt-filters {
        flex-wrap:
            nowrap !important;

        overflow-x:
            auto !important;

        padding-bottom:
            4px !important;

        scrollbar-width:
            none !important;

        -webkit-overflow-scrolling:
            touch !important;
    }


    .egert-mietwelt-v142
    .egert-mietwelt-filters::-webkit-scrollbar {
        display:
            none !important;
    }


    .egert-mietwelt-v142 .egert-mietwelt-filter {
        flex:
            0
            0
            auto !important;
    }


    .egert-mietwelt-v142 .egert-mietwelt-result-bar {
        align-items:
            center !important;
    }


    .egert-mietwelt-v142
    .egert-mietwelt-result-title {
        font-size:
            17px !important;
    }


    .egert-mietwelt-v142
    .egert-mietwelt-card-footer {
        align-items:
            center !important;
    }


    .egert-mietwelt-v142
    .egert-mietwelt-filter-empty {
        min-height:
            180px !important;

        padding:
            25px
            20px !important;

        gap:
            16px !important;
    }


    .egert-mietwelt-v142
    .egert-mietwelt-filter-empty-number {
        width:
            55px !important;

        height:
            55px !important;

        font-size:
            22px !important;
    }

}

