/* Eigene Anpassungen S-Immobilien Kraichgau (Sitepackage, updatesicher) */

/* --- Merkzettel-Button im Header (Icon + Zähler-Badge) --- */
.openimmo-header-bookmarks {
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
.openimmo-header-bookmarks .openimmo-bookmarks-button {
    position: relative;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    padding: 4px;
}
.openimmo-header-bookmarks .openimmo-bookmarks-button:hover {
    color: var(--ltn__secondary-color, #ff5a3c);
}
.openimmo-header-bookmarks .openimmo-bookmarks-item-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ltn__secondary-color, #ff5a3c);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* Bei 0 Einträgen Badge dezent grau statt Akzentfarbe */
.openimmo-header-bookmarks .openimmo-bookmarks-button.openimmo-bookmarks-empty .openimmo-bookmarks-item-count {
    background: #adb5bd;
}

/* --- Merken-Icon (Herz) an der Immobilie: rot GEFUELLT, wenn auf der Merkliste --- */
/* Die Klasse "bookmarked" wird serverseitig (immobilie.isBookmarked) sowie
   per JS beim Klick auf .btn-bookmarks gesetzt/entfernt. Mehrere Buttons derselben
   Immobilie haelt bookmarks-sync.js zusammen. */
.product-hover-action li a.btn-bookmarks.bookmarked,
.product-hover-action li a.btn-bookmarks.bookmarked i,
a.btn-bookmarks.bookmarked,
a.btn-bookmarks.bookmarked i {
    color: #e63946;
}
/* Auch im Hover-Zustand (Theme setzt hier sonst weiß) rot lassen */
.product-hover-action li:hover a.btn-bookmarks.bookmarked,
.product-hover-action li:hover a.btn-bookmarks.bookmarked i {
    color: #e63946;
}
/* Das Markup nutzt .flaticon-heart-1 - eine reine Outline-Glyphe. Nur eingefaerbt
   ist der Zustand "gemerkt" kaum zu erkennen, deshalb rendern wir das Merken-Herz
   komplett aus Font Awesome 6 Free (ist ohnehin via font-icons.css geladen):
   gleiche Glyphe fa-heart (\f004) in beiden Zustaenden, nur das Gewicht wechselt -
   400 = Outline, 900 = ausgefuellt. So aendert sich nur die Fuellung, nicht die Form.
   Die flaticon-Alternative \f125 (.flaticon-heart) ist KEIN gefuelltes Herz, sondern
   ein Herz mit Hantel - nicht verwenden.
   !important ist noetig, weil font-icons.css mit
   "i[class^='flaticon-']:before { font-family: flaticon !important; font-weight:
   normal !important; }" beide Eigenschaften erzwingt; ohne !important wuerde \f004
   in der flaticon-Schrift gesucht und bliebe leer. */
a.btn-bookmarks i:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    content: "\f004";
}
a.btn-bookmarks.bookmarked i:before {
    font-weight: 900 !important;
}

/* --- Startseite: Merkzettel (Herz) sauber rechts neben der Navigation ausrichten --- */
/* Ohne diese Regel "haengt" das Icon frei, da die Options-Spalte auf der
   Startseite nur den Merkzettel enthaelt. */
.ltn__header-home .ltn__header-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* --- Startseite: Logo weiss, solange der Header noch nicht "sticky" ist --- */
/* Sobald .ltn__header-sticky die Klasse .sticky-active erhaelt (beim Scrollen),
   wird der Filter entfernt und das Logo erscheint wieder in Originalfarbe (rot). */
.ltn__header-home .ltn__header-sticky:not(.sticky-active) .site-logo img {
    filter: brightness(0) invert(1);
}

/* --- Immobilien-Detailseite: schlichter Breadcrumb-Header ohne Objektbild --- */
/* Hintergrund (--section-bg-1) und dunkle Schrift kommen aus dem Theme; wir
   reduzieren nur die sehr grosse Polsterung, da kein Hero-Bild mehr da ist. */
.tx-openimmo .ltn__breadcrumb-area-plain {
    padding-top: 55px;
    padding-bottom: 55px;
}

/* --- Startseite "Unsere Leistungen": alle drei Boxen gleich hoch --- */
/* Die Bootstrap-Spalte wird zum Flex-Container, dadurch streckt sich die Box
   automatisch auf die Hoehe der hoechsten Box der Reihe (margin-bottom bleibt
   erhalten, deshalb kein height: 100%). Nur die Boxen-Reihe (.ltn__feature-row-equal),
   nicht die Ueberschriften-Reihe - sonst schrumpft dort die zentrierte
   .section-title-area auf Inhaltsbreite und wirkt linksbuendig. */
.ltn__feature-area .ltn__feature-row-equal > [class*="col-"] {
    display: flex;
}
.ltn__feature-area .ltn__feature-item-6 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ltn__feature-area .ltn__feature-item-6 .ltn__feature-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Button bei unterschiedlich langen Texten immer buendig am unteren Rand */
.ltn__feature-area .ltn__feature-item-6 .ltn__feature-info .ltn__service-btn {
    margin-top: auto;
    padding-top: 25px;
}

/* --- Startseite: Slides der Immobilien-Teaser (Kauf/Miete) und der News --- */
/* Slick setzt auf .slick-slide eine feste Hoehe; mit einem Flex-Track werden
   alle Slides einer Reihe gleich hoch (unabhaengig von der Textlaenge). */
.ltn__product-slider-item-three-active .slick-track,
.ltn__blog-slider-one-active .slick-track {
    display: flex;
    align-items: stretch;
}
.ltn__product-slider-item-three-active .slick-slide,
.ltn__blog-slider-one-active .slick-slide {
    height: auto;
}
/* Wrapper, die Slick selbst erzeugt (.slick-slide > div), mitstrecken */
.ltn__product-slider-item-three-active .slick-slide > div,
.ltn__blog-slider-one-active .slick-slide > div {
    display: flex;
    height: 100%;
}
.ltn__product-slider-item-three-active .slick-slide > div > [class*="col-"],
.ltn__blog-slider-one-active .slick-slide > div > [class*="col-"] {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ltn__product-slider-item-three-active .ltn__product-item,
.ltn__blog-slider-one-active .ltn__blog-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.ltn__product-slider-item-three-active .ltn__product-item .product-info,
.ltn__blog-slider-one-active .ltn__blog-item .ltn__blog-brief {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* News: Datum/Weiterlesen-Zeile immer am unteren Rand der Karte */
.ltn__blog-slider-one-active .ltn__blog-item .ltn__blog-meta-btn {
    margin-top: auto;
}

/* --- Startseite: Teaser-Karten kompakter --- */
/* Slick macht ALLE Slides des Tracks so hoch wie den hoechsten - ein einzelnes
   Objekt mit langem Titel oder langer Beschreibung blaeht damit die ganze Reihe
   auf. Titel und Beschreibung deshalb auf feste Zeilenzahl begrenzen, dann sind
   die Karten von sich aus gleich hoch und es bleibt kaum Leerraum. */
.ltn__product-slider-item-three-active .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ltn__product-slider-item-three-active .product-description p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
/* Theme-Polsterung der Karte etwas reduzieren */
.ltn__product-slider-item-three-active .ltn__product-item-4 .product-info {
    padding: 20px 25px 15px;
}
.ltn__product-slider-item-three-active .product-description {
    margin-bottom: 15px;
}
/* Icon-Leiste (Schnellansicht/Merken/Details): Das Theme legt .product-hover-action
   als Overlay ueber dem Bild an, das erst beim Hover erscheint:
     .product-hover-action              { position: absolute; top: 60%; opacity: 0; }
     .ltn__product-item:hover .product-hover-action { top: 50%; opacity: 1; }
   Die Karten-Variante .ltn__product-item-4 stellt auf position: relative + opacity: 1
   um (Leiste steht fest im Fluss), setzt top aber NICHT zurueck. Bei position: relative
   verschiebt top das Element rein optisch nach unten, waehrend sein Platz im Fluss
   reserviert bleibt -> die Icons rutschen aus der Karte und hinterlassen eine Luecke.

   top muss in BEIDEN Zustaenden neutralisiert werden: ohne die :hover-Variante gewinnt
   die Theme-Regel (0,3,0) beim Ueberfahren der Karte gegen eine reine
   Basis-Regel (0,2,0) - die Icons sprangen dann genau in dem Moment weg, in dem man
   sie anklicken will. Deshalb hier .ltn__product-item.ltn__product-item-4:hover (0,4,0). */
.ltn__product-item-4 .product-hover-action,
.ltn__product-item.ltn__product-item-4:hover .product-hover-action {
    top: auto;
}
/* .ltn__product-item bringt aus der Grid-Ansicht margin-bottom: 50px mit. Im
   Slider liegt dieser Rand innerhalb des Slides und macht den Track 50px hoeher
   als die Karte - den Abstand zwischen den Reihen regelt hier Slick selbst. */
.ltn__product-slider-item-three-active .ltn__product-item {
    margin-bottom: 0;
}

/* --- Startseite: "Kauf/Miete"-Badge wieder oben rechts im Objektbild --- */
/* Die Teaser-Slides tragen sowohl .ltn__product-item-4 als auch
   .ltn__product-item-5. Aus dem Theme kommt fuer item-5 ein
   "position: inherit" (Listenansicht, Badge steht dort als Text ueber dem
   Titel). Im Bild-Kontext erbt das Badge dadurch "relative" von .product-img
   und wird durch top/right aus der Box heraus nach links geschoben. */
.ltn__product-slider-area .ltn__product-item-5 .product-img .product-badge {
    position: absolute;
    top: 15px;
    right: 18px;
    left: auto;
    margin-bottom: 0;
    z-index: 2;
}
/* item-5 setzt die Badge-Optik auf "Text" zurueck - hier wieder als Label */
.ltn__product-slider-area .ltn__product-item-5 .product-img .product-badge li {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    padding: 3px 15px 0;
    line-height: 25px;
}

/* --- Info-Karten in Container-Spalten (z.B. /immobilienverwaltung) --- */
/* Wird ueber die Container-Einstellung "Klassen Row" = "row simmo-info-cards"
   aktiviert. Macht aus den Textbloecken abgesetzte Karten und stellt sicher,
   dass die Karten einer Reihe gleich hoch sind. */
.simmo-info-cards > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.simmo-info-cards .frame {
    flex: 1 1 auto;
    background-color: var(--white);
    border: 1px solid var(--border-color-8, #e5e7eb);
    box-shadow: var(--ltn__box-shadow-4);
    padding: 30px 30px 25px;
    margin-bottom: 30px;
}
.simmo-info-cards .frame h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
}
.simmo-info-cards .frame ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.simmo-info-cards .frame ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    font-size: 15px;
}
/* Haken-Icon statt Aufzaehlungspunkt (Font Awesome ist im Theme vorhanden) */
.simmo-info-cards .frame ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
    color: var(--ltn__secondary-color);
}
.simmo-info-cards .frame ul li:last-child {
    margin-bottom: 0;
}

/* --- Immobilien-Detailseite: Karte laeuft nicht mehr in den Footer --- */
/* Das Theme setzt .property-details-google-map fix auf 360px (gedacht fuer eine
   nackte Karte). openimmo liefert darin aber Ueberschrift + Karte (#openimmo-
   google-map-points-of-interest = 500px) + POI-Buttons, die dadurch unten
   herauslaufen. Hoehe vom Inhalt bestimmen lassen, Karte etwas flacher. */
.property-details-google-map {
    height: auto;
    overflow: hidden;
}
.property-details-google-map #openimmo-google-map-points-of-interest {
    height: 420px;
}

/* --- Immobilien-Detailseite: Bildergalerie-Slider in der linken Spalte --- */
.immo-detail-gallery {
    border-radius: 8px;
    overflow: hidden;
}
.immo-detail-gallery .carousel-item img {
    object-fit: cover;
}
.immo-detail-gallery .carousel-control-prev,
.immo-detail-gallery .carousel-control-next {
    width: 12%;
    opacity: 0;
    transition: opacity .3s ease;
}
.immo-detail-gallery:hover .carousel-control-prev,
.immo-detail-gallery:hover .carousel-control-next {
    opacity: 1;
}
.immo-detail-gallery .carousel-control-prev-icon,
.immo-detail-gallery .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    background-size: 45% 45%;
}

/* --- Immobilien-Grid: gleiche Kartenhoehe je Reihe --- */
/* Die Bootstrap-Spalte streckt sich bereits auf die Hoehe der hoechsten Karte der Reihe
   (row = flex, align-items: stretch), die Karte selbst fuellt die Spalte aber nicht aus.
   Darum Spalte + Karte als Flex-Container, damit die Karte die volle Hoehe einnimmt. */
.ltn__product-grid-view .row > [class*="col-"] {
    display: flex;
}
.ltn__product-grid-view .row > [class*="col-"] > .ltn__product-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* Info-Block waechst mit, damit der Preisblock bei allen Karten unten buendig sitzt
   und nicht direkt unter unterschiedlich langen Titeln/Eckdaten klebt. */
.ltn__product-grid-view .row > [class*="col-"] > .ltn__product-item > .product-info {
    flex: 1 1 auto;
}