/* ============================================================
   LONGEVITY RESORTS — Merkliste (AP-B)
   ------------------------------------------------------------
   1. Merkstatus im Site-Header und im Fullscreen-Overlay
   2. Merk-Knopf (<atomic-favorite-bt>) im Longevity-Duktus
   3. Merklisten-Seite (ContentBlock atomicplan/favorites)

   HARTE REGELN, die diese Datei einhält:
   * KEINE Sektions-Breite, kein Sektions-Padding, kein Sektions-Hintergrund.
     Breite/Fläche/Abstand kommen vom generischen Frame (`frame_layout`,
     `background_color_class`, `space_before/after_class`).
   * KEINE Werte, für die es einen plate_bootstrap-Settings-Slot gibt. Wo eine
     Überschrift anders aussehen soll, wird die CSS-VARIABLE des Slots gesetzt
     (`--bs-h3-font-size`, `--bs-heading-color`, `--bs-headings-font-weight`),
     nicht die Eigenschaft — `atomic-bootstrap/Dist/base.css` lädt danach.
   * KEIN `display:none` / `pointer-events:none` auf Navigations-Elementen.
     Der Merkstatus ist ein zusätzliches Element in `.lr-actions`, er verdeckt
     nichts und verschiebt keine Stapelebene.
   * Doppelklassen-Selektoren (`.plces-favorites .x`), weil das Block-CSS und
     die Bootstrap-Buttons in einem späteren Bucket laden — kein `!important`.
   ============================================================ */


/* ============================================================
   1. Merkstatus im Header
   ============================================================ */

/* Pre-Upgrade-Platzhalter: vor `customElements.define()` hat der Zähler keine
   Geometrie. Er bleibt bis dahin unsichtbar, damit im Header nichts springt
   (CLS) — nach dem Define entscheidet `[data-empty]`. */
atomic-favorites-count:not(:defined) { display: none; }

.lr-fav-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  transition: opacity 0.35s var(--lr-ease-soft);
}
.lr-fav-status:hover { opacity: 0.72; }

.lr-fav-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.lr-fav-status__icon svg { display: block; }

/* Im kompakten Header trägt das Herz die Aussage; das Wort bleibt für
   Screenreader erhalten (kein `display:none` — das nähme es auch ihnen). */
.lr-fav-status__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lr-fav-status__count {
  --a-favorites-count-font-family: var(--lr-font-body);
  --a-favorites-count-font-size: 0.62rem;
  --a-favorites-count-font-weight: 600;
  --a-favorites-count-letter-spacing: 0.04em;
  --a-favorites-count-min-width: 1.55em;
  --a-favorites-count-height: 1.55em;
  --a-favorites-count-padding: 0 0.35em;
  --a-favorites-count-color: var(--lr-soft-black);
  --a-favorites-count-bg: var(--lr-bronze);
  --a-favorites-count-radius: 999px;
}
/* Leere Merkliste: nur das Herz. Der Zähler verschwindet, das Element bleibt
   im DOM (die Komponente setzt `data-empty` — die Entscheidung liegt hier). */
.lr-fav-status__count[data-empty] { display: none; }

/* Der Merkstatus ist ein ZUSAETZLICHES Element in `.lr-actions`. Dadurch wird
   die rechte Kopfspalte zwischen 1081px (ab hier steht die Inline-Navigation)
   und ~1400px zu schmal: der Anfragen-Knopf brach dreizeilig um (gemessen bei
   1280px: 71px hoch statt 38px, Breite 82px statt 113px). Deshalb in genau
   diesem Fenster enger setzen — es wird NICHTS ausgeblendet und keine
   Klickflaeche veraendert. Ab 1440px greift die Regel nicht mehr (dort schon
   vorher gemessen: 38px, unveraendert). */
.lr-site-header .lr-actions .lr-enquire { white-space: nowrap; }

@media (min-width: 1081px) and (max-width: 1400px) {
  .lr-site-header .lr-actions { gap: 0.8rem; }
  .lr-site-header .lr-actions .lr-lang { margin-right: 0.5rem; padding-right: 0.5rem; }
  .lr-site-header .lr-actions .lr-enquire { padding-inline: 1.15em; }
}

/* Fullscreen-Overlay: Sprachumschalter + Merkstatus in EINER Gitterzelle
   (siehe Kommentar im Partial) — sonst verschiebt sich .lr-overlay-aside. */
.lr-overlay-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Fullscreen-Overlay: gleiche Marke, aber mit ausgeschriebenem Wort. */
.lr-fav-status--overlay {
  align-self: start;
  width: fit-content;
  margin-top: 1.4rem;
  gap: 0.7rem;
  color: var(--lr-on-dark-soft);
  font-family: var(--lr-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lr-fav-status--overlay:hover { color: var(--lr-on-dark); opacity: 1; }
.lr-fav-status--overlay .lr-fav-status__label {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
}
.lr-fav-status--overlay .lr-fav-status__count {
  --a-favorites-count-color: var(--lr-soft-black);
  --a-favorites-count-bg: var(--lr-stone);
}


/* ============================================================
   2. Merk-Knopf <atomic-favorite-bt>
   ------------------------------------------------------------
   Wird von den Karten/Detailseiten gesetzt (AP-D). Hier stehen nur die
   Marken-Werte der Komponenten-Variablen, damit das Herz überall gleich
   aussieht — die POSITION bleibt Sache des jeweiligen Bausteins.
   ============================================================ */

atomic-favorite-bt {
  --a-favorite-bt-ico-fill: var(--lr-ivory);
  --a-favorite-bt-ico-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
  --a-favorite-bt-ico-size: 22px;
  --a-favorite-bt-focus-outline: 2px solid var(--lr-bronze);
  --a-favorite-bt-focus-offset: 3px;
}
/* Auf hellem Grund (Listen ohne Bild, Detail-CTA-Reihe). */
atomic-favorite-bt.on-light {
  --a-favorite-bt-ico-fill: var(--lr-bronze-ink);
  --a-favorite-bt-ico-filter: none;
}


/* ============================================================
   3. Merklisten-Seite — ContentBlock atomicplan/favorites
   ------------------------------------------------------------
   Struktur (Raster, Kartenaufbau) kommt aus dem Block-CSS; hier steht
   ausschließlich Optik.
   ============================================================ */

.plces-favorites {
  --plces-favorites-gap: clamp(1.6rem, 1.2rem + 1.2vw, 2.6rem);
  --plces-favorites-group-gap: clamp(2.6rem, 2rem + 2vw, 4.2rem);
  --plces-favorites-media-col: clamp(9rem, 22vw, 16rem);
  --plces-favorites-card-min: 16rem;
  --plces-favorites-media-ratio: 4 / 3;
  --a-favorites-closebt-fsize: 1.4rem;
  --a-favorites-closebt-right: 0.6rem;
  --a-favorites-closebt-top: 0.4rem;
  --a-favorites-closebt-padding: 0 0.35rem;
}

/* ---------- Gruppen-Überschrift ---------- */
.plces-favorites .plces-favorites__group-title {
  /* VARIABLE des Slots, nicht die Eigenschaft (Skill css § 2d) — gemessen:
     font-size 12.48px, font-weight 500, color #7c5c58 kommen so an, weil
     atomic-bootstrap/base.css sie aus den Variablen liest.
     AUSNAHME font-family: base.css setzt sie fuer Ueberschriften NICHT, und
     theme.css schreibt sie als EIGENSCHAFT auf den Elementselektor
     (`h1,…,h6 { font-family: var(--lr-font-display) }`). Es gibt hier also
     keinen Konsumenten fuer --bs-h3-font-family; die Schrift muss als
     Eigenschaft gesetzt werden (Doppelklasse schlaegt den Elementselektor,
     kein !important). */
  --bs-h3-font-size: var(--lr-fs-eyebrow);
  --bs-headings-font-weight: 500;
  font-family: var(--lr-font-body);
  --bs-heading-line-height: 1.2;
  --bs-heading-color: var(--lr-bronze-ink);
  --bs-h3-color: var(--lr-bronze-ink);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--lr-line);
}
.plces-favorites .plces-favorites__group-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--lr-ink-faint);
}
.plces-favorites .plces-favorites__group-count::before { content: "("; }
.plces-favorites .plces-favorites__group-count::after { content: ")"; }

/* ---------- Eintrag ---------- */
.plces-favorites .instance-wrapper {
  background: var(--lr-ivory-deep);
  border: 1px solid var(--lr-line);
  transition: border-color 0.45s var(--lr-ease-soft), transform 0.45s var(--lr-ease-out);
}
.plces-favorites .instance-wrapper:hover { border-color: var(--lr-bronze); }

.plces-favorites .plces-fav-card {
  --plces-favorites-card-gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
  padding: 0;
}
.plces-favorites--list .plces-fav-card { align-items: stretch; }
.plces-favorites .plces-fav-card__body {
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.8rem) clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  padding-right: 3rem; /* Platz für den Entfernen-Knopf */
  align-self: center;
}
.plces-favorites--grid .plces-fav-card__media { order: -1; }

.plces-favorites .plces-fav-card__media img {
  transition: transform 0.9s var(--lr-ease-out);
}
.plces-favorites .instance-wrapper:hover .plces-fav-card__media img { transform: scale(1.04); }

.plces-favorites .plces-fav-card__eyebrow {
  font-family: var(--lr-font-body);
  font-size: var(--lr-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lr-bronze-ink);
}

.plces-favorites .plces-fav-card__title {
  --bs-h3-font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --bs-headings-font-weight: 400;
  --bs-heading-line-height: 1.2;
  --bs-heading-color: var(--lr-charcoal);
  --bs-h3-color: var(--lr-charcoal);
  margin-top: 0.5rem;
}
.plces-favorites .plces-fav-card__link {
  color: inherit;
  text-decoration: none;
}
.plces-favorites .plces-fav-card__link:hover { color: var(--lr-bronze-ink); }

.plces-favorites .plces-fav-card__meta,
.plces-favorites .plces-fav-card__price {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--lr-ink-soft);
}
.plces-favorites .plces-fav-card__price { color: var(--lr-bronze-ink); font-weight: 500; }
.plces-favorites .plces-fav-card__desc {
  max-width: 52ch; /* reine Text-Zeilenlänge, KEINE Sektions-Breite */
  font-size: 0.92rem;
  color: var(--lr-ink-soft);
}

/* ---------- Entfernen-Knopf (aus der Komponente) ---------- */
.plces-favorites .closeBt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  color: var(--lr-ink-faint);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.3s var(--lr-ease-soft), border-color 0.3s var(--lr-ease-soft);
}
.plces-favorites .closeBt:hover,
.plces-favorites .closeBt:focus-visible {
  color: var(--lr-bronze-ink);
  border-color: var(--lr-bronze);
}

/* ---------- Leerzustand ---------- */
.plces-favorites .plces-favorites__empty {
  max-width: 56ch; /* Zeilenlänge, keine Container-Breite */
}
.plces-favorites .plces-favorites__empty p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--lr-ink-soft);
}
.plces-favorites .plces-favorites__empty-links {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
}
.plces-favorites .plces-favorites__empty-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--lr-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lr-bronze-deep);
  padding-bottom: 0.35em;
  position: relative;
}
.plces-favorites .plces-favorites__empty-link::before { content: "\2192"; }
.plces-favorites .plces-favorites__empty-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--lr-ease-out);
}
.plces-favorites .plces-favorites__empty-link:hover::after { transform: scaleX(1); }

/* ---------- Aktions-Zeile ---------- */
.plces-favorites .plces-favorites__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3.2rem);
  padding-top: clamp(1.4rem, 1rem + 1vw, 2.2rem);
  border-top: 1px solid var(--lr-line);
}
/* Doppelklasse, damit die Bootstrap-Button-Regeln (späterer Bucket) nicht
   gewinnen — kein !important. */
.plces-favorites .plces-favorites__cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05em 2.1em;
  font-family: var(--lr-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lr-ivory);
  background: var(--lr-charcoal);
  border: 1px solid var(--lr-charcoal);
  border-radius: 0;
  overflow: hidden;
  transition: color 0.5s var(--lr-ease-soft);
  z-index: 0;
}
.plces-favorites .plces-favorites__cta-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lr-bronze);
  transform: translateY(101%);
  transition: transform 0.55s var(--lr-ease-out);
  z-index: -1;
}
.plces-favorites .plces-favorites__cta-link:hover { color: var(--lr-soft-black); }
.plces-favorites .plces-favorites__cta-link:hover::after { transform: translateY(0); }

.plces-favorites .plces-favorites__cta-count {
  font-family: var(--lr-font-body);
  font-size: var(--lr-fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lr-ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .plces-favorites .plces-fav-card__media img,
  .plces-favorites .plces-favorites__cta-link,
  .plces-favorites .plces-favorites__cta-link::after,
  .lr-fav-status { transition: none; }
  .plces-favorites .instance-wrapper:hover .plces-fav-card__media img { transform: none; }
}