/* ==========================================================================
   Locally Visible – Website-Kit (Design-Layer)
   Overrides the default onOffice plugin styles to match the customer 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 {
    --lvwk-primary:   #1B3A6B;
    --lvwk-accent:    #009FE3;
    --lvwk-bg:        #F0F2F5;
    --lvwk-dark:      #0F2247;
    --lvwk-text:      #1E2D3D;
    --lvwk-muted:     #64748b;
    --lvwk-border:    #E3E6EB;
    --lvwk-white:     #ffffff;
    --lvwk-radius:    24px;
    --lvwk-radius-sm: 12px;
    --lvwk-font:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lvwk-shadow:    0 2px 20px rgba(27, 58, 107, 0.08);
    --lvwk-shadow-lg: 0 12px 48px rgba(27, 58, 107, 0.16);
    --lvwk-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 */
    --lvwk-badge-sale:      #0F6FBF;
    --lvwk-badge-sale-text: #ffffff;
    --lvwk-badge-rent:      #D9EDFA;
    --lvwk-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(--lvwk-font);
    color: var(--lvwk-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(--lvwk-font-heading, var(--lvwk-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(--lvwk-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(--lvwk-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(--lvwk-font);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius-sm);
    padding: 8px 12px;
    background: var(--lvwk-white);
}

/* --------------------------------------------------------------------------
   List grid
   -------------------------------------------------------------------------- */
.oo-listframe {
    display: grid;
    grid-template-columns: repeat(var(--lvwk-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(--lvwk-radius);
    overflow: hidden;
    background: var(--lvwk-white);
    box-shadow: var(--lvwk-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(--lvwk-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(--lvwk-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(--lvwk-primary) !important;
    color: var(--lvwk-white) !important;
    font-family: var(--lvwk-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.
   -------------------------------------------------------------------------- */
.lvwk-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(--lvwk-accent);
    color: var(--lvwk-white);
    font-family: var(--lvwk-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;
}

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

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

.lvwk-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. */
.lvwk-mkt-badge.--sale,
.lvwk-mkt-badge.--both {
    background: var(--lvwk-badge-sale);
    color: var(--lvwk-badge-sale-text);
}

.lvwk-mkt-badge.--rent {
    background: var(--lvwk-badge-rent);
    color: var(--lvwk-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(--lvwk-font-heading, var(--lvwk-font));
    font-size: 15px;
    font-weight: 700;
    color: var(--lvwk-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 .lvwk-card-facts pills via JS
   -------------------------------------------------------------------------- */
.oo-listinfotable {
    display: none;
}

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

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

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

.lvwk-card-fact svg {
    color: var(--lvwk-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(--lvwk-accent) !important;
    color: var(--lvwk-white) !important;
    font-family: var(--lvwk-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 13px 24px;
    border-radius: var(--lvwk-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(--lvwk-primary) !important;
    color: var(--lvwk-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(--lvwk-accent);
    outline-offset: 3px;
    background: var(--lvwk-primary) !important;
}

/* Favorites / watchlist button */
button.favorize {
    background: transparent !important;
    color: var(--lvwk-primary) !important;
    border: 2px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius-sm);
    font-family: var(--lvwk-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(--lvwk-accent);
    color: var(--lvwk-accent) !important;
    background: transparent !important;
}

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

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

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

.lvwk-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid var(--lvwk-accent);
    border-radius: var(--lvwk-radius-sm);
    color: var(--lvwk-primary);
    font-family: var(--lvwk-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;
}

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

.lvwk-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(--lvwk-font);
    font-weight: 600;
    border-radius: var(--lvwk-radius-sm);
    border: 1px solid var(--lvwk-border);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--lvwk-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

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

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

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

.oo-searchformfieldwrap {
    gap: 0;
}

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

.oo-searchformfield label {
    font-family: var(--lvwk-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--lvwk-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(--lvwk-font);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--lvwk-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
}

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

.oo-searchformfield input[type="submit"],
.oo-form input[type="submit"] {
    background: var(--lvwk-accent) !important;
    border: none;
    border-radius: var(--lvwk-radius-sm);
    color: var(--lvwk-white);
    font-family: var(--lvwk-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(--lvwk-primary) !important;
    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(--lvwk-font-heading, var(--lvwk-font));
    font-size: clamp(1.75rem, 3vw, 2rem) !important;
    font-weight: 400;
    color: var(--lvwk-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(--lvwk-primary);
    color: var(--lvwk-white);
    font-family: var(--lvwk-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
   -------------------------------------------------------------------------- */
.lvwk-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 ✓
   ========================================================================== */

.lvwk-photo-grid {
    /* Full width – it lives outside .oo-details-main */
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    /* Beide Reihen gleich hoch und zusammen so hoch wie das grosse Bild.
       Vorher bestimmten die Miniaturen ueber ihr Seitenverhaeltnis die
       Reihenhoehe, und das grosse Bild erbte die Summe - durch Rundung blieb
       unten ein paar Pixel Rest, der wie ein ungleicher Abstand aussah.
       Jetzt gibt das grosse Bild die Hoehe vor, die Reihen teilen sie exakt,
       und die Miniaturen fuellen ihre Zelle (object-fit: cover). */
    gap: 12px;
    margin-bottom: 40px;
}

/* 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. */
.lvwk-photo-grid__item:first-child {
    grid-row: 1 / 3;
    min-height: 0;
}

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

.lvwk-photo-grid__item {
    overflow: hidden;
    position: relative;
    background: var(--lvwk-bg);
    cursor: pointer;
    /* Jede Kachel einzeln gerundet statt nur die vier Aussenecken des
       Rasters: bei 12 px Abstand sehen halbierte Ecken nach Fehler aus. */
    border-radius: var(--lvwk-radius);
}

/* Die Bilder liegen absolut in ihrer Kachel.
   Grund: mit height:100% in einer Zelle ohne feste Hoehe faellt der Browser auf
   die natuerliche Bildhoehe zurueck. Beim grossen Bild links zog das die beiden
   Reihen auf, waehrend die Miniaturen bei ihrem Seitenverhaeltnis 3:2 blieben -
   unter ihnen blieb dann ein Streifen Hintergrund stehen, und zwar nur bei
   Objekten, deren erstes Foto hochformatiger war als 3:2.
   Absolut positioniert traegt kein Bild mehr zur Hoehe bei: die Reihen kommen
   allein aus dem Seitenverhaeltnis der Miniaturen, das grosse Bild spannt
   beide Reihen und fuellt. */
.lvwk-photo-grid__item img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    pointer-events: none;
}

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

/* "Alle Fotos" pill */
/* Selektor mit Elternklasse und !important auf Grund und Schrift: Themes
   gestalten jedes <button> mit dunklem Grund und weißer Schrift, und das
   Symbol in Akzentfarbe verschwindet dann darauf. Bei Reuter fiel das nicht
   auf, weil Theme-Grund und Akzent beide blau waren. */
.lvwk-photo-grid .lvwk-photo-grid__more {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border: none !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    font-family: var(--lvwk-font);
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--lvwk-primary) !important;
    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;
}

.lvwk-photo-grid .lvwk-photo-grid__more:hover {
    background: var(--lvwk-white) !important;
    transform: translateY(-2px);
}

.lvwk-photo-grid .lvwk-photo-grid__more svg {
    color: var(--lvwk-accent);
    flex-shrink: 0;
}

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

.lvwk-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.lvwk-lightbox-open {
    overflow: hidden;
}

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

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

.lvwk-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(--lvwk-white);
    transition: background 0.2s;
    flex-shrink: 0;
}

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

/* Image area – takes all remaining vertical space */
.lvwk-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 */
}

.lvwk-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 */
.lvwk-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(--lvwk-white);
    transition: background 0.2s;
    z-index: 3;
}

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

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

/* Thumbnail strip */
.lvwk-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;
}

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

.lvwk-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;
}

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

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

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

/* --------------------------------------------------------------------------
   Photo grid – responsive
   -------------------------------------------------------------------------- */

/* Die Zaehlung gibt es zweimal: fuer das fuenfteilige Raster und fuer das
   dreiteilige. Sichtbar ist immer nur die, deren Kachel auch die letzte ist. */
.lvwk-photo-grid .lvwk-photo-grid__more--narrow {
    display: none;
}

@media (max-width: 900px) {
    .lvwk-photo-grid .lvwk-photo-grid__more--wide {
        display: none;
    }

    .lvwk-photo-grid .lvwk-photo-grid__more--narrow {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .lvwk-photo-grid {
        grid-template-columns: 3fr 2fr;
    }

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

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

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

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



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

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

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

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

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

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

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

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

.oo-details-highlight__label {
    font-family: var(--lvwk-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--lvwk-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(--lvwk-accent);
    flex-shrink: 0;
}

.oo-details-highlight__value {
    font-family: var(--lvwk-font);
    font-size: 18px;
    font-weight: 800;
    color: var(--lvwk-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(--lvwk-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--lvwk-text);
    width: auto;
    padding: 10px 0;
    border-bottom: 1px solid var(--lvwk-border);
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

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

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

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

.oo-detailsfreetext h2,
.oo-details-energy-certificate h2,
.oo-detailsmap h2,
.oo-area-butler h2,
.oo-detailspricecalculator h2 {
    font-family: var(--lvwk-font-heading, var(--lvwk-font));
    font-size: 18px;
    font-weight: 700;
    color: var(--lvwk-dark);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--lvwk-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(--lvwk-text);
}

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

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

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

.lvwk-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(--lvwk-border);
}

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

.oo-details-energy-certificate .segment.selected {
    background: var(--lvwk-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.
   -------------------------------------------------------------------------- */
.lvwk-photo-grid {
    /* Ensure it's treated as a 100% wide flex item */
    flex: 0 0 100%;
}

/* Der Objektbereich kommt aus dem onOffice-Template und bringt keinen Abstand
   nach unten mit – die sticky Leiste stand am Seitenende direkt auf der
   Fußzeile. Der Abstand gehört hierher und nicht an den Footer, der ist auf
   allen Seiten gleich und hat dort seinen Abstand aus dem Seitenlayout. */
.oo-detailview {
    margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   Sidebar – sticky so it stays visible while scrolling the long main column
   -------------------------------------------------------------------------- */
.oo-details-sidebar {
    padding: 0 0 0 32px;
    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(--lvwk-bg);
    border-radius: var(--lvwk-radius);
    padding: 20px 24px 16px;
    margin-bottom: 24px;
    border-bottom: none;
}

.oo-asp h2 {
    font-family: var(--lvwk-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--lvwk-muted);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lvwk-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(--lvwk-white);
    box-shadow: 0 4px 16px rgba(27,58,107,0.15);
    margin-bottom: 12px;
}

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

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

.oo-asplocation {
    font-size: 12px;
    color: var(--lvwk-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(--lvwk-dark);
}

.oo-field-label {
    font-family: var(--lvwk-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--lvwk-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(--lvwk-accent);
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
}
.oo-aspinfo.oo-contact-info a:hover {
    color: var(--lvwk-primary);
    text-decoration: underline;
}

/* "Email schreiben" button */
.lvwk-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(--lvwk-accent);
    border-radius: var(--lvwk-radius-sm);
    color: var(--lvwk-accent) !important;
    font-family: var(--lvwk-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;
}

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

/* "Kontaktieren Sie mich" WhatsApp button */
.lvwk-whatsapp-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 18px;
    background: #25D366;
    border-radius: var(--lvwk-radius-sm);
    color: #fff !important;
    font-family: var(--lvwk-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;
}

.lvwk-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(--lvwk-muted);
    border-bottom-color: var(--lvwk-border);
}

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

.oo-detailsexpose a:hover {
    background: var(--lvwk-accent);
    color: var(--lvwk-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(--lvwk-bg);
    border-radius: var(--lvwk-radius);
    padding: 40px;
}

/* In der Seitenleiste (dorthin verschiebt es lvwk-enhance.js): kompakter,
   und die Leiste darf dann nicht mehr auf Bildschirmhöhe gedeckelt sein,
   sonst scrollt das Formular in ihr weg. */
.oo-details-sidebar .detail-contact-form {
    margin-top: 24px;
    padding: 24px;
}
.oo-details-sidebar .detail-contact-form h2,
.oo-details-sidebar .detail-contact-form h3 {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 16px;
}
.oo-details-sidebar .detail-contact-form .oo-form > label {
    display: block;
    margin-bottom: 14px;
}
.oo-details-sidebar .detail-contact-form .oo-form .oo-label-text {
    display: block;
}
.oo-details-sidebar .detail-contact-form .oo-form input:not([type="checkbox"]):not([type="submit"]),
.oo-details-sidebar .detail-contact-form .oo-form textarea {
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
}
/* Checkbox: Kaestchen links, Text rechts, in normaler Schreibweise.
   onOffice setzt das Kaestchen ans Ende des Labels; lvwk-enhance.js
   stellt es nach vorn. */
.oo-details-sidebar .detail-contact-form .oo-form label:has(input[type="checkbox"]) .oo-label-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--lvwk-text);
    line-height: 1.4;
}
.oo-details-sidebar .detail-contact-form .oo-form label:has(input[type="checkbox"]) input[type="checkbox"] {
    margin: 2px 0 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--lvwk-accent);
}
.oo-details-sidebar .detail-contact-form .oo-form .error {
    display: none;
}
.oo-details-sidebar .detail-contact-form .oo-gdpr-hint-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--lvwk-muted);
    margin: 0 0 16px;
}
.oo-details-sidebar .detail-contact-form .oo-gdpr-hint-text a {
    color: var(--lvwk-accent);
    text-decoration: underline;
}
.oo-details-sidebar .detail-contact-form .oo-form input[type="submit"] {
    width: 100%;
}

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

/* onOffice form fields inside contact form */
.detail-contact-form .oo-form label {
    font-family: var(--lvwk-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--lvwk-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(--lvwk-font);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    background: var(--lvwk-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(--lvwk-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(--lvwk-accent) !important;
    border-radius: var(--lvwk-radius-sm);
    font-family: var(--lvwk-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(--lvwk-white) !important;
}

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

/* --------------------------------------------------------------------------
   General oo-form styles (contact / applicant forms)
   -------------------------------------------------------------------------- */
.oo-form label {
    font-family: var(--lvwk-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--lvwk-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(--lvwk-font);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--lvwk-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(--lvwk-accent);
    border-color: var(--lvwk-accent);
    box-shadow: 0 0 0 3px rgba(0,159,227,0.12);
}

.oo-form input[type="submit"] {
    background: var(--lvwk-accent);
    border: none;
    border-radius: var(--lvwk-radius-sm);
    color: var(--lvwk-white);
    font-family: var(--lvwk-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(--lvwk-font);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--lvwk-radius-sm);
    padding: 12px 24px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--lvwk-primary);
}

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

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

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

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

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

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

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

.oo-similar h2 {
    font-family: var(--lvwk-font-heading, var(--lvwk-font));
    font-size: 20px;
    font-weight: 800;
    color: var(--lvwk-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;
    }

    /* Auf dem Handy stellt der Container der Seite den Seitenabstand. Die
       eigenen 15 px des Kits kommen dort obendrauf, und da die Karten nur eine
       Spalte breit sind, fehlt jeder dieser Pixel an der Karte selbst. Bei IVB
       standen so 20 px (Vorlage) + 20 px (Seite) + 15 px (hier) = 55 px neben
       einer 283 px schmalen Karte. Alle drei Blöcke tragen denselben Wert und
       müssen deshalb gemeinsam fallen, sonst verspringt die Ausrichtung
       zwischen Überschrift, Sortierleiste und Karten. */
    .oo-listframe,
    .oo-listheadline,
    .oo-estate-sort {
        padding-left: 0;
        padding-right: 0;
    }

    .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(--lvwk-radius-sm);
    border-top: none;
    background: var(--lvwk-bg);
    box-shadow: none;
}

.oo-unitslink a {
    background: var(--lvwk-accent) !important;
    border-radius: var(--lvwk-radius-sm) !important;
    font-family: var(--lvwk-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(--lvwk-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(--lvwk-accent) !important;
}

/* onOffice style override: map */
.oo-detailsmap #map,
.oo-estate-map #map,
.oo-detailsmap #gmap,
.oo-estate-map #gmap {
    border-radius: var(--lvwk-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;
}

/* --------------------------------------------------------------------------
   Anfrageformular als Karte (onOffice-Kontakt-/Interessentenformular)

   Das Standardtemplate von onOffice gibt die Felder als reine Kette von
   <label>-Elementen aus, ohne Raster und ohne Rahmen. Auf einer Objektseite
   steht das Formular damit als lose Liste unter dem Objekt, waehrend alles
   darueber in Karten sitzt.

   Zweispaltig ab Tablet, Nachricht und Absenden ueber die volle Breite. Der
   Absenden-Knopf laeuft sonst ueber die ganze Zeile, weil das Theme
   input[type=submit] auf 100% stellt.
   -------------------------------------------------------------------------- */
h3:has(+ form.oo-form),
h2:has(+ form.oo-form) {
    margin: 0 0 20px;
}

form.oo-form-default {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 20px;
    align-items: start;
    background: var(--lvwk-white);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius);
    padding: 28px;
}

@media (min-width: 768px) {
    form.oo-form-default {
        grid-template-columns: 1fr 1fr;
        padding: 36px;
    }
}

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

form.oo-form-default > label > .oo-label-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

form.oo-form-default label input:not([type="checkbox"]):not([type="radio"]),
form.oo-form-default label textarea,
form.oo-form-default label select {
    width: 100%;
    margin-top: 6px;
}

/* Nachricht, Einwilligung und Absenden ueber die volle Breite */
form.oo-form-default > label:has(textarea),
form.oo-form-default > label:has(input[type="checkbox"]),
form.oo-form-default > .oo-form-message,
form.oo-form-default > input[type="submit"] {
    grid-column: 1 / -1;
}

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

/* Einwilligungshaken: Kastchen und Text nebeneinander, Text nicht in
   Versalien - er ist ein Satz, keine Feldbeschriftung. */
form.oo-form-default > label:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--lvwk-text);
}

form.oo-form-default > label:has(input[type="checkbox"]) .oo-label-text {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

form.oo-form-default input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--lvwk-primary);
}

form.oo-form-default > input[type="submit"] {
    width: auto;
    justify-self: start;
    padding: 14px 34px;
    background: var(--lvwk-primary);
}

form.oo-form-default > input[type="submit"]:hover {
    background: var(--lvwk-accent);
}

form.oo-form-default .error,
form.oo-form-default .oo-form-error {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Ansprechpartner-Karte: Symbol und Text auseinanderhalten

   onOffice setzt das Telefon- und das Briefsymbol als inline-SVG direkt vor
   den Text, ohne Abstand - die Nummer klebt am Hoerer.
   -------------------------------------------------------------------------- */
.oo-aspinfo.oo-contact-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.oo-aspinfo.oo-contact-info a svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.oo-asp .oo-field-label {
    margin-top: 14px;
    margin-bottom: 2px;
}

.oo-asp .oo-field-label:first-of-type {
    margin-top: 10px;
}

/* Hinweiszeile "Pflichtfelder" ueber die volle Breite, nicht als eigene Zelle */
form.oo-form-default > .oo-form-required {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--lvwk-muted);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* Beschriftung und Sternchen bleiben in einer Zeile, das Eingabefeld kommt
   darunter. Mit flex-direction:column wurde aus dem Sternchen eine eigene
   Zeile - es steht als eigenes <span> neben dem Text. */
form.oo-form-default > label > .oo-label-text {
    display: block;
}

form.oo-form-default label input:not([type="checkbox"]):not([type="radio"]),
form.oo-form-default label textarea,
form.oo-form-default label select {
    display: block;
    width: 100%;
    margin-top: 6px;
}

form.oo-form-default label span[aria-hidden="true"] {
    color: var(--lvwk-accent);
}

form.oo-form-default .oo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Einwilligung: Kaestchen vor den Text */
form.oo-form-default > label:has(input[type="checkbox"]) > .oo-label-text {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

form.oo-form-default > label:has(input[type="checkbox"]) input[type="checkbox"] {
    order: -1;
    margin-top: 2px;
}

/* Das Theme stellt jeden Absenden-Knopf auf volle Breite. */
form.oo-form-default > input[type="submit"] {
    width: auto !important;
    min-width: 200px;
    padding: 17px 38px;
    font-size: 13px;
    letter-spacing: 0.6px;
    border-radius: var(--lvwk-radius);
}

/* Fehlermeldungen stehen von Anfang an im Quelltext und werden erst bei der
   Pruefung eingeblendet. onOffice steuert das ueber aria-hidden, nicht ueber
   eine Klasse - wer .error pauschal auf display:block setzt, zeigt unter
   jedem leeren Feld eine Fehlermeldung an. */
form.oo-form-default .error[aria-hidden="true"] {
    display: none;
}

form.oo-form-default .error {
    display: block;
    color: #B3261E;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

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

/* --------------------------------------------------------------------------
   Eigentuemerformular (Bewertungsanfrage)

   Anderes Template als das Kontaktformular: die Felder liegen nicht direkt im
   <form>, sondern in Abschnitten unter je einer <h2>. Das Raster gehoert
   deshalb an die Abschnitte, nicht an das Formular.
   -------------------------------------------------------------------------- */
form.oo-form-owner {
    background: var(--lvwk-white);
    border: 1px solid var(--lvwk-border);
    border-radius: var(--lvwk-radius);
    padding: 28px;
}

@media (min-width: 768px) {
    form.oo-form-owner {
        padding: 36px;
    }
}

form.oo-form-owner > h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 32px 0 18px;
    color: var(--lvwk-primary);
}

form.oo-form-owner > h2:first-of-type {
    margin-top: 8px;
}

form.oo-form-owner > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 20px;
    align-items: start;
}

@media (min-width: 768px) {
    form.oo-form-owner > div {
        grid-template-columns: 1fr 1fr;
    }
}

form.oo-form-owner .oo-form-required {
    font-size: 12px;
    color: var(--lvwk-muted);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

form.oo-form-owner > div > label,
form.oo-form-owner > div > .oo-single-select,
form.oo-form-owner > div > .oo-multi-select {
    display: block;
    margin: 0;
    min-width: 0;
}

form.oo-form-owner label > .oo-label-text {
    display: block;
}

form.oo-form-owner label input:not([type="checkbox"]):not([type="radio"]),
form.oo-form-owner label textarea,
form.oo-form-owner select,
form.oo-form-owner .ts-wrapper {
    display: block;
    width: 100%;
    margin-top: 6px;
}

form.oo-form-owner label span[aria-hidden="true"] {
    color: var(--lvwk-accent);
}

form.oo-form-owner .oo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

form.oo-form-owner > div > label:has(textarea),
form.oo-form-owner > div > label:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
}

form.oo-form-owner textarea {
    min-height: 130px;
    resize: vertical;
}

form.oo-form-owner > div > label:has(input[type="checkbox"]) > .oo-label-text {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--lvwk-text);
}

form.oo-form-owner input[type="checkbox"] {
    order: -1;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--lvwk-primary);
}

form.oo-form-owner .error[aria-hidden="true"] {
    display: none;
}

form.oo-form-owner .error {
    display: block;
    color: #B3261E;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

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

form.oo-form-owner input[type="submit"] {
    width: auto !important;
    min-width: 200px;
    margin-top: 28px;
    padding: 17px 38px;
    font-size: 13px;
    letter-spacing: 0.6px;
    border-radius: var(--lvwk-radius);
    background: var(--lvwk-primary);
}

form.oo-form-owner input[type="submit"]:hover {
    background: var(--lvwk-accent);
}

/* --------------------------------------------------------------------------
   Kein Querscrollen auf dem Handy
   -------------------------------------------------------------------------- */

/* Rechtstexte enthalten lange, nicht trennbare Zeichenketten - Registernummern,
   Adressen von Aufsichtsbehoerden. Ohne Umbruchregel schiebt eine einzige
   solche Zeile die ganze Seite auf dem Handy nach rechts. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content,
.oo-detailview {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Die Energieskala von onOffice ist fuer eine Handybreite zu breit gebaut.
   Statt sie zu stauchen (die Buchstaben waeren nicht mehr lesbar) bekommt sie
   einen eigenen waagerechten Rollbereich. */
@media (max-width: 1024px) {
    /* Der Abschnitt muss mitrollen: die Zahl rechts neben dem letzten Balken
       (">250") liegt ausserhalb des inneren Behaelters. */
    .oo-details-energy-certificate,
    .energy-certificate-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .energy-certificate-container .segmented-bar {
        /* Platz fuer die Beschriftung ">250" rechts ausserhalb der Balken */
        min-width: 470px;
    }
}

/* Auf Tippgeraeten kein Zoom beim Beruehren: die Vergroesserung bleibt nach
   dem Tippen haengen und schiebt das Bild ueber den Bildschirmrand hinaus. */
@media (hover: none) {
    .lvwk-photo-grid__item:hover img {
        transform: none;
    }
}