/* estate search */
.oo-searchform {
        margin: 32px 0 25px 0;
}

.oo-searchformfieldwrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-sftart;
    justify-content: flex-start;
}

.oo-searchformfield {
    padding: 0 15px;
    margin-bottom: 15px;
    width: 33.33%;
}

.oo-searchformfield:last-child {
    margin-top: auto;
}

.oo-searchformfield label {
    display: block;
    margin: 0;
    padding: 0;
}
.oo-form label, .oo-single-select, .oo-multi-select {
    margin-bottom: 20px;
}

.oo-form label {
    width: 100%;
    display: block;
}

.oo-single-select label, .oo-multi-select label {
    margin: 0;
}

.oo-form input:not(.tomselect-checkbox):not([type="checkbox"]):not([type="radio"]), .oo-form textarea {
    display: block;
    padding: 8px 8px;
    width: 100%;
    box-sizing: border-box;
}

.oo-form input[type="checkbox"] {
    margin-left:10px;
    height: 20px;
    width: 20px;
}
.oo-form input[type="radio"] {
    width: auto;
}

.oo-form input[type=number] {
    min-width: 200px;
}

.oo-form.validated input:invalid, .oo-form.validated .oo-single-select .is-invalid, .oo-form.validated .oo-multi-select .is-invalid, .oo-form.validated textarea:invalid, .required.invalid:has(+ div[aria-hidden='false']), .oo-form input[aria-invalid='true'], .oo-form textarea[aria-invalid='true'], .oo-form .is-invalid {
    border: 2px solid #DC2625;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23DC2625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');    
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.oo-form.validated input:invalid[type="checkbox"]{
    outline: 2px solid red;
}
.validated .oo-form input:invalid[type="checkbox"] ~ .error {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23DC2625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');    
    background-repeat: no-repeat;
    padding-left: 30px;
 }

 .oo-form.validated textarea:required:valid,
 .oo-form.validated input:required:valid, .oo-form.validated .oo-single-select .required.has-items.ts-wrapper, .oo-form.validated .oo-multi-select .required.has-items.ts-wrapper  {
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2328a745' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 15px center;
   border: 1px solid green;
   background-size: 1.25rem;
 }
 
 .oo-form.validated .oo-single-select .required.has-items.ts-wrapper, .oo-form.validated .oo-single-select .is-invalid, .oo-form.validated .oo-multi-select .required.has-items.ts-wrapper, .oo-form.validated .oo-multi-select .is-invalid, .oo-form.validated input:required:valid[type="date"], .oo-form.validated input:required:valid[type="number"], .oo-form.validated input:invalid[type="number"] {
    background-position: right 30px center;
}

.oo-form .error p {
    margin: 0;
}

.oo-form input:invalid~.oo-form.validated .error{
    display: block;
}

.oo-searchformfield input, .oo-searchformfield button, .oo-searchformfield .multiselect {
    width: 100%;
    margin: 0 !important;
    line-height: 28px;
    font-size: 16px;
    outline: 1px solid rgba(0,0,0,0);
}
.oo-searchformfield input:not([id$="ts-control"]) {
    height: 48px;
}

.oo-hidden-by-filter {
	display: none;
}

span.oo-searchrange {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2rem;
    display: grid;
}

.oo-searchformfield input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}
.oo-searchformfield input[type="radio"] {
    width: auto;
}

.oo-searchformfield .multiselect {
    position: relative;
}

.oo-searchformfield .onoffice-multiselect-popup {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    max-height: 250px;
    overflow-y: scroll;
    z-index: 999;
    background-color: #ffffff;
}

.oo-searchformfield br {
    display: none;
}

.oo-form input:focus, .oo-form textarea:focus, .oo-form select:focus, .oo-detailview a:focus, .oo-searchformfield input:focus, .ts-wrapper.focus, .ts-wrapper:focus-visible, .ts-wrapper.single.focus, .ts-wrapper.single:focus-visible, .ts-wrapper.multi.focus, .ts-wrapper.multi:focus-visible, .oo-post-nav-links a:focus, .leadform-back:focus, .leadform-forward:focus, input[type="checkbox"]:focus, input[type="radio"]:focus {
    outline: #3d7bb1 solid 2px;
    border-color: #3d7bb1;
}

.leadform-forward {
    float:right;
}

.leadform-submit {
    margin-bottom: 20px;
    float: right;
}

.leadform-back {
    float:left
}

.lead-title {
    margin: 0 0 20px;
    padding: 20px 0 0;
}

.oo-form input[type='submit'], .oo-searchformfield input[type='submit'], .leadform-back, .leadform-forward {
    text-align: center;
    color: #ffffff !important;
    padding: 5px;
    background-color: #3d7bb1;
    transition: all 0.3s;
    font-size: 16px;
    line-height: 28px;
    border: 1px solid #000;
    display: block;
}
.oo-form input[type='submit']:hover, .oo-searchformfield input[type='submit']:hover {
    cursor: pointer;
}

.oo-form .oo-input-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.oo-form input::placeholder, .oo-form input::-webkit-input-placeholder, .oo-form input:-moz-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;  
}
/* estate map */
.oo-estate-map {
    padding: 0 15px;
    width: 100%;
}

.oo-detailsmap {
    position: relative;
    height: auto;
}

.oo-detailsmap #map, .oo-estate-map #map, .oo-detailsmap #gmap, .oo-estate-map #gmap  {
    height: 350px !important;
}

.oo-estate-map #map .leaflet-top, .oo-estate-map #map .leaflet-bottom {
    z-index: 888;
}

.oo-detailsmap .oo-map, .oo-estate-map .oo-map, .oo-detailsmap .oo-gmap, .oo-estate-map .oo-gmap {
    height: 350px !important;
    z-index: 0;
}

.oo-estate-map .oo-map .leaflet-top, .oo-estate-map .oo-map .leaflet-bottom {
    z-index: 888;
}

.oo-gmap .oo-infowindowtitle, .oo-map .oo-infowindowtitle {
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    color: #4a4a4a;
    margin-bottom: 15px;
}

.oo-gmap .oo-infowindow .oo-infowindowaddress, .oo-map .oo-infowindow .oo-infowindowaddress {
    margin-bottom: 15px;
}

/* estate sort */
.oo-estate-sort {
    padding: 15px;
}

/* listframe */
.oo-listheadline {
    padding: 10px 15px;
}

.oo-listframe {
    display: flex;
    flex-wrap: wrap;
}

/* listobject */
.oo-listobject {
    width: 33.33%;
    padding: 0 15px;
    margin: 0 0 50px 0;
}

.oo-listobjectwrap {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
}

.oo-listobject:hover .oo-listobjectwrap {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.50);
}

.oo-listimage {
    display: block;
    width: 100%;
    position: relative;
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.oo-listinfo {
    padding: 10px;
}

.oo-listtitle {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    height: 55px;
    overflow: hidden;
    color: #4a4a4a;
}

.oo-listinfotable {
    padding: 10px 0;
    font-size: 15px;
    min-height: 250px;
}

.oo-listtd {
    display: inline-block;
    width: 50%;
    border-bottom: 1px solid #efefef;
    padding: 2.5px 0;
}

.oo-listtd.--highlight {
    font-weight: bold;
    color: #3d7bb1;
}

.oo-detailslink {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oo-detailslink a, .favorize, .oo-unitslink a, .oo-leadformlink {
    display: block;
    text-align: center;
    color: #ffffff !important;
    padding: 5px;
    background-color: #3d7bb1;
    transition: all 0.3s;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
}

.oo-detailslink a:hover, button.favorize:hover, .oo-unitslink a:hover, .oo-form input[type='submit']:hover, .oo-leadformlink:hover, .oo-post-nav-links a:hover {
    background: #174770;
    color: #ffffff !important;
    text-decoration: none !important;
}

button.favorize:focus, .oo-details-btn:focus, .oo-leadformlink:focus, .oo-form input[type='submit']:focus, .oo-searchformfield input[type='submit']:focus {
    background: #174770;
}

.leaflet-container a.leaflet-popup-close-button:focus, .leaflet-bar a:hover, .leaflet-bar a:focus, .gm-style div:focus,  .gm-style button:focus {
    outline: 2px solid #174770;
}

/* details */
.oo-detailsheadline {
    padding: 10px 15px;
}

.oo-detailview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.oo-details-main {
    width: 75%;
    padding: 0 15px;
}

.oo-detailsgallery {
    margin-bottom: 25px;
}

.oo-detailsgallery .slick-arrow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    z-index: 1;
}

.oo-detailsgallery .slick-prev {
    left: 25px;
}

.oo-detailsgallery .slick-next {
    right: 25px;
}

.oo-detailsgallery .slick-next:focus .slick-next-icon, .oo-detailsgallery .slick-next:focus .slick-prev-icon, .oo-detailsgallery .slick-prev:focus .slick-next-icon, .oo-detailsgallery .slick-prev:focus .slick-prev-icon, .slick-dots li button:focus .slick-dot-icon::before
{
    color: #3d7bb1;
}


.oo-detailspicture, .oo-detailspicture.slick-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
}

.oo-details-highlight {
    width: calc((100% - 3 * 8px) / 4);
}

.oo-details-highlights-headline {
	font-size: 22px;
    margin-bottom: 16px;
    font-weight:700;
}

.oo-details-highlights-table {
	display: flex;
	flex-wrap: wrap;
    gap:8px;
    border-bottom: 2px solid #efefef;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.oo-details-highlight__label {
    list-style: none;
	padding: 0;
	margin: 0;
}

.oo-details-highlight__value {
    font-weight:700;
    list-style: none;
	padding: 0;
	margin: 0;
}

.oo-detailstable {
    display: flex;
    flex-wrap: wrap;
}

.oo-details-fact__label {
    list-style: none;
    font-weight:700;
    width: 25%;
    padding: 5px 0;
	margin: 0;
    border-bottom: 2px solid #efefef;
}

.oo-details-fact__value {
    list-style: none;
    width: 25%;
    padding: 5px 0;
	margin: 0;
    border-bottom: 2px solid #efefef;
}

.oo-detailsfreetext, .oo-detailsmap, .oo-area-butler, .oo-detailspricecalculator, .oo-units {
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 2px solid #efefef;
}

.oo-details-sidebar {
    width: 25%;
    padding: 0 15px;
}

.oo-asp {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #efefef;
}

.oo-video {
    display: flex;
    flex-direction: column;
}

.oo-aspname, .oo-video, .oo-detailsexpose {
    margin-bottom: 15px;
}

.player-title svg {
    display: inline;
}

.oo-asplocation {
    margin-bottom: 10px;
}

.oo-contact-info, .oo-aspinfo-wrapper {
    margin-bottom: 15px;
}

.oo-contact-info img {
    height: 150px;

}
.oo-contact-info p {
    margin: 0;
}

.oo-similar {
    width: 100%;
}

#oo-similarframe {
    display: inherit;
    width: 100%;
}

#oo-similarframe .oo-listobject {
    width: inherit;
}


.oo-area-butler {
    position: relative;
    height: auto;
}

.oo-area-butler .oo-area-butler-iframe {
    height: 500px;
    width: 100%;
}

.oo-costs-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.oo-costs-container .oo-donut-chart {
    width: 40%;
}

.oo-costs-container .oo-costs-overview {
    width: 55%;
}

.oo-costs-container .oo-costs-overview > div {
    margin-bottom: 5px;
}

.oo-costs-container .oo-costs-overview .oo-price-label,
.oo-costs-container .oo-costs-overview .oo-costs-item {
    display: flex;
    align-items: center;
}

.oo-costs-container .oo-costs-overview .oo-price-label {
    width: 100%;
    justify-content: space-between;
}

.oo-costs-container .oo-costs-overview .oo-total-costs-label {
    margin-left: 20px;
}

.oo-costs-notice {
    font-size: 14px;
    padding-top: 1.5rem
}

.oo-costs-container .oo-costs-overview .color-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 5px;
    flex-basis: 14px;
    flex-grow: 0;
    flex-shrink: 0;
}

.oo-details-energy-certificate {
    position: relative;
    height: auto;
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 2px solid #efefef;
}

.oo-details-energy-certificate .energy-certificate-container {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
}

.oo-details-energy-certificate .segmented-bar {
    display: flex;
    white-space: nowrap;
    align-items: flex-end;
}

.oo-details-energy-certificate .segment {
    flex: 1;
    text-align: center;
    height: 5px;
    position: relative;
    border-left: 1px solid #fff;
}

.oo-details-energy-certificate .segment:first-child {
    border-left: none;
}

.oo-details-energy-certificate .segment span {
    height: 28px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.oo-details-energy-certificate .energy-certificate-label span {
    position: absolute;
    transform: translateX(-50%);
}

.oo-details-energy-certificate .segment.selected {
    height: 34px;
}

.oo-details-energy-certificate .segment.selected span {
    color: #fff;
}

/* address list */
.oo-address-listframe .oo-address-image {
    width: 100%;
    height: auto;
}

.oo-address-listframe .oo-listtd {
    word-wrap: break-word;
}

.oo-address-listframe .oo-listinfotableview {
    display: flex;
    flex-wrap: wrap;
}

/* address map */
.oo-address-map {
    padding: 0 15px;
    width: 100%;
    margin-bottom: 15px;
}

.oo-address-map .oo-gmap, .oo-address-map .oo-map {
    height: 300px !important;
}

.oo-address-map .oo-map .leaflet-top, .oo-address-map .oo-map .leaflet-bottom {
    z-index: 888;
}

.oo-donut-chart-color0 {
    fill:#3F9DE4;
    background-color:#3F9DE4;
}

.oo-donut-chart-color1 {
    fill:#3ac411;
    background-color:#3ac411;
}
.oo-donut-chart-color2 {
    fill:#9C27B0;
    background-color:#9C27B0;
}
.oo-donut-chart-color3 {
    fill:#D81B60;
    background-color:#D81B60;
}
.oo-donut-chart-color4 {
    fill:#FEC800;
    background-color:#FEC800;
}

#TB_overlay, #TB_window { 
    z-index: 1050 !important; 
}

/* responsive */
@media only screen and (max-width: 991px) {
    .oo-listobject, .oo-searchformfield {
        width: 50%;
    }

    .oo-details-main {
        width: 100%;
    }

    .oo-details-sidebar {
        width: 50%;
    }

    .oo-costs-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 2rem;
    }

    .oo-costs-container .oo-donut-chart {
        width: 100%;
    }

    .oo-costs-container .oo-costs-overview {
        width: 100%;
    }
}

@media only screen and (max-width: 700px) {
    .oo-detailslisttd {
        width: 50%;
    }
}

@media only screen and (max-width: 575px) {
    .oo-listobject, .oo-searchformfield, .oo-details-sidebar {
        width: 100%;
    }
}

.oo-units__wrapper {
    margin-bottom: 32px;
    vertical-align: top;
    caption-side: bottom;
    border-collapse: collapse;
    text-align: left;
    margin-left: 1px;
    width: 99%;
}

.oo-units__data.--empty {
    display: none;
}
 
.oo-units-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
  
.oo-units__head {
    display: none;
}

.oo-units__head .oo-units__data{
    padding-bottom: 16px;

}

.oo-units__head .oo-units__data:not(:first-child) {
    padding-left: 16px;
}

.oo-units__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.oo-units__body .oo-units__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.oo-units__body .oo-units__data:not(.oo-unitslink):before {
    content: attr(data-label);
    min-width: 50%;
    width: 50%;
    -ms-hyphens: auto;
    hyphens: auto;
}

.oo-units__data {
    display: flex;
    padding: 0;
    gap: 16px;
    border-bottom: 1px solid #efefef;
    padding-bottom: 8px;
} 
  
.oo-units__data.--empty {
    display: none;
}

.oo-unitslink a {
    width: 100%;
    margin-top: 8px;
}

.oo-units__data.oo-unitslink {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (min-width: 768px) {
    .oo-units__body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {

    .oo-details-fact__label, .oo-details-fact__value {
        width: 50%;
    }
}
@media (min-width: 1200px) {

    .oo-units__wrapper {
        margin-left: 0;
    }

    .oo-unitslink a {
        background: transparent;
        text-decoration: underline;
        color: inherit !important;
        text-align: left;
        margin: 0;
    }

    .oo-unitslink a:hover {
        opacity: 1;
        color: inherit !important;
    }

    .oo-units__body .oo-units__data:not(.oo-unitslink):before {
        content: none;
    }

    .oo-units__data.--empty {
        display: table-cell;
    }

    .oo-units__head {
        display: table-header-group;
    }

    .oo-units__head .oo-units__data{
        min-width: 7.5rem;
        text-transform: none;
    }

    .oo-units__body {
        display: table-row-group;
      }

    .oo-units__body .oo-units__row{
        display: table-row;
        box-shadow: none;
        border: none;
    }

    .oo-units__data {
        text-align: left;
        display: table-cell;
        padding: 16px 16px 16px 0;
    }

    .oo-units__body  .oo-units__data {
        border-bottom: 2px solid #efefef;}

    .oo-units__body .oo-units__data:not(:first-child), .oo-units__data--empty {
            padding-left: 16px;
    }

     .oo-units__head .oo-units__data:not(:first-child) {
        padding-left: 16px;
    }

    .oo-units__data.--empty {
      display: table-cell;
    }  
    
    .oo-units__body .oo-units__data:before {
        width: 40%;
        content: none;
    }

    .oo-units__data.oo-unitslink {
        padding-bottom: 16px;
    }
}

.ts-control {
    display: flex; 
    flex-direction: row;
    background: transparent;
    height: 48px;
    line-height: 28px;
}

.ts-dropdown, .ts-control, .ts-control input {
    font-size: inherit;
    color: inherit;
    border-color: #767676;
}

.oo-post-nav-links {
    text-align: center; 
}
  
.oo-post-nav-links ul {
    display: flex;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    list-style: none;
}

  .oo-post-nav-links a {
    display: inline-block;
    padding: 5px 10px; 
    margin: 0 5px;
    border: 1px solid #ccc;
    text-decoration: none;
  }
  
  .oo-post-nav-links .current {
    font-weight: bold; 
    color: #000;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    text-decoration: none;
  }
  
  .oo-post-nav-links {
    margin-top: 20px;
  }


.ts-wrapper.has-items .ts-control input, .ts-wrapper.single.has-items .ts-control input, .ts-wrapper.multi.has-items .ts-control input {
    width: auto;
}


.ts-dropdown .option.selected {
    font-weight: bold;
}
.ts-dropdown .option {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
}

.ts-wrapper .ts-control::after, .ts-wrapper.single .ts-control::after, .ts-wrapper.multi .ts-control::after {
    content: "";
    position: absolute;
    right: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 14px;
    height: 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 1.25rem;
    mask-position: center;
    background: #3D3D3D;
}
.ts-wrapper.focus .ts-control::after, .ts-wrapper.single.focus .ts-control::after, .ts-wrapper.multi.focus .ts-control::after {
    top: 0%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.ts-wrapper .ts-item-remove:before, .ts-wrapper.single .ts-item-remove:before, .ts-wrapper.multi .ts-item-remove:before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 1.25rem;
    mask-position: center;

}

.ts-wrapper.plugin-remove_button .item .remove {
    text-decoration: none;
    vertical-align: middle;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ts-wrapper.multi.has-items .ts-control {
    overflow: hidden;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px; 
    height: 48px;
}

.plugin-checkbox_options:not(.rtl) .option input {
    min-width: 24px;
    min-height: 24px;
}


/* ==========================================================================
IMMOTEAM – Detailansicht
--------------------------------------------------------------------------
Ans ENDE dieser Datei anhaengen, nichts loeschen:
/wp-content/plugins/onoffice-personalized/templates/onoffice-style.css

Gehoert zum Template immoteam_detail.php

AENDERUNG 01.09.2026 – SPEZIFITAET
-----------------------------------
Alle Regeln unten wurden von ".io-detail ..." auf
"#io-detail-page.io-detail ..." umgestellt. Grund: Der Wurzel-Container
im Template hat jetzt zusaetzlich id="io-detail-page". Eine ID-Selektor
hat deutlich mehr Gewicht als die einzelnen Klassen-Selektoren aus
Elementor, dem Theme (hello-elementor) oder anderen Plugins, die auf
dieser Seite ebenfalls CSS laden. Damit gewinnen diese Regeln zuverlaessig,
auch wenn eine andere Datei spaeter geladen wird oder zufaellig denselben
Klassennamen einer anderen Komponente trifft.
Zusaetzlich stehen bei den Eigenschaften, die beim letzten Test kaputt
aussahen (Kennzahlen-Raster, Objektdaten-Tabelle, Kontaktkarte, Buttons,
Sticky-Leiste), "!important" dabei – als zweite Absicherung, falls doch
irgendwo eine Regel mit noch hoeherer Spezifitaet oder eigenem
"!important" existiert.
Wenn du spaeter selbst Klassen ergaenzt: bitte am selben Muster
"#io-detail-page.io-detail ..." weiterbauen, sonst geht der Vorteil fuer
die neue Regel wieder verloren.
========================================================================== */


/* --------------------------------------------------------------------------
1. Grundwerte
Die Akzentfarbe steuert Preis-Kachel, Buttons und Links.
Wenn das Orange nicht exakt passt: nur diesen einen Wert aendern.
-------------------------------------------------------------------------- */
#io-detail-page.io-detail {
--io-accent:      #E04E17;
--io-accent-dark: #C43F0D;
--io-ink:         #1B2028;
--io-muted:       #6B7280;
--io-line:        #E4E6EA;
--io-surface:     #F7F7F5;
--io-radius:      12px;
--io-gap:         48px;
}

/* Schuetzt das Grid- und Flex-Layout unten davor, dass Theme oder
Elementor an dieser Stelle box-sizing:content-box erzwingen. */
#io-detail-page.io-detail,
#io-detail-page.io-detail *,
#io-detail-page.io-detail *::before,
#io-detail-page.io-detail *::after {
box-sizing: border-box;
}


/* --------------------------------------------------------------------------
2. Seitenraster
Links der Inhalt, rechts die Kontaktspalte.
Alles Uebrige laeuft ueber die volle Breite.
-------------------------------------------------------------------------- */
#io-detail-page.io-detail {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 330px !important;
column-gap: var(--io-gap);
align-items: stretch;
color: var(--io-ink);
}

#io-detail-page.io-detail > .io-back,
#io-detail-page.io-detail > .io-hero,
#io-detail-page.io-detail > .io-gallery,
#io-detail-page.io-detail > .io-keyfacts,
#io-detail-page.io-detail > .io-contactform,
#io-detail-page.io-detail > .io-similar,
#io-detail-page.io-detail > .io-stickybar {
grid-column: 1 / -1;
}

#io-detail-page.io-detail > .io-main    { grid-column: 1; min-width: 0; width: 100% !important; }
#io-detail-page.io-detail > .io-sidebar { grid-column: 2; width: 100% !important; }


/* --------------------------------------------------------------------------
3. Zurueck-Link und Kopfbereich
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-back {
display: inline-block;
font-size: .9rem;
color: var(--io-muted);
text-decoration: none;
margin-bottom: 1.2rem;
}
#io-detail-page.io-detail .io-back:hover {
color: var(--io-accent);
}

#io-detail-page.io-detail .io-hero {
margin-bottom: 1.5rem;
}

#io-detail-page.io-detail .io-hero__meta {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
font-size: .9rem;
color: var(--io-muted);
margin: 0 0 .6rem;
}

#io-detail-page.io-detail .io-badge {
background: var(--io-accent) !important;
color: #FFF !important;
font-size: .74rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: .3rem .65rem;
border-radius: 100px;
display: inline-block;
}

#io-detail-page.io-detail .io-hero h1 {
font-size: clamp(1.7rem, 3vw, 2.5rem);
line-height: 1.18;
margin: 0;
}


/* --------------------------------------------------------------------------
4. Galerie
Die Klassen oo-detailsgallery und oo-detailspicture bleiben unveraendert,
damit der Slider des Plugins weiter funktioniert.
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-gallery {
margin-bottom: 2rem;
border-radius: var(--io-radius);
overflow: hidden;
display: block !important;
}

#io-detail-page.io-detail .io-gallery .oo-responsive-image {
width: 100% !important;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block !important;
}


/* --------------------------------------------------------------------------
5. Kennzahlen direkt unter der Galerie
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-keyfacts {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 14px;
margin-bottom: 3rem;
}

#io-detail-page.io-detail .io-keyfact {
background: var(--io-surface);
border: 1px solid var(--io-line);
border-radius: var(--io-radius);
padding: 1.1rem 1.25rem;
display: flex !important;
flex-direction: column !important;
gap: .3rem;
}

#io-detail-page.io-detail .io-keyfact__label {
font-size: .78rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--io-muted);
}

#io-detail-page.io-detail .io-keyfact__value {
font-size: 1.55rem;
font-weight: 700;
line-height: 1.15;
}

#io-detail-page.io-detail .io-keyfact__note {
font-size: .82rem;
color: var(--io-muted);
}

/* Preis-Kachel farbig hervorgehoben */
#io-detail-page.io-detail .io-keyfact--price {
background: var(--io-accent) !important;
border-color: var(--io-accent) !important;
color: #FFF !important;
}
#io-detail-page.io-detail .io-keyfact--price .io-keyfact__label,
#io-detail-page.io-detail .io-keyfact--price .io-keyfact__note {
color: rgba(255, 255, 255, .85) !important;
}


/* --------------------------------------------------------------------------
6. Abschnitte und Fliesstext
Zeilen ueber etwa 70 Zeichen werden muehsam zu lesen.
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-section {
margin-bottom: 3rem;
scroll-margin-top: 120px;
}

#io-detail-page.io-detail .io-section > h2 {
font-size: 1.35rem;
margin: 0 0 1rem;
padding-bottom: .55rem;
border-bottom: 2px solid var(--io-line);
}

#io-detail-page.io-detail .oo-detailsfreetext {
/* Fix: 70ch (~604px) blieb auch dann aktiv, wenn die Spalte deutlich breiter ist
   (Tablet/kleiner Laptop im einspaltigen Layout, oder sehr breiter Desktop) --
   dadurch blieb rechts unnoetig viel Leerraum stehen und "Lage" / "Rechtliche
   Hinweise" wirkten nach links verschoben. Begrenzung greift jetzt nur noch auf
   sehr breiten Bildschirmen. */
max-width: min(100%, 92ch);
line-height: 1.7;
}

#io-detail-page.io-detail .oo-detailsfreetext p {
margin-bottom: 1rem;
}

#io-detail-page.io-detail .io-lead {
font-size: 1.15rem;
line-height: 1.6;
color: var(--io-muted);
max-width: 70ch;
margin-bottom: 2rem;
}

/* Rechtliche Hinweise kleiner setzen – wichtig, aber nicht dominant */
#io-detail-page.io-detail .io-section--fineprint {
font-size: .88rem;
color: var(--io-muted);
line-height: 1.6;
}

#io-detail-page.io-detail .io-notice {
background: #FFF6E5;
border-left: 3px solid #E0A317;
padding: .7rem 1rem;
font-size: .9rem;
margin: 1rem 0;
}


/* --------------------------------------------------------------------------
7. Objektdaten als zweispaltige Liste
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-facts {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 3rem;
margin: 0;
}

#io-detail-page.io-detail .io-fact {
display: flex !important;
justify-content: space-between;
gap: 1.5rem;
padding: .7rem 0;
border-bottom: 1px solid var(--io-line);
}

#io-detail-page.io-detail .io-fact dt {
font-weight: 600;
margin: 0;
}

#io-detail-page.io-detail .io-fact dd {
margin: 0;
text-align: right;
color: var(--io-muted);
}

/* Fix: alte onOffice-Regeln (.oo-details-fact__label/__value) erzwingen width:25%/50%
   auf dt/dd und zerstoeren dadurch unser flexibles Label/Wert-Layout (Text wird unnoetig
   umgebrochen, rechte Seite bleibt leer). Wir setzen die Breite zurueck auf automatisch. */
#io-detail-page.io-detail .io-fact dt,
#io-detail-page.io-detail .io-fact dd {
width: auto !important;
}

/* Fix: Galerie-Pfeile erben sonst die generische rosa Hover-Farbe aus reset.css
   (button:hover). Hover/Fokus bekommen stattdessen die Akzentfarbe der Seite. */
#io-detail-page.io-detail .io-gallery .slick-next:hover,
#io-detail-page.io-detail .io-gallery .slick-next:focus,
#io-detail-page.io-detail .io-gallery .slick-prev:hover,
#io-detail-page.io-detail .io-gallery .slick-prev:focus {
background-color: var(--io-accent) !important;
border-color: var(--io-accent) !important;
color: #fff !important;
}


/* --------------------------------------------------------------------------
8. Kontaktspalte
Bleibt beim Scrollen stehen. Der Wert 120px entspricht der Header-Hoehe;
falls der Kasten zu hoch oder zu tief sitzt, hier anpassen.
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-card {
position: sticky !important;
top: 120px;
background: var(--io-surface) !important;
border: 1px solid var(--io-line);
border-radius: var(--io-radius);
padding: 1.5rem;
}

#io-detail-page.io-detail .io-card h2 {
font-size: 1.1rem;
margin: 0 0 1.1rem;
}

#io-detail-page.io-detail .io-contact__photo img {
width: 96px;
height: 96px;
object-fit: cover;
object-position: top center;
border-radius: 50%;
margin-bottom: .9rem;
}

#io-detail-page.io-detail .io-contact__name {
font-weight: 700;
font-size: 1.05rem;
margin: 0 0 .15rem;
}

#io-detail-page.io-detail .io-contact__company,
#io-detail-page.io-detail .io-contact__address {
font-size: .9rem;
color: var(--io-muted);
margin: 0 0 .5rem;
line-height: 1.5;
}

#io-detail-page.io-detail .io-contact__list {
margin: 1rem 0 0;
font-size: .92rem;
}

#io-detail-page.io-detail .io-contact__list dt {
font-size: .74rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--io-muted);
margin-top: .8rem;
}

#io-detail-page.io-detail .io-contact__list dd {
margin: .1rem 0 0;
/* verhindert, dass lange E-Mail-Adressen aus dem Kasten laufen */
overflow-wrap: anywhere;
}

#io-detail-page.io-detail .io-contact__list a {
color: var(--io-ink);
text-decoration: none;
border-bottom: 1px solid var(--io-line);
}
#io-detail-page.io-detail .io-contact__list a:hover {
color: var(--io-accent);
border-color: var(--io-accent);
}


/* --------------------------------------------------------------------------
9. Buttons
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-cta {
display: flex;
flex-direction: column;
gap: .6rem;
margin-top: 1.5rem;
}

#io-detail-page.io-detail .io-btn {
display: block !important;
text-align: center;
font-weight: 600;
text-decoration: none !important;
padding: .85rem 1.2rem;
border-radius: var(--io-radius);
transition: background-color .15s ease, color .15s ease;
}

#io-detail-page.io-detail .io-btn--primary {
background: var(--io-accent) !important;
color: #FFF !important;
}
#io-detail-page.io-detail .io-btn--primary:hover {
background: var(--io-accent-dark) !important;
color: #FFF !important;
}

#io-detail-page.io-detail .io-btn--ghost {
background: transparent !important;
color: var(--io-accent) !important;
border: 1px solid var(--io-accent);
}
#io-detail-page.io-detail .io-btn--ghost:hover {
background: var(--io-accent) !important;
color: #FFF !important;
}


/* --------------------------------------------------------------------------
10. Kontaktformular am Seitenende
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-contactform {
margin-top: 1rem;
padding: 2.5rem;
background: var(--io-surface);
border: 1px solid var(--io-line);
border-radius: var(--io-radius);
scroll-margin-top: 120px;
}

#io-detail-page.io-detail .io-contactform h2 {
margin: 0 0 .4rem;
font-size: 1.5rem;
}

#io-detail-page.io-detail .io-contactform > p {
color: var(--io-muted);
margin-bottom: 1.5rem;
}


/* --------------------------------------------------------------------------
11. Kostenuebersicht
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .oo-costs-container {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
align-items: center;
}

#io-detail-page.io-detail .oo-costs-overview {
flex: 1 1 260px;
}

#io-detail-page.io-detail .oo-costs-item,
#io-detail-page.io-detail .oo-costs-total {
display: flex;
align-items: center;
gap: .7rem;
padding: .5rem 0;
}

#io-detail-page.io-detail .oo-costs-total {
border-top: 2px solid var(--io-line);
margin-top: .5rem;
padding-top: .8rem;
}

#io-detail-page.io-detail .oo-price-label {
display: flex;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
}

#io-detail-page.io-detail .oo-costs-notice {
font-size: .82rem;
color: var(--io-muted);
margin-top: 1rem;
}


/* --------------------------------------------------------------------------
12. Feste Leiste am unteren Rand – nur auf dem Smartphone
-------------------------------------------------------------------------- */
#io-detail-page.io-detail .io-stickybar {
display: none;
}

@media (max-width: 900px) {
#io-detail-page.io-detail .io-stickybar {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
position: fixed !important;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
background: #FFF !important;
border-top: 1px solid var(--io-line);
box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
padding: .7rem 1rem;
padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
}

#io-detail-page.io-detail .io-stickybar__price {
font-size: 1.1rem;
font-weight: 700;
}

#io-detail-page.io-detail .io-stickybar .io-btn {
padding: .7rem 1.4rem;
white-space: nowrap;
}
}


/* --------------------------------------------------------------------------
13. Tablet und Smartphone
-------------------------------------------------------------------------- */
@media (max-width: 1100px) {
#io-detail-page.io-detail {
grid-template-columns: 1fr !important;
}
#io-detail-page.io-detail > .io-main,
#io-detail-page.io-detail > .io-sidebar {
grid-column: 1 / -1;
}
#io-detail-page.io-detail .io-card {
position: static !important;
}
#io-detail-page.io-detail > .io-sidebar {
margin-bottom: 2rem;
}
}

@media (max-width: 700px) {
#io-detail-page.io-detail .io-facts {
grid-template-columns: 1fr !important;
gap: 0;
}
#io-detail-page.io-detail .io-keyfacts {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
#io-detail-page.io-detail .io-keyfact__value {
font-size: 1.25rem;
}
#io-detail-page.io-detail .io-contactform {
padding: 1.5rem;
}
/* Platz fuer die feste Leiste am unteren Rand */
#io-detail-page.io-detail {
padding-bottom: 80px;
}
}

/* --------------------------------------------------------------------------
12. Erweiterungen: Bildzuschnitt, Back-Button, Schnellzugriff zum
    Ansprechpartner, Tabs (Ausstattung/Objektdaten/Lage) und einklappbare
    Rechtliche Hinweise.
-------------------------------------------------------------------------- */

/* Bugfix Galerie: Die alte, ungescopte Regel ".oo-detailspicture { height:400px }"
   erzwang eine feste Kachelhoehe, waehrend die Bilder selbst per aspect-ratio
   16/10 hoeher gerendert werden. Dadurch wurden sie durch "overflow:hidden"
   zusaetzlich abgeschnitten (wirkte "zu langgezogen"/falsch zugeschnitten).
   Hier wird die Hoehe wieder freigegeben, sodass sie sich aus dem
   Seitenverhaeltnis der Bilder selbst ergibt - unabhaengig vom Format des
   jeweiligen Fotos oder Listings. */
#io-detail-page.io-detail .io-gallery .oo-detailspicture {
	height: auto !important;
}

/* "Alle Immobilien"-Link als eigenstaendiger, moderner Button statt reinem Text */
#io-detail-page.io-detail .io-back {
	display: inline-flex !important;
	width: fit-content;
	justify-self: start;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--io-ink) !important;
	background: var(--io-surface);
	border: 1px solid var(--io-line);
	border-radius: 999px;
	padding: 0.5rem 1rem 0.5rem 0.8rem;
	text-decoration: none !important;
	transition: background-color .15s, border-color .15s, color .15s;
}

#io-detail-page.io-detail .io-back:hover {
	background: var(--io-accent);
	border-color: var(--io-accent);
	color: #fff !important;
}

/* Meta-Zeile (Objektart/Ort) als eigenstaendiges "Eyebrow"-Label gestalten,
   damit sie nicht wie technische Restinformation wirkt */
#io-detail-page.io-detail .io-hero__meta {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-size: 0.78rem;
	margin-bottom: 0.9rem;
}

/* Schnellzugriff-Button "Ihr Ansprechpartner" direkt unter den Eckdaten,
   damit die Kontaktkarte nicht erst am Seitenende erreichbar ist */
#io-detail-page.io-detail .io-quicklinks {
	grid-column: 1 / -1;
	margin: 0 0 1.8rem;
}

#io-detail-page.io-detail .io-quicklinks__link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--io-accent) !important;
	background: transparent !important;
	border: 1px solid var(--io-accent);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}

#io-detail-page.io-detail .io-quicklinks__link:hover {
	background: var(--io-accent) !important;
	color: #fff !important;
}

/* Ansprechpartner-Karte: beim Anspringen per Anker nicht direkt am oberen
   Bildschirmrand kleben (gleicher Versatz wie beim Kontaktformular) */
#io-detail-page.io-detail .io-card {
	scroll-margin-top: 120px;
}

/* Tabs: Ausstattung / Objektdaten / Lage (Aufbau per JS im Template,
   siehe Skript am Seitenende). Ohne JavaScript bleiben alle Abschnitte
   normal sichtbar (kein Layoutbruch als Fallback). */
#io-detail-page.io-detail .io-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--io-line);
}

#io-detail-page.io-detail .io-tabs-nav__btn {
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--io-muted);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.75rem 0.1rem;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

#io-detail-page.io-detail .io-tabs-nav__btn:hover {
	color: var(--io-ink);
}

#io-detail-page.io-detail .io-tabs-nav__btn[aria-selected="true"] {
	color: var(--io-accent);
	border-bottom-color: var(--io-accent);
}

#io-detail-page.io-detail .io-tab-panel {
	display: none;
}

#io-detail-page.io-detail .io-tab-panel.io-tab-panel--active {
	display: block;
}

/* Rechtliche Hinweise: per JS im Template standardmaessig eingeklappt und
   erst auf Klick sichtbar (siehe Skript am Seitenende) */
#io-detail-page.io-detail .io-fineprint-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--io-muted);
	background: var(--io-surface);
	border: 1px solid var(--io-line);
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	margin: 1rem 0;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

#io-detail-page.io-detail .io-fineprint-toggle:hover {
	border-color: var(--io-accent);
	color: var(--io-accent);
}

#io-detail-page.io-detail .io-section--fineprint.io-fineprint--collapsed {
	display: none;
}

/* ==== Startseite-Kacheln: gleiche Hoehe, Button auf gleicher Zeile, einheitliche Bildgroesse, einzeiliger Titel ==== */
.oo-listobject {
    display: flex;
}
.oo-listobjectwrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.oo-listinfo {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.oo-listinfotable.oo-listinfotableview {
    flex: 1 0 auto;
}
.oo-detailslink {
    margin-top: auto;
}
.oo-listimage .oo-responsive-image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}
.oo-listtitle {
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Objekt-ansehen-Button: Akzentfarbe Orange + abgerundete Ecken (nur bei Listenkarten) */
.oo-listobject .oo-details-btn {
    background-color: #f84914;
    border-radius: 6px;
}
.oo-listobject .oo-details-btn:hover,
.oo-listobject .oo-details-btn:focus {
    background-color: #d63e10;
}

/* Filter/Suchformular auf "Immobilienangebote": als saubere, übersichtliche Karte im Corporate Design */
.oo-searchform {
    background: #ffffff;
        padding: 25px 20px 10px;
            border-radius: 8px;
                box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.18);
                }
                
                .oo-searchform .oo-searchformfield input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
                .oo-searchform .oo-searchformfield select,
                .oo-searchform .oo-searchformfield fieldset {
                    border: 1px solid #cccccc;
                        border-radius: 6px;
                        }
                        
                        .oo-searchform .oo-searchformfield input[type="submit"] {
                            background-color: #f84914;
                                border: none;
                                    border-radius: 6px;
                                        cursor: pointer;
                                            font-weight: 700;
                                                padding: 10px 20px;
                                                }
                                                
                                                .oo-searchform .oo-searchformfield input[type="submit"]:hover,
                                                .oo-searchform .oo-searchformfield input[type="submit"]:focus {
                                                    background-color: #d63e10;
                                                    }
                                                    
                                                    /* Status-Schild (Reserviert/Verkauft): Wuestenrot-Orange im Corporate Design, passende Schriftart */
a.estate-status span, div.estate-status span {
                                                    background-color: #f84914;
                                                    border-color: #d63e10;
                                                    color: #ffffff;
                                                    font-family: Helvetica, sans-serif;
                                                    letter-spacing: 0.5px;
                                                    box-shadow: 0 1px 10px -2px rgba(0, 0, 0, 0.5);
                                                    }

/* Suchfilter als Kacheln (wie Detailseite): graue Flaeche, Label in Grossbuchstaben */
.oo-searchform .oo-searchformfieldwrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
}

.oo-searchform .oo-searchformfield {
    width: auto;
    margin: 0;
    padding: 14px 16px 16px;
    background: #F7F7F5;
    border: 1px solid #E4E6EA;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

.oo-searchform .oo-searchformfield > label,
.oo-searchform .oo-searchformfield fieldset > legend {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0 0 2px;
    padding: 0;
}

.oo-searchform .oo-searchformfield select,
.oo-searchform .oo-searchformfield input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    background: #ffffff;
    border: 1px solid #dcdfe3;
    border-radius: 6px;
}
.oo-searchform .oo-searchformfield > label input[type="text"] {
    display: block;
    margin-top: 8px !important;
}

.oo-searchform .oo-searchformfield fieldset {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oo-searchform .oo-searchformfield fieldset label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: #6B7280;
    margin: 0 0 4px;
}

/* Such-Button steht als eigene Kachel frei, ohne graue Flaeche */
.oo-searchform .oo-searchformfield:last-child {
    background: transparent;
    border: none;
    padding: 4px 0 0;
    grid-column: 1 / -1;
    align-items: flex-start;
}

.oo-searchform .oo-searchformfield input[type="submit"] {
    padding: 13px 32px;
    font-size: 0.95rem;
}

@media (min-width: 576px) {
.oo-searchform .oo-searchformfield:last-child input[type="submit"] {
width: auto !important;
flex: 0 0 auto;
box-sizing: border-box;
}
}

@media (max-width: 991px) {
    .oo-searchform .oo-searchformfieldwrap {
        grid-template-columns: repeat(2, 1fr);
    }
        .oo-searchform-reset-link {
            width: auto;
                }
}

@media (max-width: 575px) {
    .oo-searchform .oo-searchformfieldwrap {
        grid-template-columns: 1fr;
    }
    .oo-searchform .oo-searchformfield:last-child {
        width: 100%;
    }
    .oo-searchform .oo-searchformfield input[type="submit"] {
        width: 100%;
    }
        .oo-searchform-reset-link {
            width: 100%;
                }
}

/* Wohnflaeche/Zimmer/Kaufpreis: Kachel oeffnet sich erst beim Anklicken (Akkordeon) */
.oo-searchform .oo-searchformfield fieldset.oo-searchrange legend {
    cursor: pointer;
    position: relative;
    padding-right: 18px;
    user-select: none;
}

.oo-searchform .oo-searchformfield fieldset.oo-searchrange legend::after {
    content: "+";
    position: absolute;
    right: 0;
        top: 50%;
            transform: translateY(-50%);
    font-size: 0.95rem;
    font-weight: 700;
    color: #9aa1ab;
    transition: transform 0.15s ease;
        line-height: 1;
}

.oo-searchform .oo-searchformfield.oo-tile-open fieldset.oo-searchrange legend::after {
    content: "\2212";
}

.oo-searchform .oo-searchformfield fieldset.oo-searchrange label {
    display: none;
}

.oo-searchform .oo-searchformfield.oo-tile-open fieldset.oo-searchrange label {
    display: block;
}

/* Filter zuruecksetzen: kleiner, zurueckhaltender Button neben dem Suchen-Button */
.oo-searchform .oo-searchformfield:last-child {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
        position: relative;
}

.oo-searchform .oo-searchformfield:last-child svg#spinner {
position: absolute;
pointer-events: none;
}

.oo-searchform-reset-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
        width: auto;
            text-align: center;
        padding: 13px 10px;
            box-sizing: border-box;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6B7280;
    background: transparent;
    border: 1px solid #E4E6EA;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.oo-searchform-reset-link:hover,
.oo-searchform-reset-link:focus {
    background: #F7F7F5;
    color: #1B2028;
}

@media (max-width: 575px) {
    .oo-searchform .oo-searchformfield:last-child {
        flex-direction: column;
        align-items: stretch;
    }
    .oo-searchform-reset-link {
        text-align: center;
    }
}