/* =========================================================================
   Unternehmensfarbe
   -------------------------------------------------------------------------
   Das Theme verwendet als Akzentfarbe ein Orange/Orange-Rot, das fast
   ausschließlich über CSS-Variablen gesteuert wird (var(--ltn__secondary-color)
   u. a., 200+ Stellen). Statt jede Regel in der style.css anzufassen, werden
   hier zentral die Farb-Variablen auf die Unternehmensfarbe #500000 gesetzt.
   custom.css wird zuletzt geladen und überschreibt damit das Theme.
   ========================================================================= */
:root {
    --ltn__secondary-color:   #500000;       /* Haupt-Akzent (Buttons, Links, Icons) */
    --ltn__secondary-color-3: #500000;       /* Akzent-Variante (Verläufe/Hover)     */
    --border-color-4:         #500000;       /* Akzent-Rahmen                        */
    --orange:                 #500000;       /* Badges (.bg-orange)                  */
    --ltn__color-6:           #f3e8e8;       /* heller Akzent-Hintergrund (Tönung)   */
    --section-bg-2:           rgb(76,75,74); /* Footer & Top-Navi Hintergrund        */
    --section-bg-6:           rgb(76,75,74); /* Top-Navi Hintergrund                 */
    --section-bg-7:           rgb(76,75,74); /* Footer Copyright-Leiste              */
}

/* theme-btn-2 ist im Theme schwarz (--ltn__primary-color) und wechselt nur
   beim Hover in die Akzentfarbe. Da die Variable auch Texte/Flächen steuert,
   wird der Button hier gezielt auf die Unternehmensfarbe gesetzt. */
.theme-btn-2 {
    background-color: #500000;
}
.theme-btn-2:hover {
    background-color: #6e0000; /* etwas heller als Hover-Feedback */
}

/* =========================================================================
   Propstack-Bilder: einheitliche Zuschnitte
   -------------------------------------------------------------------------
   Die Fotos der Objekte kommen in gemischten Formaten von Propstack
   (Querformat 16:9, Hochformat 3:4 aus Handyfotos usw.). Das Theme erwartet
   gleich große Bilder – sonst springt vor allem der Hero-Slider (centerMode)
   und die Galerie wird ungleich hoch.

   Lösung: Jedes Bild bekommt einen festen Rahmen (aspect-ratio) und wird mit
   object-fit: cover mittig beschnitten – unabhängig vom Originalformat.
   Grundrisse werden bewusst NICHT beschnitten (object-fit: contain).
   ========================================================================= */

/* Hero-Slider (Detailseite) */
.ltn__img-slider-area .ltn__img-slide-item-4 > a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}
.ltn__img-slider-area .ltn__img-slide-item-4 img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Bildergalerie (Detailseite) */
.ltn__property-details-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}

/* Objekt-/Produktkarten (Übersicht + "Weitere Immobilien") */
.ltn__product-item .product-img > a {
    display: block;
    width: 100%;
}
.ltn__product-item .product-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

/* Grundrisse: vollständig anzeigen, nicht beschneiden */
.property-floorplan-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
}

/* =========================================================================
   Header-Navigation: rechtsbündig
   ========================================================================= */
.ltn__header-middle-area .header-menu-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* =========================================================================
   Header-Logo: 50 % der Originalgröße
   ========================================================================= */
.ltn__header-middle-area .site-logo img {
    width: 70px;
    height: auto;
}

/* =========================================================================
   Feature-Boxen (Our Main Focus): gleiche Höhe in der Reihe
   ========================================================================= */
.ltn__feature-area .col-lg-4,
.ltn__feature-area .col-sm-6 {
    display: flex;
}
.ltn__feature-item-6 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ltn__feature-item-6 .ltn__feature-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
    margin-top: auto;
}

/* =========================================================================
   Kategorie-Kacheln: einheitliche Titel-Höhe (immer zweizeilig)
   -------------------------------------------------------------------------
   Kacheln mit ein- und zweizeiligen Titeln bekommen durch den festen height-
   Wert dieselbe Gesamthöhe – gilt für Service-Seite und Homepage.
   ========================================================================= */
.ltn__category-item-5 a .category-title {
    height: 60px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   Badge „Geförderter Wohnraum" auf den Objektkarten
   -------------------------------------------------------------------------
   Auf den Karten (ltn__product-item-5) sind die Badges gleichfarbiger Text
   in der Unternehmensfarbe – keine farbigen Boxen. Damit „Geförderter
   Wohnraum" klar vom „Zur Miete"-Tag getrennt ist, steht ein Mittelpunkt
   dazwischen (nur, wenn ein Tag davor steht; sonst kein führendes Zeichen).
   Die absolute Positionierung des Theme-::before (Dreieck) wird zurückgesetzt.
   ========================================================================= */
.product-badge li.badge-subsidized:not(:first-child)::before {
    content: "·";
    display: inline-block;
    position: static;
    border: 0;
    width: auto;
    height: auto;
    margin: 0 7px;
    color: var(--ltn__secondary-color);
    font-weight: 700;
}