/**
 * Favoriten – Stern an Beitragskarten + Hub
 */

.favorite-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  --favorite-pin-size: 2rem;
  --favorite-pin-edge: 10px;
  --favorite-pin-gap: 8px;
  --favorite-pin-reserve: calc(var(--favorite-pin-size) + var(--favorite-pin-edge) + var(--favorite-pin-gap));
}

.favorite-card-wrap > .article-card,
.favorite-card-wrap > .hero-spotlight-card,
.favorite-card-wrap > .news-item-shell,
.favorite-card-wrap > .links-item-link {
  width: 100%;
}

.favorite-card-wrap > .article-card,
.favorite-card-wrap > .hero-spotlight-card,
.favorite-card-wrap > .news-item-shell,
.favorite-card-wrap > .links-item-link {
  height: 100%;
}

/* Kompakter Stern für Link-Kästchen */
.favorite-card-wrap:has(.links-item-link) {
  --favorite-pin-size: clamp(1.35rem, 22%, 1.6rem);
  --favorite-pin-edge: 8px;
  --favorite-pin-gap: 5px;
}

.favorite-card-wrap:has(.links-item-link) .favorite-pin {
  width: var(--favorite-pin-size);
  height: var(--favorite-pin-size);
}

.favorite-card-wrap:has(.links-item-link) .favorite-pin-icon {
  width: clamp(0.7rem, 55%, 0.85rem);
  height: clamp(0.7rem, 55%, 0.85rem);
}

/* Platz für Stern – kein Überlappen mit „Artikel lesen“ / Aktions-Link */
.favorite-card-wrap:has(.favorite-pin) .article-card-link,
.favorite-card-wrap:has(.favorite-pin) .hero-spotlight-info,
.favorite-card-wrap:has(.favorite-pin) .news-item-shell,
.favorite-card-wrap:has(.favorite-pin) .links-item-link {
  padding-right: var(--favorite-pin-reserve);
}

.favorite-pin {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 60;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(37, 49, 65, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  box-shadow:
    0 2px 8px rgba(37, 49, 65, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.favorite-pin-icon {
  width: 1rem;
  height: 1rem;
}

.favorite-star-filled {
  display: none;
}

.favorite-pin.is-active .favorite-star-outline {
  display: none;
}

.favorite-pin.is-active .favorite-star-filled {
  display: block;
}

.favorite-pin:hover,
.favorite-pin:focus-visible {
  color: var(--accent-strong);
  border-color: rgba(37, 99, 235, 0.35);
  background: #fff;
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.favorite-pin.is-active {
  color: var(--accent-strong);
  border-color: rgba(37, 99, 235, 0.42);
  background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
}

.news-item-card > .favorite-card-wrap,
.news-item-card > .news-item-shell {
  width: 100%;
}

.news-item-shell {
  position: relative;
}

.favorites-hub-header {
  margin-bottom: clamp(20px, 3vw, 28px);
}

.favorites-hub-note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}

.favorites-hub--preview {
  outline: 2px dashed rgba(37, 99, 235, 0.38);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}

/*
 * Produkt-Chrome:
 * 1) Newsleiste behält ihre schwarze Unterkante (style.css)
 * 2) darunter kleiner Abstand
 * 3) Favoriten-Vorschau als geschlossene Strichel-Box (wie zuvor)
 */
.site-frame:has(.product-mode-bar):has(.favorites-hub--preview) > .page-shell {
  padding-top: 14px;
}

.site-frame:has(.product-mode-bar):has(.favorites-hub--preview) .favorites-hub--preview {
  outline: 2px dashed rgba(37, 99, 235, 0.38);
  outline-offset: 6px;
  border: 0;
  border-radius: var(--radius-lg);
  margin-top: 4px;
  box-sizing: border-box;
}

.favorites-preview-badge {
  display: inline-flex;
  margin-bottom: 0.75rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.favorites-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

.hero-spotlight-row > .favorite-card-wrap {
  min-width: 0;
  height: 100%;
  display: flex;
}

.hero-spotlight-row > .favorite-card-wrap > .hero-spotlight-card {
  flex: 1 1 auto;
  width: 100%;
}

.favorites-all {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.favorites-all .favorite-card-wrap {
  height: 100%;
}

.favorites-all .favorite-card-wrap:has(.links-item-link) {
  height: auto;
}

.favorites-all .links-item-link {
  height: 100%;
}

.favorites-all .article-card {
  height: 100%;
}

@media (max-width: 600px) {
  .favorite-card-wrap {
    --favorite-pin-size: 1.85rem;
    --favorite-pin-edge: 8px;
  }

  .favorite-pin {
    width: 1.85rem;
    height: 1.85rem;
    right: 8px;
    bottom: 8px;
  }

  .site-frame:has(.product-mode-bar):has(.favorites-hub--preview) > .page-shell {
    padding-top: 12px;
  }

  .site-frame:has(.product-mode-bar):has(.favorites-hub--preview) .favorites-hub--preview {
    outline-offset: 4px;
    margin-top: 2px;
    padding-inline: 2px;
  }

  .favorites-hub-header h1 {
    font-size: clamp(1.55rem, 7vw, 1.85rem);
  }

  .favorites-empty {
    padding: 1rem 0.85rem;
    font-size: 0.92rem;
  }
}