/* Merkliste (content/favorites.js): Herz-Button auf Karten und Detailseite, Favoriten-Filter */

.fav-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #222a26;
    box-shadow: 0 1px 3px rgba(34,42,38,.12), 0 4px 12px rgba(34,42,38,.12);
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.fav-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
}
.fav-btn path {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linejoin: round;
    transition: fill .2s ease, stroke .2s ease;
}
.fav-btn[aria-pressed="true"] path { fill: #93a69a; stroke: #93a69a; }
.fav-btn:focus { outline: none; }
.fav-btn:focus-visible { outline: 3px solid var(--sage-dark, #7a9085); outline-offset: 2px; }
@media (hover: hover) {
    .fav-btn[aria-pressed="false"]:hover path { stroke: #93a69a; }
}

/* "Pop" beim Merken: kurz eindruecken, federnd zurueck (Feder w=24, z=.5 – wie die Motion-Vorschau) */
.fav-btn.fav-pop svg { animation: fav-pop .46s linear; }
@keyframes fav-pop {
    0%   { transform: scale(1); }
    8%   { transform: scale(.899); }
    15%  { transform: scale(.86); }
    21%  { transform: scale(.884); }
    27%  { transform: scale(.933); }
    33%  { transform: scale(.979); }
    39%  { transform: scale(1.009); }
    45%  { transform: scale(1.022); }
    52%  { transform: scale(1.021); }
    58%  { transform: scale(1.014); }
    64%  { transform: scale(1.006); }
    76%  { transform: scale(.997); }
    88%  { transform: scale(.997); }
    100% { transform: scale(1); }
}

/* Karte: Herz oben rechts auf dem Bild, der Verfuegbarkeits-Badge wandert dafuer nach links */
.prop-img-wrap > .fav-btn { top: 7px; right: .75rem; }
.prop-img-wrap > .fav-btn ~ .avail-badge { right: auto; left: .75rem; }

/* Aehnliche Wohnungen (Detailseite): gleiche Position wie auf den Karten */
.sim-img-wrap > .fav-btn { top: 7px; right: .75rem; }
.sim-img-wrap > .fav-btn ~ .sim-avail-badge { right: auto; left: .75rem; }

/* Detailseite: Herz rechts neben Titel/Untertitel im Kopfbereich */
.apt-hero-inner.has-fav { position: relative; padding-right: 3.75rem; }
.fav-btn.fav-hero { top: 50%; right: 0; width: 44px; height: 44px; margin-top: -22px; transition: width .25s, height .25s, margin-top .25s; }
.fav-btn.fav-hero svg { width: 22px; height: 22px; transition: width .25s, height .25s; }
/* EN-Detailseite: schmale, klebende Titelleiste beim Scrollen (#apt-hero.compact) */
#apt-hero.compact .fav-btn.fav-hero { width: 30px; height: 30px; margin-top: -15px; }
#apt-hero.compact .fav-btn.fav-hero svg { width: 17px; height: 17px; }

/* Filterleiste: Umschalter "Favoriten (n)" */
.fav-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem 1.3rem;
    border: 2px solid var(--sage, #93a69a);
    border-radius: 9999rem;
    background: #fff;
    color: var(--sage-dark, #7a9085);
    font-family: var(--font-body);
    font-size: .82rem;
    line-height: 1.13;           /* gleiche Hoehe wie die Filter-Selects */
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.fav-filter[hidden] { display: none; }
.fav-filter svg { width: 15px; height: 15px; flex: none; }
.fav-filter path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fav-filter:hover { background: #f5f7f6; }
.fav-filter:focus { outline: none; border-color: var(--sage-dark, #7a9085); }
.fav-filter[aria-pressed="true"] { background: var(--sage-dark, #7a9085); border-color: var(--sage-dark, #7a9085); color: #fff; }
.fav-filter[aria-pressed="true"] path { fill: currentColor; }
@media (max-width: 640px) {
    .fav-filter { flex: 1 1 100%; }
}

/* Leerzustand im Favoriten-Filter */
.fav-empty svg { display: block; width: 34px; height: 34px; margin: 0 auto 1rem; }
.fav-empty path { fill: none; stroke: var(--sage, #93a69a); stroke-width: 1.5; stroke-linejoin: round; }
.fav-empty p { color: #888; }

@media (prefers-reduced-motion: reduce) {
    .fav-btn.fav-pop svg { animation: none; }
}

/* Karten-Popup (Google Maps InfoWindow): Herz oben links auf dem Bild, Badge bleibt rechts */
.fav-btn.fav-map { top: .6rem; left: .6rem; width: 32px; height: 32px; }
.fav-btn.fav-map svg { width: 18px; height: 18px; }