/* Teilen-Karten (03.10.2026, Team D): Format-Umschalter Story 9:16 / Post 4:5 im Blatt (js/story.js),
   Teilen-Knöpfe in den re:union Charts, auf der Track-Seite und in re:wind. Wird über css/rs/*.css geladen. */
.rs-story__format { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
.rs-story__format > button { text-align: center; padding: 10px 12px; }
.rs-story__vorschau canvas[hidden] { display: none; }
.rs-story.is-post .rs-story__vorschau { aspect-ratio: 4 / 5; width: 288px; }
@media (max-width: 720px) { .rs-story.is-post .rs-story__vorschau { width: min(288px, 66vw); } }

/* Knopf mit Teilen-Symbol (Größe wie ▶ der Charts) */
.rs-teilen {
  position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-1);
  background: none; color: var(--ru-paper); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rs-teilen svg { display: block; width: 17px; height: 17px; }
.rs-teilen:hover, .rs-teilen:focus-visible { border-color: var(--ru-magenta); color: var(--ru-magenta); }
.rs-teilen--gross { position: absolute; right: 8px; bottom: 8px; background: rgba(13,10,31,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(245,239,230,.35); }
.rs-teilen-text { display: inline-flex; align-items: center; gap: 8px; }
.rs-teilen-text svg { display: block; width: 16px; height: 16px; flex: none; }
.rw-li__teilen { border-color: transparent; opacity: .75; }
.rw-li__teilen:hover, .rw-li__teilen:focus-visible { opacity: 1; }

/* Sprungziel aus geteilten Links (charts.php#rc-7) */
.rc [id^="rc-"] { scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.rc-li:target { background: linear-gradient(90deg, transparent, rgba(255,43,214,.10) 15%, rgba(255,43,214,.10) 85%, transparent); }

/* Handy: Platz für den Titel in der Rangliste */
@media (max-width: 560px) {
  .rc-li { gap: 10px; }
  .rc-li .rs-teilen { width: 30px; border-color: transparent; }
}
@media (max-width: 380px) {
  .rs-teilen { width: 32px; height: 32px; }
  .rs-teilen--gross { width: 36px; height: 36px; }
}