.elementor-998 .elementor-element.elementor-element-5c615af{--display:flex;--min-height:325px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.3;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-998 .elementor-element.elementor-element-5c615af:not(.elementor-motion-effects-element-type-background), .elementor-998 .elementor-element.elementor-element-5c615af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sylt-ferienobjekte.de/wp-content/uploads/2026/03/header-haus-garten.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-998 .elementor-element.elementor-element-5c615af::before, .elementor-998 .elementor-element.elementor-element-5c615af > .elementor-background-video-container::before, .elementor-998 .elementor-element.elementor-element-5c615af > .e-con-inner > .elementor-background-video-container::before, .elementor-998 .elementor-element.elementor-element-5c615af > .elementor-background-slideshow::before, .elementor-998 .elementor-element.elementor-element-5c615af > .e-con-inner > .elementor-background-slideshow::before, .elementor-998 .elementor-element.elementor-element-5c615af > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-998 .elementor-element.elementor-element-089c02a{text-align:center;}.elementor-998 .elementor-element.elementor-element-089c02a .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:67px;font-weight:600;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;text-shadow:10px 0px 43px #020101;color:#FFFFFF;}.elementor-998 .elementor-element.elementor-element-2a2a718{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}@media(min-width:1367px){.elementor-998 .elementor-element.elementor-element-5c615af:not(.elementor-motion-effects-element-type-background), .elementor-998 .elementor-element.elementor-element-5c615af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:1366px){.elementor-998 .elementor-element.elementor-element-5c615af{--min-height:300px;}.elementor-998 .elementor-element.elementor-element-089c02a .elementor-heading-title{font-size:55px;}.elementor-998 .elementor-element.elementor-element-2a2a718{--padding-top:100px;--padding-bottom:100px;--padding-left:60px;--padding-right:60px;}}@media(max-width:1024px){.elementor-998 .elementor-element.elementor-element-5c615af{--min-height:207px;}.elementor-998 .elementor-element.elementor-element-089c02a .elementor-heading-title{font-size:50px;}.elementor-998 .elementor-element.elementor-element-2a2a718{--padding-top:80px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-998 .elementor-element.elementor-element-5c615af{--min-height:128px;}.elementor-998 .elementor-element.elementor-element-089c02a .elementor-heading-title{font-size:27px;line-height:1em;}.elementor-998 .elementor-element.elementor-element-2a2a718{--padding-top:60px;--padding-bottom:060px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-021829f *//* ==========================================================
   vOFFICE – SYLT FERIENOBJEKTE
   Suchformular + Filter + Unterkunftskarten
   ========================================================== */


/* ----------------------------------------------------------
   1. GRUNDEINSTELLUNGEN
   ---------------------------------------------------------- */

.voffice-suche {
    --vo-beige: #C9B8A0;
    --vo-braun: #85735A;
    --vo-feld: rgba(255, 255, 255, 0.45);
    --vo-karte: rgba(255, 255, 255, 0.28);

    width: 100%;
    max-width: 1050px;
    margin: 0 auto;

    color: var(--vo-braun);
}


/* ----------------------------------------------------------
   2. V-OFFICE / BOOTSTRAP HINTERGRÜNDE ENTFERNEN
   ---------------------------------------------------------- */

.voffice-suche .searchmodule,
.voffice-suche .main-section,
.voffice-suche .container-fluid,
.voffice-suche .forms,
.voffice-suche .filters,
.voffice-suche .results {
    background: transparent !important;
    box-shadow: none !important;
}

.voffice-suche .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ----------------------------------------------------------
   3. FORMULARFELDER
   ---------------------------------------------------------- */

.voffice-suche .form-group {
    margin-bottom: 8px !important;
}

.voffice-suche .form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    padding: 0 15px !important;

    background: var(--vo-feld) !important;
    color: var(--vo-braun) !important;

    border: 1px solid var(--vo-beige) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    outline: none !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.voffice-suche .form-control::placeholder {
    color: var(--vo-braun) !important;
    opacity: 0.85 !important;
}

.voffice-suche .form-control:focus {
    background: #ffffff !important;
    border-color: var(--vo-braun) !important;

    box-shadow:
        0 0 0 2px rgba(133, 115, 90, 0.10) !important;
}


/* ----------------------------------------------------------
   4. HAUPTBUTTON "SUCHEN"
   ---------------------------------------------------------- */

.voffice-suche .search-btn {
    width: 100% !important;
    min-height: 48px !important;

    margin-top: 8px !important;
    padding: 10px 28px !important;

    background: var(--vo-beige) !important;
    color: #ffffff !important;

    border: 1px solid var(--vo-braun) !important;
    border-radius: 12px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: "Merriweather", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}

.voffice-suche .search-btn:hover,
.voffice-suche .search-btn:focus,
.voffice-suche .search-btn:active {
    background: var(--vo-braun) !important;
    border-color: var(--vo-braun) !important;
    color: #ffffff !important;

    box-shadow: none !important;
    outline: none !important;
}


/* ----------------------------------------------------------
   5. ERWEITERTE FILTER
   ---------------------------------------------------------- */

.voffice-suche .extended-filters {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.voffice-suche .extended-filters label {
    color: var(--vo-braun) !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}


/* ----------------------------------------------------------
   6. LEISTE "WEITERE FILTER / SORTIERUNG"
   ---------------------------------------------------------- */

.voffice-suche .result-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.voffice-suche .result-header > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* kleine Buttons */
.voffice-suche .result-header .btn {
    padding: 8px 14px !important;

    background: transparent !important;
    color: var(--vo-braun) !important;

    border: 1px solid var(--vo-beige) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease !important;
}

.voffice-suche .result-header .btn:hover,
.voffice-suche .result-header .btn:focus {
    background: var(--vo-beige) !important;
    color: #ffffff !important;
    border-color: var(--vo-beige) !important;

    box-shadow: none !important;
}


/* ----------------------------------------------------------
   7. ERGEBNISBEREICH
   ---------------------------------------------------------- */

.voffice-suche .results {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Zwei Karten nebeneinander */
.voffice-suche .results > .row {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;

    width: 100% !important;

    margin: 0 !important;
}


/* WICHTIG:
   Bootstrap erzeugt ::before / ::after.
   Ohne diesen Fix entsteht die leere erste Grid-Spalte. */

.voffice-suche .results > .row::before,
.voffice-suche .results > .row::after {
    content: none !important;
    display: none !important;
}


/* ----------------------------------------------------------
   8. EINZELNE UNTERKUNFTSKARTE
   ---------------------------------------------------------- */

.voffice-suche .results > .row > .col-sm-6 {
    float: none !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vo-karte) !important;

    border: 1px solid var(--vo-beige) !important;
    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

.voffice-suche .results > .row > .col-sm-6:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 10px 28px rgba(133, 115, 90, 0.12) !important;
}


/* ----------------------------------------------------------
   9. OBJEKTBILD
   ---------------------------------------------------------- */

.voffice-suche .results .res-img {
    display: block !important;

    width: 100% !important;
    height: 300px !important;

    margin: 0 !important;

    object-fit: cover !important;

    border: 0 !important;
    border-radius: 0 !important;

    transition: transform 0.35s ease !important;
}

.voffice-suche
.results
> .row
> .col-sm-6:hover
.res-img {
    transform: scale(1.02) !important;
}


/* ----------------------------------------------------------
   10. V-OFFICE <br> AUSBLENDEN
   ---------------------------------------------------------- */

.voffice-suche
.results
> .row
> .col-sm-6
> br {
    display: none !important;
}


/* ----------------------------------------------------------
   11. OBJEKTÜBERSCHRIFT
   z.B. "Luxuswohnung Sylt"

   vOffice-Struktur:
   Bild-Link
   <br>
   Titel-Link

   Deshalb wird gezielt "br + a" verwendet.
   ---------------------------------------------------------- */

.voffice-suche
.results
> .row
> .col-sm-6
> br + a {
    display: block !important;

    margin: 0 !important;
    padding: 20px 22px 7px !important;

    color: var(--vo-braun) !important;

    font-family: "Merriweather", serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;
}

.voffice-suche
.results
> .row
> .col-sm-6
> br + a:hover {
    color: var(--vo-braun) !important;
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   12. OBJEKTDETAILS
   z.B. "Ferienwohnung - Keitum - 4 P"
   ---------------------------------------------------------- */

.voffice-suche
.results
> .row
> .col-sm-6
> h6 {
    margin: 0 !important;

    padding: 0 22px 22px !important;

    color: var(--vo-braun) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}


/* ----------------------------------------------------------
   13. LINKS IN DEN KARTEN
   ---------------------------------------------------------- */

.voffice-suche .results a {
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   14. TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

    .voffice-suche {
        max-width: 100%;
    }

    .voffice-suche .results > .row {
        gap: 20px !important;
    }

    .voffice-suche .results .res-img {
        height: 260px !important;
    }
}


/* ----------------------------------------------------------
   15. SMARTPHONE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    /* eine Karte pro Zeile */
    .voffice-suche .results > .row {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }


    /* Bilder */
    .voffice-suche .results .res-img {
        height: 240px !important;
    }


    /* Ergebnisleiste */
    .voffice-suche .result-header {
        align-items: stretch !important;
    }


    /* Objektüberschrift */
    .voffice-suche
    .results
    > .row
    > .col-sm-6
    > br + a {
        padding: 18px 18px 6px !important;

        font-size: 18px !important;
    }


    /* Objektinformationen */
    .voffice-suche
    .results
    > .row
    > .col-sm-6
    > h6 {
        padding: 0 18px 18px !important;

        font-size: 14px !important;
    }
}


/* ----------------------------------------------------------
   16. BUTTON "WEITERE ANZEIGEN"
   ---------------------------------------------------------- */

.voffice-suche .more-btn-panel {
    background: transparent !important;

    padding: 32px 0 20px !important;
    margin: 0 !important;

    text-align: center !important;
}


/* Button */
.voffice-suche .more-btn-panel .btn {
    display: inline-block !important;

    width: auto !important;
    min-width: 220px !important;

    padding: 12px 28px !important;

    background: #C9B8A0 !important;
    color: #ffffff !important;

    border: 1px solid #85735A !important;
    border-radius: 12px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    font-family: "Merriweather", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease !important;
}


/* Hover */
.voffice-suche .more-btn-panel .btn:hover,
.voffice-suche .more-btn-panel .btn:focus,
.voffice-suche .more-btn-panel .btn:active {
    background: #85735A !important;
    color: #ffffff !important;

    border-color: #85735A !important;

    box-shadow: none !important;
    outline: none !important;
}

/* ----------------------------------------------------------
   OBJEKTNAME
   z.B. "Luxuswohnung Sylt", "Meerblick"
   ---------------------------------------------------------- */

.voffice-suche .searchmodule .results h5.text-truncate {
    margin: 0 !important;
    padding: 18px 22px 6px 22px !important;

    font-family: "Merriweather", serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    color: #85735A !important;

    /* vOffice-Truncate deaktivieren */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}


/* Link um die Überschrift */
.voffice-suche .searchmodule .results a {
    color: #85735A !important;
    text-decoration: none !important;
}

.voffice-suche .searchmodule .results a:hover h5 {
    color: #85735A !important;
}


/* ----------------------------------------------------------
   OBJEKTDETAILS
   z.B. "Ferienwohnung - Cala Ratjada - 4 P"
   ---------------------------------------------------------- */

.voffice-suche .searchmodule .results h6.text-truncate {
    margin: 0 !important;
    padding: 0 22px 22px 22px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    color: #85735A !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}/* End custom CSS */