.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-431 .elementor-element.elementor-element-294ec58 .elementor-icon-wrapper{text-align:center;}.elementor-431 .elementor-element.elementor-element-294ec58.elementor-view-stacked .elementor-icon{background-color:#F1E7DB;}.elementor-431 .elementor-element.elementor-element-294ec58.elementor-view-framed .elementor-icon, .elementor-431 .elementor-element.elementor-element-294ec58.elementor-view-default .elementor-icon{color:#F1E7DB;border-color:#F1E7DB;}.elementor-431 .elementor-element.elementor-element-294ec58.elementor-view-framed .elementor-icon, .elementor-431 .elementor-element.elementor-element-294ec58.elementor-view-default .elementor-icon svg{fill:#F1E7DB;}.elementor-431 .elementor-element.elementor-element-294ec58 .elementor-icon{font-size:35px;}.elementor-431 .elementor-element.elementor-element-294ec58 .elementor-icon svg{height:35px;}.elementor-431 .elementor-element.elementor-element-e71e0dc{width:100%;max-width:100%;}.elementor-431 .elementor-element.elementor-element-a8f0f0a{width:100%;max-width:100%;}/* Start custom CSS for shortcode, class: .elementor-element-e71e0dc */.onoffice {
    max-width: 1920px !important;
}

/* 1. CONTAINER RESET (Zwingt alles untereinander) */
body .onoffice-list-container,
body .oo-listframe,
body .oo-list-container,
div[class*="onoffice-list"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1% !important; /* Abstand zwischen den Objekten */
}

body .oo-listobject {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0px;
}

/* 2. DIE KARTE (Das Layout-Gerüst) */
body .oo-listobjectwrap {
    width: 100% !important;
    display: grid !important;
    /* Bild 40% Breite, Rest Text */
    grid-template-columns: 40% 1fr !important; 
    gap: 50px; !important;
    
    /* Rahmen & Abstände */
    border: none !important;
    background: var(--Hintergrund) !important;
    
    box-shadow: none;
    
    border-radius: 35px;
    
    /* DEINE SCHRIFTART */
    font-family: "Jost", Sans-serif !important;
    color: var(--text) !important; 
    position: relative !important;
    
    padding: 15px;
}

/* 3. BILD (Links) */
body .oo-listobjectwrap .oo-listimage {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px;
}

body .oo-listobjectwrap .oo-listimage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important; 
}


/* 4. RECHTER BEREICH */
body .oo-listobjectwrap h3, 
body .oo-listobjectwrap .oo-list-title,
body .oo-listobjectwrap table {
    grid-column: 2 / 3 !important;
}

/* 7. PREIS (Oben Rechts über dem Titel) */
body .oo-listobjectwrap tr:last-child {
    position: absolute !important;
    top: -5px !important;
    right: 0 !important;
    display: block !important;
}

body .oo-listobjectwrap tr:last-child td {
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important; /* Fett */
    color: var(--text) !important;
    padding: 0 !important;
    border: none !important;
}

/* 8. FAKTEN (Details mit Trennlinien) */
body .oo-listobjectwrap table {
    display: block !important;
    border: none !important;
    margin-top: 15px !important; /* Abstand nach oben zum Titel */
}
body .oo-listobjectwrap tbody { display: block !important; }

/* HIER WIRD DIE LINIE GEMACHT */
body .oo-listobjectwrap tr { 
    display: flex !important; /* Flexbox sorgt für saubere Ausrichtung */
    align-items: baseline !important; /* Text auf einer Linie ausrichten */
    border: none !important;
    
    /* DIE TRENNLINIE: 1px dick, grau (#e0e0e0) */
    border-bottom: 1px solid var(--text) !important; 
    
    /* ABSTÄNDE UM DIE LINIE */
    padding-bottom: 8px !important; /* Platz zwischen Text und Linie */
    margin-bottom: 8px !important;  /* Platz unter der Linie zur nächsten Zeile */
}

/* Damit beim allerletzten Element (oft der Preis oben rechts) keine Linie ist */
body .oo-listobjectwrap tr:last-child {
    border-bottom: none !important;
}

/* Linke Spalte: LABEL (z.B. "Wohnfläche") */
body .oo-listobjectwrap td:nth-child(1) {
    display: inline-block !important;
    width: 140px !important; /* Feste Breite für eine gerade Kante */
    font-size: 13px !important;
    text-transform: uppercase !important; 
    font-weight: 600 !important; 
    color: #888 !important; /* Helles Grau für das Label */
    letter-spacing: 0.5px !important;
}

/* Rechte Spalte: WERT (z.B. "248 m²") */
body .oo-listobjectwrap td:nth-child(2) {
    display: inline-block !important;
    font-size: 15px !important;
    color: #444 !important; /* Dunkles Grau für den Wert */
    font-weight: 400 !important;
}

/* Alte Buttons verstecken */
body .oo-details-btn, body .btn { display: none !important; }

/* ============================================================
   10. DER "ÜBERALL-KLICKBAR" TRICK (FIX MIT BILD-LINK)
   ============================================================ */

/* Wir greifen den Link, der eigentlich nur um das Bild liegt... */
body .oo-listobjectwrap .oo-listimage a::before {
    content: "";
    
    /* ...und spannen ihn über die gesamte Karte (Container ist relative) */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    z-index: 50 !important; /* Liegt über allem */
    cursor: pointer !important;
    background: transparent !important;
}

/* Sicherstellen, dass der Link im Bild überhaupt Raum einnimmt */
body .oo-listobjectwrap .oo-listimage a {
    display: block !important;
}

/* --- RESPONSIVE (HANDY) --- */
@media (max-width: 768px) {
    body .oo-listobjectwrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 30px !important;
    }
    body .oo-listobjectwrap tr:nth-of-type(1),
    body .oo-listobjectwrap tr:last-child {
        position: static !important;
        margin-bottom: 10px !important;
    }
    body .oo-listobjectwrap h3 { margin-top: 0 !important; }
    body .oo-listobjectwrap::after {
        position: static !important;
        margin-top: 25px;
        text-align: left;
        display: inline-block;
    }
    
    body .oo-listheadline::after {
        font-size: 3em !important;
        hyphens: auto;
        line-height: 1.1em;
    }
}
/* =========================================
   ÜBERSCHRIFT UMBENENNEN (MIT ZÄHLER-RETTUNG)
   ========================================= */

/* 1. Den gesamten Container erst einmal unsichtbar schalten */
.oo-listheadline {
    visibility: hidden !important;
    position: relative !important;
    /* Wir lassen die Höhe auto, damit der Platz nicht kollabiert */
}

/* 2. Deinen NEUEN Titel ("Immobilienangebot") einfügen */
.oo-listheadline::after {
    content: "Referenzobjekte";
    margin-bottom: 35px;
    
    /* Wir machen nur diesen neuen Text sichtbar */
    visibility: visible !important;
    
    font-family: "Jost", sans-serif !important; 
    font-size: 4em !important; 
    text-align: center !important;
    font-weight: 400 !important;
    color: #333 !important;
    display: block !important;
}

/* 3. DEN ZÄHLER RETTEN ("Insgesamt wurden...") */
/* Wir greifen auf das Element innerhalb der Headline zu und schalten es wieder an */
.oo-listheadline div, 
.oo-listheadline span, 
.oo-listheadline small,
.oo-listheadline .oo-liststatus {
    visibility: visible !important;
    display: block !important;
    
    /* Falls der Zähler nun über dem neuen Titel klebt, schieben wir ihn runter: */
    margin-top: 5px !important; 
    padding-left: 0px !important; /* Ggf. anpassen */
    color: #444 !important; /* Farbe sicherstellen */
}

.oo-listtitle {
    text-align: left;
    font-weight: 500;
    color: var(--text);
    font-size: 1.3em;
    line-height: 1.3em;
}

.oo-listtd {
    border-bottom: 0.5px solid #E8CFB5 !important;
    padding: 5px 0px;
}

.oo-listobject:hover .oo-listobjectwrap {
    box-shadow: none;
    transform: translate(0px,-10px);
}

a.estate-status > span, div.estate-status > span {
    height: unset;
    border: none;
}

.oo-listheadline h1 {
    font-size: 0;
}/* End custom CSS */
/* Start custom CSS */@keyframes intro-logo-open {

  /* Ausgangszustand:
     Das Logo bleibt zunächst in seiner normalen Größe */
  0% {
    -webkit-mask-size:
      100% 100%,
      var(--logo-size) auto;

    mask-size:
      100% 100%,
      var(--logo-size) auto;

    opacity: 1;
    visibility: visible;
  }

  /* Das Logo wächst sehr stark und öffnet die Fläche */
  72% {
    -webkit-mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    opacity: 1;
    visibility: visible;
  }

  /* Verbleibende beige Zwischenräume ausblenden */
  99% {
    -webkit-mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    opacity: 0;
    visibility: visible;
  }

  /* Overlay vollständig deaktivieren */
  100% {
    -webkit-mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    mask-size:
      100% 100%,
      var(--intro-end-size) auto;

    opacity: 0;
    visibility: hidden;
  }
}

@keyframes intro-content-in {
  0% {
    transform: translate3d(0, 250px, 0);
    pointer-events: none;
  }

  1% {
    visibility: visible;
  }

  100% {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
}

@keyframes intro-menu-in {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -140px, 0);
    pointer-events: none;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
}

.oo-listinfotableview {
    display: block !important;
}/* End custom CSS */