/* estate search, moderne Filterleiste */
.oo-searchform.oo-searchform--modern{
    background:#f4f4f4;
    border-radius:18px;
    padding:18px;
    margin: 0 0 28px 0;
}

/* Grid ohne Löcher */
.oo-searchformfieldwrap.oo-searchformfieldwrap--grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:16px;
    align-items:start;
    grid-auto-flow: row dense;
}

/* Feldcontainer */
.oo-searchformfield{
    padding:0;
    margin:0;
}

/* Alle Controls gleich hoch */
.oo-searchformfield input[type="text"],
.oo-searchformfield input[type="email"],
.oo-searchformfield input[type="tel"],
.oo-searchformfield input[type="number"],
.oo-searchformfield input[type="date"],
.oo-searchformfield select,
.oo-searchformfield textarea,
.oo-searchformfield .multiselect,
.oo-searchformfield .ts-control{
    width:100%;
    box-sizing:border-box;
    height:56px;
    padding:14px 16px;
    font-size:16px;
    line-height:1.2;
    border-radius:10px;
    border:1px solid #cfcfcf;
    background:#fff;
    margin:0 !important;
}

/* Label Abstände */
.oo-searchformfield label{
    display:block;
    margin:0 0 8px 0;
    font-size:14px;
    line-height:1.2;
}

/* Von Bis sauber als 2 Spalten, ohne Versatz */
.oo-searchformfield span.oo-searchrange{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}

.oo-searchformfield span.oo-searchrange label{
    margin:0 0 6px 0;
    font-size:13px;
}

/* Checkbox Text neben Checkbox, zentriert */
.oo-searchformfield .oo-input-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.oo-searchformfield input[type="checkbox"]{
    width:22px;
    height:22px;
    margin:0;
    flex:0 0 22px;
}

/* onOffice Multiselect Popup als Dropdown, schön */
.oo-searchformfield .multiselect{
    position:relative;
}

.oo-searchformfield .onoffice-multiselect-popup{
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    width:100%;
    max-height:260px;
    overflow:auto;
    z-index:9999;
    
    background:#fff;
    border:1px solid #d7d7d7;
    border-radius:12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    padding:10px;
    
    display:none;
}

.oo-searchformfield .onoffice-multiselect-popup[aria-hidden="false"]{
    display:block;
}

.oo-searchformfield .onoffice-multiselect-popup label{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    margin:0;
}

.oo-searchformfield .onoffice-multiselect-popup label:hover{
    background:#f4f4f4;
}

.oo-searchformfield .onoffice-multiselect-popup input[type="checkbox"]{
    margin:0;
}

/* Tom Select Dropdowns */
.oo-searchformfield .ts-wrapper{
    width:100%;
}

.oo-searchformfield .ts-control{
    padding:14px 44px 14px 16px;
    box-shadow:none;
}

.oo-searchformfield .ts-dropdown{
    border-radius:12px;
    border:1px solid #d7d7d7;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    overflow:hidden;
}

.oo-searchformfield .ts-dropdown .option{
    padding:10px 12px;
}

.oo-searchformfield .ts-dropdown .option:hover{
    background:#f4f4f4;
}

/* Submit, unten rechts, ohne Versatz */
.oo-searchformfield--submit{
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
}

.oo-searchformfield--submit input[type="submit"]{
    width:auto;
    min-width:240px;
    height:56px;
    padding:0 22px;
    border-radius:10px;
}

/* br aus dem Template ausblenden */
.oo-searchformfield br{
    display:none;
}

/* Responsive */
@media (max-width: 1100px){
    .oo-searchformfieldwrap.oo-searchformfieldwrap--grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px){
    .oo-searchformfieldwrap.oo-searchformfieldwrap--grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .oo-searchform.oo-searchform--modern{
        padding:16px;
        border-radius:16px;
    }
    .oo-searchformfieldwrap.oo-searchformfieldwrap--grid{
        grid-template-columns: 1fr;
    }
    .oo-searchformfield--submit input[type="submit"]{
        width:100%;
        min-width:0;
    }
}
.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;
}

/* 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;
}

/* details base */
.oo-detailview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

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

/* Abstände und Reihenfolge */
.oo-detailsgallery {
    margin-bottom: 34px;
}

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

.oo-detailsheadline {
    padding: 0;
    margin: 0 0 34px 0;
}

.oo-detailsheadline h1 {
    margin: 0 0 10px 0;
}

.oo-details-status {
    color: #666;
    font-size: 14px;
}

/* Textblöcke mit mehr Luft */
.oo-detailsfreetext {
    padding: 0;
    margin: 0 0 44px 0;
}

.oo-detailsfreetext h2 {
    margin: 0 0 14px 0;
}

/* Vollbreiter grauer Hintergrund, Inhalt bleibt im Container */
.oo-details-box {
    position: relative;
    margin: 0 0 44px 0;
}

/* Vollbreiter Hintergrund, ohne Layout zu zerstören */
.oo-details-box{
    position: relative;
    margin: 0 0 44px 0;
    background: #f4f4f4;
    
    /* macht den Hintergrund optisch full width, Inhalt bleibt im Layout */
    box-shadow: 0 0 0 100vmax #f4f4f4;
    clip-path: inset(0 -100vmax);
}

.oo-details-box-inner{
    position: relative;
    padding: 34px 28px;
    border-radius: 18px;
}

.oo-details-section + .oo-details-section {
    margin-top: 34px;
}

/* Detail dl Layout bleibt wie bisher zweizeilig */
.oo-detailstable {
    display: flex;
    flex-wrap: wrap;
}

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

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

/* Energieausweis, Darstellung wie im Original */
.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;
    overflow: hidden;
    box-sizing: border-box;
}

.oo-details-energy-certificate .segmented-bar {
    display: flex;
    white-space: nowrap;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
}

.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;
}
/* Energieausweis Abschlusslinie entfernen */

.oo-details-section--energy .oo-detailstable{
    border-bottom:none;
}
.oo-details-section--energy,
.oo-details-energy-certificate{
    border-bottom: none !important;
}

/* Formular Wrapper unter Sonstiges, Styling bleibt wie festgelegt */
.detail-contact-form{
    margin-top: 44px;
    padding: 40px 0;
    background: #f4f4f4;
    
    /* Vollbreite Hintergrund wie beim Detailblock */
    box-shadow: 0 0 0 100vmax #f4f4f4;
    clip-path: inset(0 -100vmax);
}

/* Formular selbst bleibt im Contentbereich */
.detail-contact-form .oo-form{
    max-width: 720px;
}
/* onOffice Default Formular Styling */
.oo-form.oo-form-default .oo-form-fields{
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 720px;
}

.oo-form.oo-form-default .oo-form-row{
    width: 100%;
}

.oo-form.oo-form-default label{
    display: block;
    margin: 0;
}

.oo-form.oo-form-default .oo-label-text{
    display: block;
    margin: 0 0 8px 0;
    font-size: 16px;
    line-height: 1.3;
}

.oo-form.oo-form-default input[type="text"],
.oo-form.oo-form-default input[type="email"],
.oo-form.oo-form-default input[type="tel"],
.oo-form.oo-form-default input[type="number"],
.oo-form.oo-form-default input[type="date"],
.oo-form.oo-form-default select,
.oo-form.oo-form-default textarea,
.oo-form.oo-form-default .ts-control{
    width: 100%;
    box-sizing: border-box;
    height: 56px;
    padding: 14px 16px;
    font-size: 18px;
    line-height: 1.2;
    border-radius: 10px;
    border: 1px solid #cfcfcf;
    background: #fff;
}

.oo-form.oo-form-default textarea{
    height: auto;
    min-height: 140px;
    resize: vertical;
}

.oo-form.oo-form-default .oo-form-row--checkbox .oo-checkbox{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.oo-form.oo-form-default .oo-form-row--checkbox input[type="checkbox"]{
    width: 22px;
    height: 22px;
    margin: 2px 0 0 0;
}

.oo-form.oo-form-default .oo-checkbox-text{
    font-size: 16px;
    line-height: 1.35;
}

.oo-form.oo-form-default input[type="submit"],
.oo-form.oo-form-default button[type="submit"]{
    width: auto;
    min-width: 220px;
    height: 50px;
    font-size: 17px;
    border-radius: 8px;
    padding: 0 24px;
    display: inline-block;
}

/* Sidebar Blöcke */
.oo-asp {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #efefef;
}
/* Ansprechpartner, mehr Abstand zwischen den Blöcken */
.oo-details-sidebar .oo-aspinfo-wrapper{
    margin-bottom: 0;
}

/* Name, Firma, Adresse bleiben als Block, etwas Luft darunter */
.oo-details-sidebar .oo-aspinfo-wrapper .oo-aspinfo.oo-contact-info{
    margin-bottom: 0;
}

.oo-details-sidebar .oo-aspinfo-wrapper .oo-aspinfo.oo-contact-info p{
    margin: 0;
}

/* Abstand nach dem Adressblock */
.oo-details-sidebar .oo-aspinfo-wrapper .oo-aspinfo.oo-contact-info p + br{
    margin-bottom: 0;
}

/* Feldtitel wie Telefon, Mobile, Email */
.oo-details-sidebar .oo-aspinfo-wrapper .oo-field-label{
    margin: 18px 0 6px 0;
    font-weight: 700;
}

/* Wert direkt unter dem Feldtitel, ohne großen Abstand */
.oo-details-sidebar .oo-aspinfo-wrapper .oo-field-label + .oo-aspinfo{
    margin-top: 0;
}

.oo-details-sidebar .oo-aspinfo-wrapper .oo-field-label + .oo-aspinfo p{
    margin: 0;
}

/* Extra Abstand zwischen den Kontaktblöcken, aber nicht zwischen Label und Nummer */
.oo-details-sidebar .oo-aspinfo-wrapper .oo-aspinfo + .oo-field-label{
    margin-top: 22px;
}

/* Link bei Email nicht an den Rand drücken */
.oo-details-sidebar .oo-aspinfo-wrapper a{
    display: inline-block;
    margin-top: 0;
}

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

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

/* responsive */
@media only screen and (max-width: 991px) {
    .oo-details-main {
        width: 100%;
    }

    .oo-details-sidebar {
        width: 100%;
        margin-top: 34px;
    }

    .oo-details-fact__label, .oo-details-fact__value {
        width: 50%;
    }

    .oo-details-box-inner{
        padding: 26px 18px;
        border-radius: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .oo-details-box-inner{
        padding: 22px 16px;
        border-radius: 16px;
    }
}
/* Slider Navigation moderner */
.oo-detailsgallery .slick-prev,
.oo-detailsgallery .slick-next{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    display:flex !important;
    align-items:center;
    justify-content:center;
    
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    
    opacity:0;
    transition:all .25s ease;
    z-index:10;
}

/* Slider Pfeile schlicht im Bild */
.oo-detailsgallery .slick-prev,
.oo-detailsgallery .slick-next{
    width:40px;
    height:40px;
    
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    
    background:none;
    border:none;
    box-shadow:none;
    
    opacity:0;
    transition:opacity .25s ease;
    
    z-index:10;
}

/* Abstand zum Rand */
.oo-detailsgallery .slick-prev{
    left:15px;
}

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

/* Pfeil selbst */
.oo-detailsgallery .slick-prev:before,
.oo-detailsgallery .slick-next:before{
    font-size:34px;
    color:#ffffff;
    opacity:0.9;
}

/* Hover sichtbar */
.oo-detailsgallery:hover .slick-prev,
.oo-detailsgallery:hover .slick-next{
    opacity:1;
}

/* Hover Effekt */
.oo-detailsgallery .slick-prev:hover:before,
.oo-detailsgallery .slick-next:hover:before{
    opacity:1;
}

/* Mobile immer sichtbar */
@media (max-width:768px){
    .oo-detailsgallery .slick-prev,
    .oo-detailsgallery .slick-next{
        opacity:1;
    }
}
/* Thumbnails statt Punkte */
.oo-detailsgallery .slick-dots{
    position: static;
    margin: 14px 0 0 0;
    padding: 0;
    display: flex !important;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.oo-detailsgallery .slick-dots li{
    width: auto;
    height: auto;
    margin: 0;
}

.oo-detailsgallery .slick-dots li button{
    width: 72px;
    height: 52px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,0.10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    transition: all .2s ease;
}

.oo-detailsgallery .slick-dots li.slick-active button{
    opacity: 1;
    border-color: rgba(0,0,0,0.35);
}

/* Standard Dot Zeichen ausblenden */
.oo-detailsgallery .slick-dots li button:before{
    display: none;
}

/* Hover */
.oo-detailsgallery .slick-dots li button:hover{
    opacity: 0.95;
    border-color: rgba(0,0,0,0.45);
}
/* Suchfilter, Engel & Völkers Anmutung */
.oo-searchform.oo-searchform--ev{
    background:#f4f4f4;
    border-radius:18px;
    padding:18px;
    margin:0 0 28px 0;
}

.oo-searchform.oo-searchform--ev .oo-searchbar{
    display:flex;
    gap:14px;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
}

/* Linke Leiste: wichtigste Felder */
.oo-searchform.oo-searchform--ev .oo-searchbar-fields{
    display:grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap:14px;
    flex: 1 1 720px;
}

/* Rechte Seite: Filter Button + Suche Button */
.oo-searchform.oo-searchform--ev .oo-searchbar-actions{
    display:flex;
    gap:12px;
    align-items:flex-end;
    flex: 0 0 auto;
}

/* Felder allgemein */
.oo-searchform.oo-searchform--ev .oo-searchformfield{
    padding:0;
    margin:0;
}

.oo-searchform.oo-searchform--ev .oo-searchformfield label{
    display:block;
    margin:0 0 8px 0;
    font-size:14px;
    line-height:1.2;
}

/* Inputs, Selects, TomSelect */
.oo-searchform.oo-searchform--ev .oo-searchformfield input,
.oo-searchform.oo-searchform--ev .oo-searchformfield select,
.oo-searchform.oo-searchform--ev .oo-searchformfield textarea,
.oo-searchform.oo-searchform--ev .oo-searchformfield button,
.oo-searchform.oo-searchform--ev .oo-searchformfield .multiselect,
.oo-searchform.oo-searchform--ev .oo-searchformfield .ts-control{
    width:100%;
    box-sizing:border-box;
    height:52px;
    padding:12px 14px;
    font-size:16px;
    line-height:1.2;
    border-radius:12px;
    border:1px solid #cfcfcf;
    background:#fff;
    margin:0 !important;
}

/* Tom Select Dropdowns */
.oo-searchform.oo-searchform--ev .ts-wrapper{ width:100%; }
.oo-searchform.oo-searchform--ev .ts-control{
    padding:12px 42px 12px 14px;
    box-shadow:none;
}
.oo-searchform.oo-searchform--ev .ts-dropdown{
    border-radius:12px;
    border:1px solid #d7d7d7;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    overflow:hidden;
}
.oo-searchform.oo-searchform--ev .ts-dropdown .option{
    padding:10px 12px;
}
.oo-searchform.oo-searchform--ev .ts-dropdown .option:hover{
    background:#f4f4f4;
}

/* Multiselect Popup, bleibt Dropdown */
.oo-searchform.oo-searchform--ev .multiselect{ position:relative; }
.oo-searchform.oo-searchform--ev .onoffice-multiselect-popup{
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    width:100%;
    max-height:260px;
    overflow:auto;
    z-index:9999;
    background:#fff;
    border:1px solid #d7d7d7;
    border-radius:12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    padding:10px;
    display:none;
}
.oo-searchform.oo-searchform--ev .onoffice-multiselect-popup[aria-hidden="false"]{ display:block; }

/* Checkbox Zeile */
.oo-searchform.oo-searchform--ev .oo-input-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}
.oo-searchform.oo-searchform--ev input[type="checkbox"]{
    width:22px;
    height:22px;
    margin:0;
    flex:0 0 22px;
}

/* Filter Toggle wie Button */
.oo-searchform.oo-searchform--ev .oo-search-advanced{
    position:relative;
}
.oo-searchform.oo-searchform--ev .oo-filter-toggle{
    list-style:none;
    cursor:pointer;
    user-select:none;
    
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    
    padding:0 18px;
    border-radius:12px;
    border:1px solid #cfcfcf;
    background:#fff;
    font-size:16px;
}
.oo-searchform.oo-searchform--ev details > summary::-webkit-details-marker{
    display:none;
}

/* Advanced Panel */
.oo-searchform.oo-searchform--ev .oo-search-advanced-panel{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:min(980px, calc(100vw - 48px));
    background:#fff;
    border:1px solid #d7d7d7;
    border-radius:16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
    padding:16px;
    z-index:99999;
}

/* Grid im Panel, damit Von/Bis nicht alles kaputt macht */
.oo-searchform.oo-searchform--ev .oo-search-advanced-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap:14px;
    align-items:start;
    grid-auto-flow: row dense;
}

/* Range Felder: Von/Bis kompakt */
.oo-searchform.oo-searchform--ev span.oo-searchrange{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
.oo-searchform.oo-searchform--ev span.oo-searchrange label{
    margin:0 0 6px 0;
    font-size:12px;
    line-height:1.1;
    color:#666;
}
.oo-searchform.oo-searchform--ev span.oo-searchrange br{
    display:none;
}

/* Submit Button */
.oo-searchform.oo-searchform--ev .oo-searchformfield--submit input[type="submit"]{
    width:auto;
    min-width:180px;
    height:52px;
    padding:0 20px;
    border-radius:12px;
}

/* Responsive */
@media (max-width: 1100px){
    .oo-searchform.oo-searchform--ev .oo-searchbar-fields{
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
    .oo-searchform.oo-searchform--ev .oo-search-advanced-grid{
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 640px){
    .oo-searchform.oo-searchform--ev .oo-searchbar{
        align-items:stretch;
    }
    .oo-searchform.oo-searchform--ev .oo-searchbar-fields{
        grid-template-columns: 1fr;
    }
    .oo-searchform.oo-searchform--ev .oo-searchbar-actions{
        width:100%;
        justify-content:space-between;
    }
    .oo-searchform.oo-searchform--ev .oo-searchformfield--submit input[type="submit"]{
        min-width:0;
        width:100%;
    }
    .oo-searchform.oo-searchform--ev .oo-search-advanced-panel{
        left:0;
        right:0;
        width:auto;
    }
}
/* Advanced Panel darf nie aus dem Viewport laufen */
.oo-searchform.oo-searchform--ev .oo-search-advanced{
    position: relative;
}

.oo-searchform.oo-searchform--ev .oo-search-advanced-panel{
    right: 0;
    left: auto;
    max-width: calc(100vw - 48px);
}

/* Wenn rechts zu wenig Platz ist, nach links andocken */
@media (max-width: 980px){
    .oo-searchform.oo-searchform--ev .oo-search-advanced-panel{
        left: 0;
        right: 0;
        width: auto;
    }
}
/* Leere Felder in der Top-Leiste ausblenden */
.oo-searchform.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield:has(input:disabled),
.oo-searchform.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield:empty{
    display:none;
}
/* Suche Button erzwingen */
.oo-searchform--ev .oo-searchformfield--submit{
    display:flex !important;
    align-items:flex-end;
    justify-content:flex-start;
    min-width:180px;
}

/* Button sichtbar und klar */
.oo-searchform--ev .oo-searchformfield--submit input[type="submit"]{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    min-width:180px;
    height:52px;
    padding:0 20px;
    border-radius:12px;
    
    background:#3d7bb1;
    color:#fff !important;
    border:1px solid #174770;
    cursor:pointer;
}

/* Spinner kann sonst „drüber liegen“ */
.oo-searchform--ev .oo-searchformfield--submit #spinner{
    display:none;
}
/* Filter Panel: nie aus dem Viewport, immer sauber sichtbar */
.oo-searchform--ev .oo-search-advanced{
    position: relative;
}

/* Panel zentriert, Breite begrenzt */
.oo-searchform--ev .oo-search-advanced-panel{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px);
}

/* Auf mobilen Geräten volle Breite innerhalb des Viewports */
@media (max-width: 980px){
    .oo-searchform--ev .oo-search-advanced-panel{
        left: 50% !important;
        transform: translateX(-50%);
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px);
    }
}
/* Filter Panel nur anzeigen, wenn Filter offen ist */
.oo-searchform--ev .oo-search-advanced-panel{
    display:none;
}

/* offen */
.oo-searchform--ev details[open] .oo-search-advanced-panel{
    display:block;
}

/* Panel fix im Viewport, kann nie links raus */
.oo-searchform--ev .oo-search-advanced-panel{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    
    top: 190px;
    width: min(980px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    
    z-index: 999999;
}

/* Filter Button klickbar */
.oo-searchform--ev .oo-filter-toggle{
    cursor:pointer;
}

@media (max-width: 980px){
    .oo-searchform--ev .oo-search-advanced-panel{
        top: 160px;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}
/* Filter Toggle wie Button */
.oo-searchform--ev .oo-search-advanced{
    position: relative;
}

.oo-searchform--ev .oo-filter-toggle{
    list-style: none;
    cursor: pointer;
    user-select: none;
    
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid #cfcfcf;
    background: #fff;
    font-size: 16px;
}

.oo-searchform--ev details > summary::-webkit-details-marker{
    display: none;
}

/* Panel Grundstil */
.oo-searchform--ev .oo-search-advanced-panel{
    position: fixed;
    left: 0;
    top: 0;
    
    width: min(980px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    overflow: auto;
    
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
    
    padding: 16px;
    z-index: 999999;
    
    display: none;
}

/* Nur anzeigen wenn offen */
.oo-searchform--ev details[open] .oo-search-advanced-panel{
    display: block;
}

/* Grid im Panel */
.oo-searchform--ev .oo-search-advanced-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 14px;
    align-items: start;
    grid-auto-flow: row dense;
}

@media (max-width: 1100px){
    .oo-searchform--ev .oo-search-advanced-grid{
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 640px){
    .oo-searchform--ev .oo-search-advanced-grid{
        grid-template-columns: 1fr;
    }
}
/* 1) Hauptleiste, Felder unten bündig, keine Höhenversätze */
.oo-searchform--ev .oo-searchbar-fields{
    align-items: end;
}

.oo-searchform--ev .oo-searchformfield--bar{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Label-Höhe vereinheitlichen, damit Stadt und Radius nicht höher sitzen */
.oo-searchform--ev .oo-searchformfield--bar > label{
    min-height: 18px;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* Wenn TomSelect im Einsatz ist, sitzt der Control manchmal anders */
.oo-searchform--ev .oo-searchformfield--bar .ts-wrapper,
.oo-searchform--ev .oo-searchformfield--bar .multiselect,
.oo-searchform--ev .oo-searchformfield--bar input,
.oo-searchform--ev .oo-searchformfield--bar select{
    align-self: stretch;
}

/* 2) Checkboxen, Text nicht zu nah, sauber zentriert auf einer Höhe */
.oo-searchform--ev .oo-searchformfield .oo-input-wrapper{
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Checkbox selbst */
.oo-searchform--ev .oo-searchformfield input[type="checkbox"]{
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 22px;
}

/* Text direkt neben Checkbox, vertikal zentriert */
.oo-searchform--ev .oo-searchformfield .oo-input-wrapper label{
    margin: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

/* Falls Checkbox Optionen im Dropdown Panel als Zeilen kommen */
.oo-searchform--ev .onoffice-multiselect-popup label{
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Immobilien Buttons Farbe */
.oo-searchform input[type="submit"],
.oo-searchform button,
.oo-searchform--ev input[type="submit"],
.oo-searchform--ev button,
.oo-details-sidebar .oo-button,
.oo-estate-expose .oo-button,
.oo-contact-form input[type="submit"],
.oo-contact-form button{
    background:#383838 !important;
    border:1px solid #383838 !important;
    color:#ffffff !important;
}

/* Hover Zustand */
.oo-searchform input[type="submit"]:hover,
.oo-searchform button:hover,
.oo-searchform--ev input[type="submit"]:hover,
.oo-searchform--ev button:hover,
.oo-details-sidebar .oo-button:hover,
.oo-estate-expose .oo-button:hover,
.oo-contact-form input[type="submit"]:hover,
.oo-contact-form button:hover{
    background:#222222 !important;
    border-color:#222222 !important;
}

/* Focus Zustand */
.oo-searchform input[type="submit"]:focus,
.oo-searchform button:focus,
.oo-searchform--ev input[type="submit"]:focus,
.oo-searchform--ev button:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(56,56,56,0.25);
}
/* Label Abstand für alle Felder gleich */
.oo-searchform--ev .oo-searchformfield label{
    display:block;
    margin:0 0 10px 0;
    line-height:1.2;
}

/* Stadt + Radius gleiche Höhe */
.oo-searchform--ev .oo-searchformfield--bar{
    display:flex;
    flex-direction:column;
}

.oo-searchform--ev .oo-searchformfield--bar input,
.oo-searchform--ev .oo-searchformfield--bar select,
.oo-searchform--ev .oo-searchformfield--bar .ts-control{
    height:52px;
    line-height:52px;
}

/* Range Felder (Wohnfläche, Preis etc.) */
.oo-searchform--ev span.oo-searchrange{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* Von / Bis Label entfernen */
.oo-searchform--ev span.oo-searchrange label{
    display:none;
}

/* Zeilenumbrüche entfernen */
.oo-searchform--ev span.oo-searchrange br{
    display:none;
}

/* Inputs gleich hoch */
.oo-searchform--ev span.oo-searchrange input{
    height:52px;
    padding:0 14px;
    display:flex;
    align-items:center;
}

/* Placeholder sauber zentriert */
.oo-searchform--ev span.oo-searchrange input::placeholder{
    line-height:52px;
}
/* Hauptleiste, Label und Feld mit festem Abstand */
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Label ohne eigenes Margin, damit gap wirkt */
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield > label{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2;
}

/* Alle Controls auf gleiche Höhe und ohne Zusatz-Abstände */
.oo-searchform--ev .oo-searchbar-fields input,
.oo-searchform--ev .oo-searchbar-fields select,
.oo-searchform--ev .oo-searchbar-fields .ts-control{
    height:52px;
    margin:0 !important;
}

/* Nummernfeld Radius, Text vertikal sauber */
.oo-searchform--ev .oo-searchbar-fields input[type="number"]{
    line-height:52px;
    padding-top:0;
    padding-bottom:0;
}
/* Stadt und Radius: label enthält input, daher label als Spalte */
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="city"] > label,
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="radius"] > label{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0 !important;
}

/* City und Radius Input ohne Extra-Margins */
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="city"] input,
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="radius"] input{
    margin:0 !important;
    height:52px;
    line-height:52px;
    padding-top:0;
    padding-bottom:0;
    box-sizing:border-box;
}

/* Andere Felder: Label Abstand normalisieren */
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="objektart"] > label,
.oo-searchform--ev .oo-searchbar-fields .oo-searchformfield[data-field="vermarktungsart"] > label{
    margin:0 0 10px 0 !important;
    line-height:1.2;
    height:auto;
}

/* TomSelect Control auf gleiche Höhe */
.oo-searchform--ev .oo-searchbar-fields .ts-control{
    height:52px !important;
    min-height:52px !important;
    display:flex;
    align-items:center;
}
/* Range: Von/Bis Labels weg, Inputs sauber zweispaltig */
.oo-searchform--ev fieldset.oo-searchrange{
    border:0;
    padding:0;
    margin:0;
}

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

.oo-searchform--ev fieldset.oo-searchrange input{
    height:52px;
    line-height:52px;
    padding:0 14px;
    box-sizing:border-box;
}
.oo-searchform--ev fieldset.oo-searchrange label{
    font-size:0;
}
.oo-searchform--ev fieldset.oo-searchrange label input{
    font-size:16px;
}
/* Mobile: Panel darf nicht über den Viewport gehen */
@media (max-width: 640px){
    .oo-searchform--ev .oo-search-advanced-panel{
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        padding: 12px !important;
        box-sizing: border-box;
    }
    
    /* Panel Grid einspaltig */
    .oo-searchform--ev .oo-search-advanced-grid{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Range Inputs volle Breite */
    .oo-searchform--ev fieldset.oo-searchrange input{
        width: 100% !important;
        box-sizing: border-box;
    }
}
/* Desktop: 3 Spalten */
.oo-estate-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
}

/* Tablet */
@media (max-width: 1024px){
    .oo-estate-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px){
    .oo-estate-grid{
        grid-template-columns: 1fr;
    }
}
/* Listenlayout Desktop */
.oo-listframe{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
}

/* Listeneintrag darf im Grid normal fließen */
.oo-listframe .oo-listobject{
    width:auto !important;
    margin:0 !important;
}

/* Tablet: 2 Spalten */
@media (max-width: 1024px){
    .oo-listframe{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 Spalte */
@media (max-width: 640px){
    .oo-listframe{
        grid-template-columns: 1fr;
        gap:16px;
    }
}
/* Alle onOffice Bereiche näher an den Rand bringen */
.oo-estate-list,
.oo-estate-detail,
.oo-searchform,
.oo-estate{
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box;
}

/* Mobile etwas kompakter */
@media (max-width:640px){
    .oo-estate-list,
    .oo-estate-detail,
    .oo-searchform,
    .oo-estate{
        padding-left:12px !important;
        padding-right:12px !important;
    }
}
/* Immobilienkarte moderner */
.oo-estate-item{
    border-radius:14px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:transform .2s ease, box-shadow .2s ease;
}

/* Hover Effekt Desktop */
.oo-estate-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(0,0,0,0.12);
}

/* Bild oben schöner */
.oo-estate-item img{
    width:100%;
    height:auto;
    display:block;
}

/* Titel klarer */
.oo-estate-item h2,
.oo-estate-item h3{
    font-weight:600;
    line-height:1.3;
}

/* Tabellenbereich luftiger */
.oo-estate-item table{
    width:100%;
    border-collapse:collapse;
}

.oo-estate-item table td{
    padding:8px 0;
    border-bottom:1px solid #eee;
}

/* Buttons moderner */
.oo-estate-item .oo-button,
.oo-estate-item a.button,
.oo-estate-item input[type="submit"]{
    width:100%;
    height:48px;
    border-radius:8px;
    background:#383838;
    color:#fff;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:background .2s ease;
}

.oo-estate-item .oo-button:hover{
    background:#222;
}
/* Kartencontainer */
.oo-listobject{
    border:none !important;
    padding:0 !important;
}

/* eigentliche Karte */
.oo-listobjectwrap{
    border-radius:12px;
    border:1px solid #e6e6e6;
    background:#ffffff;
    overflow:hidden;
}

/* Bild oben bündig */
.oo-listimage{
    display:block;
}

/* Bild sauber einpassen */
.oo-listimage img{
    width:100%;
    height:auto;
    display:block;
}
/* Detail Button */
.oo-details-btn{
    background:#383838;
    color:#fff;
    border-radius:6px;
    padding:10px 18px;
    text-decoration:none;
    border:none;
    box-shadow:none;
}

/* Favoriten Button */
button.favorize{
    background:#383838;
    color:#fff;
    border-radius:6px;
    padding:10px 18px;
    border:none;
    box-shadow:none;
}

/* Hover */
.oo-details-btn:hover,
button.favorize:hover{
    background:#2b2b2b;
}
/* Formular Button */
.oo-form input[type="submit"]{
    background:#383838;
    color:#ffffff;
    border:none;
    border-radius:6px;
    padding:12px 22px;
    font-size:16px;
    box-shadow:none !important;
    cursor:pointer;
}

/* Hover */
.oo-form input[type="submit"]:hover{
    background:#2b2b2b;
}
/* Abstand zwischen DSGVO Text und Button */
.oo-form-row--checkbox{
    margin-bottom:20px;
}

/* zusätzlicher Abstand über dem Button */
.oo-form input[type="submit"]{
    margin-top:10px;
}
/* Dropdown Optionen sauber ausrichten */
.ts-dropdown .option{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Checkbox etwas Abstand nach rechts */
.ts-dropdown .option input[type="checkbox"]{
    margin:0;
}

/* Text vertikal sauber */
.ts-dropdown .option span{
    line-height:1.2;
}

/* etwas mehr Luft zwischen den Optionen */
.ts-dropdown .option{
    padding:8px 12px;
}
/* Hover Effekt */
.ts-dropdown .option:hover{
    background:#f5f5f5;
}

/* ausgewählt */
.ts-dropdown .active{
    background:#f0f0f0;
}
/* Toggle Text Bereich */

.oo-detailsfreetext.oo-toggle-text{
    position:relative;
}

/* Inhalt */
.oo-detailsfreetext.oo-toggle-text .oo-toggle-content{
    height:140px;
    overflow:hidden;
    position:relative;
    will-change:height;
}

/* Verlauf unten */
.oo-detailsfreetext.oo-toggle-text .oo-toggle-content::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:90px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.75) 55%,
        rgba(255,255,255,1) 100%
    );
    pointer-events:none;
    opacity:1;
    transition:opacity 1.2s ease;
}

/* Verlauf verschwindet geöffnet */
.oo-detailsfreetext.oo-toggle-text.open .oo-toggle-content::after{
    opacity:0;
}


/* Button */

.oo-toggle-button{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:600;
    color:#383838;
    padding:6px 14px;
    border-radius:20px;
    background:#f2f2f2;
    transition:background .3s ease, transform .2s ease;
}

.oo-toggle-button:hover{
    background:#e6e6e6;
    transform:translateY(-1px);
}


/* Pfeil Icon */

.oo-toggle-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #383838;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Pfeil Symbol */
.oo-toggle-icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #383838;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Chevron */
.oo-toggle-icon::before{
    content:"";
    width:6px;
    height:6px;
    border-right:2px solid #383838;
    border-bottom:2px solid #383838;
    transform:rotate(-45deg);
    display:block;
}

/* Rotation */
.oo-toggle-text.open .oo-toggle-icon{
    transform:rotate(90deg);
}
/* Rotation beim Öffnen */
.oo-toggle-text.open .oo-toggle-icon{
    transform:rotate(90deg);
}

/* Hover Bewegung */
.oo-toggle-button:hover .oo-toggle-icon{
    transform:translateX(2px);
}

.oo-toggle-text.open .oo-toggle-button:hover .oo-toggle-icon{
    transform:rotate(90deg) translateY(1px);
}


/* kurzer Text → Button ausblenden */

.oo-detailsfreetext.oo-toggle-text.is-short .oo-toggle-button{
    display:none;
}

.oo-detailsfreetext.oo-toggle-text.is-short .oo-toggle-content{
    height:auto;
    overflow:visible;
}

.oo-detailsfreetext.oo-toggle-text.is-short .oo-toggle-content::after{
    display:none;
}
.oo-toggle-button{
    margin-top:24px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:600;
    color:#383838;
    padding:6px 14px;
    border-radius:20px;
    background:#f2f2f2;
    transition:background .3s ease, transform .2s ease;
}
.oo-toggle-button{
    border:1px solid #e3e3e3;
}
/* Lightbox */
.oo-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
}

.oo-lightbox.is-open{
    display:block;
}

.oo-lightbox-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.88);
}

.oo-lightbox-dialog{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    box-sizing:border-box;
}

.oo-lightbox-content{
    max-width:min(1100px, 100%);
    max-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.oo-lightbox-image{
    max-width:100%;
    max-height:78vh;
    width:auto;
    height:auto;
    display:block;
    border-radius:10px;
}

.oo-lightbox-meta{
    width:100%;
    margin-top:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    color:#fff;
    font-size:15px;
}

.oo-lightbox-caption{
    flex:1;
}

.oo-lightbox-counter{
    white-space:nowrap;
}

/* Buttons */
.oo-lightbox-close,
.oo-lightbox-prev,
.oo-lightbox-next{
    position:absolute;
    z-index:3;
    border:none;
    background:rgba(255,255,255,0.14);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s ease, transform .2s ease;
}

.oo-lightbox-close:hover,
.oo-lightbox-prev:hover,
.oo-lightbox-next:hover{
    background:rgba(255,255,255,0.24);
}

.oo-lightbox-close{
    top:24px;
    right:24px;
    width:46px;
    height:46px;
    border-radius:50%;
    font-size:28px;
    line-height:1;
}

.oo-lightbox-prev,
.oo-lightbox-next{
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    font-size:34px;
    line-height:1;
}

.oo-lightbox-prev{
    left:24px;
}

.oo-lightbox-next{
    right:24px;
}

/* Galerie Bilder anklickbar */
.oo-lightbox-trigger{
    display:block;
    cursor:zoom-in;
}

@media (max-width:767px){
    .oo-lightbox-dialog{
        padding:20px;
    }
    
    .oo-lightbox-image{
        max-height:70vh;
    }
    
    .oo-lightbox-prev,
    .oo-lightbox-next{
        width:44px;
        height:44px;
        font-size:28px;
    }
    
    .oo-lightbox-prev{
        left:10px;
    }
    
    .oo-lightbox-next{
        right:10px;
    }
    
    .oo-lightbox-close{
        top:10px;
        right:10px;
    }
    
    .oo-lightbox-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
}