/* ==========================================================================
   Reuter Immobilien – onOffice Design Addon
   Overrides the default onOffice plugin styles to match the brand.
   All values fall back to CSS custom properties that are injected by PHP
   so they can be changed via the admin settings page without editing CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fallback variables (in case the PHP injection hasn't run yet)
   -------------------------------------------------------------------------- */
:root {
    --roo-primary:   #1B3A6B;
    --roo-accent:    #009FE3;
    --roo-bg:        #F0F2F5;
    --roo-dark:      #0F2247;
    --roo-text:      #1E2D3D;
    --roo-muted:     #64748b;
    --roo-border:    #E3E6EB;
    --roo-white:     #ffffff;
    --roo-radius:    24px;
    --roo-radius-sm: 12px;
    --roo-font:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --roo-shadow:    0 2px 20px rgba(27, 58, 107, 0.08);
    --roo-shadow-lg: 0 12px 48px rgba(27, 58, 107, 0.16);
    --roo-cols:      3;

    /* Vermarktungsart badges. Both stay in the brand's blue family, but one is
       a dark fill and the other a light fill – that light/dark inversion reads
       at a glance (4.3:1 between the two), which two similarly dark blues never
       would. Two side constraints drove this:
         • the badge text is 10px bold, so it needs 4.5:1 against its own fill;
           white on the brand accent #009FE3 only reaches 2.97:1 and was unusable
         • the theme's "NEU" pill is dark navy #1B3A6B and often sits on the same
           card, so neither badge may land near that value */
    --roo-badge-sale:      #0F6FBF;
    --roo-badge-sale-text: #ffffff;
    --roo-badge-rent:      #D9EDFA;
    --roo-badge-rent-text: #12356E;
}

/* --------------------------------------------------------------------------
   Global font override for all onOffice elements
   -------------------------------------------------------------------------- */
.oo-listframe,
.oo-listobject,
.oo-detailview,
.oo-searchform,
.oo-form,
.oo-listheadline,
.oo-asp,
.detail-contact-form {
    font-family: var(--roo-font);
    color: var(--roo-text);
}

/* --------------------------------------------------------------------------
   Section headline (Immobilienliste)
   -------------------------------------------------------------------------- */
.oo-listheadline {
    padding: 0 15px 24px;
}

.oo-listheadline h1,
.oo-listheadline h2,
.oo-listheadline.oo-listheadline h1,
.oo-listheadline.oo-listheadline h2 {
    font-family: var(--roo-font);
    /* !important: onOffice ships its own (larger) heading size with equal or
       higher specificity, which otherwise wins the cascade on mobile. The
       doubled class above adds extra specificity as a second line of defence. */
    font-size: clamp(1.75rem, 3vw, 2rem) !important;
    font-weight: 400;
    color: var(--roo-dark);
    margin-bottom: 6px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Long unbroken German compound words (e.g. "Immobilienübersicht") can be
   wider than a narrow phone screen at any font-size above ~1rem – without a
   break opportunity the box (and the page) overflows horizontally. */
@media (max-width: 480px) {
    .oo-listheadline h1,
    .oo-listheadline h2,
    .oo-listheadline.oo-listheadline h1,
    .oo-listheadline.oo-listheadline h2 {
        font-size: 1.5rem !important;
    }
}

.oo-listheadline p {
    color: var(--roo-muted);
    font-size: 14px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Sort bar
   -------------------------------------------------------------------------- */
.oo-estate-sort {
    padding: 0 15px 24px;
}

.oo-estate-sort select,
.oo-estate-sort .ts-control {
    font-family: var(--roo-font);
    border: 1px solid var(--roo-border);
    border-radius: var(--roo-radius-sm);
    padding: 8px 12px;
    background: var(--roo-white);
}

/* --------------------------------------------------------------------------
   List grid
   -------------------------------------------------------------------------- */
.oo-listframe {
    display: grid;
    grid-template-columns: repeat(var(--roo-cols, 3), 1fr);
    gap: 24px;
    padding: 0 15px;
}

/* Reset original float-based widths */
.oo-listobject {
    width: auto !important;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */
.oo-listobjectwrap {
    border-radius: var(--roo-radius);
    overflow: hidden;
    background: var(--roo-white);
    box-shadow: var(--roo-shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.oo-listobject:hover .oo-listobjectwrap {
    transform: translateY(-6px);
    box-shadow: var(--roo-shadow-lg);
}

/* --------------------------------------------------------------------------
   Card image
   -------------------------------------------------------------------------- */
.oo-listimage {
    display: block;
    width: 100%;
    /* 900×600 = 3:2 – matches the onOffice source images exactly */
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    position: relative;
    background: var(--roo-bg);
    flex-shrink: 0;
}

.oo-listimage picture {
    display: block;
    width: 100%;
    height: 100%;
}

.oo-listimage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.oo-listobject:hover .oo-listimage img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Marketing-status badge – kills the theme ribbon, replaces with a pill.
   Uses !important throughout because the theme typically uses high-specificity
   selectors or inline styles for the diagonal ribbon effect.
   -------------------------------------------------------------------------- */

/* Remove any ribbon pseudo-element the theme adds */
.estate-status::before,
.estate-status::after,
a.estate-status::before,
a.estate-status::after,
.oo-listimage.estate-status::before,
.oo-listimage.estate-status::after {
    display: none !important;
    content: none !important;
}

/* The actual status text span */
.oo-listimage span {
    /* Reset all ribbon-style transforms and dimensions */
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    rotate: none !important;
    width: auto !important;
    height: auto !important;
    /* Badge appearance */
    background: var(--roo-primary) !important;
    color: var(--roo-white) !important;
    font-family: var(--roo-font) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 5px 13px !important;
    border-radius: 100px !important;
    z-index: 10 !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    /* Kill any clip, border or background-image the ribbon used */
    clip-path: none !important;
    border: none !important;
    background-image: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   Vermarktungsart badge (Kauf / Miete)

   Lifted out of the fact pill row by JS and placed on the image so the type
   is readable without scanning the list. Rendered as a <div> on purpose: the
   `.oo-listimage span` rule above owns the theme's status ribbon and its
   !important top/left would otherwise drag this badge into the same corner.
   -------------------------------------------------------------------------- */
.roo-mkt-badge {
    position: absolute;
    top: 12px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--roo-accent);
    color: var(--roo-white);
    font-family: var(--roo-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    /* Let clicks through to the image link underneath */
    pointer-events: none;
}

.roo-mkt-badge.--right { right: 12px; }
.roo-mkt-badge.--left  { left: 12px; }

/* Configured for the same corner as the "NEU" pill – sit below it, not on it */
.roo-mkt-badge.--stacked { top: 46px; }

.roo-mkt-badge svg { flex-shrink: 0; }

/* Sale and rent are colour-coded so the difference registers before the text is
   read. The tag icon uses currentColor, so setting `color` recolours it too.
   "Kauf & Miete" takes the sale styling – those objects are primarily for sale. */
.roo-mkt-badge.--sale,
.roo-mkt-badge.--both {
    background: var(--roo-badge-sale);
    color: var(--roo-badge-sale-text);
}

.roo-mkt-badge.--rent {
    background: var(--roo-badge-rent);
    color: var(--roo-badge-rent-text);
    /* A light fill on a photo needs a crisper edge than a dark one */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   Card info area
   -------------------------------------------------------------------------- */
.oo-listinfo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --------------------------------------------------------------------------
   Card title
   -------------------------------------------------------------------------- */
.oo-listtitle {
    font-family: var(--roo-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--roo-dark);
    text-align: left;
    /* remove fixed height so text can wrap naturally */
    height: auto;
    overflow: visible;
    line-height: 1.45;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Card fact table – hidden; replaced by .roo-card-facts pills via JS
   -------------------------------------------------------------------------- */
.oo-listinfotable {
    display: none;
}

/* --------------------------------------------------------------------------
   Card facts – compact icon + value pills, NO label text
   -------------------------------------------------------------------------- */
.roo-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--roo-border);
    flex-grow: 1;
    align-content: flex-start;
}

.roo-card-fact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--roo-bg);
    border-radius: 100px;
    padding: 4px 11px;
    font-family: var(--roo-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--roo-text);
    white-space: nowrap;
    line-height: 1.4;
}

/* Highlighted fields (price, key metric) stand out */
.roo-card-fact.--key {
    background: rgba(0, 159, 227, 0.1);
    color: var(--roo-primary);
    font-weight: 700;
}

.roo-card-fact svg {
    color: var(--roo-accent);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Details / CTA button
   -------------------------------------------------------------------------- */
.oo-detailslink {
    margin-top: auto;
    gap: 8px;
}

.oo-details-btn,
.oo-detailslink a,
.oo-unitslink a,
.oo-leadformlink {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--roo-accent) !important;
    color: var(--roo-white) !important;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 13px 24px;
    border-radius: var(--roo-radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.2 !important;
}

.oo-details-btn:hover,
.oo-detailslink a:hover,
.oo-unitslink a:hover,
.oo-leadformlink:hover {
    background: var(--roo-primary) !important;
    color: var(--roo-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(27, 58, 107, 0.25);
    text-decoration: none !important;
}

.oo-details-btn:focus,
.oo-detailslink a:focus,
button.favorize:focus,
.oo-leadformlink:focus {
    outline: 2px solid var(--roo-accent);
    outline-offset: 3px;
    background: var(--roo-primary) !important;
}

/* Favorites / watchlist button */
button.favorize {
    background: transparent !important;
    color: var(--roo-primary) !important;
    border: 2px solid var(--roo-border);
    border-radius: var(--roo-radius-sm);
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

button.favorize:hover {
    border-color: var(--roo-accent);
    color: var(--roo-accent) !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   Load More – hidden cards + button
   -------------------------------------------------------------------------- */

/* Cards hidden by the load-more system */
.oo-listobject.roo-card-hidden {
    display: none !important;
}

.roo-load-more-wrap {
    grid-column: 1 / -1;  /* span full grid width */
    display: flex;
    justify-content: center;
    padding: 16px 0 40px;
}

.roo-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid var(--roo-accent);
    border-radius: var(--roo-radius-sm);
    color: var(--roo-primary);
    font-family: var(--roo-font);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 14px 40px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.roo-load-more:hover {
    background: var(--roo-accent);
    color: var(--roo-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 159, 227, 0.3);
}

.roo-load-more__count {
    font-weight: 400;
    opacity: 0.7;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.oo-listpagination {
    padding: 32px 15px;
}

.oo-post-nav-links ul {
    gap: 6px;
}

.oo-post-nav-links a,
.oo-post-nav-links .current {
    font-family: var(--roo-font);
    font-weight: 600;
    border-radius: var(--roo-radius-sm);
    border: 1px solid var(--roo-border);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--roo-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.oo-post-nav-links a:hover {
    background: var(--roo-accent);
    border-color: var(--roo-accent);
    color: var(--roo-white) !important;
}

.oo-post-nav-links .current {
    background: var(--roo-primary);
    border-color: var(--roo-primary);
    color: var(--roo-white);
}

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */
.oo-searchform {
    background: var(--roo-white);
    border-radius: var(--roo-radius);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--roo-shadow);
}

.oo-searchformfieldwrap {
    gap: 0;
}

.oo-searchformfield {
    padding: 0 10px;
    margin-bottom: 16px;
}

.oo-searchformfield label {
    font-family: var(--roo-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--roo-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    display: block;
}

.oo-searchformfield input:not([type="checkbox"]):not([type="radio"]),
.oo-searchformfield select,
.oo-searchformfield .ts-control {
    font-family: var(--roo-font);
    border: 1px solid var(--roo-border);
    border-radius: var(--roo-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--roo-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
}

.oo-searchformfield input:focus,
.oo-searchformfield select:focus {
    border-color: var(--roo-accent);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.12);
    background: var(--roo-white);
    outline: none;
}

.oo-searchformfield input[type="submit"],
.oo-form input[type="submit"] {
    background: var(--roo-accent);
    border: none;
    border-radius: var(--roo-radius-sm);
    color: var(--roo-white);
    font-family: var(--roo-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 13px 28px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    height: auto;
    line-height: 1.2;
}

.oo-searchformfield input[type="submit"]:hover,
.oo-form input[type="submit"]:hover {
    background: var(--roo-primary);
    transform: translateY(-1px);
}

/* ==========================================================================
   DETAIL VIEW
   ========================================================================== */

.oo-detailsheadline {
    width: 100%;
    padding: 16px 15px 24px;
}

.oo-detailsheadline h1,
.oo-detailsheadline h2,
.oo-detailsheadline.oo-detailsheadline h1,
.oo-detailsheadline.oo-detailsheadline h2 {
    font-family: var(--roo-font);
    font-size: clamp(1.75rem, 3vw, 2rem) !important;
    font-weight: 400;
    color: var(--roo-dark);
    line-height: 1.3;
    margin-bottom: 8px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

@media (max-width: 480px) {
    .oo-detailsheadline h1,
    .oo-detailsheadline h2,
    .oo-detailsheadline.oo-detailsheadline h1,
    .oo-detailsheadline.oo-detailsheadline h2 {
        font-size: 1.5rem !important;
    }
}

.oo-detailsheadline span {
    display: inline-block;
    background: var(--roo-primary);
    color: var(--roo-white);
    font-family: var(--roo-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 100px;
}

/* --------------------------------------------------------------------------
   Original slick gallery – hidden when photo grid is active
   -------------------------------------------------------------------------- */
.roo-gallery-hidden {
    display: none !important;
}

/* The empty wrapper left behind after we move the gallery */
.oo-detailsgallery:empty {
    display: none;
}

/* ==========================================================================
   PHOTO GRID (replaces slick slider on detail pages)

   Layout: big hero on the left spans both rows, 4 thumbnails on the right.
   The hero uses aspect-ratio 3/2 (matching onOffice 1200×800 source images).
   Because the columns are 2fr 1fr 1fr, the math works out perfectly:
     hero height  = (2fr width) × (2/3)
     each row     = hero height / 2 = (1fr width) × (2/3)
     thumbnails   = 1fr wide × (1fr × 2/3) tall → also 3/2 ratio ✓
   ========================================================================== */

.roo-photo-grid {
    /* Full width – it lives outside .oo-details-main */
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    /* Rows auto-size from the items' aspect-ratios – no fixed heights */
    gap: 6px;
    border-radius: var(--roo-radius);
    overflow: hidden;
    margin-bottom: 32px;
}

/* Hero cell – spans both rows, height determined by the thumbnail rows.
   No aspect-ratio here: the 6px row-gap would make the container
   fractionally more landscape than 3:2, causing cover to trim top+bottom.
   Letting the grid size it means it ends up fractionally more portrait than
   3:2, so cover only trims the sides — nothing lost at the bottom. */
.roo-photo-grid__item:first-child {
    grid-row: 1 / 3;
}

/* Thumbnails – 3:2 drives the row heights that the hero inherits */
.roo-photo-grid__item:not(:first-child) {
    aspect-ratio: 3 / 2;
}

.roo-photo-grid__item {
    overflow: hidden;
    position: relative;
    background: var(--roo-bg);
    cursor: pointer;
}

.roo-photo-grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    pointer-events: none;
}

.roo-photo-grid__item:hover img {
    transform: scale(1.04);
}

/* "Alle Fotos" pill */
.roo-photo-grid__more {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 100px;
    padding: 8px 18px;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--roo-primary);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    z-index: 1;
}

.roo-photo-grid__more:hover {
    background: var(--roo-white);
    transform: translateY(-2px);
}

.roo-photo-grid__more svg {
    color: var(--roo-accent);
}

/* ==========================================================================
   LIGHTBOX
   Layout: fixed overlay using a 3-row grid so the image area gets all
   remaining space between the top bar and thumbnail strip.
   ========================================================================== */

.roo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(10, 18, 40, 0.97);
    display: grid;
    grid-template-rows: 60px 1fr 90px;
    grid-template-areas:
        "bar"
        "img"
        "strip";
    animation: rooLbIn 0.2s ease;
}

@keyframes rooLbIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.roo-lightbox-open {
    overflow: hidden;
}

/* Top bar */
.roo-lightbox__bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 2;
}

.roo-lightbox__counter {
    font-family: var(--roo-font);
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.5px;
}

.roo-lightbox__close {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--roo-white);
    transition: background 0.2s;
    flex-shrink: 0;
}

.roo-lightbox__close:hover {
    background: rgba(255,255,255,0.28);
}

/* Image area – takes all remaining vertical space */
.roo-lightbox__img-wrap {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px 100px; /* side padding keeps image clear of nav arrows */
    box-sizing: border-box;
    min-height: 0; /* essential for grid children to shrink */
}

.roo-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7);
    transition: opacity 0.18s ease;
}

/* Prev / next – vertically centred in the img row, not the whole screen */
.roo-lightbox__nav {
    position: fixed;
    top: calc(60px + (100vh - 60px - 90px) / 2);
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--roo-white);
    transition: background 0.2s;
    z-index: 3;
}

.roo-lightbox__nav:hover {
    background: rgba(255,255,255,0.28);
}

.roo-lightbox__nav--prev { left: 16px; }
.roo-lightbox__nav--next { right: 16px; }

/* Thumbnail strip */
.roo-lightbox__strip {
    grid-area: strip;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

.roo-lightbox__strip::-webkit-scrollbar { display: none; }

.roo-lightbox__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: rgba(255,255,255,0.08);
    transition: border-color 0.18s, opacity 0.18s;
    opacity: 0.5;
}

.roo-lightbox__thumb.--active {
    border-color: var(--roo-accent);
    opacity: 1;
}

.roo-lightbox__thumb:hover {
    opacity: 0.85;
}

.roo-lightbox__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Photo grid – responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .roo-photo-grid {
        grid-template-columns: 3fr 2fr;
    }

    /* Only show first 3 cells on tablets */
    .roo-photo-grid__item:nth-child(n+4) {
        display: none;
    }

    .roo-photo-grid__item:first-child {
        grid-row: 1 / 3;
    }
}

@media (max-width: 600px) {
    /* Single column: hero full width, 2 thumbnails below */
    .roo-photo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .roo-photo-grid__item:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        aspect-ratio: 4 / 3;
    }

    .roo-photo-grid__item:nth-child(n+4) {
        display: none;
    }

    .roo-lightbox__img-wrap {
        padding: 12px 60px;
    }

    .roo-lightbox__nav {
        width: 48px;
        height: 48px;
        top: calc(60px + (100vh - 60px - 90px) / 2);
    }

    .roo-lightbox__nav--prev { left: 8px; }
    .roo-lightbox__nav--next { right: 8px; }

    .roo-lightbox__thumb {
        width: 60px;
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   Highlights (key fact pills on detail page)
   -------------------------------------------------------------------------- */
.oo-details-highlights-headline {
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--roo-muted);
    margin-bottom: 14px;
}

.oo-details-highlights-table {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--roo-border);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.oo-details-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--roo-bg);
    border-radius: var(--roo-radius-sm);
    padding: 12px 18px;
    min-width: 120px;
    flex: 1;
    gap: 4px;
}

.oo-details-highlight__label {
    font-family: var(--roo-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--roo-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.oo-details-highlight__label svg {
    color: var(--roo-accent);
    flex-shrink: 0;
}

.oo-details-highlight__value {
    font-family: var(--roo-font);
    font-size: 18px;
    font-weight: 800;
    color: var(--roo-primary);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Fact table (detail page)
   -------------------------------------------------------------------------- */
.oo-detailstable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 28px;
}

.oo-details-fact__label {
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--roo-text);
    width: auto;
    padding: 10px 0;
    border-bottom: 1px solid var(--roo-border);
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.oo-details-fact__label svg {
    color: var(--roo-accent);
    flex-shrink: 0;
    opacity: 0.8;
}

.oo-details-fact__value {
    font-family: var(--roo-font);
    font-size: 13px;
    color: var(--roo-muted);
    width: auto;
    padding: 10px 0;
    border-bottom: 1px solid var(--roo-border);
    list-style: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Free text sections
   -------------------------------------------------------------------------- */
.oo-detailsfreetext {
    padding: 28px 0;
    border-bottom: 1px solid var(--roo-border);
}

.oo-detailsfreetext h2,
.oo-details-energy-certificate h2,
.oo-detailsmap h2,
.oo-area-butler h2,
.oo-detailspricecalculator h2 {
    font-family: var(--roo-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--roo-dark);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--roo-accent);
    /* block keeps heading on its own line; fit-content keeps the
       accent underline only as wide as the heading text */
    display: block;
    width: fit-content;
}

.oo-detailsfreetext p,
.oo-detailsfreetext br + br {
    font-size: 14px;
    line-height: 1.7;
    color: var(--roo-text);
}

/* Virtual tour / YouTube buttons injected into free text */
.roo-tour-btn,
.roo-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 11px 22px;
    background: var(--roo-primary);
    border-radius: var(--roo-radius-sm);
    color: var(--roo-white) !important;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s;
}

.roo-tour-btn:hover,
.roo-video-btn:hover {
    background: var(--roo-accent);
    color: var(--roo-white) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.roo-video-btn {
    background: #c00;    /* red tint for video */
}

.roo-video-btn:hover {
    background: #e00;
}

/* --------------------------------------------------------------------------
   Detail map + sub-sections
   -------------------------------------------------------------------------- */
.oo-detailsmap,
.oo-area-butler,
.oo-detailspricecalculator,
.oo-units {
    padding: 28px 0;
    border-bottom: 1px solid var(--roo-border);
}

/* --------------------------------------------------------------------------
   Energy certificate
   -------------------------------------------------------------------------- */
.oo-details-energy-certificate {
    padding: 28px 0;
    border-bottom: 1px solid var(--roo-border);
}

.oo-details-energy-certificate .segment.selected {
    background: var(--roo-accent) !important;
}

/* --------------------------------------------------------------------------
   Detail view – photo grid sits full-width above the main+sidebar columns.
   The .oo-detailview flex container wraps, so the grid (width:100%) takes
   the first row, then main (75%) and sidebar (25%) flow on the next row.
   -------------------------------------------------------------------------- */
.roo-photo-grid {
    /* Ensure it's treated as a 100% wide flex item */
    flex: 0 0 100%;
}

/* --------------------------------------------------------------------------
   Sidebar – sticky so it stays visible while scrolling the long main column
   -------------------------------------------------------------------------- */
.oo-details-sidebar {
    padding: 0 15px;
    position: sticky;
    top: 80px;           /* adjust if your sticky header is taller/shorter */
    align-self: flex-start;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
}

.oo-details-sidebar::-webkit-scrollbar { display: none; }

/* Contact card */
.oo-asp {
    background: var(--roo-bg);
    border-radius: var(--roo-radius);
    padding: 20px 24px 16px;
    margin-bottom: 24px;
    border-bottom: none;
}

.oo-asp h2 {
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--roo-muted);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--roo-border);
}

.oo-aspinfo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.oo-contact-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--roo-white);
    box-shadow: 0 4px 16px rgba(27,58,107,0.15);
    margin-bottom: 12px;
}

.oo-contact-info p {
    font-family: var(--roo-font);
    font-size: 13px;
    color: var(--roo-text);
    margin: 2px 0;
}

.oo-aspname {
    font-weight: 700;
    font-size: 16px;
    color: var(--roo-dark);
}

.oo-asplocation {
    font-size: 12px;
    color: var(--roo-muted);
}

/* Company/firm name always uppercase, regular weight */
.oo-aspfirm,
.oo-aspcompany {
    text-transform: uppercase !important;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--roo-dark);
}

.oo-field-label {
    font-family: var(--roo-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--roo-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 8px;
    margin-bottom: 2px;
    text-align: left;
    width: 100%;
}

.oo-aspinfo.oo-contact-info {
    width: 100%;
    text-align: left;
    padding: 0 !important;
    margin: 0 !important;
}

/* Phone / email links in contact card */
.oo-aspinfo.oo-contact-info a {
    color: var(--roo-accent);
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
}
.oo-aspinfo.oo-contact-info a:hover {
    color: var(--roo-primary);
    text-decoration: underline;
}

/* "Email schreiben" button */
.roo-email-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 2px solid var(--roo-accent);
    border-radius: var(--roo-radius-sm);
    color: var(--roo-accent) !important;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
}

.roo-email-btn:hover {
    background: var(--roo-accent);
    color: var(--roo-white) !important;
    text-decoration: none !important;
}

/* "Kontaktieren Sie mich" WhatsApp button */
.roo-whatsapp-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 18px;
    background: #25D366;
    border-radius: var(--roo-radius-sm);
    color: #fff !important;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    box-sizing: border-box;
}

.roo-whatsapp-btn:hover {
    background: #1ebe5c;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Clickable phone links – larger tap target on mobile */
@media (max-width: 767px) {
    .oo-aspinfo.oo-contact-info a[href^="tel:"] {
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
    }
}

/* Documents / expose link */
.oo-detailsexpose h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--roo-muted);
    border-bottom-color: var(--roo-border);
}

.oo-detailsexpose a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--roo-accent);
    text-decoration: none;
    border: 2px solid var(--roo-accent);
    border-radius: var(--roo-radius-sm);
    padding: 10px 18px;
    transition: all 0.2s;
    margin-top: 8px;
}

.oo-detailsexpose a:hover {
    background: var(--roo-accent);
    color: var(--roo-white);
}

/* Video / tour sidebar sections */
.oo-asp.oo-videos h2,
.oo-asp.oo-tours h2,
.oo-asp.oo-links h2,
.oo-asp.oo-objects h2 {
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Contact form (detail page inline form)
   -------------------------------------------------------------------------- */
.detail-contact-form {
    margin-top: 48px;
    background: var(--roo-bg);
    border-radius: var(--roo-radius);
    padding: 40px;
}

.detail-contact-form h2,
.detail-contact-form h3 {
    font-family: var(--roo-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--roo-dark);
    margin-bottom: 20px;
}

/* onOffice form fields inside contact form */
.detail-contact-form .oo-form label {
    font-family: var(--roo-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--roo-muted);
    margin-bottom: 6px;
}

.detail-contact-form .oo-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.detail-contact-form .oo-form textarea,
.detail-contact-form .oo-form select {
    font-family: var(--roo-font);
    border: 1px solid var(--roo-border);
    border-radius: var(--roo-radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    background: var(--roo-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.detail-contact-form .oo-form input:focus,
.detail-contact-form .oo-form textarea:focus {
    border-color: var(--roo-accent);
    box-shadow: 0 0 0 3px rgba(0,159,227,0.12);
    outline: none;
}

.detail-contact-form .oo-form input[type="submit"] {
    background: var(--roo-accent);
    border-radius: var(--roo-radius-sm);
    font-family: var(--roo-font);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 14px 32px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    color: var(--roo-white);
}

.detail-contact-form .oo-form input[type="submit"]:hover {
    background: var(--roo-primary);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   General oo-form styles (contact / applicant forms)
   -------------------------------------------------------------------------- */
.oo-form label {
    font-family: var(--roo-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--roo-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.oo-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.oo-form textarea {
    font-family: var(--roo-font);
    border: 1px solid var(--roo-border);
    border-radius: var(--roo-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--roo-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5;
}

.oo-form input:focus,
.oo-form textarea:focus,
.oo-detailview a:focus,
.oo-searchformfield input:focus,
.ts-wrapper.focus,
.oo-post-nav-links a:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid var(--roo-accent);
    border-color: var(--roo-accent);
    box-shadow: 0 0 0 3px rgba(0,159,227,0.12);
}

.oo-form input[type="submit"] {
    background: var(--roo-accent);
    border: none;
    border-radius: var(--roo-radius-sm);
    color: var(--roo-white);
    font-family: var(--roo-font);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    padding: 12px 28px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

/* leadform nav */
.leadform-back,
.leadform-forward {
    font-family: var(--roo-font);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--roo-radius-sm);
    padding: 12px 24px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--roo-primary);
}

.leadform-back {
    background: var(--roo-bg);
    color: var(--roo-text) !important;
    border: 1px solid var(--roo-border);
}

.leadform-forward {
    background: var(--roo-accent);
    color: var(--roo-white) !important;
}

/* --------------------------------------------------------------------------
   Tom Select (dropdowns)
   -------------------------------------------------------------------------- */
.ts-dropdown,
.ts-control,
.ts-control input {
    font-family: var(--roo-font);
    font-size: 13.5px;
    color: var(--roo-text);
    border-color: var(--roo-border);
}

.ts-control {
    border-radius: var(--roo-radius-sm);
    background: var(--roo-bg);
    height: auto;
    min-height: 44px;
    padding: 6px 12px;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: var(--roo-bg);
    color: var(--roo-primary);
}

.ts-dropdown .option.selected {
    font-weight: 700;
    color: var(--roo-primary);
}

/* --------------------------------------------------------------------------
   Similar estates
   -------------------------------------------------------------------------- */
.oo-similar {
    width: 100%;
    padding-top: 40px;
}

.oo-similar h2 {
    font-family: var(--roo-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--roo-dark);
    margin-bottom: 24px;
}

#oo-similarframe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

#oo-similarframe .oo-listobject {
    width: auto !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .oo-listframe {
        grid-template-columns: repeat(2, 1fr);
    }
    #oo-similarframe {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .oo-listframe {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .oo-details-sidebar {
        width: 50%;
        position: sticky; /* keep sticky on tablet */
    }

    .oo-detailstable {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .oo-listframe {
        grid-template-columns: 1fr;
    }

    .oo-detailview {
        flex-direction: column;
    }

    .oo-details-sidebar {
        width: 100%;
        padding: 0;
        position: static; /* unstick on mobile – it's full width anyway */
        max-height: none;
    }

    .oo-details-main {
        padding: 0;
    }

    #oo-similarframe {
        grid-template-columns: 1fr;
    }

    .detail-contact-form {
        padding: 24px;
    }

    .oo-searchformfield {
        width: 100%;
    }

    .oo-details-highlights-table {
        gap: 8px;
    }

    .oo-details-highlight {
        min-width: calc(50% - 8px);
    }

    .oo-detailstable {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .oo-details-sidebar {
        width: 100%;
    }

    .oo-detailstable {
        grid-template-columns: 1fr 1fr;
    }

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

/* --------------------------------------------------------------------------
   Units table
   -------------------------------------------------------------------------- */
.oo-units__body .oo-units__row {
    border-radius: var(--roo-radius-sm);
    border-top: none;
    background: var(--roo-bg);
    box-shadow: none;
}

.oo-unitslink a {
    background: var(--roo-accent) !important;
    border-radius: var(--roo-radius-sm) !important;
    font-family: var(--roo-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 16px;
}

@media (min-width: 1200px) {
    .oo-unitslink a {
        background: transparent !important;
        color: var(--roo-accent) !important;
        text-decoration: underline !important;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   Misc tweaks
   -------------------------------------------------------------------------- */

/* Remove inline style blue from video links */
.oo-video a[style*="color: #0073aa"],
.oo-asp a[style*="color: #0073aa"] {
    color: var(--roo-accent) !important;
}

/* onOffice style override: map */
.oo-detailsmap #map,
.oo-estate-map #map,
.oo-detailsmap #gmap,
.oo-estate-map #gmap {
    border-radius: var(--roo-radius-sm);
    overflow: hidden;
}

/* Form validation states */
.oo-form.validated input:invalid,
.oo-form.validated textarea:invalid,
.oo-form .is-invalid {
    border-color: #DC2625;
}

.oo-form.validated input:required:valid,
.oo-form.validated textarea:required:valid {
    border-color: #28a745;
}