Update: Pinning in data visualization

Pinning in data visualization already works since !341+. This issue is about tweaking the behavior and looks.

What is to be done?

Functional:

• Only one card should be pinned at a time. When a another card is pinnend, unpin the previous card.
• When a cards is pinned Replace 'Zum direkten Vergleichen Karte anpinnen' with 'scroll up and down' message above the first not pinned card.
• When a card gets pinned scroll 'scroll up and down' message into view right below the currently pinned card.

Visual:

• A pinned card should have a 1px colored border (colorCategory 'analyze')
• The pinned card should have a surrounding background (currently .sticky-top) that matches the header background (i.e. white), while all the other cards (in currently .content) have the green ('analyze') gradient as surrounding background.
• The area with the pinned card (white background) should drop a shadow onto the other cards across the whole width of the screen. (not in the layouts below).
• When the pin button of an already pinned card is hovered change its color from the --main color to the --supp color.

Where to start?

• ReportStackedViewComponent: /lib/features/src/report-stacked-view/view/report-stacked-view.component.ts

Figma: https://www.figma.com/file/8PWKCoBl4vl4TrI32UV5op/RC-Design-PRODUCTION?node-id=3765%3A51569&t=JPegvvF8LwM0fOg8-1

Clickup: https://app.clickup.com/t/861m5c2d1